@mxenabled/mxui 1.2.0 → 1.2.1-alpha.bb1

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as E } from "react/jsx-runtime";
 import b from "react";
 import O from "@mui/material/Stack";
-import { useTheme as L, createTheme as $ } from "@mui/material/styles";
+import { useTheme as D, createTheme as $ } from "@mui/material/styles";
 import o0 from "@mui/material/Icon";
 import { endOfMonth as B } from "date-fns/endOfMonth";
 import { endOfYear as r0 } from "date-fns/endOfYear";
@@ -30,8 +30,8 @@ import { light as Y, buildTheme as P, dark as C0 } from "@mxenabled/design-token
 import { circularProgressClasses as A0 } from "@mui/material/CircularProgress";
 import { LicenseInfo as E0 } from "@mui/x-license-pro";
 import { darken as N, lighten as F, alpha as m } from "@mui/material";
-import M0 from "@mui/material/styles/createPalette";
-import R0 from "@mui/material/styles/createTypography";
+import R0 from "@mui/material/styles/createPalette";
+import M0 from "@mui/material/styles/createTypography";
 const g = ({
   children: e,
   height: t,
@@ -51,7 +51,7 @@ const g = ({
     children: e
   }
 );
-var I0 = /* @__PURE__ */ ((e) => (e[e.Lighter = 100] = "Lighter", e[e.Light = 200] = "Light", e[e.Normal = 300] = "Normal", e[e.Dark = 400] = "Dark", e[e.Darker = 500] = "Darker", e))(I0 || {});
+var S0 = /* @__PURE__ */ ((e) => (e[e.Lighter = 100] = "Lighter", e[e.Light = 200] = "Light", e[e.Normal = 300] = "Normal", e[e.Dark = 400] = "Dark", e[e.Darker = 500] = "Darker", e))(S0 || {});
 const A = ({
   color: e,
   fill: t = !1,
@@ -145,7 +145,7 @@ const A = ({
     d: "M8 0c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm4.358 5.151a.5.5 0 00-.707-.01L6.858 9.803 4.35 7.363a.5.5 0 10-.698.718l2.858 2.777a.5.5 0 00.697 0l5.142-5a.5.5 0 00.01-.707z",
     fill: e
   }
-) })), Me = ({
+) })), Re = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -154,7 +154,7 @@ const A = ({
     d: "M2.68 5.201a.6.6 0 01.848-.011L8 9.543l4.472-4.353a.6.6 0 11.837.86l-4.89 4.76a.6.6 0 01-.838 0l-4.89-4.76a.6.6 0 01-.012-.849z",
     fill: e
   }
-) })), Re = ({
+) })), Me = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -163,7 +163,7 @@ const A = ({
     d: "M10.799 2.68a.6.6 0 01.011.848L6.457 8l4.353 4.472a.6.6 0 01-.86.837L5.19 8.42a.6.6 0 010-.838l4.76-4.89a.6.6 0 01.849-.012z",
     fill: e
   }
-) })), Ie = ({
+) })), Se = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -172,7 +172,7 @@ const A = ({
     d: "M5.207 13.32a.6.6 0 01-.012-.848L9.55 8 5.195 3.528a.6.6 0 11.86-.837l4.76 4.89a.6.6 0 010 .838l-4.76 4.89a.6.6 0 01-.848.012z",
     fill: e
   }
-) })), Se = ({
+) })), Ie = ({
   color: e = "currentColor",
   ...t
 }) => (console.warn('<AccountsFilledIcon /> DEPRECATED - use <Icon name="icon_name" />'), /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -262,7 +262,7 @@ const A = ({
       fillRule: "evenodd"
     }
   )
-] }), Le = ({
+] }), De = ({
   color: e = "currentColor",
   ...t
 }) => /* @__PURE__ */ o(g, { ...t, children: /* @__PURE__ */ o(
@@ -273,7 +273,7 @@ const A = ({
     fill: e,
     fillRule: "evenodd"
   }
-) }), De = ({
+) }), Le = ({
   color: e = "currentColor",
   ...t
 }) => /* @__PURE__ */ E(g, { ...t, children: [
@@ -301,109 +301,109 @@ const A = ({
     }
   )
 ] });
