@amateescu/portal-ui-components 0.0.22 → 0.0.23-beta0

package/dist/{UserInfoDropdown-Cd1W3wRj.js → UserInfoDropdown-DGaplQo6.js}

@@ -3744,7 +3744,7 @@ const Dt = (e) => {
 Dt.__ANT_BUTTON = !0;
 const Ht = be;
 Ht.Button = Dt;
-const or = (e) => /* @__PURE__ */ a.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ a.createElement("path", { d: "M19 9L12 16L5 9", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), nr = "_avatar_1q3yh_1", rr = "_pointer_1q3yh_7", ir = "_flexRowCenter_1q3yh_11", ar = "_userTitle_1q3yh_18", Ce = {
+const or = (e) => /* @__PURE__ */ a.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ a.createElement("path", { d: "M19 9L12 16L5 9", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), nr = "_avatar_1r72q_43", rr = "_pointer_1r72q_49", ir = "_flexRowCenter_1r72q_53", ar = "_userTitle_1r72q_60", Ce = {
   avatar: nr,
   pointer: rr,
   flexRowCenter: ir,

package/dist/assets/ConfirmationModal.css

@@ -1 +1 @@
-._flexRowCenter_qiqse_1{display:flex!important;flex-direction:row;align-items:center}._mr10_qiqse_7,html[dir=rtl] ._mr10_qiqse_7{margin-right:10px}html[dir=ltr] ._mr10_qiqse_7{margin-left:10px}._text18_qiqse_19{font-size:18px}._content_qiqse_23{position:relative;top:-10px}
+:root{--color-primary: #045529;--color-secondary: #626367;--color-background: #f0f0f0;--color-background-secondary: #f3f6f8;--color-text: #12121a;--color-text-secondary: #111111;--color-text-light: #777;--color-text-dark: #333;--color-border: #ddd;--color-highlight: #05a952;--color-highlight-data-grid: rgba(5,169,82,.10196);--color-mui-selected: #F5F7FB;--color-warning: #eea63c;--color-critical: #f95048;--color-neutral: #fafafa;--color-red: red;--color-gray: #e0e0e0;--color-blue: #0054EE;--color-light-gray-blue: #E6EBEF;--color-very-light-gray: #DBDBDB;--color-white: white;--color-green: green;--color-ant-theme: #00b96b;--color-avatar: #41b06e;--font-size-xxsmall: 8px;--font-size-9: 9px;--font-size-xsmall: 10px;--font-size-small: 12px;--font-size-normal: 13px;--font-size-medium: 14px;--font-size-large: 16px;--font-size-xlarge: 18px;--font-size-xxlarge: 20px;--font-size-xxxlarge: 21px;--font-size-22: 22px;--font-size-kpi-card: 32px;--font-bolded: 600;--font-500: 500;--font-400: 400}._flexRowCenter_1mxo7_43{display:flex!important;flex-direction:row;align-items:center}._mr10_1mxo7_49,html[dir=rtl] ._mr10_1mxo7_49{margin-right:10px}html[dir=ltr] ._mr10_1mxo7_49{margin-left:10px}._text18_1mxo7_61{font-size:18px;font-size:var(--font-size-xlarge)}._content_1mxo7_65{position:relative;top:-10px}

package/dist/assets/ErrorModal.css

@@ -1 +1 @@
-._flexRowCenter_14ewh_1{display:flex!important;flex-direction:row;align-items:center}html[dir=rtl] ._mr10_14ewh_7{margin-right:10px}html[dir=ltr] ._mr10_14ewh_7{margin-left:10px}._text18_14ewh_15{font-size:18px}._content_14ewh_19{position:relative;top:-10px}
+:root{--color-primary: #045529;--color-secondary: #626367;--color-background: #f0f0f0;--color-background-secondary: #f3f6f8;--color-text: #12121a;--color-text-secondary: #111111;--color-text-light: #777;--color-text-dark: #333;--color-border: #ddd;--color-highlight: #05a952;--color-highlight-data-grid: rgba(5,169,82,.10196);--color-mui-selected: #F5F7FB;--color-warning: #eea63c;--color-critical: #f95048;--color-neutral: #fafafa;--color-red: red;--color-gray: #e0e0e0;--color-blue: #0054EE;--color-light-gray-blue: #E6EBEF;--color-very-light-gray: #DBDBDB;--color-white: white;--color-green: green;--color-ant-theme: #00b96b;--color-avatar: #41b06e;--font-size-xxsmall: 8px;--font-size-9: 9px;--font-size-xsmall: 10px;--font-size-small: 12px;--font-size-normal: 13px;--font-size-medium: 14px;--font-size-large: 16px;--font-size-xlarge: 18px;--font-size-xxlarge: 20px;--font-size-xxxlarge: 21px;--font-size-22: 22px;--font-size-kpi-card: 32px;--font-bolded: 600;--font-500: 500;--font-400: 400}._flexRowCenter_1ixx3_43{display:flex!important;flex-direction:row;align-items:center}html[dir=rtl] ._mr10_1ixx3_49{margin-right:10px}html[dir=ltr] ._mr10_1ixx3_49{margin-left:10px}._text18_1ixx3_57{font-size:18px;font-size:var(--font-size-xlarge)}._content_1ixx3_61{position:relative;top:-10px}

package/dist/assets/KpiCard.css

@@ -1 +1 @@
-._kpiCard_aruiy_1{height:147px;background-color:#f0f0f0;border-radius:8px}._width430_aruiy_7{width:430px}@media (max-width: 1500px){._width430_aruiy_7{width:200px}}._width384_aruiy_16{width:384px}._flexCol_aruiy_20{display:flex;flex-direction:column}._flexRow_aruiy_25{display:flex;flex-direction:row}._title_aruiy_30{font-size:32px;font-weight:500;color:#12121a}@media (max-width: 900px){._title_aruiy_30{font-size:12px}}@media (max-width: 1100px){._title_aruiy_30{font-size:16px}}@media (max-width: 1400px){._title_aruiy_30{font-size:20px}}@media (max-width: 1600px){._title_aruiy_30{font-size:22px}}._content_aruiy_56{font-size:21px;font-weight:400;color:#626367;margin-top:-10px}@media (max-width: 900px){._content_aruiy_56{font-size:8px}}@media (max-width: 1100px){._content_aruiy_56{font-size:12px}}@media (max-width: 1400px){._content_aruiy_56{font-size:14px}}
+:root{--color-primary: #045529;--color-secondary: #626367;--color-background: #f0f0f0;--color-background-secondary: #f3f6f8;--color-text: #12121a;--color-text-secondary: #111111;--color-text-light: #777;--color-text-dark: #333;--color-border: #ddd;--color-highlight: #05a952;--color-highlight-data-grid: rgba(5,169,82,.10196);--color-mui-selected: #F5F7FB;--color-warning: #eea63c;--color-critical: #f95048;--color-neutral: #fafafa;--color-red: red;--color-gray: #e0e0e0;--color-blue: #0054EE;--color-light-gray-blue: #E6EBEF;--color-very-light-gray: #DBDBDB;--color-white: white;--color-green: green;--color-ant-theme: #00b96b;--color-avatar: #41b06e;--font-size-xxsmall: 8px;--font-size-9: 9px;--font-size-xsmall: 10px;--font-size-small: 12px;--font-size-normal: 13px;--font-size-medium: 14px;--font-size-large: 16px;--font-size-xlarge: 18px;--font-size-xxlarge: 20px;--font-size-xxxlarge: 21px;--font-size-22: 22px;--font-size-kpi-card: 32px;--font-bolded: 600;--font-500: 500;--font-400: 400}._kpiCard_19chq_43{height:147px;background-color:#f0f0f0;background-color:var(--color-background);border-radius:8px}._width430_19chq_49{width:430px}@media (max-width: 1500px){._width430_19chq_49{width:200px}}._width384_19chq_58{width:384px}._flexCol_19chq_62{display:flex;flex-direction:column}._flexRow_19chq_67{display:flex;flex-direction:row}._title_19chq_72{font-size:32px;font-size:var(--font-size-kpi-card);font-weight:500;color:#12121a;color:var(--color-text)}@media (max-width: 900px){._title_19chq_72{font-size:12px;font-size:var(--font-size-small)}}@media (max-width: 1100px){._title_19chq_72{font-size:16px;font-size:var(--font-size-large)}}@media (max-width: 1400px){._title_19chq_72{font-size:20px;font-size:var(--font-size-xxlarge)}}@media (max-width: 1600px){._title_19chq_72{font-size:22px;font-size:var(--font-size-22)}}._content_19chq_98{font-size:21px;font-size:var(--font-size-xxxlarge);font-weight:400;color:#626367;color:var(--color-secondary);margin-top:-10px}@media (max-width: 900px){._content_19chq_98{font-size:8px;font-size:var(--font-size-xxsmall)}}@media (max-width: 1100px){._content_19chq_98{font-size:12px;font-size:var(--font-size-small)}}@media (max-width: 1400px){._content_19chq_98{font-size:14px;font-size:var(--font-size-medium)}}

package/dist/assets/SideMenu.css

@@ -1 +1 @@
-.ant-menu-title-content{color:#626367}.main-container{background-color:#f0f0f0;border-top-right-radius:16px;border-bottom-right-radius:16px;height:100vh}[dir=rtl] .main-container{border-radius:16px 0 0 16px/16px 0px 0px 16px}.menu{overflow-y:scroll;background-color:#f0f0f0}.menu::-webkit-scrollbar{display:none}.side-menu .ant-menu-item-selected{background-color:#fafafa!important;box-shadow:0 5px 5px gray!important}.side-menu .ant-menu-item-selected span{color:#12121a!important}.side-menu .ant-menu-root{border-right-style:none!important}.side-menu .ant-menu-submenu-title svg{width:25px!important}.mb-10{margin-bottom:10px}.flex-col-center{display:flex;flex-direction:column;align-items:center}.mt-15{margin-top:15px}.space-around-center{display:flex;align-items:center;justify-content:space-around}.flex-row-center{display:flex;flex-direction:row;align-content:center;align-items:center;line-height:1}.ml-5{margin-left:5px}.mb-30{margin-bottom:30px}.avatar{background-color:#41b06e;vertical-align:middle;text-transform:uppercase}.user-container{display:flex;flex-direction:column;margin-left:5px}.username{font-size:12px;color:#626367;margin-left:.5em}.email{font-size:9px;color:#626367}.user-logo-container{cursor:pointer;display:flex;align-items:center;margin:10px;justify-content:space-between;border:1px solid gray;border-radius:10px;padding:5px}.general-information{cursor:pointer;display:flex;align-items:center;margin:10px;justify-content:space-between;border:1px solid gray;border-radius:10px;padding:5px;height:52px}.logo-small-container{display:flex;margin:10px auto auto;flex-direction:column;align-items:center;padding-top:5px;padding-bottom:10px}.pointer{cursor:pointer}
+:root{--color-primary: #045529;--color-secondary: #626367;--color-background: #f0f0f0;--color-background-secondary: #f3f6f8;--color-text: #12121a;--color-text-secondary: #111111;--color-text-light: #777;--color-text-dark: #333;--color-border: #ddd;--color-highlight: #05a952;--color-highlight-data-grid: rgba(5,169,82,.10196);--color-mui-selected: #F5F7FB;--color-warning: #eea63c;--color-critical: #f95048;--color-neutral: #fafafa;--color-red: red;--color-gray: #e0e0e0;--color-blue: #0054EE;--color-light-gray-blue: #E6EBEF;--color-very-light-gray: #DBDBDB;--color-white: white;--color-green: green;--color-ant-theme: #00b96b;--color-avatar: #41b06e;--font-size-xxsmall: 8px;--font-size-9: 9px;--font-size-xsmall: 10px;--font-size-small: 12px;--font-size-normal: 13px;--font-size-medium: 14px;--font-size-large: 16px;--font-size-xlarge: 18px;--font-size-xxlarge: 20px;--font-size-xxxlarge: 21px;--font-size-22: 22px;--font-size-kpi-card: 32px;--font-bolded: 600;--font-500: 500;--font-400: 400}.ant-menu-title-content{color:#626367;color:var(--color-secondary)}.main-container{background-color:#f0f0f0;background-color:var(--color-background);border-top-right-radius:16px;border-bottom-right-radius:16px;height:100vh}[dir=rtl] .main-container{border-radius:16px 0 0 16px/16px 0px 0px 16px}.menu{overflow-y:scroll;background-color:#f0f0f0;background-color:var(--color-background)}.menu::-webkit-scrollbar{display:none}.side-menu .ant-menu-item-selected{background-color:#fafafa!important;background-color:var(--color-neutral)!important;box-shadow:0 5px 5px gray!important}.side-menu .ant-menu-item-selected span{color:#12121a!important;color:var(--color-text)!important}.side-menu .ant-menu-root{border-right-style:none!important}.side-menu .ant-menu-submenu-title svg{width:25px!important}.mb-10{margin-bottom:10px}.flex-col-center{display:flex;flex-direction:column;align-items:center}.mt-15{margin-top:15px}.space-around-center{display:flex;align-items:center;justify-content:space-around}.flex-row-center{display:flex;flex-direction:row;align-content:center;align-items:center;line-height:1}.ml-5{margin-left:5px}.mb-30{margin-bottom:30px}.avatar{background-color:#41b06e;background-color:var(--color-avatar);vertical-align:middle;text-transform:uppercase}.user-container{display:flex;flex-direction:column;margin-left:5px}.username{font-size:12px;font-size:var(--font-size-small);color:#626367;color:var(--color-secondary);margin-left:.5em}.email{font-size:9px;font-size:var(--font-size-9);color:#626367;color:var(--color-secondary)}.user-logo-container{cursor:pointer;display:flex;align-items:center;margin:10px;justify-content:space-between;border:1px solid #e0e0e0;border:1px solid var(--color-gray);border-radius:10px;padding:5px}.general-information{cursor:pointer;display:flex;align-items:center;margin:10px;justify-content:space-between;border:1px solid #e0e0e0;border:1px solid var(--color-gray);border-radius:10px;padding:5px;height:52px}.logo-small-container{display:flex;margin:10px auto auto;flex-direction:column;align-items:center;padding-top:5px;padding-bottom:10px}.pointer{cursor:pointer}

package/dist/assets/UserInfoDropdown.css

@@ -1 +1 @@
-._avatar_1q3yh_1{background-color:#41b06e;vertical-align:middle;text-transform:uppercase}._pointer_1q3yh_7{cursor:pointer}._flexRowCenter_1q3yh_11{display:flex;flex-direction:row;align-content:center;align-items:center}._userTitle_1q3yh_18{font-size:12px;color:#626367;margin-left:10px}[dir=rtl] ._userTitle_1q3yh_18{margin-right:10px}
+:root{--color-primary: #045529;--color-secondary: #626367;--color-background: #f0f0f0;--color-background-secondary: #f3f6f8;--color-text: #12121a;--color-text-secondary: #111111;--color-text-light: #777;--color-text-dark: #333;--color-border: #ddd;--color-highlight: #05a952;--color-highlight-data-grid: rgba(5,169,82,.10196);--color-mui-selected: #F5F7FB;--color-warning: #eea63c;--color-critical: #f95048;--color-neutral: #fafafa;--color-red: red;--color-gray: #e0e0e0;--color-blue: #0054EE;--color-light-gray-blue: #E6EBEF;--color-very-light-gray: #DBDBDB;--color-white: white;--color-green: green;--color-ant-theme: #00b96b;--color-avatar: #41b06e;--font-size-xxsmall: 8px;--font-size-9: 9px;--font-size-xsmall: 10px;--font-size-small: 12px;--font-size-normal: 13px;--font-size-medium: 14px;--font-size-large: 16px;--font-size-xlarge: 18px;--font-size-xxlarge: 20px;--font-size-xxxlarge: 21px;--font-size-22: 22px;--font-size-kpi-card: 32px;--font-bolded: 600;--font-500: 500;--font-400: 400}._avatar_1r72q_43{background-color:#41b06e;background-color:var(--color-avatar);vertical-align:middle;text-transform:uppercase}._pointer_1r72q_49{cursor:pointer}._flexRowCenter_1r72q_53{display:flex;flex-direction:row;align-content:center;align-items:center}._userTitle_1r72q_60{font-size:12px;font-size:var(--font-size-small);color:#626367;color:var(--color-secondary);margin-left:10px}[dir=rtl] ._userTitle_1r72q_60{margin-right:10px}

package/dist/assets/theme.css

@@ -0,0 +1 @@
+:root{--color-primary: #045529;--color-secondary: #626367;--color-background: #f0f0f0;--color-background-secondary: #f3f6f8;--color-text: #12121a;--color-text-secondary: #111111;--color-text-light: #777;--color-text-dark: #333;--color-border: #ddd;--color-highlight: #05a952;--color-highlight-data-grid: rgba(5,169,82,.10196);--color-mui-selected: #F5F7FB;--color-warning: #eea63c;--color-critical: #f95048;--color-neutral: #fafafa;--color-red: red;--color-gray: #e0e0e0;--color-blue: #0054EE;--color-light-gray-blue: #E6EBEF;--color-very-light-gray: #DBDBDB;--color-white: white;--color-green: green;--color-ant-theme: #00b96b;--color-avatar: #41b06e;--font-size-xxsmall: 8px;--font-size-9: 9px;--font-size-xsmall: 10px;--font-size-small: 12px;--font-size-normal: 13px;--font-size-medium: 14px;--font-size-large: 16px;--font-size-xlarge: 18px;--font-size-xxlarge: 20px;--font-size-xxxlarge: 21px;--font-size-22: 22px;--font-size-kpi-card: 32px;--font-bolded: 600;--font-500: 500;--font-400: 400}

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -1,50 +1,52 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import * as o from "react";
-import { S as d } from "../../VModalIcon-D7L4bQLO.js";
-import { M as h } from "../../index-DsP9yT3s.js";
-import '../../assets/ConfirmationModal.css';const p = (n) => /* @__PURE__ */ o.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ o.createElement("path", { d: "M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), x = (n) => /* @__PURE__ */ o.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ o.createElement("path", { d: "M6 18L18 6M6 6L18 18", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), w = "_flexRowCenter_qiqse_1", f = "_mr10_qiqse_7", C = "_text18_qiqse_19", k = "_content_qiqse_23", t = {
-  flexRowCenter: w,
-  mr10: f,
-  text18: C,
-  content: k
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import * as n from "react";
+import { S as m } from "../../VModalIcon-D7L4bQLO.js";
+import '../../assets/theme.css';import '../../assets/ConfirmationModal.css';/* empty css                   */
+import { M as d } from "../../index-DsP9yT3s.js";
+const x = (t) => /* @__PURE__ */ n.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ n.createElement("path", { d: "M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), p = (t) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ n.createElement("path", { d: "M6 18L18 6M6 6L18 18", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), g = "_flexRowCenter_1mxo7_43", w = "_mr10_1mxo7_49", f = "_text18_1mxo7_61", C = "_content_1mxo7_65", o = {
+  flexRowCenter: g,
+  mr10: w,
+  text18: f,
+  content: C
 };
-function v({ modalOpen: n, contentText: c, setModalOpen: r, commandOnOk: l, title: a, approve: i, cancel: m }) {
+function L({ modalOpen: t, contentText: l, setModalOpen: s, commandOnOk: c, title: a, approve: i, cancel: h }) {
   return /* @__PURE__ */ e(
-    h,
+    d,
     {
-      title: /* @__PURE__ */ s("span", { className: t.flexRowCenter, children: [
-        /* @__PURE__ */ e(p, { className: t.mr10 }),
-        /* @__PURE__ */ e("p", { className: t.text18, children: a })
+      title: /* @__PURE__ */ r("span", { className: o.flexRowCenter, children: [
+        /* @__PURE__ */ e(x, { className: o.mr10 }),
+        /* @__PURE__ */ e("p", { className: o.text18, children: a })
       ] }),
       centered: !0,
-      open: n,
+      open: t,
       onOk: () => {
-        l(), r(!1);
+        c(), s(!1);
       },
-      onCancel: () => r(!1),
+      onCancel: () => s(!1),
       closeIcon: !1,
-      okText: /* @__PURE__ */ s("span", { className: t.flexRowCenter, children: [
-        /* @__PURE__ */ e(d, {}),
+      okText: /* @__PURE__ */ r("span", { className: o.flexRowCenter, children: [
+        /* @__PURE__ */ e(m, {}),
         /* @__PURE__ */ e("span", { children: i })
       ] }),
       okButtonProps: {
         style: {
-          backgroundColor: "#05A952"
+          backgroundColor: "var(--color-highlight)"
         }
       },
       cancelButtonProps: {
         style: {
-          borderColor: "#05A952"
+          borderColor: "var(--color-highlight)",
+          color: "var(--color-highlight)"
         }
       },
-      cancelText: /* @__PURE__ */ s("span", { className: t.flexRowCenter, children: [
-        /* @__PURE__ */ e(x, {}),
-        /* @__PURE__ */ e("span", { children: m })
+      cancelText: /* @__PURE__ */ r("span", { className: o.flexRowCenter, children: [
+        /* @__PURE__ */ e(p, {}),
+        /* @__PURE__ */ e("span", { children: h })
       ] }),
-      children: /* @__PURE__ */ e("p", { className: t.content, children: c })
+      children: /* @__PURE__ */ e("p", { className: o.content, children: l })
     }
   );
 }
 export {
-  v as ConfirmationModal
+  L as ConfirmationModal
 };

package/dist/components/CustomButton/CustomButton.js

@@ -1,17 +1,18 @@
-import { jsx as i } from "react/jsx-runtime";
-import { B as a } from "../../Button-BT8r3F_d.js";
-const d = ({ content: o, height: r = "40px", width: t = "120px", direction: n = "left", ...e }) => /* @__PURE__ */ i(
-  a,
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/theme.css';/* empty css                   */
+import { B as i } from "../../Button-BT8r3F_d.js";
+const p = ({ content: r, height: o = "40px", width: t = "120px", direction: n = "left", ...a }) => /* @__PURE__ */ e(
+  i,
   {
     variant: "outlined",
     disableElevation: !0,
     color: "primary",
     sx: {
       float: n,
-      height: r,
+      height: o,
       borderRadius: 2,
-      border: "1px solid #E0E0E0",
-      color: "#48464A",
+      border: "1px solid var(--color-gray)",
+      color: "var(--color-secondary)",
       fontWeight: "400",
       width: t,
       textTransform: "none",
@@ -23,13 +24,13 @@ const d = ({ content: o, height: r = "40px", width: t = "120px", direction: n =
         marginInlineEnd: "10px"
       },
       "&:hover": {
-        border: "1px solid #E0E0E0"
+        border: "1px solid var(--color-gray)"
       }
     },
-    ...e,
-    children: o
+    ...a,
+    children: r
   }
 );
 export {
-  d as CustomButton
+  p as CustomButton
 };

package/dist/components/CustomFooter/CustomFooter.stories.js

@@ -1,10 +1,11 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import "react";
+import '../../assets/SideMenu.css';import '../../assets/theme.css';/* empty css                   */
 import { Pagination as a } from "../CustomPagination/CustomPagination.js";
 import { TotalDataGrid as s } from "../TotalDataGrid/TotalDataGrid.js";
 import "@mui/x-data-grid";
 import "i18next";
-import '../../assets/SideMenu.css';/* empty css                      */
+/* empty css                      */
 import { columnsDefinitions as e, total as i } from "../../mock.js";
 const m = ({ isRtl: o }) => /* @__PURE__ */ r("div", { children: [
   /* @__PURE__ */ t(
@@ -17,7 +18,7 @@ const m = ({ isRtl: o }) => /* @__PURE__ */ r("div", { children: [
   ),
   /* @__PURE__ */ t(a, { isRtl: o, page: 2, pageCount: 12, onPageChange: () => {
   } })
-] }), C = {
+] }), h = {
   title: "Custom Footer",
   component: m,
   tags: ["autodocs"],
@@ -27,13 +28,13 @@ const m = ({ isRtl: o }) => /* @__PURE__ */ r("div", { children: [
   args: {
     isRtl: !1
   }
-}, h = {}, x = {
+}, x = {}, D = {
   args: {
     isRtl: !0
   }
 };
 export {
-  h as Default,
-  x as RTL,
-  C as default
+  x as Default,
+  D as RTL,
+  h as default
 };

package/dist/components/CustomPagination/CustomPagination.js

@@ -1,5 +1,6 @@
 import { jsx as c, jsxs as ot } from "react/jsx-runtime";
 import * as g from "react";
+import '../../assets/theme.css';/* empty css                   */
 import { GridPagination as et } from "@mui/x-data-grid";
 import { _ as A, a as l } from "../../objectWithoutPropertiesLoose-CIT-1_kH.js";
 import { g as J, a as K, u as Q, c as N, b as X, s as E, d as j, h as z, P as o } from "../../generateUtilityClasses-Bhjgm_6-.js";
@@ -30,13 +31,13 @@ function ct(t = {}) {
     default: v,
     name: e,
     state: "page"
-  }), $ = (s, h) => {
-    m || w(h), b && b(s, h);
-  }, y = (s, h) => {
-    const tt = h - s + 1;
+  }), $ = (s, C) => {
+    m || w(C), b && b(s, C);
+  }, y = (s, C) => {
+    const tt = C - s + 1;
     return Array.from({
       length: tt
-    }, (ht, at) => s + at);
+    }, (Ct, at) => s + at);
   }, k = y(1, Math.min(a, n)), x = y(Math.max(n - a + 1, a + 1), n), I = Math.max(
     Math.min(
       // Natural start
@@ -83,9 +84,9 @@ function ct(t = {}) {
       default:
         return null;
     }
-  }, C = M.map((s) => typeof s == "number" ? {
-    onClick: (h) => {
-      $(h, s);
+  }, h = M.map((s) => typeof s == "number" ? {
+    onClick: (C) => {
+      $(C, s);
     },
     type: "page",
     page: s,
@@ -93,8 +94,8 @@ function ct(t = {}) {
     disabled: p,
     "aria-current": s === i ? "true" : void 0
   } : {
-    onClick: (h) => {
-      $(h, T(s));
+    onClick: (C) => {
+      $(C, T(s));
     },
     type: s,
     page: T(s),
@@ -102,7 +103,7 @@ function ct(t = {}) {
     disabled: p || s.indexOf("ellipsis") === -1 && (s === "next" || s === "last" ? i >= n : i <= 1)
   });
   return l({
-    items: C
+    items: h
   }, d);
 }
 function dt(t) {
@@ -492,7 +493,7 @@ const Z = /* @__PURE__ */ g.forwardRef(function(a, e) {
     getItemAriaLabel: O = Pt,
     hideNextButton: B = !1,
     hidePrevButton: P = !1,
-    renderItem: d = (C) => /* @__PURE__ */ c(_, l({}, C)),
+    renderItem: d = (h) => /* @__PURE__ */ c(_, l({}, h)),
     shape: i = "circular",
     showFirstButton: w = !1,
     showLastButton: $ = !1,
@@ -529,10 +530,10 @@ const Z = /* @__PURE__ */ g.forwardRef(function(a, e) {
     children: /* @__PURE__ */ c(mt, {
       className: T.ul,
       ownerState: M,
-      children: L.map((C, s) => /* @__PURE__ */ c("li", {
-        children: d(l({}, C, {
+      children: L.map((h, s) => /* @__PURE__ */ c("li", {
+        children: d(l({}, h, {
           color: f,
-          "aria-label": O(C.type, C.page, C.selected),
+          "aria-label": O(h.type, h.page, h.selected),
           shape: i,
           size: k,
           variant: x
@@ -655,7 +656,7 @@ process.env.NODE_ENV !== "production" && (Z.propTypes = {
    */
   variant: o.oneOfType([o.oneOf(["outlined", "text"]), o.string])
 });
-function Ct({
+function ht({
   isRtl: t,
   pageCount: a,
   page: e,
@@ -685,12 +686,12 @@ function Ct({
       sx: {
         "& .MuiPaginationItem-root": {
           fontWeight: "300",
-          fontSize: "16px",
+          fontSize: "var(--font-size-large)",
           "&.Mui-selected": {
-            color: "#12121A",
+            color: "var(--color-text)",
             fontWeight: "400",
-            fontSize: "16px",
-            background: "#05A952",
+            fontSize: "var(--font-size-large)",
+            background: "var(--color-highlight)",
             borderRadius: "8px"
           }
         }
@@ -698,10 +699,10 @@ function Ct({
     }
   );
 }
-function Bt({ isRtl: t, pageCount: a }) {
-  return /* @__PURE__ */ c(et, { ActionsComponent: (e) => /* @__PURE__ */ c(Ct, { isRtl: t, pageCount: a, ...e }) });
+function wt({ isRtl: t, pageCount: a }) {
+  return /* @__PURE__ */ c(et, { ActionsComponent: (e) => /* @__PURE__ */ c(ht, { isRtl: t, pageCount: a, ...e }) });
 }
 export {
-  Bt as CustomPagination,
-  Ct as Pagination
+  wt as CustomPagination,
+  ht as Pagination
 };

package/dist/components/ErrorModal/ErrorModal.js

@@ -1,40 +1,42 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useState as d } from "react";
-import { M as m } from "../../index-DsP9yT3s.js";
-import '../../assets/ErrorModal.css';const x = "_flexRowCenter_14ewh_1", h = "_mr10_14ewh_7", i = "_text18_14ewh_15", _ = "_content_14ewh_19", t = {
-  flexRowCenter: x,
-  mr10: h,
-  text18: i,
+import '../../assets/theme.css';import '../../assets/ErrorModal.css';/* empty css                   */
+import { useState as x } from "react";
+import { M as h } from "../../index-DsP9yT3s.js";
+const p = "_flexRowCenter_1ixx3_43", m = "_mr10_1ixx3_49", d = "_text18_1ixx3_57", _ = "_content_1ixx3_61", t = {
+  flexRowCenter: p,
+  mr10: m,
+  text18: d,
   content: _
-}, u = ({ error: n, resetErrorBoundary: o, title: r, tryAgain: s, cancel: c }) => {
-  const [l, a] = d(!0), p = () => {
+}, w = ({ error: o, resetErrorBoundary: n, title: r, tryAgain: l, cancel: c }) => {
+  const [s, a] = x(!0), i = () => {
     a(!1);
   };
   return /* @__PURE__ */ e(
-    m,
+    h,
     {
       title: /* @__PURE__ */ e("span", { className: t.flexRowCenter, children: /* @__PURE__ */ e("p", { className: t.text18, children: r }) }),
       centered: !0,
-      open: l,
-      onOk: o,
-      onCancel: p,
+      open: s,
+      onOk: n,
+      onCancel: i,
       closeIcon: !0,
-      okText: /* @__PURE__ */ e("span", { className: t.flexRowCenter, children: /* @__PURE__ */ e("span", { children: s }) }),
+      okText: /* @__PURE__ */ e("span", { className: t.flexRowCenter, children: /* @__PURE__ */ e("span", { children: l }) }),
       okButtonProps: {
         style: {
-          backgroundColor: "#05A952"
+          backgroundColor: "var(--color-highlight)"
         }
       },
       cancelButtonProps: {
         style: {
-          borderColor: "#05A952"
+          borderColor: "var(--color-highlight)",
+          color: "var(--color-highlight)"
         }
       },
       cancelText: /* @__PURE__ */ e("span", { className: t.flexRowCenter, children: /* @__PURE__ */ e("span", { children: c }) }),
-      children: /* @__PURE__ */ e("p", { className: t.content, children: n.toString() })
+      children: /* @__PURE__ */ e("p", { className: t.content, children: o.toString() })
     }
   );
 };
 export {
-  u as ErrorModal
+  w as ErrorModal
 };

package/dist/components/InfoModal/InfoModal.js

@@ -1,24 +1,25 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import * as s from "react";
+import * as r from "react";
 import { S as i } from "../../VModalIcon-D7L4bQLO.js";
-import { M as m } from "../../index-DsP9yT3s.js";
-import '../../assets/ErrorModal.css';const d = (o) => /* @__PURE__ */ s.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...o }, /* @__PURE__ */ s.createElement("path", { d: "M13 16H12V12H11M12 8H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), p = "_flexRowCenter_14ewh_1", h = "_mr10_14ewh_7", x = "_text18_14ewh_15", f = "_content_14ewh_19", t = {
-  flexRowCenter: p,
-  mr10: h,
-  text18: x,
-  content: f
+import '../../assets/theme.css';import '../../assets/ErrorModal.css';/* empty css                   */
+import { M as x } from "../../index-DsP9yT3s.js";
+const m = (o) => /* @__PURE__ */ r.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...o }, /* @__PURE__ */ r.createElement("path", { d: "M13 16H12V12H11M12 8H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), d = "_flexRowCenter_1ixx3_43", p = "_mr10_1ixx3_49", f = "_text18_1ixx3_57", h = "_content_1ixx3_61", t = {
+  flexRowCenter: d,
+  mr10: p,
+  text18: f,
+  content: h
 };
-function k({ modalOpen: o, contentText: r, setModalOpen: c, title: l, okText: a }) {
+function k({ modalOpen: o, contentText: s, setModalOpen: l, title: c, okText: a }) {
   return /* @__PURE__ */ e(
-    m,
+    x,
     {
       title: /* @__PURE__ */ n("span", { className: t.flexRowCenter, children: [
-        /* @__PURE__ */ e(d, { className: t.mr10 }),
-        /* @__PURE__ */ e("p", { className: t.text18, children: l })
+        /* @__PURE__ */ e(m, { className: t.mr10 }),
+        /* @__PURE__ */ e("p", { className: t.text18, children: c })
       ] }),
       centered: !0,
       open: o,
-      onOk: () => c(!1),
+      onOk: () => l(!1),
       closeIcon: !1,
       okText: /* @__PURE__ */ n("span", { className: t.flexRowCenter, children: [
         /* @__PURE__ */ e(i, {}),
@@ -26,7 +27,7 @@ function k({ modalOpen: o, contentText: r, setModalOpen: c, title: l, okText: a
       ] }),
       okButtonProps: {
         style: {
-          backgroundColor: "#05A952"
+          backgroundColor: "var(--color-highlight)"
         }
       },
       cancelButtonProps: {
@@ -35,7 +36,7 @@ function k({ modalOpen: o, contentText: r, setModalOpen: c, title: l, okText: a
         }
       },
       zIndex: 2e3,
-      children: /* @__PURE__ */ e("p", { className: t.content, children: r })
+      children: /* @__PURE__ */ e("p", { className: t.content, children: s })
     }
   );
 }

package/dist/components/KpiCard/KpiCard.js

@@ -278,7 +278,7 @@ var La = /* @__PURE__ */ l.forwardRef(function(e, t) {
       }
     }, U || g.removeIcon || "×"));
   }));
-  function q(E) {
+  function F(E) {
     for (var L = r.filter(function(k) {
       return !k.disabled;
     }), j = L.findIndex(function(k) {
@@ -300,10 +300,10 @@ var La = /* @__PURE__ */ l.forwardRef(function(e, t) {
     }
     switch (L) {
       case ve.UP:
-        q(-1), E.preventDefault();
+        F(-1), E.preventDefault();
         break;
       case ve.DOWN:
-        q(1), E.preventDefault();
+        F(1), E.preventDefault();
         break;
       case ve.ESC:
         G(!1);
@@ -428,7 +428,7 @@ var Ba = function(t) {
     !_ && w && w({
       direction: H > C ? "top" : "bottom"
     });
-  }), v = M(se, 2), q = v[0], ie = v[1], K = J([0, 0]), Q = M(K, 2), oe = Q[0], E = Q[1], L = J([0, 0]), j = M(L, 2), U = j[0], Y = j[1], te = J([0, 0]), k = M(te, 2), me = k[0], de = k[1], ne = J([0, 0]), ge = M(ne, 2), O = ge[0], le = ge[1], ye = Oa(/* @__PURE__ */ new Map()), Pe = M(ye, 2), X = Pe[0], A = Pe[1], ce = Pa(N, X, U[0]), Se = Le(oe, _), we = Le(U, _), Ge = Le(me, _), at = Le(O, _), nt = Math.floor(Se) < Math.floor(we + Ge), ue = nt ? Se - at : Se - Ge, Kt = "".concat(f, "-nav-operations-hidden"), pe = 0, _e = 0;
+  }), v = M(se, 2), F = v[0], ie = v[1], K = J([0, 0]), Q = M(K, 2), oe = Q[0], E = Q[1], L = J([0, 0]), j = M(L, 2), U = j[0], Y = j[1], te = J([0, 0]), k = M(te, 2), me = k[0], de = k[1], ne = J([0, 0]), ge = M(ne, 2), O = ge[0], le = ge[1], ye = Oa(/* @__PURE__ */ new Map()), Pe = M(ye, 2), X = Pe[0], A = Pe[1], ce = Pa(N, X, U[0]), Se = Le(oe, _), we = Le(U, _), Ge = Le(me, _), at = Le(O, _), nt = Math.floor(Se) < Math.floor(we + Ge), ue = nt ? Se - at : Se - Ge, Kt = "".concat(f, "-nav-operations-hidden"), pe = 0, _e = 0;
   _ && o ? (pe = 0, _e = Math.max(0, we - ue)) : (pe = Math.min(0, ue - we), _e = 0);
   function We(H) {
     return H < pe ? pe : H > _e ? _e : H;
@@ -441,24 +441,24 @@ var Ba = function(t) {
     Ve.current && clearTimeout(Ve.current);
   }
   Ra(D, function(H, C) {
-    function F(ae, xe) {
+    function q(ae, xe) {
       ae(function(he) {
         var Ie = We(he + xe);
         return Ie;
       });
     }
-    return nt ? (_ ? F(V, H) : F(ie, C), Xe(), Ke(), !0) : !1;
+    return nt ? (_ ? q(V, H) : q(ie, C), Xe(), Ke(), !0) : !1;
   }), fe(function() {
     return Xe(), Ne && (Ve.current = setTimeout(function() {
       it(0);
     }, 100)), Xe;
   }, [Ne]);
-  var Ft = Ia(
+  var qt = Ia(
     ce,
     // Container
     ue,
     // Transform
-    _ ? y : q,
+    _ ? y : F,
     // Tabs
     we,
     // Add
@@ -468,7 +468,7 @@ var Ba = function(t) {
     re(re({}, e), {}, {
       tabs: N
     })
-  ), ot = M(Ft, 2), qt = ot[0], Ut = ot[1], lt = da(function() {
+  ), ot = M(qt, 2), Ft = ot[0], Ut = ot[1], lt = da(function() {
     var H = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : c, C = ce.get(H) || {
       width: 0,
       height: 0,
@@ -477,49 +477,49 @@ var Ba = function(t) {
       top: 0
     };
     if (_) {
-      var F = y;
-      o ? C.right < y ? F = C.right : C.right + C.width > y + ue && (F = C.right + C.width - ue) : C.left < -y ? F = -C.left : C.left + C.width > -y + ue && (F = -(C.left + C.width - ue)), ie(0), V(We(F));
+      var q = y;
+      o ? C.right < y ? q = C.right : C.right + C.width > y + ue && (q = C.right + C.width - ue) : C.left < -y ? q = -C.left : C.left + C.width > -y + ue && (q = -(C.left + C.width - ue)), ie(0), V(We(q));
     } else {
-      var ae = q;
-      C.top < -q ? ae = -C.top : C.top + C.height > -q + ue && (ae = -(C.top + C.height - ue)), V(0), ie(We(ae));
+      var ae = F;
+      C.top < -F ? ae = -C.top : C.top + C.height > -F + ue && (ae = -(C.top + C.height - ue)), V(0), ie(We(ae));
     }
   }), Re = {};
   g === "top" || g === "bottom" ? Re[o ? "marginRight" : "marginLeft"] = h : Re.marginTop = h;
   var ct = N.map(function(H, C) {
-    var F = H.key;
+    var q = H.key;
     return /* @__PURE__ */ l.createElement(Ba, {
       id: r,
       prefixCls: f,
-      key: F,
+      key: q,
       tab: H,
       style: C === 0 ? void 0 : Re,
       closable: H.closable,
       editable: u,
-      active: F === c,
+      active: q === c,
       renderWrapper: T,
       removeAriaLabel: b == null ? void 0 : b.removeAriaLabel,
       onClick: function(xe) {
-        I(F, xe);
+        I(q, xe);
       },
       onFocus: function() {
-        lt(F), Ke(), D.current && (o || (D.current.scrollLeft = 0), D.current.scrollTop = 0);
+        lt(q), Ke(), D.current && (o || (D.current.scrollLeft = 0), D.current.scrollTop = 0);
       }
     });
   }), st = function() {
     return A(function() {
-      var C, F = /* @__PURE__ */ new Map(), ae = (C = S.current) === null || C === void 0 ? void 0 : C.getBoundingClientRect();
+      var C, q = /* @__PURE__ */ new Map(), ae = (C = S.current) === null || C === void 0 ? void 0 : C.getBoundingClientRect();
       return N.forEach(function(xe) {
         var he, Ie = xe.key, mt = (he = S.current) === null || he === void 0 ? void 0 : he.querySelector('[data-node-key="'.concat(Dt(Ie), '"]'));
         if (mt) {
           var kt = Da(mt, ae), ze = M(kt, 4), ea = ze[0], ta = ze[1], aa = ze[2], na = ze[3];
-          F.set(Ie, {
+          q.set(Ie, {
             width: ea,
             height: ta,
             left: aa,
             top: na
           });
         }
-      }), F;
+      }), q;
     });
   };
   fe(function() {
@@ -528,15 +528,15 @@ var Ba = function(t) {
     return H.key;
   }).join("_")]);
   var Oe = Bt(function() {
-    var H = Ce(z), C = Ce(G), F = Ce(W);
-    E([H[0] - C[0] - F[0], H[1] - C[1] - F[1]]);
+    var H = Ce(z), C = Ce(G), q = Ce(W);
+    E([H[0] - C[0] - q[0], H[1] - C[1] - q[1]]);
     var ae = Ce(R);
     de(ae);
     var xe = Ce(x);
     le(xe);
     var he = Ce(S);
     Y([he[0] - ae[0], he[1] - ae[1]]), st();
-  }), Yt = N.slice(0, qt), Qt = N.slice(Ut + 1), dt = [].concat(ht(Yt), ht(Qt)), ut = ce.get(c), Zt = Ta({
+  }), Yt = N.slice(0, Ft), Qt = N.slice(Ut + 1), dt = [].concat(ht(Yt), ht(Qt)), ut = ce.get(c), Zt = Ta({
     activeTabOffset: ut,
     horizontal: _,
     indicator: P,
@@ -547,8 +547,8 @@ var Ba = function(t) {
   }, [c, pe, _e, Et(ut), Et(ce), _]), fe(function() {
     Oe();
   }, [o]);
-  var vt = !!dt.length, Ee = "".concat(f, "-nav-wrap"), Fe, qe, ft, bt;
-  return _ ? o ? (qe = y > 0, Fe = y !== _e) : (Fe = y < 0, qe = y !== pe) : (ft = q < 0, bt = q !== pe), /* @__PURE__ */ l.createElement(Ue, {
+  var vt = !!dt.length, Ee = "".concat(f, "-nav-wrap"), qe, Fe, ft, bt;
+  return _ ? o ? (Fe = y > 0, qe = y !== _e) : (qe = y < 0, Fe = y !== pe) : (ft = F < 0, bt = F !== pe), /* @__PURE__ */ l.createElement(Ue, {
     onResize: Oe
   }, /* @__PURE__ */ l.createElement("div", {
     ref: ua(t, z),
@@ -566,7 +566,7 @@ var Ba = function(t) {
   }), /* @__PURE__ */ l.createElement(Ue, {
     onResize: Oe
   }, /* @__PURE__ */ l.createElement("div", {
-    className: B(Ee, ee(ee(ee(ee({}, "".concat(Ee, "-ping-left"), Fe), "".concat(Ee, "-ping-right"), qe), "".concat(Ee, "-ping-top"), ft), "".concat(Ee, "-ping-bottom"), bt)),
+    className: B(Ee, ee(ee(ee(ee({}, "".concat(Ee, "-ping-left"), qe), "".concat(Ee, "-ping-right"), Fe), "".concat(Ee, "-ping-top"), ft), "".concat(Ee, "-ping-bottom"), bt)),
     ref: D
   }, /* @__PURE__ */ l.createElement(Ue, {
     onResize: Oe
@@ -574,7 +574,7 @@ var Ba = function(t) {
     ref: S,
     className: "".concat(f, "-nav-list"),
     style: {
-      transform: "translate(".concat(y, "px, ").concat(q, "px)"),
+      transform: "translate(".concat(y, "px, ").concat(F, "px)"),
       transition: Ne ? "none" : void 0
     }
   }, ct, /* @__PURE__ */ l.createElement(At, {
@@ -683,9 +683,9 @@ var Va = ["id", "prefixCls", "className", "items", "direction", "activeKey", "de
     return (c || []).filter(function(O) {
       return O && Qe(O) === "object" && "key" in O;
     });
-  }, [c]), $ = o === "rtl", y = Wa(g), V = J(!1), se = M(V, 2), v = se[0], q = se[1];
+  }, [c]), $ = o === "rtl", y = Wa(g), V = J(!1), se = M(V, 2), v = se[0], F = se[1];
   fe(function() {
-    q(xa());
+    F(xa());
   }, []);
   var ie = $t(function() {
     var O;
@@ -782,14 +782,14 @@ function Xa(e) {
     motionName: ba(e, "switch")
   })), n;
 }
-var Fa = function(e, t) {
+var qa = function(e, t) {
   var n = {};
   for (var a in e) Object.prototype.hasOwnProperty.call(e, a) && t.indexOf(a) < 0 && (n[a] = e[a]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var r = 0, a = Object.getOwnPropertySymbols(e); r < a.length; r++)
     t.indexOf(a[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, a[r]) && (n[a[r]] = e[a[r]]);
   return n;
 };
-function qa(e) {
+function Fa(e) {
   return e.filter((t) => t);
 }
 function Ua(e, t) {
@@ -802,7 +802,7 @@ function Ua(e, t) {
         props: i
       } = a, c = i || {}, {
         tab: o
-      } = c, s = Fa(c, ["tab"]);
+      } = c, s = qa(c, ["tab"]);
       return Object.assign(Object.assign({
         key: String(r)
       }, s), {
@@ -811,7 +811,7 @@ function Ua(e, t) {
     }
     return null;
   });
-  return qa(n);
+  return Fa(n);
 }
 const Ya = (e) => {
   const {
@@ -1699,9 +1699,9 @@ const tt = (e) => {
   } = y, {
     direction: se,
     tabs: v,
-    getPrefixCls: q,
+    getPrefixCls: F,
     getPopupContainer: ie
-  } = l.useContext(De), K = q("tabs", V), Q = ga(K), [oe, E, L] = rn(K, Q);
+  } = l.useContext(De), K = F("tabs", V), Q = ga(K), [oe, E, L] = rn(K, Q);
   let j;
   h === "editable-card" && (j = {
     onEdit: (ne, ge) => {
@@ -1715,7 +1715,7 @@ const tt = (e) => {
     addIcon: (N ?? (v == null ? void 0 : v.addIcon)) || /* @__PURE__ */ l.createElement(Mt, null),
     showAdd: p !== !0
   });
-  const U = q();
+  const U = F();
   if (process.env.NODE_ENV !== "production") {
     const ne = Ze("Tabs");
     process.env.NODE_ENV !== "production" && ne(!("onPrevClick" in e) && !("onNextClick" in e), "breaking", "`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead."), process.env.NODE_ENV !== "production" && ne(!(m || v != null && v.indicatorSize), "deprecated", "`indicatorSize` has been deprecated. Please use `indicator={{ size: ... }}` instead.");
@@ -2168,7 +2168,7 @@ const hn = (e) => {
     return l.Children.forEach(p, (A) => {
       (A == null ? void 0 : A.type) === Vt && (X = !0);
     }), X;
-  }, [p]), v = R("card", n), [q, ie, K] = pn(v), Q = /* @__PURE__ */ l.createElement($a, {
+  }, [p]), v = R("card", n), [F, ie, K] = pn(v), Q = /* @__PURE__ */ l.createElement($a, {
     loading: !0,
     active: !0,
     paragraph: {
@@ -2229,7 +2229,7 @@ const hn = (e) => {
     [`${v}-type-${T}`]: !!T,
     [`${v}-rtl`]: _ === "rtl"
   }, a, r, ie, K), Pe = Object.assign(Object.assign({}, m == null ? void 0 : m.style), i);
-  return q(/* @__PURE__ */ l.createElement("div", Object.assign({
+  return F(/* @__PURE__ */ l.createElement("div", Object.assign({
     ref: t
   }, le, {
     className: ye,
@@ -2268,7 +2268,7 @@ const Sn = (e) => {
 He.Grid = Vt;
 He.Meta = Sn;
 process.env.NODE_ENV !== "production" && (He.displayName = "Card");
-const _n = "_kpiCard_aruiy_1", xn = "_width430_aruiy_7", Cn = "_width384_aruiy_16", wn = "_flexCol_aruiy_20", En = "_flexRow_aruiy_25", Tn = "_title_aruiy_30", Pn = "_content_aruiy_56", $e = {
+const _n = "_kpiCard_19chq_43", xn = "_width430_19chq_49", Cn = "_width384_19chq_58", wn = "_flexCol_19chq_62", En = "_flexRow_19chq_67", Tn = "_title_19chq_72", Pn = "_content_19chq_98", $e = {
   kpiCard: _n,
   width430: xn,
   width384: Cn,

package/dist/components/KpiWrapper/KpiWrapper.stories.js

@@ -1,12 +1,13 @@
 import { jsx as t } from "react/jsx-runtime";
 import { S as e } from "../../InvencoGVR-qnTq-d6S.js";
 import "react";
+import '../../assets/SideMenu.css';import '../../assets/theme.css';/* empty css                   */
 import "@mui/x-data-grid";
 import { KpiCard as i } from "../KpiCard/KpiCard.js";
 import { KpiWrapper as n } from "./KpiWrapper.js";
 import "i18next";
-import '../../assets/SideMenu.css';/* empty css                      */
-const s = {
+/* empty css                      */
+const m = {
   title: "Kpi Wrapper",
   component: n,
   tags: ["autodocs"],
@@ -19,7 +20,7 @@ const s = {
       padding: "10px 10px"
     }
   }
-}, m = {}, K = {
+}, K = {}, u = {
   args: {
     children: [
       /* @__PURE__ */ t(i, { title: "Kpi Card", content: "Kpi Card Content", icon: /* @__PURE__ */ t(e, { width: 50, height: 50 }), menuCollapsed: !0 }),
@@ -27,7 +28,7 @@ const s = {
       /* @__PURE__ */ t(i, { title: "Kpi Card 3", content: "Kpi Card Content 3", icon: /* @__PURE__ */ t(e, { width: 50, height: 50 }), menuCollapsed: !0 })
     ]
   }
-}, u = {
+}, g = {
   args: {
     children: [
       /* @__PURE__ */ t(i, { title: "Kpi Card", content: "Kpi Card Content", icon: /* @__PURE__ */ t(e, { width: 50, height: 50 }), menuCollapsed: !0 }),
@@ -36,7 +37,7 @@ const s = {
       /* @__PURE__ */ t(i, { title: "Kpi Card 4", content: "Kpi Card Content 4", icon: /* @__PURE__ */ t(e, { width: 50, height: 50 }), menuCollapsed: !0 })
     ]
   }
-}, g = {
+}, w = {
   args: {
     children: [
       /* @__PURE__ */ t(i, { title: "Kpi Card", content: "Kpi Card Content", icon: /* @__PURE__ */ t(e, { width: 50, height: 50 }), menuCollapsed: !0 }),
@@ -47,9 +48,9 @@ const s = {
   render: (r) => /* @__PURE__ */ t("div", { dir: "rtl", style: { margin: "20px 20px" }, children: /* @__PURE__ */ t(n, { ...r }) })
 };
 export {
-  m as Default,
-  g as RTL,
-  K as With3Kpis,
-  u as With4Kpis,
-  s as default
+  K as Default,
+  w as RTL,
+  u as With3Kpis,
+  g as With4Kpis,
+  m as default
 };

package/dist/components/Login/Login.js

@@ -1,4 +1,5 @@
 import yt, { jsx as T, jsxs as de } from "react/jsx-runtime";
+import '../../assets/theme.css';/* empty css                   */
 import { P as e, G as xt, i as kn, n as Et, j as Tt, o as Ot, k as Ct, c as K, p as Rt, r as St, e as no, d as Y, b as J, g as Q, q as Mn, T as $n, C as Pt, a as te, u as ee, s as L, h as po, t as rn, v as sn, l as Nt, w as Fn, x as Vo, f as Se, y as wt, z as It } from "../../generateUtilityClasses-Bhjgm_6-.js";
 import { _ as z, a as c, r as Uo, b as kt } from "../../objectWithoutPropertiesLoose-CIT-1_kH.js";
 import { c as Ie, u as Fo, i as Dn, a as Mt } from "../../createSvgIcon-B8ya7kb4.js";
@@ -8021,7 +8022,7 @@ var vt = on.default = void 0, da = ua(ca()), pa = yt;
 vt = on.default = (0, da.default)(/* @__PURE__ */ (0, pa.jsx)("path", {
   d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2M9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9zm9 14H6V10h12zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2"
 }), "LockOutlined");
-const Oa = ({ title: o, disableAll: n, error: t, setError: r, handleSubmit: s, version: i }) => /* @__PURE__ */ de(Qn, { component: "main", maxWidth: "xs", children: [
+const Ca = ({ title: o, disableAll: n, error: t, setError: r, handleSubmit: s, version: i }) => /* @__PURE__ */ de(Qn, { component: "main", maxWidth: "xs", children: [
   /* @__PURE__ */ T(et, {}),
   /* @__PURE__ */ de(
     an,
@@ -8049,7 +8050,7 @@ const Oa = ({ title: o, disableAll: n, error: t, setError: r, handleSubmit: s, v
               autoComplete: "username",
               autoFocus: !0,
               InputLabelProps: {
-                style: { color: "gray" }
+                style: { color: "var(--color-gray)" }
               },
               disabled: n,
               onChange: () => r("")
@@ -8068,7 +8069,7 @@ const Oa = ({ title: o, disableAll: n, error: t, setError: r, handleSubmit: s, v
               autoComplete: "current-password",
               disabled: n,
               InputLabelProps: {
-                style: { color: "gray" }
+                style: { color: "var(--color-gray)" }
               },
               onChange: () => r("")
             }
@@ -8081,5 +8082,5 @@ const Oa = ({ title: o, disableAll: n, error: t, setError: r, handleSubmit: s, v
   )
 ] });
 export {
-  Oa as Login
+  Ca as Login
 };

package/dist/components/SideMenu/SideMenu.js

@@ -1,9 +1,10 @@
 import { jsxs as i, jsx as e, Fragment as M } from "react/jsx-runtime";
 import * as n from "react";
-import { M as R, S as N, U as h } from "../../UserInfoDropdown-Cd1W3wRj.js";
+import { M as R, S as N, U as h } from "../../UserInfoDropdown-DGaplQo6.js";
 import { S as H } from "../../InvencoGVR-qnTq-d6S.js";
-import '../../assets/SideMenu.css';/* empty css                      */
-const v = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { d: "M11 19L4 12L11 5M19 19L12 12L19 5", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), p = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { d: "M13 5L20 12L13 19M5 5L12 12L5 19", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), V = (l) => /* @__PURE__ */ n.createElement("svg", { width: 28, height: 27, viewBox: "0 0 28 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 4V9C10.5 9.55228 10.0523 10 9.5 10H4.5L6.5 12H9.5C11.1569 12 12.5 10.6569 12.5 9V6L10.5 4Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.5 6V0L8.5 2V7.75C8.5 7.88807 8.38807 8 8.25 8H2.5L0.5 6H6.5Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.5 4V9C17.5 9.55228 17.9477 10 18.5 10H23.5L21.5 12H18.5C16.8431 12 15.5 10.6569 15.5 9V6L17.5 4Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.5 6V0L19.5 2V7.75C19.5 7.88807 19.6119 8 19.75 8H25.5L27.5 6H21.5Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 23V18C10.5 17.4477 10.0523 17 9.5 17H4.5L6.5 15H9.5C11.1569 15 12.5 16.3431 12.5 18V21L10.5 23Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.5 21V27L8.5 25V19.25C8.5 19.1119 8.38807 19 8.25 19H2.5L0.5 21H6.5Z", fill: "#12121A" })), b = ({
+import '../../assets/SideMenu.css';import '../../assets/theme.css';/* empty css                   */
+/* empty css                      */
+const v = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { d: "M11 19L4 12L11 5M19 19L12 12L19 5", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), p = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { d: "M13 5L20 12L13 19M5 5L12 12L5 19", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), V = (l) => /* @__PURE__ */ n.createElement("svg", { width: 28, height: 27, viewBox: "0 0 28 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 4V9C10.5 9.55228 10.0523 10 9.5 10H4.5L6.5 12H9.5C11.1569 12 12.5 10.6569 12.5 9V6L10.5 4Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.5 6V0L8.5 2V7.75C8.5 7.88807 8.38807 8 8.25 8H2.5L0.5 6H6.5Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.5 4V9C17.5 9.55228 17.9477 10 18.5 10H23.5L21.5 12H18.5C16.8431 12 15.5 10.6569 15.5 9V6L17.5 4Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.5 6V0L19.5 2V7.75C19.5 7.88807 19.6119 8 19.75 8H25.5L27.5 6H21.5Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 23V18C10.5 17.4477 10.0523 17 9.5 17H4.5L6.5 15H9.5C11.1569 15 12.5 16.3431 12.5 18V21L10.5 23Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.5 21V27L8.5 25V19.25C8.5 19.1119 8.38807 19 8.25 19H2.5L0.5 21H6.5Z", fill: "#12121A" })), j = ({
   logo: l,
   title: u,
   softwareName: r,
@@ -19,8 +20,8 @@ const v = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24,
   handleMenuClickUserInfo: s,
   handleOpenChange: x
 }) => {
-  const m = /@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, C = t ? 54 : 250, k = t ? 50 : 250;
-  return /* @__PURE__ */ i("div", { style: { width: C }, className: "main-container", children: [
+  const m = /@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, k = t ? 54 : 250, C = t ? 50 : 250;
+  return /* @__PURE__ */ i("div", { style: { width: k }, className: "main-container", children: [
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { children: t ? /* @__PURE__ */ e("div", { className: "flex-col-center mt-15", children: d ? /* @__PURE__ */ e(v, { onClick: o, className: "pointer" }) : /* @__PURE__ */ e(p, { onClick: o, className: "pointer" }) }) : /* @__PURE__ */ i("div", { className: "space-around-center", children: [
       /* @__PURE__ */ i("div", { className: "flex-row-center", children: [
         l,
@@ -50,8 +51,8 @@ const v = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24,
         style: {
           height: t ? "82vh" : "80vh",
           //menuHeight,
-          width: k,
-          backgroundColor: "#F0F0F0",
+          width: C,
+          backgroundColor: "var(--color-background)",
           border: "none"
         },
         className: "menu side-menu"
@@ -62,5 +63,5 @@ const v = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24,
   ] });
 };
 export {
-  b as SideMenu
+  j as SideMenu
 };

package/dist/components/TotalDataGrid/TotalDataGrid.js

@@ -1,16 +1,17 @@
 import { jsx as t } from "react/jsx-runtime";
+import '../../assets/theme.css';/* empty css                   */
 import { DataGrid as l, gridClasses as o } from "@mui/x-data-grid";
-const u = ({
-  rows: e,
+const c = ({
+  rows: r,
   isFetching: n,
-  columnsDefinitions: r
+  columnsDefinitions: i
 }) => /* @__PURE__ */ t(
   l,
   {
-    loading: (!e || !e.length) && n,
-    rows: e.map((i, a) => (i.id = a, i)),
-    columns: r,
-    getRowClassName: (i) => i.id === e.length - 1 ? "last-row" : "",
+    loading: (!r || !r.length) && n,
+    rows: r.map((a, e) => (a.id = e, a)),
+    columns: i,
+    getRowClassName: (a) => a.id === r.length - 1 ? "last-row" : "",
     sx: {
       "& .last-row": {
         "& .MuiDataGrid-cellContent": {
@@ -18,14 +19,14 @@ const u = ({
         }
       },
       [`& .${o.main}`]: {
-        backgroundColor: "#F0F0F0",
+        backgroundColor: "var(--color-background)",
         borderRadius: "0px 0px 8px 8px"
       },
       [`& .${o.row}`]: {
         maxHeight: "36px",
         minHeight: "36px",
         "&.Mui-selected": {
-          backgroundColor: "#05A9521A !important"
+          backgroundColor: "var(--color-highlight-data-grid) !important"
         }
       },
       [`& .${o.cell}`]: {
@@ -38,7 +39,7 @@ const u = ({
         outline: "none"
       },
       [`& .${o.columnHeaders}`]: {
-        backgroundColor: "#FAFAFA",
+        backgroundColor: "var(--color-neutral)",
         textTransform: "uppercase",
         userSelect: "none",
         border: "none",
@@ -56,7 +57,7 @@ const u = ({
       [`& .${o.columnHeaderTitle}`]: {
         whiteSpace: "normal",
         lineHeight: "normal",
-        color: "#626367",
+        color: "var(--color-secondary)",
         fontWeight: "500",
         fontSize: "13px"
       },
@@ -65,16 +66,16 @@ const u = ({
       },
       [`& .${o.footerContainer}`]: {
         border: "0",
-        backgroundColor: "#F0F0F0",
+        backgroundColor: "var(--color-background)",
         borderRadius: "8px",
         marginTop: "10px",
         display: "none"
       },
       [`& .${o.overlay}`]: {
-        backgroundColor: "#F0F0F0"
+        backgroundColor: "var(--color-background)"
       },
       [`& .${o.toolbarContainer}`]: {
-        backgroundColor: "#F0F0F0",
+        backgroundColor: "var(--color-background)",
         borderRadius: "8px 8px 0 0",
         padding: "10px"
       },
@@ -96,7 +97,7 @@ const u = ({
       "& .MuiTablePagination-spacer": { order: 0, display: "none" },
       "& .MuiTablePagination-displayedRows": {
         order: 1,
-        color: "#12121A",
+        color: "var(--color-text)",
         fontWeight: "300",
         marginInlineEnd: "10px",
         position: "absolute",
@@ -121,5 +122,5 @@ const u = ({
   }
 );
 export {
-  u as TotalDataGrid
+  c as TotalDataGrid
 };

package/dist/components/UserInfoDropdown/UserInfoDropdown.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { U as t } from "../../UserInfoDropdown-Cd1W3wRj.js";
+import { U as t } from "../../UserInfoDropdown-DGaplQo6.js";
 import "../../portal-utils/cn.js";
 export {
   t as UserInfoDropdown

package/dist/components/UserInfoDropdown/UserInfoDropdown.stories.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { userInfoDropdownItems as s } from "../../mock.js";
-import { U as o } from "../../UserInfoDropdown-Cd1W3wRj.js";
+import { U as o } from "../../UserInfoDropdown-DGaplQo6.js";
 const n = {
   title: "User Info Dropdown",
   component: o,

package/dist/components/index.js

@@ -10,7 +10,7 @@ import { LoadingAnimation as D } from "./LoadingAnimation/LoadingAnimation.js";
 import { Login as K } from "./Login/Login.js";
 import { SideMenu as U } from "./SideMenu/SideMenu.js";
 import { TotalDataGrid as A } from "./TotalDataGrid/TotalDataGrid.js";
-import { U as E } from "../UserInfoDropdown-Cd1W3wRj.js";
+import { U as E } from "../UserInfoDropdown-DGaplQo6.js";
 export {
   t as ConfirmationModal,
   m as CustomButton,

package/dist/main.js

@@ -10,7 +10,7 @@ import { LoadingAnimation as M } from "./components/LoadingAnimation/LoadingAnim
 import { Login as U } from "./components/Login/Login.js";
 import { SideMenu as y } from "./components/SideMenu/SideMenu.js";
 import { TotalDataGrid as D } from "./components/TotalDataGrid/TotalDataGrid.js";
-import { U as K } from "./UserInfoDropdown-Cd1W3wRj.js";
+import { U as K } from "./UserInfoDropdown-DGaplQo6.js";
 import { chunkArray as b } from "./portal-utils/chunkArray.js";
 import { cn as w } from "./portal-utils/cn.js";
 import { currency as E, date as F, datetime as G, decimal as S, fuelUnitPrice as T, fuelVolume as V, hours as W, number as j, time as q } from "./portal-utils/formatters.js";

package/package.json

@@ -2,10 +2,11 @@
   "name": "@amateescu/portal-ui-components",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
-  "version": "0.0.22",
+  "version": "0.0.23-beta0",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src/theme/theme.scss"
   ],
   "exports": {
     "./components": "./dist/components/index.js",

package/src/theme/theme.scss

@@ -0,0 +1,43 @@
+:root {
+  --color-primary: #045529;
+  --color-secondary: #626367;
+  --color-background: #f0f0f0;
+  --color-background-secondary: #f3f6f8;
+  --color-text: #12121a;
+  --color-text-secondary: #111111;
+  --color-text-light: #777;
+  --color-text-dark: #333;
+  --color-border: #ddd;
+  --color-highlight: #05a952;
+  --color-highlight-data-grid: #05a9521a; //data-grid row selection
+  --color-mui-selected: #F5F7FB;
+  --color-warning: #eea63c;
+  --color-critical: #f95048;
+  --color-neutral: #fafafa;
+  --color-red: red;
+  --color-gray: #e0e0e0;
+  --color-blue: #0054EE; //clear filters
+  --color-light-gray-blue: #E6EBEF;
+  --color-very-light-gray: #DBDBDB;
+  --color-white: white;
+  --color-green: green;
+  --color-ant-theme: #00b96b;
+  --color-avatar: #41b06e;
+
+  --font-size-xxsmall: 8px;
+  --font-size-9: 9px;
+  --font-size-xsmall: 10px;
+  --font-size-small: 12px;
+  --font-size-normal: 13px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --font-size-xlarge: 18px;
+  --font-size-xxlarge: 20px;
+  --font-size-xxxlarge: 21px;
+  --font-size-22: 22px;
+  --font-size-kpi-card: 32px;
+
+  --font-bolded: 600;
+  --font-500: 500;
+  --font-400: 400;
+}