@mx-cartographer/experiences 8.0.0-alpha.test2 → 8.0.0-alpha.v2

package/dist/SearchBox-CwDgvWVJ.mjs

@@ -0,0 +1,48 @@
+import { jsx as o } from "react/jsx-runtime";
+import { observer as s } from "mobx-react-lite";
+import m from "@mui/material/Box";
+import p from "@mui/material/IconButton";
+import t from "@mui/material/InputAdornment";
+import { TextField as d, Icon as n } from "@mxenabled/mxui";
+const x = ({
+  ariaLabel: c = "Search",
+  cancelAriaLabel: a = "Cancel Search",
+  onChange: e,
+  placeholder: i = "Search",
+  searchValue: r
+}) => /* @__PURE__ */ o(m, { className: "mx-cmn-search-box", px: 24, py: 16, children: /* @__PURE__ */ o(
+  d,
+  {
+    InputProps: {
+      startAdornment: /* @__PURE__ */ o(t, { position: "start", children: /* @__PURE__ */ o(n, { name: "search", size: 26, sx: { color: "action.active" } }) }),
+      endAdornment: /* @__PURE__ */ o(t, { position: "end", sx: { p: 0 }, children: r ? /* @__PURE__ */ o(
+        p,
+        {
+          "aria-label": a,
+          className: "mx-cat-cancel-search-button",
+          color: "primary",
+          onClick: () => e(""),
+          children: /* @__PURE__ */ o(n, { name: "cancel", size: 24 })
+        }
+      ) : null }),
+      sx: {
+        "& .MuiOutlinedInput-notchedOutline": {
+          borderColor: "text.secondary",
+          opacity: 0.5
+        },
+        "& input::placeholder": { color: "text.secondary", opacity: 1 }
+      }
+    },
+    "aria-label": c,
+    name: "search",
+    onChange: (l) => e(l.target.value),
+    placeholder: i,
+    sx: {
+      width: "100%"
+    },
+    value: r
+  }
+) }), I = s(x);
+export {
+  I as S
+};

package/dist/{SettingsStore-ImYpLCSK.mjs → SettingsStore-BoIoiRLj.mjs}

@@ -1,7 +1,7 @@
 import { makeAutoObservable as N, runInAction as l } from "mobx";
