From c41bb25b4e5432d04fddb714b571122a3bbf5783 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Mon, 23 Aug 2021 16:28:36 +0200
Subject: [PATCH] refactor: update to @coreui/react@v4.0.0-rc.0

---
 package.json                                  |  10 +-
 src/views/components/widgets/Widgets.js       | 922 ++++++++++--------
 src/views/components/widgets/WidgetsBrand.js  | 218 ++---
 .../components/widgets/WidgetsDropdown.js     |  42 +-
 yarn.lock                                     |  41 +-
 5 files changed, 674 insertions(+), 559 deletions(-)

diff --git a/package.json b/package.json
index be50c48..e5efdf6 100644
--- a/package.json
+++ b/package.json
@@ -30,13 +30,13 @@
     "@coreui/coreui": "4.0.1",
     "@coreui/icons": "^2.0.1",
     "@coreui/icons-react": "^2.0.0-rc.5",
-    "@coreui/react": "4.0.0-beta.4",
+    "@coreui/react": "4.0.0-rc.0",
     "@coreui/react-chartjs": "2.0.0-rc.0",
     "@coreui/utils": "^1.3.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "chart.js": "^3.5.0",
+    "chart.js": "^3.5.1",
     "classnames": "^2.3.1",
-    "core-js": "^3.16.1",
+    "core-js": "^3.16.2",
     "enzyme": "^3.11.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
@@ -51,10 +51,10 @@
     "auto-changelog": "~2.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^3.4.1",
     "prettier": "2.3.2",
     "react-scripts": "^4.0.3",
-    "sass": "^1.37.5"
+    "sass": "^1.38.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/views/components/widgets/Widgets.js b/src/views/components/widgets/Widgets.js
index a8160b4..4d3d00c 100644
--- a/src/views/components/widgets/Widgets.js
+++ b/src/views/components/widgets/Widgets.js
@@ -4,10 +4,10 @@ import {
   CCol,
   CLink,
   CRow,
-  CWidgetIcon,
-  CWidgetProgress,
-  CWidgetProgressIcon,
-  CWidgetSimple,
+  CWidgetStatsB,
+  CWidgetStatsC,
+  CWidgetStatsE,
+  CWidgetStatsF,
 } from '@coreui/react'
 import { getStyle } from '@coreui/utils'
 import CIcon from '@coreui/icons-react'
