@mx-cartographer/experiences 8.0.14 → 8.0.15

package/dist/EmbeddedCard-B4U5fIbl.mjs

@@ -0,0 +1,796 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import w, { useMemo as X, useState as K, useEffect as q } from "react";
+import A from "@mui/material/Box";
+import Y from "@mui/material/Button";
+import c from "@mui/material/Stack";
+import { Icon as E, P as N, H3 as J, Text as b, MerchantLogo as P, H2 as tt } from "@mxenabled/mxui";
+import { Receipt as et, Icon as rt } from "@mxenabled/mx-icons";
+import { L as nt, O as it, e as ot } from "./exportTransactionsToCSV-DgdB3TBt.mjs";
+import { observer as O } from "mobx-react-lite";
+import { useVirtualizer as at } from "@tanstack/react-virtual";
+import st from "@mui/material/Divider";
+import lt from "@mui/material/List";
+import { G as ct, h as W, u as H, g as dt, b as ht } from "./hooks-BxkfR-Ff.mjs";
+import mt from "@mui/material/ListItemAvatar";
+import ut from "@mui/material/ListItemText";
+import { useTheme as z } from "@mui/material/styles";
+import { a as pt } from "./Transaction-C3Pg9TKf.mjs";
+import { f as B } from "./NumberFormatting-QCaNwbjv.mjs";
+import { fromUnixTime as R } from "date-fns/fromUnixTime";
+import { isSameDay as Z } from "date-fns/isSameDay";
+import { f as ft, D as gt } from "./DateFormats-BMpMrZpW.mjs";
+import { h as xt } from "./DateUtil-wcYTmDRD.mjs";
+import { L as Q } from "./Loader-D3rjKx72.mjs";
+import { A as bt } from "./Analytics-0Xm_BjHU.mjs";
+import yt from "@mui/material/Tab";
+import wt from "@mui/material/Tabs";
+import _t from "@mui/material/IconButton";
+import { ChartContainer as Ct, ChartsReferenceLine as j, ChartsXAxis as vt, BarPlot as Tt } from "@mui/x-charts";
+import { D as Dt } from "./Drawer-Bbe4AMB1.mjs";
+import St from "@mui/material/Card";
+const It = ({ message: t, tipAriaLabel: n, onDismiss: r, onAction: i, sx: o }) => {
+  const l = i || r, d = i ? "chevron_right" : "close";
+  return /* @__PURE__ */ a(
+    c,
+    {
+      sx: {
+        backgroundColor: "primary.lighter",
+        borderRadius: "8px",
+        mb: 24,
+        mt: 12,
+        p: 12,
+        mx: 24,
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        gap: 8,
+        ...o
+      },
+      children: [
+        /* @__PURE__ */ a(c, { sx: { flexDirection: "row", gap: 4 }, children: [
+          /* @__PURE__ */ e(E, { color: "info", fill: !0, name: "lightbulb", size: 24 }),
+          /* @__PURE__ */ e(N, { color: "primary.dark", fontWeight: 400, noWrap: !1, variant: "subtitle2", children: t })
+        ] }),
+        l && /* @__PURE__ */ e(
+          _t,
+          {
+            "aria-label": n,
+            onClick: l,
+            size: "small",
+            sx: { minHeight: 0, minWidth: 0, p: 0 },
+            children: /* @__PURE__ */ e(E, { color: "primary", fill: !0, name: d, size: 20 })
+          }
+        )
+      ]
+    }
+  );
+}, Lt = ({
+  ariaLabel: t,
+  beat: n,
+  chart: r,
+  children: i,
+  data: o,
+  defaultSelectedIndex: l,
+  icon: d,
+  onTabChange: f,
+  tipSection: m
+}) => {
+  const { heading: h, subHeading: p } = n, g = X(
+    () => l ?? (o.length ? o.length - 1 : 0),
+    [l, o.length]
+  ), [y, u] = K(g), S = (v, T) => {
+    f?.(T), u(T);
+  }, I = (v) => {
+    u(v);
+  };
+  return /* @__PURE__ */ a(A, { sx: { bgcolor: "background.paper", width: "100%" }, children: [
+    /* @__PURE__ */ e(wt, { "aria-label": t, onChange: S, value: y, variant: "fullWidth", children: o.map((v, T) => /* @__PURE__ */ e(
+      yt,
+      {
+        id: `transaction-details-tab-${T}`,
+        label: v.label,
+        sx: { minWidth: "auto", px: 0 }
+      },
+      `${v.label}-${T}`
+    )) }),
+    /* @__PURE__ */ e(c, { sx: { pt: 16, px: 24 }, children: (h || p) && /* @__PURE__ */ a(c, { sx: { gap: 4 }, children: [
+      h && /* @__PURE__ */ e(J, { children: h }),
+      p && /* @__PURE__ */ a(c, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+        d,
+        /* @__PURE__ */ e(b, { textTransform: "uppercase", variant: "body2", children: p.description })
+      ] })
+    ] }) }),
+    r?.(y, I),
+    m && /* @__PURE__ */ e(It, { ...m }),
+    i?.(y)
+  ] });
+}, V = () => {
+  if (!w.useContext(ct))
+    throw new Error("useTransactionsUiStore() must be used within the GlobalDataContext");
+  return W().uiStore;
+};
+function kt() {
+  return window.opener && window.opener.location ? window.opener.location.toString() : document.referrer;
+}
+function At(t) {
+  const n = kt().replace(/([^:]+:\/\/[^\/]+).*/, "$1"), r = window.parent || window.opener || !1;
+  return r && r.postMessage && n ? (r.postMessage(t, n), !0) : !1;
+}
+function $t(t) {
+  return At({
+    metadata: { beat_guid: t },
+    mx: !0,
+    type: "mx/moneyDashboard/insightOnTransaction"
+  });
+}
+const Et = ({ transaction: t, onClick: n }) => {
+  const i = z().palette.mode === "dark", { associatedBeats: o } = W(), { expandedSplits: l } = V(), { transactions: d } = H(), { showInsights: f } = V(), m = t.transaction_type === pt.CREDIT, h = w.useMemo(() => o.find((p) => p.associated_transaction_guid === t.guid), [o, t]);
+  return (
+    //TODO: implement common/components/ListItemRow.tsx
+    /* @__PURE__ */ a(
+      nt,
+      {
+        clickEventName: it.ON_TRANSACTION_LIST_ITEM_CLICK,
+        onClick: n ? () => n(t.guid) : void 0,
+        children: [
+          /* @__PURE__ */ e(mt, { children: t.parent_guid && l.includes(t.parent_guid) ? /* @__PURE__ */ e(w.Fragment, {}) : /* @__PURE__ */ e(
+            P,
+            {
+              categoryGuid: t.top_level_category_guid || "",
+              merchantGuid: t.merchant_guid || ""
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            ut,
+            {
+              disableTypography: !0,
+              secondary: /* @__PURE__ */ a(c, { direction: "row", justifyContent: "space-between", children: [
+                /* @__PURE__ */ a(c, { alignItems: "center", direction: "row", gap: 4, children: [
+                  t.is_flagged && /* @__PURE__ */ e(
+                    E,
+                    {
+                      fill: !0,
+                      name: "flag",
+                      size: 16,
+                      sx: { color: i ? "primary.main" : "warning.dark" }
+                    }
+                  ),
+                  t.is_hidden && /* @__PURE__ */ e(E, { name: "visibility_off", size: 16 }),
+                  t.has_been_split && /* @__PURE__ */ e(E, { name: "call_split", size: 16 }),
+                  /* @__PURE__ */ e(b, { variant: "caption", children: t.has_been_split ? d.split_transaction_category_label : t.category })
+                ] }),
+                h && f && /* @__PURE__ */ e(
+                  b,
+                  {
+                    bold: !0,
+                    color: "action.active",
+                    onClick: (p) => {
+                      p.stopPropagation(), p.preventDefault(), $t(h.guid);
+                    },
+                    variant: "caption",
+                    children: h.short_title
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ a(c, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
+                /* @__PURE__ */ a(b, { bold: !0, variant: "body1", children: [
+                  t.is_hidden && d.hide_trnx_cancel_hidden_note,
+                  t.payee || t.description || t.feed_description
+                ] }),
+                /* @__PURE__ */ a(
+                  b,
+                  {
+                    bold: !0,
+                    color: m ? "success.main" : "text.primary",
+                    sx: { flexShrink: 0 },
+                    variant: "body1",
+                    children: [
+                      m ? "+" : "",
+                      B(t.amount, "0,0.00")
+                    ]
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  );
+}, Mt = O(Et), Rt = ({
+  bgcolor: t = "background.default",
+  children: n
+}) => /* @__PURE__ */ e(A, { display: "inline-block", sx: { bgcolor: t, py: 6, width: "100%" }, children: /* @__PURE__ */ e(b, { bold: !0, sx: { pl: 24 }, variant: "caption", children: n }) }), Wt = ({ showIcon: t = !0, showSubtitle: n = !0 }) => {
+  const { transactions: r } = H();
+  return /* @__PURE__ */ a(c, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
+    t && /* @__PURE__ */ e(et, { color: "action", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ e(b, { bold: !0, color: "text.secondary", variant: "body2", children: r.zero_state_no_transactions }),
+    n && /* @__PURE__ */ e(b, { color: "text.secondary", variant: "caption", children: r.zero_state_there_are_no_transactions })
+  ] });
+}, zt = O(Wt), G = (t, n) => {
+  const r = R(n[t].date), i = R(n[t - 1]?.date);
+  return !Z(r, i);
+}, Bt = (t, n) => {
+  const r = R(n[t].date), i = R(n[t + 1]?.date);
+  return Z(r, i);
+}, ve = (t) => t?.data ? t.data.map((n) => Object.fromEntries((t.names || []).map((r, i) => [r, n[i]]))) : [], Te = (t, n = "") => t.map((i) => {
+  const o = ft(i.date, gt.MONTH_SHORT);
+  return {
+    ariaLabel: `
+        ${o},
+        ${B(i.amount, "0.00")},
+        ${n}`,
+    label: o,
+    value: i.amount,
+    formattedAmount: B(i.amount, "0,0")
+  };
+}), U = 65, F = 32, Vt = ({
+  bgcolor: t,
+  filter: n,
+  height: r = "calc(100dvh - 36px)",
+  loader: i = /* @__PURE__ */ e(Q, { label: "Loading", size: 40 }),
+  onClick: o,
+  showInsights: l = !1,
+  showLoader: d = !1,
+  showHiddenTransactions: f = !1,
+  transaction: m,
+  width: h = "100%",
+  zeroState: p = /* @__PURE__ */ e(zt, {})
+}) => {
+  const { isLoading: g, sortedTransactions: y } = W(), u = w.useMemo(() => {
+    const x = n ? y.filter(n) : y, _ = m ?? x;
+    return f ? _ : _.filter((s) => !s.is_hidden);
+  }, [y, f, m]), { clearExpandedSplits: S, setShowInsights: I, toggleSplit: v } = V(), { onEvent: T } = dt(), M = (x) => {
+    const _ = u.find((s) => s.guid === x);
+    if (_?.has_been_split) {
+      v(_.guid);
+      return;
+    }
+    T(bt.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: _?.account_guid,
+      transaction_guid: x
+    }), o?.(x);
+  }, L = w.useRef(null), k = at({
+    count: u.length,
+    getScrollElement: () => L.current,
+    estimateSize: (x) => U + (G(x, u) ? F : 0),
+    overscan: 5
+  });
+  return w.useEffect(() => k.measure(), [u]), w.useEffect(() => I(l), [l]), w.useEffect(() => () => S(), []), /* @__PURE__ */ e(lt, { component: "div", role: "list", sx: { width: h }, children: /* @__PURE__ */ e(A, { height: r, overflow: "auto", ref: L, role: "presentation", width: h, children: /* @__PURE__ */ a(
+    A,
+    {
+      height: (
+        // set the height to auto when there are no transactions so the zero state isn't set to 0
+        k.getVirtualItems().length === 0 ? "auto" : k.getTotalSize()
+      ),
+      position: "relative",
+      role: "presentation",
+      width: "100%",
+      children: [
+        (g || d) && i,
+        !g && !d && k.getVirtualItems().length === 0 && p,
+        !g && !d && k.getVirtualItems().length > 0 && k.getVirtualItems().map((x) => {
+          const _ = u[x.index], s = G(x.index, u), C = Bt(x.index, u), D = U + (s ? F : 0);
+          return /* @__PURE__ */ a(
+            A,
+            {
+              role: "listitem",
+              sx: {
+                height: D,
+                position: "absolute",
+                transform: `translateY(${x.start}px)`,
+                width: "100%",
+                bgcolor: "background.paper"
+              },
+              children: [
+                s && /* @__PURE__ */ e(Rt, { bgcolor: t, children: xt(_.date) }),
+                /* @__PURE__ */ e(
+                  Mt,
+                  {
+                    ...o && { onClick: M },
+                    transaction: _
+                  }
+                ),
+                /* @__PURE__ */ e(st, { sx: { ml: C ? 68 : 0 } })
+              ]
+            },
+            _.guid
+          );
+        })
+      ]
+    }
+  ) }) });
+}, Nt = O(Vt), Ot = (t) => {
+  const [n, r] = K({ width: 0, height: 0 });
+  return q(() => {
+    const i = () => {
+      if (t.current) {
+        const { offsetWidth: o, offsetHeight: l } = t.current;
+        r({ width: o, height: l });
+      }
+    };
+    return i(), window.addEventListener("resize", i), () => {
+      window.removeEventListener("resize", i);
+    };
+  }, [t]), n;
+}, Ht = ({
+  color: t,
+  legendStyle: n = {},
+  monthlyAmount: r,
+  monthlyAmountLabel: i,
+  trendAmount: o,
+  trendAmountLabel: l
+}) => {
+  const d = z();
+  return /* @__PURE__ */ a(
+    c,
+    {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 24,
+        justifyContent: "flex-start",
+        py: 4,
+        width: "100%",
+        ...n
+      },
+      children: [
+        i && /* @__PURE__ */ a(c, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+          /* @__PURE__ */ e(
+            "svg",
+            {
+              "aria-hidden": "true",
+              "aria-labelledby": "chartLegendLabel",
+              fill: "none",
+              height: "12",
+              role: "figure",
+              width: "12",
+              children: /* @__PURE__ */ e("rect", { fill: t, height: "12", rx: "2", width: "12" })
+            }
+          ),
+          /* @__PURE__ */ a(b, { id: "chartLegendLabel", variant: "caption", children: [
+            i,
+            ": ",
+            r
+          ] })
+        ] }),
+        l && /* @__PURE__ */ a(c, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+          /* @__PURE__ */ e(
+            "svg",
+            {
+              "aria-hidden": "true",
+              "aria-labelledby": "chartLegendLabel",
+              fill: "none",
+              height: "12",
+              role: "figure",
+              width: "12",
+              children: /* @__PURE__ */ e("rect", { fill: d.palette.chart.chart7, height: "12", rx: "2", width: "12" })
+            }
+          ),
+          /* @__PURE__ */ a(b, { id: "chartLegendLabel", variant: "caption", children: [
+            l,
+            ": ",
+            o
+          ] })
+        ] })
+      ]
+    }
+  );
+}, jt = (t, n) => {
+  if (t <= 0 || n <= 0) return "";
+  const r = Math.min(4, t / 2, n / 2);
+  return `M${r},0 L${t - r},0 Q${t},0 ${t},${r} L${t},${n} L0,${n} L0,${r} Q0,0 ${r},0 Z`;
+}, Gt = ({
+  colorRange: t,
+  data: n,
+  dataIndex: r,
+  removeSelectedTabColorChange: i,
+  selectedTabIndex: o,
+  style: l,
+  ...d
+}) => {
+  const f = z(), { ariaLabel: m, formattedAmount: h } = n[r], p = o === r ? "bold" : 400, g = l.x ?? 0, y = l.y ?? 0, u = l.width ?? 0, S = l.height ?? 0;
+  return /* @__PURE__ */ a("g", { "aria-label": m, children: [
+    /* @__PURE__ */ e(
+      "path",
+      {
+        ...d,
+        d: jt(u, S),
+        fill: t[r],
+        transform: `translate(${g}, ${y})`
+      }
+    ),
+    /* @__PURE__ */ e(
+      "text",
+      {
+        fill: f.palette.text.primary,
+        fontSize: 11,
+        fontWeight: i ? "bold" : p,
+        textAnchor: "middle",
+        x: g + u / 2,
+        y: y - 8,
+        children: h
+      }
+    )
+  ] });
+}, Ut = ({
+  amounts: t,
+  color: n,
+  data: r,
+  heightOverride: i,
+  margin: o = {
+    bottom: 30,
+    left: 40,
+    right: 40,
+    top: 20
+  },
+  onBarClick: l,
+  legendPosition: d = "bottom",
+  monthlyAmountLabel: f,
+  removeSelectedTabColorChange: m,
+  selectedTabIndex: h,
+  trendAmountLabel: p
+}) => {
+  const g = w.useRef(null), { height: y, width: u } = Ot(g), S = z(), I = w.useMemo(() => {
+    const s = r.map(({ value: $ }) => $), C = Math.min(...s), D = Math.max(...s);
+    return {
+      series: [
+        {
+          data: s,
+          type: "bar"
+        }
+      ],
+      xAxis: [
+        {
+          data: r.map(({ label: $ }) => $),
+          scaleType: "band",
+          categoryGapRatio: 0.45
+        }
+      ],
+      yAxis: [
+        {
+          scaleType: "linear",
+          min: C < 0 ? C * 1.2 : 0,
+          max: D > 0 ? D : 0
+        }
+      ]
+    };
+  }, [r]), v = w.useMemo(() => {
+    const s = `${n}80`;
+    return m ? r.map(() => n) : h == null ? [...new Array(r.length - 1).fill(s), n] : r.map((C, D) => D === h ? n : s);
+  }, [n, r, h]), T = w.useMemo(
+    () => r[h ?? r.length - 1],
+    [r, h]
+  ), L = r.reduce((s, C) => Math.min(s, C.value), 1 / 0) < 0, k = /* @__PURE__ */ e(
+    Ht,
+    {
+      color: n,
+      legendStyle: { pl: o.left },
+      monthlyAmount: T.formattedAmount,
+      monthlyAmountLabel: f,
+      trendAmount: t?.formattedAverage,
+      trendAmountLabel: p
+    }
+  ), x = f || p, _ = (s, { dataIndex: C }) => l?.(C);
+  return /* @__PURE__ */ a(c, { sx: { alignItems: "center", width: "100%" }, children: [
+    x && d === "top" && k,
+    /* @__PURE__ */ e(
+      A,
+      {
+        ref: g,
+        sx: {
+          height: i || 122,
+          mb: d === "top" ? 0 : 4,
+          mt: d === "top" ? 4 : 0,
+          touchAction: "pan-y",
+          width: "100%",
+          "& svg": {
+            touchAction: "pan-y",
+            userSelect: "none"
+          },
+          "& .recharts-wrapper": {
+            touchAction: "pan-y"
+          }
+        },
+        children: /* @__PURE__ */ a(
+          Ct,
+          {
+            height: y,
+            margin: {
+              bottom: o.bottom,
+              left: o.left,
+              right: o.right,
+              top: o.top || 45
+            },
+            series: I.series,
+            width: u,
+            xAxis: I.xAxis,
+            yAxis: [{ width: 0 }],
+            children: [
+              t?.average && /* @__PURE__ */ e(
+                j,
+                {
+                  labelAlign: "middle",
+                  lineStyle: {
+                    stroke: S.palette.chart.chart7,
+                    strokeDasharray: "4",
+                    strokeLinecap: "round",
+                    strokeWidth: 1
+                  },
+                  y: t?.average
+                }
+              ),
+              L && /* @__PURE__ */ e(
+                j,
+                {
+                  labelAlign: "middle",
+                  lineStyle: {
+                    stroke: S.palette.chart.chart7
+                  },
+                  y: 0
+                }
+              ),
+              /* @__PURE__ */ e(
+                vt,
+                {
+                  position: "bottom",
+                  slots: {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    axisTickLabel: ({ text: s, ownerState: C, ...D }) => {
+                      const $ = r[h ?? r.length - 1]?.label;
+                      return /* @__PURE__ */ e(
+                        "text",
+                        {
+                          ...D,
+                          style: {
+                            ...D.style,
+                            fontWeight: !m && $ === s ? "bold" : 400
+                          },
+                          children: s
+                        }
+                      );
+                    }
+                  },
+                  sx: (s) => ({
+                    "& .MuiChartsAxis-line": {
+                      stroke: L ? "none" : s.palette.text?.primary
+                    },
+                    "& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick": {
+                      display: "none"
+                    },
+                    "& .MuiChartsAxis-tickLabel": {
+                      transform: L ? "translateY(15px)" : {}
+                    }
+                  }),
+                  tickLabelStyle: {
+                    fontSize: 11
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                Tt,
+                {
+                  onItemClick: _,
+                  slots: {
+                    bar: (s) => {
+                      const { ownerState: C, ...D } = s;
+                      return /* @__PURE__ */ e(
+                        Gt,
+                        {
+                          ...D,
+                          colorRange: v,
+                          data: r,
+                          dataIndex: C.dataIndex,
+                          removeSelectedTabColorChange: m,
+                          selectedTabIndex: h ?? r.length - 1,
+                          style: {
+                            height: s.height,
+                            x: s.x,
+                            y: s.y,
+                            width: s.width
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    x && d === "bottom" && k
+  ] });
+}, Ft = ({
+  ariaLabel: t,
+  barChartProps: n,
+  beat: r,
+  data: i,
+  defaultSelectedIndex: o = 0,
+  icon: l,
+  isOpen: d = !1,
+  onClose: f,
+  onTabChange: m,
+  tipSection: h,
+  title: p,
+  transactionListProps: g = {}
+}) => {
+  const { common: y, transactions: u } = H(), { isCopyLoaded: S } = ht(), { sortedTransactionsWithSplits: I, tags: v } = W();
+  return S ? /* @__PURE__ */ e(Dt, { ariaLabelClose: y.close_aria, isOpen: d, onClose: f, title: p, children: /* @__PURE__ */ e(
+    Lt,
+    {
+      ariaLabel: t,
+      beat: r,
+      chart: (T, M) => /* @__PURE__ */ e(A, { sx: { pt: 16 }, children: /* @__PURE__ */ e(
+        Ut,
+        {
+          ...n,
+          onBarClick: (L) => {
+            M(L), n.onBarClick?.(L);
+          },
+          selectedTabIndex: T
+        }
+      ) }),
+      data: i,
+      defaultSelectedIndex: o,
+      icon: l,
+      onTabChange: m,
+      tipSection: h,
+      children: () => /* @__PURE__ */ a(w.Fragment, { children: [
+        /* @__PURE__ */ a(
+          c,
+          {
+            sx: {
+              alignItems: "center",
+              borderBottomColor: "divider",
+              borderBottomStyle: "solid",
+              borderBottomWidth: 1,
+              flexDirection: "row",
+              justifyContent: "space-between",
+              pb: 4,
+              pt: 16,
+              px: 24
+            },
+            children: [
+              /* @__PURE__ */ e(b, { bold: !0, variant: "body1", children: u.transactions_title }),
+              (g?.transaction || I.length > 0) && /* @__PURE__ */ e(
+                Y,
+                {
+                  onClick: () => {
+                    ot(
+                      g?.transaction || I,
+                      v
+                    );
+                  },
+                  startIcon: /* @__PURE__ */ e(rt, { name: "ios_share" }),
+                  sx: { height: 28 },
+                  children: /* @__PURE__ */ e(b, { bold: !0, variant: "body2", children: u.export_csv_btn })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(Nt, { ...g })
+      ] })
+    }
+  ) }) : /* @__PURE__ */ e(Q, {});
+}, De = Ft, Kt = ({
+  amount: t,
+  borderRadius: n = "2px",
+  completeColor: r = "success.main",
+  icon: i,
+  label: o,
+  leftLabel: l,
+  percentComplete: d = 0,
+  rightLabel: f,
+  sx: m
+}) => /* @__PURE__ */ e(c, { sx: { p: 24, width: "100%", ...m }, children: /* @__PURE__ */ a(c, { className: "details-container", sx: { gap: 16 }, children: [
+  /* @__PURE__ */ a(c, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(A, { children: i }),
+    /* @__PURE__ */ a(c, { children: [
+      /* @__PURE__ */ e(N, { variant: "body2", children: o }),
+      typeof t == "string" ? /* @__PURE__ */ e(tt, { children: t }) : t
+    ] })
+  ] }),
+  /* @__PURE__ */ a(c, { sx: { gap: 4 }, children: [
+    /* @__PURE__ */ e(
+      c,
+      {
+        sx: {
+          bgcolor: "divider",
+          borderRadius: n,
+          flexDirection: "row",
+          height: 16,
+          width: "100%"
+        },
+        children: /* @__PURE__ */ e(
+          A,
+          {
+            sx: {
+              bgcolor: r,
+              borderRadius: n,
+              height: 16,
+              width: `${d}%`
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ a(c, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ e(b, { variant: "body2", children: l }),
+      /* @__PURE__ */ e(b, { variant: "body2", children: f })
+    ] })
+  ] })
+] }) }), Se = Kt, Ie = ({
+  title: t,
+  description: n,
+  callToAction: r,
+  instanceSlot: i = void 0,
+  onCtaClick: o = () => {
+  }
+}) => /* @__PURE__ */ a(St, { sx: { pt: 8, pr: 16, pb: 12, pl: 8, borderRadius: "8px" }, children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      sx: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        pt: 4,
+        pl: 8
+      },
+      children: /* @__PURE__ */ e(b, { bold: !0, variant: "body1", children: t })
+    }
+  ),
+  /* @__PURE__ */ a(
+    c,
+    {
+      sx: {
+        gap: 16,
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between"
+      },
+      children: [
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(c, { sx: { pt: 2, pl: 8, pb: 8 }, children: /* @__PURE__ */ e(N, { sx: { fontWeight: 400 }, variant: "subtitle2", children: n }) }),
+          /* @__PURE__ */ e(c, { sx: { alignItems: "flex-start" }, children: /* @__PURE__ */ e(
+            Y,
+            {
+              onClick: o,
+              sx: {
+                p: 0,
+                height: 24,
+                px: 8,
+                py: 8,
+                fontWeight: 600,
+                fontSize: 13,
+                lineHeight: "16px"
+              },
+              variant: "text",
+              children: r
+            }
+          ) })
+        ] }),
+        i
+      ]
+    }
+  )
+] });
+export {
+  Ut as B,
+  De as C,
+  Ie as E,
+  Rt as S,
+  Nt as T,
+  Mt as a,
+  Se as b,
+  ve as c,
+  Te as d,
+  Ot as e,
+  Lt as f,
+  Bt as h,
+  G as s,
+  V as u
+};