-import { F as D, A as r } from "./Fetch-DecPFeGU.mjs";
-import { I as i, A as n, B as f } from "./Notification-Bs1fdbzI.mjs";
-import { T as m } from "./TransactionApi-CjBoLleL.mjs";
+import { F as D, A as r } from "./Fetch-B6tMJC1r.mjs";
+import { B as f, A as n, I as i } from "./Notification-DTNYSd8P.mjs";
+import { T as m } from "./TransactionApi-Ck5Ua-7F.mjs";
 class y {
   fetchInstance;
   constructor(e, t, o) {

package/dist/{SingleSegmentDonut-PsRQPkmV.mjs → SingleSegmentDonut-BgbLgwHi.mjs}

@@ -1,11 +1,11 @@
 import { jsxs as a, jsx as o } from "react/jsx-runtime";
 import l from "@mui/material/Box";
 import D from "@mui/material/styles/useTheme";
-const p = 48, d = 4, y = ({
+const p = 48, u = 4, S = ({
   color: m = "",
   percent: r = 0,
   size: t = p,
-  strokeWidth: s = d,
+  strokeWidth: s = u,
   children: i,
   backgroundStrokeColor: c
 }) => {
@@ -61,9 +61,9 @@ const p = 48, d = 4, y = ({
       ]
     }
   );
-};
+}, E = S;
 export {
   p as D,
-  y as S,
-  d as a
+  E as S,
+  u as a
 };

package/dist/{SpendingData-CI_C9xln.mjs → SpendingData-Bz1bCWAs.mjs}

@@ -3,8 +3,8 @@ import { isBefore as d } from "date-fns/isBefore";
 import { startOfMonth as _ } from "date-fns/startOfMonth";
 import { subMonths as y } from "date-fns/subMonths";
 import { endOfMonth as M } from "date-fns/endOfMonth";
-import { b as a, P as l } from "./Category-Ccoew_sA.mjs";
-import { f as m, D as T } from "./DateFormats-Cs-NbEZ7.mjs";
+import { b as a, P as l } from "./Category-CevNQ03n.mjs";
+import { f as m, D as T } from "./DateFormats-BMpMrZpW.mjs";
 const i = (e) => (e.top_level_category_guid === a.INCOME || e.category_guid === a.INCOME) && !h(e), C = (e) => !i(e) && !f(e), p = (e) => l.includes(e.top_level_category_guid) || l.includes(e.category_guid), f = (e) => e.top_level_category_guid === a.TRANSFER || e.category_guid === a.TRANSFER, h = (e) => e.top_level_category_guid === a.INVESTMENTS || e.category_guid === a.INVESTMENTS, N = (e) => !i(e) && !p(e) && !f(e) && !h(e), w = (e) => e.filter((r) => r.category_guid === r.top_level_category_guid), F = (e, r) => {
   if (r === 0) return 0;
   const o = (e - r) / r;
@@ -45,9 +45,9 @@ export {
   A as a,
   x as b,
   w as c,
-  C as d,
+  i as d,
   H as e,
   F as f,
   b as g,
-  i
+  C as i
 };

package/dist/SpendingLegend-BgjazduU.mjs

@@ -0,0 +1,193 @@
+import { b as _ } from "./CategoryUtil-BVixr0d5.mjs";
+import { b as p } from "./Category-CevNQ03n.mjs";
+import { jsxs as f, Fragment as N, jsx as d } from "react/jsx-runtime";
+import T from "react";
+import { observer as k } from "mobx-react-lite";
+import S from "@mui/material/Box";
+import M from "@mui/material/Button";
+import h from "@mui/material/Stack";
+import { useTheme as A } from "@mui/material/styles";
+import { CategoryIcon as G, CategoryIconVariants as O, Text as y, P as $ } from "@mxenabled/mxui";
+import { D as j } from "./Donut-CpxJlVvJ.mjs";
+import { u as R } from "./useAriaLive-MkYebyUR.mjs";
+import { u as v } from "./hooks-BxkfR-Ff.mjs";
+import { u as V } from "./useScreenSize-B6JyS_Lj.mjs";
+import { f as b } from "./NumberFormatting-QCaNwbjv.mjs";
+const D = 5, B = (i, l, g, c) => c.reduce((o, n) => {
+  const a = i.find((s) => s.guid === n.category_guid);
+  if (!a) return o;
+  const t = a.parent_guid ?? a.guid, r = i.find((s) => s.guid === t);
+  if (!r) return o;
+  const m = {
+    guid: a.guid,
+    name: a.guid === t ? `${l.parent_category_totals_label_general} ${a.name}` : a.name,
+    color: _(r.guid, g),
+    amount: n.total
+  }, e = o.find((s) => s.guid === t);
+  return e ? (e.amount += n.total, e.categoryTotals?.push(m)) : o.push({
+    guid: t,
+    name: r.name,
+    color: _(r.guid, g),
+    categoryTotals: [m],
+    amount: n.total
+  }), o;
+}, []), nt = (i, l, g, c) => {
+  const n = B(i, l, g, c).filter(
+    (e) => e.guid !== p.INCOME && e.guid !== p.INVESTMENTS && e.guid !== p.TRANSFER && e.amount > 0
+  ).sort((e, s) => s.amount - e.amount), a = n.reduce(
+    (e, s) => e + s.amount,
+    0
+  ), t = n.length > D ? D : n.length, r = n.slice(0, t), m = r.map((e) => ({
+    id: e.guid,
+    color: _(e.guid, g),
+    label: e.name,
+    value: e.amount / a * 100
+  }));
+  if (n.length > 5) {
+    const e = n.slice(D), s = e.reduce(
+      (C, u) => C + u.amount,
+      0
+    );
+    r.push({
+      guid: "other",
+      color: g.palette.categories.others || "",
+      name: l.saving_goal_other,
+      categoryTotals: e,
+      amount: s
+    }), m.push({
+      id: "other",
+      color: g.palette.categories.others || "",
+      label: l.saving_goal_other,
+      value: s / a * 100
+    });
+  }
+  return {
+    categoryData: r,
+    donutData: m,
+    totalAmount: a
+  };
+}, et = (i, l, g) => {
+  const c = i.filter(
+    (t) => t.guid === p.INCOME || t.parent_guid === p.INCOME
+  ), o = l.filter((t) => c.some((r) => r.guid === t.category_guid)).sort((t, r) => t.total - r.total).map((t, r) => ({
+    guid: t.category_guid,
+    name: i.find((m) => m.guid === t.category_guid)?.name,
+    color: g[r],
+    categoryTotals: [],
+    amount: Math.abs(t.total)
+  })), n = o.reduce(
+    (t, r) => t + r.amount,
+    0
+  ), a = o.map((t) => ({
+    id: t.guid,
+    color: t.color,
+    label: t.name,
+    value: t.amount / n * 100
+  }));
+  return {
+    categoryData: o,
+    donutData: a,
+    totalAmount: n
+  };
+}, P = ({
+  data: i,
+  isIncome: l = !1,
+  onSelected: g,
+  onViewTransactions: c,
+  selectedId: o,
+  size: n = 150,
+  totalLabel: a,
+  variant: t = "mini"
+}) => {
+  const { spending: r } = v(), m = A(), { isTablet: e } = V(), { announce: s, ariaLive: C } = R(), u = T.useMemo(
+    () => o ? i.categoryData.find((x) => x.guid === o) : void 0,
+    [o]
+  );
+  T.useEffect(() => {
+    if (u) {
+      const x = b(u.amount, t === "mini" ? "0,0" : "0,0.00");
+      s(`${u.name}: ${x}`);
+    }
+  }, [u, s, t]);
+  const E = i.donutData.length > 0 ? i.donutData : [{ id: "0", color: m.palette.divider, value: 100 }], I = () => {
+    c?.(o);
+  }, w = e ? 32 : 48;
+  return /* @__PURE__ */ f(N, { children: [
+    C,
+    /* @__PURE__ */ d(j, { data: E, onClick: g, selectedId: o, size: n, children: /* @__PURE__ */ d(h, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ f(h, { alignItems: "center", justifyContent: "center", minHeight: n, minWidth: n, children: [
+      u && /* @__PURE__ */ f(
+        h,
+        {
+          alignItems: "center",
+          gap: t === "mini" ? 0 : 8,
+          mb: t === "mini" ? 0 : 8,
+          mt: t === "mini" ? 0 : -16,
+          sx: t === "mini" ? { gap: 0, mb: 0 } : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } },
+          children: [
+            /* @__PURE__ */ d(S, { "aria-hidden": "true", role: "presentation", children: /* @__PURE__ */ d(
+              G,
+              {
+                categoryGuid: l ? p.INCOME : u.guid,
+                size: t === "mini" ? 24 : w,
+                variant: O.Transparent
+              }
+            ) }),
+            /* @__PURE__ */ d(
+              y,
+              {
+                color: "text.secondary",
+                noWrap: !0,
+                variant: t === "mini" ? "tiny" : "body1",
+                children: u ? u.name : a
+              }
+            )
+          ]
+        }
+      ),
+      !u && t === "full" && /* @__PURE__ */ d(y, { bold: !0, color: "text.secondary", sx: { mb: { xs: 4, xl: 8 } }, children: a }),
+      /* @__PURE__ */ d($, { variant: t === "mini" ? "h2" : "h1", children: u ? b(u.amount, t === "mini" ? "0,0" : "0,0.00") : b(i.totalAmount, t === "mini" ? "0,0" : "0,0.00") }),
+      !u && t === "mini" && /* @__PURE__ */ d(y, { color: "text.secondary", noWrap: !0, variant: "tiny", children: a }),
+      t === "full" && /* @__PURE__ */ d(
+        M,
+        {
+          "aria-label": `View ${u?.name || ""} Transactions`,
+          disabled: i.categoryData.length === 0,
+          onClick: I,
+          sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
+          variant: "text",
+          children: r.view_transactions
+        }
+      )
+    ] }) }) })
+  ] });
+}, rt = k(P), at = ({ data: i, onSelected: l, selectedId: g }) => {
+  const c = (o, n) => {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), l(n));
+  };
+  return /* @__PURE__ */ d(h, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: i.categoryData.map((o) => /* @__PURE__ */ f(
+    h,
+    {
+      alignItems: "center",
+      "aria-label": o.name,
+      "aria-pressed": o.guid === g,
+      direction: "row",
+      gap: 8,
+      onClick: () => l(o.guid),
+      onKeyDown: (n) => c(n, o.guid),
+      role: "button",
+      sx: { cursor: "pointer" },
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ d(S, { borderRadius: 4, height: 8, sx: { backgroundColor: o.color }, width: 8 }),
+        /* @__PURE__ */ d(y, { bold: o.guid === g, variant: "caption", children: o.name })
+      ]
+    },
+    o.guid
+  )) });
+};
+export {
+  rt as S,
+  et as a,
+  at as b,
+  nt as g
+};