@@ -38,471 +38,588 @@ const Widgets = () => {
       <WidgetsDropdown />
       <CRow>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetProgress
+          <CWidgetStatsB
             className="mb-4"
-            value="89.9%"
-            title="Widget title"
-            progressColor="success"
-            progressValue={89.9}
+            progress={{ color: 'success', value: 89.9 }}
             text="Lorem ipsum dolor sit amet enim."
+            title="Widget title"
+            value="89.9%"
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetProgress
+          <CWidgetStatsB
             className="mb-4"
             value="12.124"
             title="Widget title"
-            progressColor="info"
-            progressValue={89.9}
+            progress={{ color: 'info', value: 89.9 }}
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetProgress
+          <CWidgetStatsB
             className="mb-4"
             value="$98.111,00"
             title="Widget title"
-            progressColor="warning"
-            progressValue={89.9}
+            progress={{ color: 'warning', value: 89.9 }}
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetProgress
+          <CWidgetStatsB
             className="mb-4"
             value="2 TB"
             title="Widget title"
-            progressValue={89.9}
+            progress={{ color: 'primary', value: 89.9 }}
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetProgress
+          <CWidgetStatsB
             className="mb-4"
             color="success"
-            textColor="white"
+            inverse
             value="89.9%"
             title="Widget title"
-            progressWhite
-            progressValue={89.9}
+            progress={{ value: 89.9 }}
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetProgress
+          <CWidgetStatsB
             className="mb-4"
             color="info"
+            inverse
             textColor="white"
             value="12.124"
             title="Widget title"
-            progressWhite
-            progressValue={89.9}
+            progress={{ value: 89.9 }}
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetProgress
+          <CWidgetStatsB
             className="mb-4"
             color="warning"
+            inverse
             textColor="white"
             value="$98.111,00"
             title="Widget title"
-            progressWhite
-            progressValue={89.9}
+            progress={{ value: 89.9 }}
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetProgress
+          <CWidgetStatsB
             className="mb-4"
             color="primary"
+            inverse
             textColor="white"
             value="2 TB"
             title="Widget title"
-            progressWhite
-            progressValue={89.9}
+            progress={{ value: 89.9 }}
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
       </CRow>
       <CRow>
         <CCol sm={4} lg={2}>
-          <CWidgetSimple title="title" value="1,123" className="mb-4">
-            <CChartBar
-              className="mx-auto"
-              style={{ height: '40px', width: '80px' }}
-              data={{
-                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-                datasets: [
-                  {
-                    backgroundColor: getStyle('--cui-danger'),
-                    borderColor: 'transparent',
-                    borderWidth: 1,
-                    data: [
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                    ],
+          <CWidgetStatsE
+            chart={
+              <CChartBar
+                className="mx-auto"
+                style={{ height: '40px', width: '80px' }}
+                data={{
+                  labels: [
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                  ],
+                  datasets: [
+                    {
+                      backgroundColor: getStyle('--cui-danger'),
+                      borderColor: 'transparent',
+                      borderWidth: 1,
+                      data: [
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                      ],
+                    },
+                  ],
+                }}
+                options={{
+                  maintainAspectRatio: false,
+                  plugins: {
+                    legend: {
+                      display: false,
+                    },
                   },
-                ],
-              }}
-              options={{
-                maintainAspectRatio: false,
-                plugins: {
-                  legend: {
-                    display: false,
+                  scales: {
+                    x: {
+                      display: false,
+                    },
+                    y: {
+                      display: false,
+                    },
                   },
-                },
-                scales: {
-                  x: {
-                    display: false,
-                  },
-                  y: {
-                    display: false,
-                  },
-                },
-              }}
-            />
-          </CWidgetSimple>
+                }}
+              />
+            }
+            className="mb-4"
+            title="title"
+            value="1,123"
+          />
         </CCol>
         <CCol sm={4} lg={2}>
-          <CWidgetSimple title="title" value="1,123" className="mb-4">
-            <CChartBar
-              className="mx-auto"
-              style={{ height: '40px', width: '80px' }}
-              data={{
-                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-                datasets: [
-                  {
-                    backgroundColor: getStyle('--cui-primary'),
-                    borderColor: 'transparent',
-                    borderWidth: 1,
-                    data: [
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                    ],
+          <CWidgetStatsE
+            chart={
+              <CChartBar
+                className="mx-auto"
+                style={{ height: '40px', width: '80px' }}
+                data={{
+                  labels: [
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                  ],
+                  datasets: [
+                    {
+                      backgroundColor: getStyle('--cui-primary'),
+                      borderColor: 'transparent',
+                      borderWidth: 1,
+                      data: [
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                      ],
+                    },
+                  ],
+                }}
+                options={{
+                  maintainAspectRatio: false,
+                  plugins: {
+                    legend: {
+                      display: false,
+                    },
                   },
-                ],
-              }}
-              options={{
-                maintainAspectRatio: false,
-                plugins: {
-                  legend: {
-                    display: false,
+                  scales: {
+                    x: {
+                      display: false,
+                    },
+                    y: {
+                      display: false,
+                    },
                   },
-                },
-                scales: {
-                  x: {
-                    display: false,
-                  },
-                  y: {
-                    display: false,
-                  },
-                },
-              }}
-            />
-          </CWidgetSimple>
+                }}
+              />
+            }
+            className="mb-4"
+            title="title"
+            value="1,123"
+          />
         </CCol>
         <CCol sm={4} lg={2}>
-          <CWidgetSimple title="title" value="1,123" className="mb-4">
-            <CChartBar
-              className="mx-auto"
-              style={{ height: '40px', width: '80px' }}
-              data={{
-                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-                datasets: [
-                  {
-                    backgroundColor: getStyle('--cui-success'),
-                    borderColor: 'transparent',
-                    borderWidth: 1,
-                    data: [
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                    ],
+          <CWidgetStatsE
+            chart={
+              <CChartBar
+                className="mx-auto"
+                style={{ height: '40px', width: '80px' }}
+                data={{
+                  labels: [
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                  ],
+                  datasets: [
+                    {
+                      backgroundColor: getStyle('--cui-success'),
+                      borderColor: 'transparent',
+                      borderWidth: 1,
+                      data: [
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                      ],
+                    },
+                  ],
+                }}
+                options={{
+                  maintainAspectRatio: false,
+                  plugins: {
+                    legend: {
+                      display: false,
+                    },
                   },
-                ],
-              }}
-              options={{
-                maintainAspectRatio: false,
-                plugins: {
-                  legend: {
-                    display: false,
+                  scales: {
+                    x: {
+                      display: false,
+                    },
+                    y: {
+                      display: false,
+                    },
                   },
-                },
-                scales: {
-                  x: {
-                    display: false,
-                  },
-                  y: {
-                    display: false,
-                  },
-                },
-              }}
-            />
-          </CWidgetSimple>
+                }}
+              />
+            }
+            className="mb-4"
+            title="title"
+            value="1,123"
+          />
         </CCol>
         <CCol sm={4} lg={2}>
-          <CWidgetSimple title="title" value="1,123" className="mb-4">
-            <CChartLine
-              className="mx-auto"
-              style={{ height: '40px', width: '80px' }}
-              data={{
-                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-                datasets: [
-                  {
-                    backgroundColor: 'transparent',
-                    borderColor: getStyle('--cui-danger'),
-                    borderWidth: 2,
-                    data: [
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                    ],
+          <CWidgetStatsE
+            chart={
+              <CChartLine
+                className="mx-auto"
+                style={{ height: '40px', width: '80px' }}
+                data={{
+                  labels: [
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                  ],
+                  datasets: [
+                    {
+                      backgroundColor: 'transparent',
+                      borderColor: getStyle('--cui-danger'),
+                      borderWidth: 2,
+                      data: [
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                      ],
+                    },
+                  ],
+                }}
+                options={{
+                  maintainAspectRatio: false,
+                  elements: {
+                    line: {
+                      tension: 0.4,
+                    },
+                    point: {
+                      radius: 0,
+                    },
                   },
-                ],
-              }}
-              options={{
-                maintainAspectRatio: false,
-                elements: {
-                  line: {
-                    tension: 0.4,
+                  plugins: {
+                    legend: {
+                      display: false,
+                    },
                   },
-                  point: {
-                    radius: 0,
+                  scales: {
+                    x: {
+                      display: false,
+                    },
+                    y: {
+                      display: false,
+                    },
                   },
-                },
-                plugins: {
-                  legend: {
-                    display: false,
-                  },
-                },
-                scales: {
-                  x: {
-                    display: false,
-                  },
-                  y: {
-                    display: false,
-                  },
-                },
-              }}
-            />
-          </CWidgetSimple>
+                }}
+              />
+            }
+            className="mb-4"
+            title="title"
+            value="1,123"
+          />
         </CCol>
         <CCol sm={4} lg={2}>
-          <CWidgetSimple title="title" value="1,123" className="mb-4">
-            <CChartLine
-              className="mx-auto"
-              style={{ height: '40px', width: '80px' }}
-              data={{
-                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-                datasets: [
-                  {
-                    backgroundColor: 'transparent',
-                    borderColor: getStyle('--cui-success'),
-                    borderWidth: 2,
-                    data: [
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                    ],
+          <CWidgetStatsE
+            chart={
+              <CChartLine
+                className="mx-auto"
+                style={{ height: '40px', width: '80px' }}
+                data={{
+                  labels: [
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                  ],
+                  datasets: [
+                    {
+                      backgroundColor: 'transparent',
+                      borderColor: getStyle('--cui-success'),
+                      borderWidth: 2,
+                      data: [
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                      ],
+                    },
+                  ],
+                }}
+                options={{
+                  maintainAspectRatio: false,
+                  elements: {
+                    line: {
+                      tension: 0.4,
+                    },
+                    point: {
+                      radius: 0,
+                    },
                   },
-                ],
-              }}
-              options={{
-                maintainAspectRatio: false,
-                elements: {
-                  line: {
-                    tension: 0.4,
+                  plugins: {
+                    legend: {
+                      display: false,
+                    },
                   },
-                  point: {
-                    radius: 0,
+                  scales: {
+                    x: {
+                      display: false,
+                    },
+                    y: {
+                      display: false,
+                    },
                   },
-                },
-                plugins: {
-                  legend: {
-                    display: false,
-                  },
-                },
-                scales: {
-                  x: {
-                    display: false,
-                  },
-                  y: {
-                    display: false,
-                  },
-                },
-              }}
-            />
-          </CWidgetSimple>
+                }}
+              />
+            }
+            className="mb-4"
+            title="title"
+            value="1,123"
+          />
         </CCol>
         <CCol sm={4} lg={2}>
-          <CWidgetSimple title="title" value="1,123" className="mb-4">
-            <CChartLine
-              className="mx-auto"
-              style={{ height: '40px', width: '80px' }}
-              data={{
-                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-                datasets: [
-                  {
-                    backgroundColor: 'transparent',
-                    borderColor: getStyle('--cui-info'),
-                    borderWidth: 2,
-                    data: [
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                      random(40, 100),
-                    ],
+          <CWidgetStatsE
+            chart={
+              <CChartLine
+                className="mx-auto"
+                style={{ height: '40px', width: '80px' }}
+                data={{
+                  labels: [
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                    'T',
+                    'W',
+                    'T',
+                    'F',
+                    'S',
+                    'S',
+                    'M',
+                  ],
+                  datasets: [
+                    {
+                      backgroundColor: 'transparent',
+                      borderColor: getStyle('--cui-info'),
+                      borderWidth: 2,
+                      data: [
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                        random(40, 100),
+                      ],
+                    },
+                  ],
+                }}
+                options={{
+                  maintainAspectRatio: false,
+                  elements: {
+                    line: {
+                      tension: 0.4,
+                    },
+                    point: {
+                      radius: 0,
+                    },
                   },
-                ],
-              }}
-              options={{
-                maintainAspectRatio: false,
-                elements: {
-                  line: {
-                    tension: 0.4,
+                  plugins: {
+                    legend: {
+                      display: false,
+                    },
                   },
-                  point: {
-                    radius: 0,
+                  scales: {
+                    x: {
+                      display: false,
+                    },
+                    y: {
+                      display: false,
+                    },
                   },
-                },
-                plugins: {
-                  legend: {
-                    display: false,
-                  },
-                },
-                scales: {
-                  x: {
-                    display: false,
-                  },
-                  y: {
-                    display: false,
-                  },
-                },
-              }}
-            />
-          </CWidgetSimple>
+                }}
+              />
+            }
+            className="mb-4"
+            title="title"
+            value="1,123"
+          />
         </CCol>
       </CRow>
       <CRow>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
             icon={<CIcon width={24} icon={cilSettings} size="xl" />}
-            iconPadding={3}
             title="income"
             value="$1.999,50"
             color="primary"
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
             icon={<CIcon width={24} icon={cilUser} size="xl" />}
-            iconPadding={3}
             title="income"
             value="$1.999,50"
             color="info"
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
             icon={<CIcon width={24} icon={cilMoon} size="xl" />}
-            iconPadding={3}
             title="income"
             value="$1.999,50"
             color="warning"
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
             icon={<CIcon width={24} icon={cilBell} size="xl" />}
-            iconPadding={3}
             title="income"
             value="$1.999,50"
             color="danger"
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
             icon={<CIcon width={24} icon={cilSettings} size="xl" />}
-            iconPadding={3}
             title="income"
             value="$1.999,50"
             color="primary"
@@ -520,10 +637,9 @@ const Widgets = () => {
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
             icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
-            iconPadding={3}
             title="income"
             value="$1.999,50"
             color="info"
@@ -541,10 +657,9 @@ const Widgets = () => {
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
             icon={<CIcon width={24} icon={cilMoon} size="xl" />}
-            iconPadding={3}
             title="income"
             value="$1.999,50"
             color="warning"
@@ -562,10 +677,9 @@ const Widgets = () => {
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
             icon={<CIcon width={24} icon={cilBell} size="xl" />}
-            iconPadding={3}
             title="income"
             value="$1.999,50"
             color="danger"
@@ -583,44 +697,40 @@ const Widgets = () => {
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
-            padding={0}
             icon={<CIcon width={24} icon={cilSettings} size="xl" />}
-            iconPadding={4}
+            padding={false}
             title="income"
             value="$1.999,50"
             color="primary"
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
-            padding={0}
             icon={<CIcon width={24} icon={cilUser} size="xl" />}
-            iconPadding={4}
+            padding={false}
             title="income"
             value="$1.999,50"
             color="info"
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
-            padding={0}
             icon={<CIcon width={24} icon={cilMoon} size="xl" />}
-            iconPadding={4}
+            padding={false}
             title="income"
             value="$1.999,50"
             color="warning"
           />
         </CCol>
         <CCol xs={12} sm={6} lg={3}>
-          <CWidgetIcon
+          <CWidgetStatsF
             className="mb-3"
-            padding={0}
             icon={<CIcon width={24} icon={cilBell} size="xl" />}
-            iconPadding={4}
+            padding={false}
             title="income"
             value="$1.999,50"
             color="danger"
@@ -630,167 +740,157 @@ const Widgets = () => {
       <WidgetsBrand />
       <WidgetsBrand withCharts />
       <CCardGroup className="mb-4">
-        <CWidgetProgressIcon
+        <CWidgetStatsC
           icon={<CIcon icon={cilPeople} height={36} />}
           value="87.500"
           title="Visitors"
-          progressColor="info"
-          progressValue={75}
+          progress={{ color: 'info', value: 75 }}
         />
-        <CWidgetProgressIcon
+        <CWidgetStatsC
           icon={<CIcon icon={cilUserFollow} height={36} />}
           value="385"
           title="New Clients"
-          progressColor="success"
-          progressValue={75}
+          progress={{ color: 'success', value: 75 }}
         />
-        <CWidgetProgressIcon
+        <CWidgetStatsC
           icon={<CIcon icon={cilBasket} height={36} />}
           value="1238"
           title="Products sold"
-          progressColor="warning"
-          progressValue={75}
+          progress={{ color: 'warning', value: 75 }}
         />
-        <CWidgetProgressIcon
+        <CWidgetStatsC
           icon={<CIcon icon={cilChartPie} height={36} />}
           value="28%"
           title="Returning Visitors"
-          progressValue={75}
+          progress={{ color: 'primary', value: 75 }}
         />
-        <CWidgetProgressIcon
+        <CWidgetStatsC
           icon={<CIcon icon={cilSpeedometer} height={36} />}
           value="5:34:11"
           title="Avg. Time"
-          progressColor="danger"
-          progressValue={75}
+          progress={{ color: 'danger', value: 75 }}
         />
       </CCardGroup>
       <CRow>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             icon={<CIcon icon={cilPeople} height={36} />}
             value="87.500"
             title="Visitors"
-            progressColor="info"
-            progressValue={75}
+            progress={{ color: 'info', value: 75 }}
             className="mb-4"
           />
         </CCol>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             icon={<CIcon icon={cilUserFollow} height={36} />}
             value="385"
             title="New Clients"
-            progressColor="success"
-            progressValue={75}
+            progress={{ color: 'success', value: 75 }}
             className="mb-4"
           />
         </CCol>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             icon={<CIcon icon={cilBasket} height={36} />}
             value="1238"
             title="Products sold"
-            progressColor="warning"
-            progressValue={75}
+            progress={{ color: 'warning', value: 75 }}
             className="mb-4"
           />
         </CCol>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             icon={<CIcon icon={cilChartPie} height={36} />}
             value="28%"
             title="Returning Visitors"
-            progressColor="primary"
-            progressValue={75}
+            progress={{ color: 'primary', value: 75 }}
             className="mb-4"
           />
         </CCol>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             icon={<CIcon icon={cilSpeedometer} height={36} />}
             value="5:34:11"
             title="Avg. Time"
-            progressColor="danger"
-            progressValue={75}
+            progress={{ color: 'danger', value: 75 }}
             className="mb-4"
           />
         </CCol>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             icon={<CIcon icon={cilSpeech} height={36} />}
             value="972"
             title="comments"
-            progressColor="info"
-            progressValue={75}
+            progress={{ color: 'info', value: 75 }}
             className="mb-4"
           />
         </CCol>
       </CRow>
       <CRow>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             color="info"
             icon={<CIcon icon={cilPeople} height={36} />}
             value="87.500"
             title="Visitors"
-            progressValue={75}
-            progressWhite
+            inverse
+            progress={{ value: 75 }}
             className="mb-4"
           />
         </CCol>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             color="success"
             icon={<CIcon icon={cilUserFollow} height={36} />}
             value="385"
             title="New Clients"
-            progressValue={75}
-            progressWhite
+            inverse
+            progress={{ value: 75 }}
             className="mb-4"
           />
         </CCol>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             color="warning"
             icon={<CIcon icon={cilBasket} height={36} />}
             value="1238"
             title="Products sold"
-            progressValue={75}
-            progressWhite
+            inverse
+            progress={{ value: 75 }}
             className="mb-4"
           />
         </CCol>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             color="primary"
             icon={<CIcon icon={cilChartPie} height={36} />}
             value="28%"
             title="Returning Visitors"
-            progressValue={75}
-            progressWhite
+            inverse
+            progress={{ value: 75 }}
             className="mb-4"
           />
         </CCol>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             color="danger"
             icon={<CIcon icon={cilSpeedometer} height={36} />}
             value="5:34:11"
             title="Avg. Time"
-            progressValue={75}
-            progressWhite
+            inverse
+            progress={{ value: 75 }}
             className="mb-4"
           />
         </CCol>
         <CCol sm={6} md={2}>
-          <CWidgetProgressIcon
+          <CWidgetStatsC
             color="info"
             icon={<CIcon icon={cilSpeech} height={36} />}
             value="972"
             title="comments"
-            progressValue={75}
-            progressWhite
+            inverse
+            progress={{ value: 75 }}
             className="mb-4"
           />
         </CCol>
diff --git a/src/views/components/widgets/WidgetsBrand.js b/src/views/components/widgets/WidgetsBrand.js
index 45b6be1..b5eb528 100644
--- a/src/views/components/widgets/WidgetsBrand.js
+++ b/src/views/components/widgets/WidgetsBrand.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { CWidgetBrand, CRow, CCol } from '@coreui/react'
+import { CWidgetStatsD, CRow, CCol } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
 import { CChart } from '@coreui/react-chartjs'
@@ -37,36 +37,34 @@ const WidgetsBrand = ({ withCharts }) => {
   return (
     <CRow>
       <CCol sm={6} lg={3}>
-        <CWidgetBrand
+        <CWidgetStatsD
           className="mb-4"
-          headerChildren={
-            <>
-              <CIcon icon={cibFacebook} height={52} className="my-4 text-white" />
-              {withCharts && (
-                <CChart
-                  className="position-absolute w-100 h-100"
-                  type="line"
-                  data={{
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [
-                      {
-                        backgroundColor: 'rgba(255,255,255,.1)',
-                        borderColor: 'rgba(255,255,255,.55)',
-                        pointHoverBackgroundColor: '#fff',
-                        borderWidth: 2,
-                        data: [65, 59, 84, 84, 51, 55, 40],
-                        fill: true,
-                      },
-                    ],
-                  }}
-                  options={chartOptions}
-                />
-              )}
-            </>
-          }
+          {...(withCharts && {
+            chart: (
+              <CChart
+                className="position-absolute w-100 h-100"
+                type="line"
+                data={{
+                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                  datasets: [
+                    {
+                      backgroundColor: 'rgba(255,255,255,.1)',
+                      borderColor: 'rgba(255,255,255,.55)',
+                      pointHoverBackgroundColor: '#fff',
+                      borderWidth: 2,
+                      data: [65, 59, 84, 84, 51, 55, 40],
+                      fill: true,
+                    },
+                  ],
+                }}
+                options={chartOptions}
+              />
+            ),
+          })}
+          icon={<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />}
           values={[
-            ['89k', 'friends'],
-            ['459', 'feeds'],
+            { title: 'friends', value: '89K' },
+            { title: 'feeds', value: '459' },
           ]}
           style={{
             '--cui-card-cap-bg': '#3b5998',
@@ -75,36 +73,34 @@ const WidgetsBrand = ({ withCharts }) => {
       </CCol>
 
       <CCol sm={6} lg={3}>
-        <CWidgetBrand
+        <CWidgetStatsD
           className="mb-4"
-          headerChildren={
-            <>
-              <CIcon icon={cibTwitter} height={52} className="my-4 text-white" />
-              {withCharts && (
-                <CChart
-                  className="position-absolute w-100 h-100"
-                  type="line"
-                  data={{
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [
-                      {
-                        backgroundColor: 'rgba(255,255,255,.1)',
-                        borderColor: 'rgba(255,255,255,.55)',
-                        pointHoverBackgroundColor: '#fff',
-                        borderWidth: 2,
-                        data: [1, 13, 9, 17, 34, 41, 38],
-                        fill: true,
-                      },
-                    ],
-                  }}
-                  options={chartOptions}
-                />
-              )}
-            </>
-          }
+          {...(withCharts && {
+            chart: (
+              <CChart
+                className="position-absolute w-100 h-100"
+                type="line"
+                data={{
+                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                  datasets: [
+                    {
+                      backgroundColor: 'rgba(255,255,255,.1)',
+                      borderColor: 'rgba(255,255,255,.55)',
+                      pointHoverBackgroundColor: '#fff',
+                      borderWidth: 2,
+                      data: [1, 13, 9, 17, 34, 41, 38],
+                      fill: true,
+                    },
+                  ],
+                }}
+                options={chartOptions}
+              />
+            ),
+          })}
+          icon={<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />}
           values={[
-            ['973k', 'followers'],
-            ['1.792', 'tweets'],
+            { title: 'followers', value: '973k' },
+            { title: 'tweets', value: '1.792' },
           ]}
           style={{
             '--cui-card-cap-bg': '#00aced',
@@ -113,36 +109,34 @@ const WidgetsBrand = ({ withCharts }) => {
       </CCol>
 
       <CCol sm={6} lg={3}>
-        <CWidgetBrand
+        <CWidgetStatsD
           className="mb-4"
-          headerChildren={
-            <>
-              <CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />
-              {withCharts && (
-                <CChart
-                  className="position-absolute w-100 h-100"
-                  type="line"
-                  data={{
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [
-                      {
-                        backgroundColor: 'rgba(255,255,255,.1)',
-                        borderColor: 'rgba(255,255,255,.55)',
-                        pointHoverBackgroundColor: '#fff',
-                        borderWidth: 2,
-                        data: [78, 81, 80, 45, 34, 12, 40],
-                        fill: true,
-                      },
-                    ],
-                  }}
-                  options={chartOptions}
-                />
-              )}
-            </>
-          }
+          {...(withCharts && {
+            chart: (
+              <CChart
+                className="position-absolute w-100 h-100"
+                type="line"
+                data={{
+                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                  datasets: [
+                    {
+                      backgroundColor: 'rgba(255,255,255,.1)',
+                      borderColor: 'rgba(255,255,255,.55)',
+                      pointHoverBackgroundColor: '#fff',
+                      borderWidth: 2,
+                      data: [78, 81, 80, 45, 34, 12, 40],
+                      fill: true,
+                    },
+                  ],
+                }}
+                options={chartOptions}
+              />
+            ),
+          })}
+          icon={<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />}
           values={[
-            ['500+', 'contacts'],
-            ['292', 'feeds'],
+            { title: 'contacts', value: '500' },
+            { title: 'feeds', value: '1.292' },
           ]}
           style={{
             '--cui-card-cap-bg': '#4875b4',
@@ -151,37 +145,35 @@ const WidgetsBrand = ({ withCharts }) => {
       </CCol>
 
       <CCol sm={6} lg={3}>
-        <CWidgetBrand
+        <CWidgetStatsD
           className="mb-4"
           color="warning"
-          headerChildren={
-            <>
-              <CIcon icon={cilCalendar} height={52} className="my-4 text-white" />
-              {withCharts && (
-                <CChart
-                  className="position-absolute w-100 h-100"
-                  type="line"
-                  data={{
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [
-                      {
-                        backgroundColor: 'rgba(255,255,255,.1)',
-                        borderColor: 'rgba(255,255,255,.55)',
-                        pointHoverBackgroundColor: '#fff',
-                        borderWidth: 2,
-                        data: [35, 23, 56, 22, 97, 23, 64],
-                        fill: true,
-                      },
-                    ],
-                  }}
-                  options={chartOptions}
-                />
-              )}
-            </>
-          }
+          {...(withCharts && {
+            chart: (
+              <CChart
+                className="position-absolute w-100 h-100"
+                type="line"
+                data={{
+                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                  datasets: [
+                    {
+                      backgroundColor: 'rgba(255,255,255,.1)',
+                      borderColor: 'rgba(255,255,255,.55)',
+                      pointHoverBackgroundColor: '#fff',
+                      borderWidth: 2,
+                      data: [35, 23, 56, 22, 97, 23, 64],
+                      fill: true,
+                    },
+                  ],
+                }}
+                options={chartOptions}
+              />
+            ),
+          })}
+          icon={<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />}
           values={[
-            ['12+', 'events'],
-            ['4', 'meetings'],
+            { title: 'events', value: '12+' },
+            { title: 'meetings', value: '4' },
           ]}
         />
       </CCol>
diff --git a/src/views/components/widgets/WidgetsDropdown.js b/src/views/components/widgets/WidgetsDropdown.js
index 9778ce9..94bbb6f 100644
--- a/src/views/components/widgets/WidgetsDropdown.js
+++ b/src/views/components/widgets/WidgetsDropdown.js
@@ -6,7 +6,7 @@ import {
   CDropdownMenu,
   CDropdownItem,
   CDropdownToggle,
-  CWidgetDropdown,
+  CWidgetStatsA,
 } from '@coreui/react'
 import { getStyle } from '@coreui/utils'
 import { CChartBar, CChartLine } from '@coreui/react-chartjs'
@@ -17,13 +17,15 @@ const WidgetsDropdown = () => {
   return (
     <CRow>
       <CCol sm={6} lg={3}>
-        <CWidgetDropdown
+        <CWidgetStatsA
           className="mb-4"
           color="primary"
-          value="26K"
-          change={
+          value={
             <>
-              (-12.4% <CIcon icon={cilArrowBottom} />)
+              26K{' '}
+              <span className="fs-6 fw-normal">
+                (-12.4% <CIcon icon={cilArrowBottom} />)
+              </span>
             </>
           }
           title="Users"
@@ -102,13 +104,15 @@ const WidgetsDropdown = () => {
         />
       </CCol>
       <CCol sm={6} lg={3}>
-        <CWidgetDropdown
+        <CWidgetStatsA
           className="mb-4"
           color="info"
-          value="$6.200"
-          change={
+          value={
             <>
-              (40.9% <CIcon icon={cilArrowTop} />)
+              $6.200{' '}
+              <span className="fs-6 fw-normal">
+                (40.9% <CIcon icon={cilArrowTop} />)
+              </span>
             </>
           }
           title="Income"
@@ -186,13 +190,15 @@ const WidgetsDropdown = () => {
         />
       </CCol>
       <CCol sm={6} lg={3}>
-        <CWidgetDropdown
+        <CWidgetStatsA
           className="mb-4"
           color="warning"
-          value="2.49%"
-          change={
+          value={
             <>
-              (84.7% <CIcon icon={cilArrowTop} />)
+              2.49{' '}
+              <span className="fs-6 fw-normal">
+                (84.7% <CIcon icon={cilArrowTop} />)
+              </span>
             </>
           }
           title="Conversion Rate"
@@ -257,13 +263,15 @@ const WidgetsDropdown = () => {
         />
       </CCol>
       <CCol sm={6} lg={3}>
-        <CWidgetDropdown
+        <CWidgetStatsA
           className="mb-4"
           color="danger"
-          value="44K"
-          change={
+          value={
             <>
-              (-23.6% <CIcon icon={cilArrowBottom} />)
+              44K{' '}
+              <span className="fs-6 fw-normal">
+                (-23.6% <CIcon icon={cilArrowBottom} />)
+              </span>
             </>
           }
           title="Sessions"
diff --git a/yarn.lock b/yarn.lock
index 0c9edef..6f1461b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1222,7 +1222,7 @@
   resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.0.tgz#52ebe0197411a829ba48057ade61923e05859eec"
   integrity sha512-8vH6fJrmvCR/Oy5v0E+/1AL3Ygb4jhQ7NXK2fMYWJyK13BePDm9muB3y6S0IdqkpBwjY3hHVwHyt2lJqJdesmQ==
 
-"@coreui/coreui@4.0.1", "@coreui/coreui@^4.0.1":
+"@coreui/coreui@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.1.tgz#e5faf540aeea31b0cc8d428d73080a364e4bc6fd"
   integrity sha512-1mrWnbqoWb7+8ZAMUdlWt0AqVzDEkJglk7F3OaFsQtxienezFvlMNsd1YPPNo+taRzF7HZ8xSDIAItCvlOaMVg==
@@ -1252,12 +1252,10 @@
     "@coreui/chartjs" "^3.0.0"
     chart.js "^3.4.1"
 
-"@coreui/react@4.0.0-beta.4":
-  version "4.0.0-beta.4"
-  resolved "https://registry.yarnpkg.com/@coreui/react/-/react-4.0.0-beta.4.tgz#b41b5270707784a200bf39b0008d4a324cc98dec"
-  integrity sha512-yjbAk5u3G2w/gJn+tfE/6mQagQoFp94EghHaes4E7GJlGcHwdfTp5AB5nRZp9DvYFy4vm3WsqWGD4yfQ34oilA==
-  dependencies:
-    "@coreui/coreui" "^4.0.1"
+"@coreui/react@4.0.0-rc.0":
+  version "4.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/@coreui/react/-/react-4.0.0-rc.0.tgz#a5bcc13f13e1acec273ffb32f085452d2a7da116"
+  integrity sha512-vJ8MqBChFfxtYqmvFzcxwNU+98LniLlGmaIrY7Xa7Ckr29ZRh1d4aBJhM1gGtE2kefsra4B8hzw/6rzEXYdLlQ==
 
 "@coreui/utils@^1.3.1":
   version "1.3.1"
@@ -3276,11 +3274,16 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
-chart.js@^3.4.0, chart.js@^3.4.1, chart.js@^3.5.0:
+chart.js@^3.4.0, chart.js@^3.4.1:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.0.tgz#6eb075332d4ebbbb20a94e5a07a234052ed6c4fb"
   integrity sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA==
 
+chart.js@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
+  integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
+
 check-types@^11.1.1:
   version "11.1.2"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"
@@ -3674,11 +3677,16 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.0.1, core-js@^3.16.1, core-js@^3.6.5:
+core-js@^3.0.1, core-js@^3.6.5:
   version "3.16.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249"
   integrity sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==
 
+core-js@^3.16.2:
+  version "3.16.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.2.tgz#3f485822889c7fc48ef463e35be5cc2a4a01a1f4"
+  integrity sha512-P0KPukO6OjMpjBtHSceAZEWlDD1M2Cpzpg6dBbrjFqFhBHe/BwhxaP820xKOjRn/lZRQirrCusIpLS/n2sgXLQ==
+
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4718,6 +4726,13 @@ eslint-plugin-prettier@^3.4.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-prettier@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz#e9ddb200efb6f3d05ffe83b1665a716af4a387e5"
+  integrity sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-react-hooks@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
@@ -9973,10 +9988,10 @@ sass-loader@^10.0.5:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
-sass@^1.37.5:
-  version "1.37.5"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.5.tgz#f6838351f7cc814c4fcfe1d9a20e0cabbd1e7b3c"
-  integrity sha512-Cx3ewxz9QB/ErnVIiWg2cH0kiYZ0FPvheDTVC6BsiEGBTZKKZJ1Gq5Kq6jy3PKtL6+EJ8NIoaBW/RSd2R6cZOA==
+sass@^1.38.0:
+  version "1.38.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.0.tgz#2f3e60a1efdcdc910586fa79dc89d3399a145b4f"
+  integrity sha512-WBccZeMigAGKoI+NgD7Adh0ab1HUq+6BmyBUEaGxtErbUtWUevEbdgo5EZiJQofLUGcKtlNaO2IdN73AHEua5g==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"