-var u = /* @__PURE__ */ ((e) => (e.AutoTransport = "CAT-7829f71c-2e8c-afa5-2f55-fa3634b89874", e.BillsUtilities = "CAT-79b02f2f-2adc-88f0-ac2b-4e71ead9cfc8", e.BusinessServices = "CAT-94b11142-e97b-941a-f67f-6e18d246a23f", e.Education = "CAT-bf5c9cca-c96b-b50d-440d-38d9adfda5b0", e.Entertainment = "CAT-e04e9d1e-e041-c315-2e50-094143ab3f73", e.FeesCharges = "CAT-d73ee74b-13a4-ac3e-4015-fc4ba9a62b2a", e.Financial = "CAT-6c7de3f8-de6c-7061-1dd2-b093044014bf", e.FoodDining = "CAT-bd56d35a-a9a7-6e10-66c1-5b9cc1b6c81a", e.GiftsDonations = "CAT-8edf9663-623e-4735-490e-31288f0a70b0", e.HealthFitness = "CAT-52fa4693-c088-afb2-2a99-7bc39bb23a0f", e.Home = "CAT-b709172b-4eb7-318e-3b5d-e0f0500b32ac", e.Income = "CAT-bf9f3294-4c40-1677-d269-54fbc189faf3", e.Investments = "CAT-ccd42390-9e8c-3fb6-a5d9-6c31182d9c5c", e.Kids = "CAT-0cb1d99d-f558-99e3-2282-b31f359b411a", e.PersonalCare = "CAT-e5154228-fe45-790d-a280-f6bf5ae5ac9f", e.Pets = "CAT-7cccbafa-87d7-c9a6-661b-8b3402fe9e78", e.Shopping = "CAT-aad51b46-d6f7-3da5-fd6e-492328b3023f", e.Taxes = "CAT-d00fc539-aa14-009b-4ffb-7e8c7b839954", e.Transfer = "CAT-bce48142-fea4-ff45-20d9-0a642d44de83", e.Travel = "CAT-ea23d844-cbd1-eb10-f6ac-0df9610e59ae", e.Uncategorized = "CAT-d7851c65-3353-e490-1953-fb9235e681e4", e))(u || {}), S0 = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(S0 || {});
+var p = /* @__PURE__ */ ((e) => (e.AutoTransport = "CAT-7829f71c-2e8c-afa5-2f55-fa3634b89874", e.BillsUtilities = "CAT-79b02f2f-2adc-88f0-ac2b-4e71ead9cfc8", e.BusinessServices = "CAT-94b11142-e97b-941a-f67f-6e18d246a23f", e.Education = "CAT-bf5c9cca-c96b-b50d-440d-38d9adfda5b0", e.Entertainment = "CAT-e04e9d1e-e041-c315-2e50-094143ab3f73", e.FeesCharges = "CAT-d73ee74b-13a4-ac3e-4015-fc4ba9a62b2a", e.Financial = "CAT-6c7de3f8-de6c-7061-1dd2-b093044014bf", e.FoodDining = "CAT-bd56d35a-a9a7-6e10-66c1-5b9cc1b6c81a", e.GiftsDonations = "CAT-8edf9663-623e-4735-490e-31288f0a70b0", e.HealthFitness = "CAT-52fa4693-c088-afb2-2a99-7bc39bb23a0f", e.Home = "CAT-b709172b-4eb7-318e-3b5d-e0f0500b32ac", e.Income = "CAT-bf9f3294-4c40-1677-d269-54fbc189faf3", e.Investments = "CAT-ccd42390-9e8c-3fb6-a5d9-6c31182d9c5c", e.Kids = "CAT-0cb1d99d-f558-99e3-2282-b31f359b411a", e.PersonalCare = "CAT-e5154228-fe45-790d-a280-f6bf5ae5ac9f", e.Pets = "CAT-7cccbafa-87d7-c9a6-661b-8b3402fe9e78", e.Shopping = "CAT-aad51b46-d6f7-3da5-fd6e-492328b3023f", e.Taxes = "CAT-d00fc539-aa14-009b-4ffb-7e8c7b839954", e.Transfer = "CAT-bce48142-fea4-ff45-20d9-0a642d44de83", e.Travel = "CAT-ea23d844-cbd1-eb10-f6ac-0df9610e59ae", e.Uncategorized = "CAT-d7851c65-3353-e490-1953-fb9235e681e4", e))(p || {}), I0 = /* @__PURE__ */ ((e) => (e.Basic = "basic", e.Filled = "filled", e.Transparent = "transparent", e.TwoTone = "two-tone", e))(I0 || {});
 const K = {
-  guid: u.Uncategorized,
+  guid: p.Uncategorized,
   colorName: "uncategorized",
   icon: "category"
 }, H0 = [
   {
-    guid: u.AutoTransport,
+    guid: p.AutoTransport,
     colorName: "autoTransport",
     icon: "directions_car"
   },
   {
-    guid: u.BillsUtilities,
+    guid: p.BillsUtilities,
     colorName: "billsUtilities",
     icon: "electrical_services"
   },
   {
-    guid: u.BusinessServices,
+    guid: p.BusinessServices,
     colorName: "businessServices",
     icon: "business_center"
   },
   {
-    guid: u.Education,
+    guid: p.Education,
     colorName: "education",
     icon: "school"
   },
   {
-    guid: u.Entertainment,
+    guid: p.Entertainment,
     colorName: "entertainment",
     icon: "stadium"
   },
   {
-    guid: u.FeesCharges,
+    guid: p.FeesCharges,
     colorName: "feesCharges",
     icon: "problem"
   },
   {
-    guid: u.Financial,
+    guid: p.Financial,
     colorName: "financial",
     icon: "price_check"
   },
   {
-    guid: u.FoodDining,
+    guid: p.FoodDining,
     colorName: "foodDining",
     icon: "grocery"
   },
   {
-    guid: u.GiftsDonations,
+    guid: p.GiftsDonations,
     colorName: "giftsDonations",
     icon: "featured_seasonal_and_gifts"
   },
   {
-    guid: u.HealthFitness,
+    guid: p.HealthFitness,
     colorName: "healthFitness",
     icon: "ecg_heart"
   },
   {
-    guid: u.Home,
+    guid: p.Home,
     colorName: "home",
     icon: "cottage"
   },
   {
-    guid: u.Income,
+    guid: p.Income,
     colorName: "income",
     icon: "monetization_on"
   },
   {
-    guid: u.Investments,
+    guid: p.Investments,
     colorName: "investments",
     icon: "bid_landscape"
   },
   {
-    guid: u.Kids,
+    guid: p.Kids,
     colorName: "kids",
     icon: "face"
   },
   {
-    guid: u.PersonalCare,
+    guid: p.PersonalCare,
     colorName: "personalCare",
     icon: "volunteer_activism"
   },
   {
-    guid: u.Pets,
+    guid: p.Pets,
     colorName: "pets",
     icon: "pet_supplies"
   },
   {
-    guid: u.Shopping,
+    guid: p.Shopping,
     colorName: "shopping",
     icon: "shopping_cart"
   },
   {
-    guid: u.Taxes,
+    guid: p.Taxes,
     colorName: "taxes",
     icon: "heap_snapshot_large"
   },
   {
-    guid: u.Transfer,
+    guid: p.Transfer,
     colorName: "transfer",
     icon: "compare_arrows"
   },
   {
-    guid: u.Travel,
+    guid: p.Travel,
     colorName: "travel",
     icon: "airplane_ticket"
   },
@@ -415,7 +415,7 @@ const K = {
   sx: r = {},
   variant: l = "filled"
 }) => {
-  const s = L(), c = b.useMemo(
+  const s = D(), c = b.useMemo(
     () => H0.find((d) => d.guid === e) ?? K,
     [e]
   ), n = s.palette.categories[c.colorName];
@@ -445,7 +445,7 @@ const K = {
   isValid: a,
   selected: r
 }) => {
-  const l = L(), s = e?.map((c) => {
+  const l = D(), s = e?.map((c) => {
     const n = c.getValue({ isValid: a });
     return {
       label: c.label,
@@ -490,12 +490,12 @@ const K = {
   selectedShortcut: r = e.dateRangeThisMonth,
   sx: l = {}
 }) => {
-  const s = L(), c = l0(s.breakpoints.down("sm")), n = b.useMemo(() => {
-    const h = i0(), d = a0(h, 1), T = n0(h, 1);
+  const s = D(), c = l0(s.breakpoints.down("sm")), n = b.useMemo(() => {
+    const f = i0(), d = a0(f, 1), T = n0(f, 1);
     return [
       {
         label: e.dateRangeThisMonth,
-        getValue: () => [V(h), B(h)]
+        getValue: () => [V(f), B(f)]
       },
       {
         label: e.dateRangeLastMonth,
@@ -503,15 +503,15 @@ const K = {
       },
       {
         label: e.dateRangeLast30Days,
-        getValue: () => [G(h, 30), h]
+        getValue: () => [G(f, 30), f]
       },
       {
         label: e.dateRangeLast90Days,
-        getValue: () => [G(h, 90), h]
+        getValue: () => [G(f, 90), f]
       },
       {
         label: e.dateRangeYTD,
-        getValue: () => [U(h), h]
+        getValue: () => [U(f), f]
       },
       {
         label: e.dateRangeLastYear,
@@ -519,12 +519,12 @@ const K = {
       },
       {
         label: e.dateRangeCustom,
-        getValue: () => [h, h]
+        getValue: () => [f, f]
       }
     ];
-  }, [e]), i = (h, d) => {
+  }, [e]), i = (f, d) => {
     const T = d.shortcut;
-    a?.(h, T ? T.label : e.dateRangeCustom);
+    a?.(f, T ? T.label : e.dateRangeCustom);
   };
   return /* @__PURE__ */ o(O, { gap: 16, m: 8, children: /* @__PURE__ */ o(c0, { dateAdapter: d0, children: /* @__PURE__ */ o(
     s0,
@@ -548,7 +548,7 @@ const K = {
       },
       slots: {
         leftArrowIcon: () => /* @__PURE__ */ o(A, { name: "chevron_left", size: 28 }),
-        shortcuts: (h) => /* @__PURE__ */ o(x0, { selected: r, ...h }),
+        shortcuts: (f) => /* @__PURE__ */ o(x0, { selected: r, ...f }),
         rightArrowIcon: () => /* @__PURE__ */ o(A, { name: "chevron_right", size: 28 })
       },
       sx: { ...l },
@@ -586,7 +586,7 @@ const K = {
       children: s
     }
   )
-] }), D = ({
+] }), L = ({
   bold: e,
   className: t = "",
   children: a,
@@ -651,8 +651,8 @@ const K = {
       children: a
     }
   );
-}, L0 = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(D, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...a, children: t }), ke = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(D, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...a, children: t }), we = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(D, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...a, children: t }), Pe = ({ className: e = "", children: t, truncate: a, ...r }) => /* @__PURE__ */ o(
-  D,
+}, D0 = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(L, { className: `mx-kmui-text h1 ${e}`, component: "h1", variant: "h1", ...a, children: t }), ke = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(L, { className: `mx-kmui-text h2 ${e}`, component: "h2", variant: "h2", ...a, children: t }), we = ({ className: e = "", children: t, ...a }) => /* @__PURE__ */ o(L, { className: `mx-kmui-text h3 ${e}`, component: "h3", variant: "h3", ...a, children: t }), Pe = ({ className: e = "", children: t, truncate: a, ...r }) => /* @__PURE__ */ o(
+  L,
   {
     className: `mx-kmui-text p ${e}`,
     component: "p",
@@ -672,7 +672,7 @@ const K = {
       py: 14
     },
     children: [
-      /* @__PURE__ */ o(L0, { variant: "h3", children: e.title }),
+      /* @__PURE__ */ o(D0, { variant: "h3", children: e.title }),
       /* @__PURE__ */ o(X, { "aria-label": e.close_aria, onClick: t, sx: { mr: -12 }, children: /* @__PURE__ */ o(p0, {}) })
     ]
   }
@@ -686,7 +686,7 @@ const K = {
   primaryText: c,
   secondaryText: n,
   children: i,
-  ...h
+  ...f
 }) => /* @__PURE__ */ E(
   g0,
   {
@@ -696,7 +696,7 @@ const K = {
     onClose: l,
     open: r,
     variant: "temporary",
-    ...h,
+    ...f,
     children: [
       i,
       s && /* @__PURE__ */ o(
@@ -711,7 +711,7 @@ const K = {
       )
     ]
   }
-), j = 32, _ = "https://content.moneydesktop.com/storage/MD_Assets", D0 = `${_}/serenity/default_institution_logo.png`, Be = ({
+), j = 32, _ = "https://content.moneydesktop.com/storage/MD_Assets", L0 = `${_}/serenity/default_institution_logo.png`, Be = ({
   alt: e,
   institutionGuid: t,
   logoUrl: a,
@@ -722,7 +722,7 @@ const K = {
   {
     alt: e,
     height: r,
-    onError: (s) => s.target.src = D0,
+    onError: (s) => s.target.src = L0,
     src: a || `${_}/Ipad%20Logos/100x100/${t}_100x100.png`,
     style: {
       borderRadius: 4
@@ -737,7 +737,7 @@ const K = {
   size: r = j,
   ...l
 }) => {
-  const [s, c] = b.useState(!1), n = L();
+  const [s, c] = b.useState(!1), n = D();
   return /* @__PURE__ */ E(W, { display: "inline-block", position: "relative", ...l, children: [
     a && !s && /* @__PURE__ */ o(
       "img",
@@ -789,10 +789,10 @@ const Ge = ({
   showAction: c = !1,
   showClose: n = !1,
   actionText: i = "Undo",
-  onActionClick: h,
+  onActionClick: f,
   multiLine: d = !1
 }) => {
-  const T = L(), e0 = {
+  const T = D(), e0 = {
     success: T.palette.success.dark,
     error: T.palette.error.light,
     info: T.palette.info.lighter,
@@ -811,7 +811,7 @@ const Ge = ({
           w,
           {
             color: "inherit",
-            onClick: h || t,
+            onClick: f || t,
             size: "small",
             sx: {
               color: T.palette.success.contrastText,
@@ -872,7 +872,7 @@ const Ge = ({
           },
           variant: "filled",
           children: /* @__PURE__ */ o(
-            D,
+            L,
             {
               sx: {
                 lineHeight: T.typography.body1.lineHeight,
@@ -915,7 +915,7 @@ const Ge = ({
   return r || P(y.LIGHT, e, { ...t });
 }, q = {
   LIGHT: "light"
-}, M = (e) => ({
+}, R = (e) => ({
   50: F(e, 0.95),
   100: F(e, 0.85),
   200: F(e, 0.7),
@@ -926,7 +926,7 @@ const Ge = ({
   700: N(e, 0.5),
   800: N(e, 0.65),
   900: N(e, 0.75)
-}), C = "#FFFFFF", R = "#000000", I = {
+}), C = "#FFFFFF", M = "#000000", S = {
   PRIMARY: "#2C64EF",
   SECONDARY: "#808080",
   INFO: "#2C64EF",
@@ -934,7 +934,7 @@ const Ge = ({
   WARNING: "#FF7B00",
   ERROR: "#E32727",
   NEUTRAL: "#808080"
-}, S = {
+}, I = {
   CHART1: "#74E4DA",
   CHART2: "#ED64A4",
   CHART3: "#F3DC46",
@@ -949,7 +949,7 @@ const Ge = ({
   CHART_MONO4: "#2F73DA",
   CHART_MONO5: "#034AB3",
   CHART_MONO6: "#002966"
-}, p = {
+}, u = {
   AUTO_TRANSPORTT: "#00B0FF",
   BILLS_UTILITIES: "#F949BD",
   BUSINESS_SERVICES: "#2979FF",
@@ -964,6 +964,7 @@ const Ge = ({
   INCOME: "#009526",
   INVESTMENTS: "#00C9E0",
   KIDS: "#FF9700",
+  OTHERS: "#66718D",
   PERSONAL_CARE: "#DF0683",
   PETS: "#FF5D00",
   SHOPPING: "#7469FF",
@@ -971,7 +972,7 @@ const Ge = ({
   TRANSFER: "#2B9580",
   TRAVEL: "#3D5AFE",
   UNCATEGORIZED: "#8495AD"
-}, f = {
+}, h = {
   AUTO_TRANSPORTT: "#77DAFF",
   BILLS_UTILITIES: "#FF81D4",
   BUSINESS_SERVICES: "#4BBAFF",
@@ -986,6 +987,7 @@ const Ge = ({
   INCOME: "#95ECAB",
   INVESTMENTS: "#8BE7F5",
   KIDS: "#FFB13F",
+  OTHERS: "#B2BCD5",
   PERSONAL_CARE: "#FF50B5",
   PETS: "#FF8A46",
   SHOPPING: "#AEA8FA",
@@ -994,8 +996,8 @@ const Ge = ({
   TRAVEL: "#76ACF7",
   UNCATEGORIZED: "#BCC6D4"
 }, y0 = (e) => {
-  const t = M(I.PRIMARY), a = M(I.SECONDARY), r = M(I.ERROR), l = M(I.WARNING), s = M(I.INFO), c = M(I.SUCCESS), n = M(I.NEUTRAL), i = e === q.LIGHT;
-  return M0({
+  const t = R(S.PRIMARY), a = R(S.SECONDARY), r = R(S.ERROR), l = R(S.WARNING), s = R(S.INFO), c = R(S.SUCCESS), n = R(S.NEUTRAL), i = e === q.LIGHT;
+  return R0({
     mode: e,
     // DEPRECATED: Use Neutral instead
     border: {
@@ -1009,27 +1011,27 @@ const Ge = ({
     },
     common: {
       white: C,
-      black: R
+      black: M
     },
     primary: {
       ...t,
       /* DEPRECATED: Use light instead */
-      lighter: i ? t[300] : t[600],
+      lighter: i ? t[100] : t[800],
       light: i ? t[300] : t[600],
       main: i ? t[500] : t[400],
       dark: i ? t[700] : t[200],
       /* DEPRECATED: Use dark instead */
-      darker: i ? t[700] : t[200]
+      darker: i ? t[900] : t[100]
     },
     secondary: {
       ...a,
       /* DEPRECATED: Use light instead */
-      lighter: a[500],
+      lighter: i ? a[300] : a[700],
       light: a[500],
       main: i ? a[700] : a[300],
       dark: i ? a[900] : a[100],
       /* DEPRECATED: Use dark instead */
-      darker: i ? a[900] : a[100]
+      darker: i ? a[900] : a[50]
     },
     text: {
       primary: i ? n[900] : C,
@@ -1039,52 +1041,52 @@ const Ge = ({
     error: {
       ...r,
       /* DEPRECATED: Use light instead */
-      lighter: i ? r[300] : r[600],
+      lighter: i ? r[100] : r[800],
       light: i ? r[300] : r[600],
       main: i ? r[500] : r[400],
       dark: i ? r[700] : r[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? r[700] : r[200]
+      darker: i ? r[900] : r[100]
     },
     warning: {
       ...l,
       /* DEPRECATED: Use light instead */
-      lighter: i ? l[300] : l[600],
+      lighter: i ? l[100] : l[800],
       light: i ? l[300] : l[600],
       main: i ? l[500] : l[400],
       dark: i ? l[700] : l[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? l[700] : l[200]
+      darker: i ? l[900] : l[100]
     },
     info: {
       ...s,
       /* DEPRECATED: Use light instead */
-      lighter: i ? s[300] : s[600],
+      lighter: i ? s[100] : s[800],
       light: i ? s[300] : s[600],
       main: i ? s[500] : s[400],
       dark: i ? s[700] : s[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? s[700] : s[200]
+      darker: i ? s[900] : s[100]
     },
     success: {
       ...c,
       /* DEPRECATED: Use light instead */
-      lighter: i ? c[300] : c[600],
+      lighter: i ? c[100] : c[800],
       light: i ? c[300] : c[600],
       main: i ? c[500] : c[400],
       dark: i ? c[700] : c[200],
       /* DEPRECATED: Use light instead */
-      darker: i ? c[700] : c[200]
+      darker: i ? c[900] : c[100]
     },
     grey: n,
     action: {
-      active: e === "light" ? m(R, 0.56) : m(C, 0.56),
-      hover: e === "light" ? m(R, 0.04) : m(C, 0.08),
+      active: e === "light" ? m(M, 0.56) : m(C, 0.56),
+      hover: e === "light" ? m(M, 0.04) : m(C, 0.08),
       // also used for text hover
-      selected: e === "light" ? m(R, 0.08) : m(C, 0.16),
-      focus: e === "light" ? m(R, 0.12) : m(C, 0.12),
-      disabled: e === "light" ? m(R, 0.38) : m(C, 0.38),
-      disabledBackground: e === "light" ? m(R, 0.12) : m(C, 0.12)
+      selected: e === "light" ? m(M, 0.08) : m(C, 0.16),
+      focus: e === "light" ? m(M, 0.12) : m(C, 0.12),
+      disabled: e === "light" ? m(M, 0.38) : m(C, 0.38),
+      disabledBackground: e === "light" ? m(M, 0.12) : m(C, 0.12)
     },
     background: {
       default: i ? n[100] : n[800],
@@ -1094,36 +1096,37 @@ const Ge = ({
     },
     // divider: isLight ? neutral[400] : neutral[700],
     categories: {
-      autoTransport: i ? p.AUTO_TRANSPORTT : f.AUTO_TRANSPORTT,
-      billsUtilities: i ? p.BILLS_UTILITIES : f.BILLS_UTILITIES,
-      businessServices: i ? p.BUSINESS_SERVICES : f.BUSINESS_SERVICES,
-      education: i ? p.EDUCATION : f.EDUCATION,
-      entertainment: i ? p.ENTERTAINMENT : f.ENTERTAINMENT,
-      feesCharges: i ? p.FEES_CHARGES : f.FEES_CHARGES,
-      financial: i ? p.FINANCIAL : f.FINANCIAL,
-      foodDining: i ? p.FOOD_DINING : f.FOOD_DINING,
-      giftsDonations: i ? p.GIFTS_DONATIONS : f.GIFTS_DONATIONS,
-      healthFitness: i ? p.HEALTH_FITNESS : f.HEALTH_FITNESS,
-      home: i ? p.HOME : f.HOME,
-      income: i ? p.INCOME : f.INCOME,
-      investments: i ? p.INVESTMENTS : f.INVESTMENTS,
-      kids: i ? p.KIDS : f.KIDS,
-      personalCare: i ? p.PERSONAL_CARE : f.PERSONAL_CARE,
-      pets: i ? p.PETS : f.PETS,
-      shopping: i ? p.SHOPPING : f.SHOPPING,
-      taxes: i ? p.TAXES : f.TAXES,
-      transfer: i ? p.TRANSFER : f.TRANSFER,
-      travel: i ? p.TRAVEL : f.TRAVEL,
-      uncategorized: i ? p.UNCATEGORIZED : f.UNCATEGORIZED
+      autoTransport: i ? u.AUTO_TRANSPORTT : h.AUTO_TRANSPORTT,
+      billsUtilities: i ? u.BILLS_UTILITIES : h.BILLS_UTILITIES,
+      businessServices: i ? u.BUSINESS_SERVICES : h.BUSINESS_SERVICES,
+      education: i ? u.EDUCATION : h.EDUCATION,
+      entertainment: i ? u.ENTERTAINMENT : h.ENTERTAINMENT,
+      feesCharges: i ? u.FEES_CHARGES : h.FEES_CHARGES,
+      financial: i ? u.FINANCIAL : h.FINANCIAL,
+      foodDining: i ? u.FOOD_DINING : h.FOOD_DINING,
+      giftsDonations: i ? u.GIFTS_DONATIONS : h.GIFTS_DONATIONS,
+      healthFitness: i ? u.HEALTH_FITNESS : h.HEALTH_FITNESS,
+      home: i ? u.HOME : h.HOME,
+      income: i ? u.INCOME : h.INCOME,
+      investments: i ? u.INVESTMENTS : h.INVESTMENTS,
+      kids: i ? u.KIDS : h.KIDS,
+      others: i ? u.OTHERS : h.OTHERS,
+      personalCare: i ? u.PERSONAL_CARE : h.PERSONAL_CARE,
+      pets: i ? u.PETS : h.PETS,
+      shopping: i ? u.SHOPPING : h.SHOPPING,
+      taxes: i ? u.TAXES : h.TAXES,
+      transfer: i ? u.TRANSFER : h.TRANSFER,
+      travel: i ? u.TRAVEL : h.TRAVEL,
+      uncategorized: i ? u.UNCATEGORIZED : h.UNCATEGORIZED
     },
     chart: {
-      chart1: S.CHART1,
-      chart2: S.CHART2,
-      chart3: S.CHART3,
-      chart4: S.CHART4,
-      chart5: S.CHART5,
-      chart6: S.CHART6,
-      chart7: S.CHART7
+      chart1: I.CHART1,
+      chart2: I.CHART2,
+      chart3: I.CHART3,
+      chart4: I.CHART4,
+      chart5: I.CHART5,
+      chart6: I.CHART6,
+      chart7: I.CHART7
     },
     chartMono: {
       chartMono1: v.CHART_MONO1,
@@ -1134,7 +1137,7 @@ const Ge = ({
       chartMono6: v.CHART_MONO6
     }
   });
-}, H = "Inter, Helvetica, Arial, sans-serif", k0 = (e) => R0(e, {
+}, H = "Inter, Helvetica, Arial, sans-serif", k0 = (e) => M0(e, {
   fontFamily: H,
   fontSize: 15,
   Body: {
@@ -1696,7 +1699,6 @@ const Ze = (e) => {
           root: {
             height: "44px",
             "&.MuiInputBase-multiline": {
-              padding: 0,
               minHeight: "44px",
               height: "auto"
             }
@@ -1870,15 +1872,15 @@ export {
   g as BaseIcon,
   ye as BottomSheetTransition,
   Ae as CalendarIcon,
-  u as CategoryGuids,
+  p as CategoryGuids,
   F0 as CategoryIcon,
   H0 as CategoryIconList,
-  S0 as CategoryIconVariants,
+  I0 as CategoryIconVariants,
   Ee as CheckmarkFilledIcon,
-  Me as ChevronDownIcon,
-  Re as ChevronLeftIcon,
-  Ie as ChevronRightIcon,
-  Se as CloseIcon,
+  Re as ChevronDownIcon,
+  Me as ChevronLeftIcon,
+  Se as ChevronRightIcon,
+  Ie as CloseIcon,
   Ne as DateRangePicker,
   O0 as DialogFooter,
   _e as DialogHeader,
@@ -1886,23 +1888,23 @@ export {
   He as EditIcon,
   ve as FilterIcon,
   O0 as Footer,
-  L0 as H1,
+  D0 as H1,
   ke as H2,
   we as H3,
   Fe as HeartIcon,
   H as INTER,
   A as Icon,
-  I0 as IconWeight,
+  S0 as IconWeight,
   Be as InstitutionLogo,
   Oe as MXLogoCopyrightIcon,
-  Le as MXLogoFilledIcon,
+  De as MXLogoFilledIcon,
   xe as MXLogoIcon,
-  De as MXLogoOutlineIcon,
+  Le as MXLogoOutlineIcon,
   Ve as MerchantLogo,
   Pe as P,
   x as TARGETS,
   y as THEMES,
-  D as Text,
+  L as Text,
   Ue as TextField,
   Ge as Toast,
   $e as TokenProvider,