package/dist/{StatusBar-CPfSXe80.mjs → StatusBar-BK_uYHAB.mjs}

@@ -1,9 +1,9 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import i from "@mui/material/Box";
 import p from "@mui/material/Stack";
-const s = ({ data: a, height: r = 8 }) => {
+const s = ({ data: c, height: r = 8 }) => {
   const o = `${r / 4}px`;
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ a(
     p,
     {
       bgcolor: "divider",
@@ -12,7 +12,7 @@ const s = ({ data: a, height: r = 8 }) => {
       gap: 2,
       height: r,
       width: "100%",
-      children: a.map((t, d) => /* @__PURE__ */ c(
+      children: c.map((t, d) => /* @__PURE__ */ a(
         i,
         {
           bgcolor: t.color,
@@ -24,7 +24,7 @@ const s = ({ data: a, height: r = 8 }) => {
       ))
     }
   );
-};
+}, l = s;
 export {
-  s as S
+  l as S
 };

package/dist/StatusIndicator-4tWnjeKS.mjs

@@ -0,0 +1,264 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import u from "react";
+import { observer as D } from "mobx-react-lite";
+import { useVirtualizer as H } from "@tanstack/react-virtual";
+import y from "@mui/material/Box";
+import W from "@mui/material/Divider";
+import B from "@mui/material/List";
+import { G as K, h as E, u as R, g as P } from "./hooks-BxkfR-Ff.mjs";
+import { MerchantLogo as Y, Icon as v, Text as l, P as Z, H2 as F } from "@mxenabled/mxui";
+import q from "@mui/material/ListItemAvatar";
+import J from "@mui/material/ListItemText";
+import s from "@mui/material/Stack";
+import { useTheme as Q } from "@mui/material/styles";
+import { L as X, O as ee } from "./OnClickEvents-CseHDZ94.mjs";
+import { T as te } from "./Transaction-Cn5_iFm0.mjs";
+import { f as re } from "./NumberFormatting-QCaNwbjv.mjs";
+import { Receipt as oe } from "@mxenabled/mx-icons";
+import { fromUnixTime as w } from "date-fns/fromUnixTime";
+import { isSameDay as z } from "date-fns/isSameDay";
+import { h as ne } from "./DateUtil-wcYTmDRD.mjs";
+import { L as ie } from "./Loader-D3rjKx72.mjs";
+import { A as se } from "./Analytics-BYItVAe-.mjs";
+const C = () => {
+  if (!u.useContext(K))
+    throw new Error("useTransactionsUiStore() must be used within the GlobalDataContext");
+  return E().uiStore;
+};
+function ae() {
+  return window.opener && window.opener.location ? window.opener.location.toString() : document.referrer;
+}
+function ce(e) {
+  const r = ae().replace(/([^:]+:\/\/[^\/]+).*/, "$1"), o = window.parent || window.opener || !1;
+  return o && o.postMessage && r ? (o.postMessage(e, r), !0) : !1;
+}
+function le(e) {
+  return ce({
+    metadata: { beat_guid: e },
+    mx: !0,
+    type: "mx/moneyDashboard/insightOnTransaction"
+  });
+}
+const de = ({ transaction: e, onClick: r }) => {
+  const c = Q().palette.mode === "dark", { associatedBeats: p } = E(), { expandedSplits: h } = C(), { transactions: d } = R(), { showInsights: f } = C(), g = e.transaction_type === te.CREDIT, _ = u.useMemo(() => p.find((x) => x.associated_transaction_guid === e.guid), [p, e]);
+  return (
+    //TODO: implement common/components/ListItemRow.tsx
+    /* @__PURE__ */ n(
+      X,
+      {
+        clickEventName: ee.ON_TRANSACTION_LIST_ITEM_CLICK,
+        onClick: r ? () => r(e.guid) : void 0,
+        children: [
+          /* @__PURE__ */ t(q, { children: e.parent_guid && h.includes(e.parent_guid) ? /* @__PURE__ */ t(u.Fragment, {}) : /* @__PURE__ */ t(
+            Y,
+            {
+              categoryGuid: e.top_level_category_guid || "",
+              merchantGuid: e.merchant_guid || ""
+            }
+          ) }),
+          /* @__PURE__ */ t(
+            J,
+            {
+              disableTypography: !0,
+              secondary: /* @__PURE__ */ n(s, { direction: "row", justifyContent: "space-between", children: [
+                /* @__PURE__ */ n(s, { alignItems: "center", direction: "row", gap: 4, children: [
+                  e.is_flagged && /* @__PURE__ */ t(
+                    v,
+                    {
+                      fill: !0,
+                      name: "flag",
+                      size: 16,
+                      sx: { color: c ? "primary.main" : "warning.dark" }
+                    }
+                  ),
+                  e.is_hidden && /* @__PURE__ */ t(v, { name: "visibility_off", size: 16 }),
+                  e.has_been_split && /* @__PURE__ */ t(v, { name: "call_split", size: 16 }),
+                  /* @__PURE__ */ t(l, { variant: "caption", children: e.has_been_split ? d.split_transaction_category_label : e.category })
+                ] }),
+                _ && f && /* @__PURE__ */ t(
+                  l,
+                  {
+                    bold: !0,
+                    color: "action.active",
+                    onClick: (x) => {
+                      x.stopPropagation(), x.preventDefault(), le(_.guid);
+                    },
+                    variant: "caption",
+                    children: _.short_title
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ n(s, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
+                /* @__PURE__ */ n(l, { bold: !0, variant: "body1", children: [
+                  e.is_hidden && d.hide_trnx_cancel_hidden_note,
+                  e.payee || e.description || e.feed_description
+                ] }),
+                /* @__PURE__ */ n(
+                  l,
+                  {
+                    bold: !0,
+                    color: g ? "success.main" : "text.primary",
+                    sx: { flexShrink: 0 },
+                    variant: "body1",
+                    children: [
+                      g ? "+" : "",
+                      re(e.amount, "0,0.00")
+                    ]
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  );
+}, ue = D(de), pe = ({
+  bgcolor: e = "background.default",
+  children: r
+}) => /* @__PURE__ */ t(y, { display: "inline-block", sx: { bgcolor: e, py: 6, width: "100%" }, children: /* @__PURE__ */ t(l, { bold: !0, sx: { pl: 24 }, variant: "caption", children: r }) }), me = ({ showIcon: e = !0, showSubtitle: r = !0 }) => {
+  const { transactions: o } = R();
+  return /* @__PURE__ */ n(s, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
+    e && /* @__PURE__ */ t(oe, { color: "action", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ t(l, { bold: !0, color: "text.secondary", variant: "body2", children: o.zero_state_no_transactions }),
+    r && /* @__PURE__ */ t(l, { color: "text.secondary", variant: "caption", children: o.zero_state_there_are_no_transactions })
+  ] });
+}, he = D(me), k = (e, r) => {
+  const o = w(r[e].date), c = w(r[e - 1]?.date);
+  return !z(o, c);
+}, fe = (e, r) => {
+  const o = w(r[e].date), c = w(r[e + 1]?.date);
+  return z(o, c);
+}, A = 65, N = 32, ge = ({
+  bgcolor: e,
+  filter: r,
+  height: o = "calc(100dvh - 36px)",
+  loader: c = /* @__PURE__ */ t(ie, { label: "Loading", size: 40 }),
+  onClick: p,
+  showInsights: h = !1,
+  showLoader: d = !1,
+  showHiddenTransactions: f = !1,
+  transaction: g,
+  width: _ = "100%",
+  zeroState: x = /* @__PURE__ */ t(he, {})
+}) => {
+  const { isLoading: S, sortedTransactions: I } = E(), m = u.useMemo(() => {
+    const i = r ? I.filter(r) : I, a = g ?? i;
+    return f ? a : a.filter((T) => !T.is_hidden);
+  }, [I, f]), { clearExpandedSplits: O, setShowInsights: G, toggleSplit: M } = C(), { onEvent: V } = P(), $ = (i) => {
+    const a = m.find((T) => T.guid === i);
+    if (a?.has_been_split) {
+      M(a.guid);
+      return;
+    }
+    V(se.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: a?.account_guid,
+      transaction_guid: i
+    }), p?.(i);
+  }, L = u.useRef(null), b = H({
+    count: m.length,
+    getScrollElement: () => L.current,
+    estimateSize: (i) => A + (k(i, m) ? N : 0),
+    overscan: 5
+  });
+  return u.useEffect(() => b.measure(), [m]), u.useEffect(() => G(h), [h]), u.useEffect(() => () => O(), []), /* @__PURE__ */ t(B, { component: "div", role: "list", sx: { width: _ }, children: /* @__PURE__ */ t(y, { height: o, overflow: "auto", ref: L, role: "presentation", width: _, children: /* @__PURE__ */ n(
+    y,
+    {
+      height: (
+        // set the height to auto when there are no transactions so the zero state isn't set to 0
+        b.getVirtualItems().length === 0 ? "auto" : b.getTotalSize()
+      ),
+      position: "relative",
+      role: "presentation",
+      width: "100%",
+      children: [
+        (S || d) && c,
+        !S && !d && b.getVirtualItems().length === 0 && x,
+        !S && !d && b.getVirtualItems().length > 0 && b.getVirtualItems().map((i) => {
+          const a = m[i.index], T = k(i.index, m), U = fe(i.index, m), j = A + (T ? N : 0);
+          return /* @__PURE__ */ n(
+            y,
+            {
+              role: "listitem",
+              sx: {
+                height: j,
+                position: "absolute",
+                transform: `translateY(${i.start}px)`,
+                width: "100%",
+                bgcolor: "background.paper"
+              },
+              children: [
+                T && /* @__PURE__ */ t(pe, { bgcolor: e, children: ne(a.date) }),
+                /* @__PURE__ */ t(
+                  ue,
+                  {
+                    ...p && { onClick: $ },
+                    transaction: a
+                  }
+                ),
+                /* @__PURE__ */ t(W, { sx: { ml: U ? 68 : 0 } })
+              ]
+            },
+            a.guid
+          );
+        })
+      ]
+    }
+  ) }) });
+}, Ue = D(ge), _e = ({
+  amount: e,
+  borderRadius: r = "2px",
+  completeColor: o = "success.main",
+  icon: c,
+  label: p,
+  leftLabel: h,
+  percentComplete: d = 0,
+  rightLabel: f,
+  sx: g
+}) => /* @__PURE__ */ t(s, { sx: { p: 24, width: "100%", ...g }, children: /* @__PURE__ */ n(s, { className: "details-container", sx: { gap: 16 }, children: [
+  /* @__PURE__ */ n(s, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ t(y, { children: c }),
+    /* @__PURE__ */ n(s, { children: [
+      /* @__PURE__ */ t(Z, { variant: "body2", children: p }),
+      typeof e == "string" ? /* @__PURE__ */ t(F, { children: e }) : e
+    ] })
+  ] }),
+  /* @__PURE__ */ n(s, { sx: { gap: 4 }, children: [
+    /* @__PURE__ */ t(
+      s,
+      {
+        sx: {
+          bgcolor: "divider",
+          borderRadius: r,
+          flexDirection: "row",
+          height: 16,
+          width: "100%"
+        },
+        children: /* @__PURE__ */ t(
+          y,
+          {
+            sx: {
+              bgcolor: o,
+              borderRadius: r,
+              height: 16,
+              width: `${d}%`
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n(s, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ t(l, { variant: "body2", children: h }),
+      /* @__PURE__ */ t(l, { variant: "body2", children: f })
+    ] })
+  ] })
+] }) }), je = _e;
+export {
+  pe as S,
+  Ue as T,
+  ue as a,
+  je as b,
+  fe as h,
+  k as s,
+  C as u
+};

package/dist/{TabContentContainer-CnMXkVqr.mjs → TabContentContainer-j01JYR_7.mjs}

@@ -1,21 +1,21 @@
 import { jsx as e } from "react/jsx-runtime";
-const n = ({
+const b = ({
   children: o,
   index: t,
   name: a,
-  value: r,
-  ...b
+  value: n,
+  ...r
 }) => /* @__PURE__ */ e(
   "div",
   {
     "aria-labelledby": `${a}-tab-${t}`,
-    hidden: r !== t,
+    hidden: n !== t,
     id: `${a}-tabpanel-${t}`,
     role: "tabpanel",
-    ...b,
-    children: r === t && o
+    ...r,
+    children: n === t && o
   }
-);
+), i = b;
 export {
-  n as T
+  i as T
 };