@zeniai/web-components 3.16.33 → 3.16.34

package/dist/ExpenseAutomationOverviewPage-m3uEsbuA.js

@@ -0,0 +1,673 @@
+import { u as Q, j as t, a1 as ne, aP as ie, X as ae, Y as le, aQ as de, q as I, r as _ } from "./vendor-.pnpm-DxbX2tX4.js";
+import * as s from "react";
+import { useMemo as ce } from "react";
+import { css as U, keyframes as he } from "@emotion/react";
+import r from "@emotion/styled";
+import { zeniDate as pe, dateNow as me } from "@zeniai/client-epic-state";
+import { a as D, C as i, t as a, S as o, G as j, u as ge, f8 as ue, j as y, x as xe, Z as Ce, aE as fe, ku as ye, B as je, kv as B, ah as ve, eN as ke, hW as $e, b2 as Se, H as be, ag as Le, em as V, p as Me, aj as we, L as De, J as Ee, y as ee } from "./index-rO5GHlOg.js";
+import { B as We } from "./BusyIndication-Cw9yBgw7.js";
+import { S as Te } from "./transaction-placeholder-CpOwZAMG.js";
+const Re = D.getLocalizedStrings().expenseAutomation, Pe = D.getLocalizedStrings().dateFormat.visual;
+function Ae({
+  data: e,
+  height: d
+}) {
+  const u = Q(), $ = e.map((x) => ({
+    month: pe(
+      `${x.period.year}-${String(x.period.month).padStart(2, "0")}-01`
+    ).format(Pe.MMMYYFormat),
+    count: Math.round(x.auditScore)
+  }));
+  return /* @__PURE__ */ t.jsxs(_e, { children: [
+    /* @__PURE__ */ t.jsx(Ie, { children: Re.overview.monthEndCloseTrend }),
+    /* @__PURE__ */ t.jsx(ne, { height: d, width: "100%", children: /* @__PURE__ */ t.jsxs(ie, { data: $, children: [
+      /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsxs("linearGradient", { id: "scoreGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ t.jsx(
+          "stop",
+          {
+            offset: "0%",
+            stopColor: i.brandColorJade,
+            stopOpacity: 0.8
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          "stop",
+          {
+            offset: "100%",
+            stopColor: i.brandColorJade,
+            stopOpacity: 0.1
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ t.jsx(
+        ae,
+        {
+          dataKey: "month",
+          axisLine: { stroke: u.colors.grey3 },
+          tickLine: !1,
+          label: {
+            color: u.colors.hero,
+            fontSize: a.smallRegular.fontSize,
+            fontWeight: a.smallRegular.fontWeight,
+            fontFamily: a.smallRegular.fontFamily
+          }
+        }
+      ),
+      /* @__PURE__ */ t.jsx(le, { hide: !0 }),
+      /* @__PURE__ */ t.jsx(
+        de,
+        {
+          type: "monotone",
+          dataKey: "count",
+          stroke: i.brandColorJade,
+          strokeWidth: 2,
+          fill: "url(#scoreGradient)",
+          dot: !1,
+          activeDot: { r: 5 }
+        }
+      )
+    ] }) })
+  ] });
+}
+const Ie = r(j)`
+  color: ${(e) => e.theme.colors.champion};
+`, _e = r.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp3};
+  align-items: center;
+  width: 100%;
+`, Be = (e) => /* @__PURE__ */ s.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ s.createElement("path", { d: "M8.60956 10.3995L13.5175 15.3075", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M6.69507 20.8607C5.11904 22.4368 2.0939 21.9185 2.0939 21.9185C2.0939 21.9185 1.5333 18.8933 3.15164 17.3173C3.3661 17.0602 3.63638 16.8555 3.94192 16.7187C4.24746 16.5819 4.58018 16.5166 4.91476 16.5278C5.24934 16.5391 5.57695 16.6265 5.87263 16.7835C6.16831 16.9404 6.42428 17.1628 6.62103 17.4337C6.87992 17.6354 7.09064 17.8923 7.23789 18.1856C7.38513 18.479 7.4652 18.8014 7.47229 19.1296C7.47938 19.4578 7.41331 19.7834 7.27887 20.0828C7.14444 20.3822 6.94501 20.648 6.69507 20.8607Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M21.8313 2.08577C12.8617 1.18669 10.1962 7.52255 7.02295 13.2978L10.6087 16.8836C16.3945 13.6998 22.7304 11.0554 21.8313 2.08577Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M8.9692 9.77558L7.58356 9.31018C7.11291 9.18266 6.61676 9.18307 6.14632 9.31138C5.67589 9.43968 5.24822 9.69121 4.90748 10.04L3.41606 11.5314C3.33077 11.6175 3.2686 11.7237 3.23532 11.8402C3.20203 11.9567 3.19871 12.0797 3.22567 12.1978C3.25893 12.3079 3.32198 12.4067 3.40784 12.4832C3.4937 12.5597 3.59904 12.6111 3.71223 12.6315L7.03354 13.2979", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M14.1733 14.9373L14.607 16.3335C14.7345 16.8041 14.7341 17.3003 14.6058 17.7707C14.4775 18.2411 14.226 18.6688 13.8771 19.0096L12.3963 20.501C12.3137 20.588 12.2094 20.6515 12.0942 20.6849C11.9789 20.7184 11.8569 20.7206 11.7405 20.6914C11.6279 20.6609 11.5262 20.599 11.4475 20.5128C11.3688 20.4266 11.3164 20.3198 11.2963 20.2048L10.6299 16.8835", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M16.4475 9.37366C17.499 9.37366 18.3514 8.52124 18.3514 7.46973C18.3514 6.41822 17.499 5.5658 16.4475 5.5658C15.3959 5.5658 14.5435 6.41822 14.5435 7.46973C14.5435 8.52124 15.3959 9.37366 16.4475 9.37366Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), Ne = (e) => /* @__PURE__ */ s.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ s.createElement("path", { d: "M5.14285 7.34697C5.00759 7.34697 4.89795 7.23733 4.89795 7.10208C4.89795 6.96682 5.00759 6.85718 5.14285 6.85718", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M5.14288 7.34697C5.27814 7.34697 5.38778 7.23733 5.38778 7.10208C5.38778 6.96682 5.27814 6.85718 5.14288 6.85718", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M5.14285 10.7754C5.00759 10.7754 4.89795 10.6658 4.89795 10.5305C4.89795 10.3953 5.00759 10.2856 5.14285 10.2856", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M5.14288 10.7754C5.27814 10.7754 5.38778 10.6658 5.38778 10.5305C5.38778 10.3953 5.27814 10.2856 5.14288 10.2856", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M5.14285 14.2042C5.00759 14.2042 4.89795 14.0945 4.89795 13.9593C4.89795 13.824 5.00759 13.7144 5.14285 13.7144", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M5.14288 14.2042C5.27814 14.2042 5.38778 14.0945 5.38778 13.9593C5.38778 13.824 5.27814 13.7144 5.14288 13.7144", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M9.06124 10.7754C8.92599 10.7754 8.81635 10.6658 8.81635 10.5305C8.81635 10.3953 8.92599 10.2856 9.06124 10.2856", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M9.06122 10.7754C9.19647 10.7754 9.30612 10.6658 9.30612 10.5305C9.30612 10.3953 9.19647 10.2856 9.06122 10.2856", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M9.06124 7.34697C8.92599 7.34697 8.81635 7.23733 8.81635 7.10208C8.81635 6.96682 8.92599 6.85718 9.06124 6.85718", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M9.06122 7.34697C9.19647 7.34697 9.30612 7.23733 9.30612 7.10208C9.30612 6.96682 9.19647 6.85718 9.06122 6.85718", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M12.9796 7.34697C12.8443 7.34697 12.7347 7.23733 12.7347 7.10208C12.7347 6.96682 12.8443 6.85718 12.9796 6.85718", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M12.9796 7.34697C13.1149 7.34697 13.2245 7.23733 13.2245 7.10208C13.2245 6.96682 13.1149 6.85718 12.9796 6.85718", stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ s.createElement("path", { d: "M8.32655 17.1429H2.449C2.0593 17.1429 1.68555 16.9881 1.40999 16.7125C1.13442 16.437 0.979614 16.0631 0.979614 15.6735V3.91836C0.979614 3.52866 1.13442 3.15491 1.40999 2.87935C1.68555 2.60379 2.0593 2.44897 2.449 2.44897H15.6735C16.0632 2.44897 16.437 2.60379 16.7125 2.87935C16.9881 3.15491 17.1429 3.52866 17.1429 3.91836V8.32653", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M5.38776 3.91827V0.979492", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M12.7347 3.91827V0.979492", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M17.1429 23.0205C20.3889 23.0205 23.0204 20.389 23.0204 17.1429C23.0204 13.8969 20.3889 11.2654 17.1429 11.2654C13.8968 11.2654 11.2653 13.8969 11.2653 17.1429C11.2653 20.389 13.8968 23.0205 17.1429 23.0205Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ s.createElement("path", { d: "M19.7408 17.1428H17.1429V14.5459", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), N = {
+  transaction_categorization: Te,
+  missing_receipts: $e,
+  flux_analysis: ke,
+  je_schedules: B,
+  month_end_insights: ve,
+  reconciliation: B
+}, ze = (e) => e.filter(
+  (d) => d.id !== "month_end_insights"
+), Fe = (e) => e.filter(
+  (d) => d.id === "month_end_insights"
+), He = ({ string: e, count: d }) => /* @__PURE__ */ t.jsxs(ut, { children: [
+  d,
+  /* @__PURE__ */ t.jsx(j, { children: e })
+] }), {
+  expenseAutomation: g,
+  common: c,
+  dateFormat: z
+} = D.getLocalizedStrings();
+function St({
+  monthEndCloseChecksView: e,
+  isRealtimeInsightsFeatureEnabled: d,
+  onMonthEndCheckClick: u,
+  onBackClick: $,
+  handleReviewButtonClick: x,
+  onPeriodChange: E,
+  onReload: W
+}) {
+  const h = Q(), te = ge();
+  ue({
+    componentName: "expense_automation.overview"
+  });
+  const oe = ce(() => {
+    if (e.monthEndCloseChecks?.targetCloseDate == null)
+      return c.strings.hyphen;
+    const n = e.monthEndCloseChecks.targetCloseDate?.diff(
+      me(),
+      "days"
+    );
+    return n > 0 ? n : 0;
+  }, [e.monthEndCloseChecks?.targetCloseDate]);
+  if (e.monthEndCloseChecks == null || ["Not-Started", "In-Progress"].includes(
+    e.fetchState
+  ) || ["Not-Started", "In-Progress"].includes(
+    e.monthClosePerformanceTrendFetchStatus.fetchState
+  ))
+    return /* @__PURE__ */ t.jsx(
+      X,
+      {
+        "data-testid": y(
+          "expense-automation-overview-page-activity-indicator"
+        ),
+        children: /* @__PURE__ */ t.jsx(We, { fetchState: "In-Progress" })
+      }
+    );
+  if (e.monthEndCloseChecks == null || e.fetchState === "Error" || e.monthClosePerformanceTrendFetchStatus.fetchState === "Error")
+    return /* @__PURE__ */ t.jsx(X, { children: /* @__PURE__ */ t.jsx(
+      rt,
+      {
+        "data-testid": y(
+          "expense-automation-overview-page-reload-page"
+        ),
+        onClick: W,
+        children: /* @__PURE__ */ t.jsx(xe, {})
+      }
+    ) });
+  const {
+    monthEndCloseChecks: {
+      auditSummary: p,
+      monthEndCloseCheckList: T,
+      reportEmailSentDate: R
+    },
+    refreshStatus: re
+  } = e;
+  let v, C;
+  p.auditScorePercentage <= 50 ? (v = i.important, C = i.importantLight) : p.auditScorePercentage <= 75 ? (v = i.alert, C = i.alertLight) : (v = i.success, C = i.successLight);
+  const se = /* @__PURE__ */ t.jsx(
+    et,
+    {
+      "data-testid": y(
+        "expense-automation-overview-page-refresh-icon"
+      ),
+      onClick: W,
+      children: /* @__PURE__ */ t.jsx(
+        Ce,
+        {
+          style: {
+            marginTop: o.sp1
+          },
+          placement: "bottom",
+          title: c.texts.refresh,
+          enterDelay: 600,
+          children: /* @__PURE__ */ t.jsx(
+            nt,
+            {
+              $spinning: re.fetchState === "In-Progress"
+            }
+          )
+        }
+      )
+    }
+  ), P = ze(
+    T
+  ), A = Fe(
+    T
+  );
+  return /* @__PURE__ */ t.jsxs(Ye, { children: [
+    /* @__PURE__ */ t.jsx(
+      fe,
+      {
+        title: /* @__PURE__ */ t.jsx(
+          ye,
+          {
+            pickerLabelStyle: { ...a.largeSemiBold.cssObject },
+            onPeriodChange: E,
+            monthEndCloseChecksView: e
+          }
+        ),
+        showBackButton: !0,
+        onBackClick: $,
+        source: "ExpenseAutomationOverviewPage",
+        rightSideComponent: se
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(qe, { children: [
+      /* @__PURE__ */ t.jsx(Ge, { children: /* @__PURE__ */ t.jsx(Oe, { windowSize: te, children: /* @__PURE__ */ t.jsxs(Je, { children: [
+        /* @__PURE__ */ t.jsxs(Ke, { children: [
+          /* @__PURE__ */ t.jsx(Ve, { children: /* @__PURE__ */ t.jsx(
+            I,
+            {
+              background: !0,
+              value: Math.floor(p.auditScorePercentage),
+              text: `${Math.floor(p.auditScorePercentage)}${c.strings.percentage}`,
+              strokeWidth: 10,
+              styles: {
+                ..._({
+                  strokeLinecap: "butt",
+                  pathColor: v,
+                  textColor: h.colors.primary,
+                  trailColor: h.colors.grey2,
+                  backgroundColor: C
+                }),
+                root: {
+                  width: "96px",
+                  height: "96px",
+                  backgroundColor: C,
+                  borderRadius: "50%"
+                },
+                text: {
+                  fontSize: a.h6Medium.fontSize,
+                  fontFamily: a.h6Medium.fontFamily,
+                  lineHeight: a.h6Medium.lineHeight,
+                  fontWeight: a.h6Medium.fontWeight,
+                  letterSpacing: a.h6Medium.letterSpacing,
+                  fill: i.primaryLight
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ t.jsx(dt, { children: /* @__PURE__ */ t.jsxs(Xe, { children: [
+            /* @__PURE__ */ t.jsxs(ct, { children: [
+              /* @__PURE__ */ t.jsxs(tt, { children: [
+                /* @__PURE__ */ t.jsx(Ze, { children: g.overview.confidenceScoreTitle }),
+                /* @__PURE__ */ t.jsx(gt, {}),
+                p.auditReportLastGeneratedDate != null ? /* @__PURE__ */ t.jsx(ot, { children: p.auditReportLastGeneratedDate.utc(!0).fromNow() }) : null
+              ] }),
+              /* @__PURE__ */ t.jsx(L, { children: g.overview.auditScoreDescription })
+            ] }),
+            /* @__PURE__ */ t.jsxs(mt, { children: [
+              /* @__PURE__ */ t.jsxs(q, { children: [
+                /* @__PURE__ */ t.jsx(ht, {}),
+                /* @__PURE__ */ t.jsx(L, { children: g.overview.targetClose }),
+                e.monthEndCloseChecks.targetCloseDate != null ? /* @__PURE__ */ t.jsx(w, { children: e.monthEndCloseChecks.targetCloseDate.format(
+                  z.visual.MMMDCommaYYYYformat
+                ) }) : /* @__PURE__ */ t.jsx(w, { children: c.strings.hyphen })
+              ] }),
+              /* @__PURE__ */ t.jsxs(q, { children: [
+                /* @__PURE__ */ t.jsx(pt, {}),
+                /* @__PURE__ */ t.jsx(L, { children: g.overview.daysToClose }),
+                /* @__PURE__ */ t.jsx(w, { children: oe })
+              ] })
+            ] }),
+            /* @__PURE__ */ t.jsx(
+              je,
+              {
+                style: { alignSelf: "flex-start" },
+                variant: "primary",
+                label: c.texts.review,
+                onClick: x
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          Ae,
+          {
+            data: e.monthClosePerformanceTrend,
+            height: 160
+          }
+        )
+      ] }) }) }),
+      /* @__PURE__ */ t.jsxs(Qe, { children: [
+        /* @__PURE__ */ t.jsxs(F, { children: [
+          /* @__PURE__ */ t.jsx(k, { cardDisabled: !1, children: g.overview.checklist }),
+          /* @__PURE__ */ t.jsx(H, { children: P.map((n, S) => {
+            const l = n.isDisabled;
+            let m, f;
+            return n.progress <= 50 ? (m = i.important, f = i.importantLight) : n.progress <= 75 ? (m = i.alert, f = i.alertLight) : (m = i.success, f = i.successLight), /* @__PURE__ */ t.jsxs(
+              Y,
+              {
+                index: S,
+                totalCards: P.length,
+                "data-testid": y(
+                  "expense-automation-overview-page-month-end-close-check-card",
+                  n.id
+                ),
+                cardDisabled: l,
+                onClick: () => {
+                  l === !1 && u(n.id);
+                },
+                children: [
+                  /* @__PURE__ */ t.jsxs(K, { children: [
+                    /* @__PURE__ */ t.jsx(
+                      Z,
+                      {
+                        cardDisabled: l,
+                        isDarkMode: h.mode === "dark",
+                        children: /* @__PURE__ */ t.jsx(
+                          J,
+                          {
+                            as: N[n.id] ?? null
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ t.jsxs(M, { children: [
+                      /* @__PURE__ */ t.jsx(k, { cardDisabled: l, children: n.title }),
+                      /* @__PURE__ */ t.jsx(
+                        G,
+                        {
+                          className: "card-description",
+                          cardDisabled: l,
+                          children: n.description
+                        }
+                      )
+                    ] })
+                  ] }),
+                  n.metrics.map((b) => /* @__PURE__ */ t.jsx(
+                    He,
+                    {
+                      string: b.label,
+                      count: b.value
+                    },
+                    b.columnIndex
+                  )),
+                  /* @__PURE__ */ t.jsx(
+                    I,
+                    {
+                      background: !0,
+                      value: Math.floor(n.progress),
+                      text: `${Math.floor(n.progress)}${c.strings.percentage}`,
+                      strokeWidth: 10,
+                      styles: {
+                        ..._({
+                          strokeLinecap: "butt",
+                          pathColor: m,
+                          textColor: h.colors.primary,
+                          trailColor: h.colors.grey2,
+                          backgroundColor: f
+                        }),
+                        root: {
+                          width: o.sp7,
+                          height: o.sp7,
+                          backgroundColor: f,
+                          borderRadius: "50%"
+                        },
+                        text: {
+                          fontSize: a.h6Medium.fontSize,
+                          fontFamily: a.h6Medium.fontFamily,
+                          lineHeight: a.h6Medium.lineHeight,
+                          fontWeight: a.h6Medium.fontWeight,
+                          letterSpacing: a.h6Medium.letterSpacing,
+                          fill: i.primaryLight
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(
+                    O,
+                    {
+                      className: "card-right-chevron",
+                      disabled: l
+                    }
+                  )
+                ]
+              },
+              n.id
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ t.jsxs(F, { children: [
+          /* @__PURE__ */ t.jsx(k, { cardDisabled: !1, children: g.overview.checklistReport }),
+          /* @__PURE__ */ t.jsx(H, { children: A.map((n, S) => {
+            const l = !d, m = l === !0 || n.id === "month_end_insights" && e.monthEndCloseChecks?.reportEmailSentDate != null;
+            return /* @__PURE__ */ t.jsxs(
+              Y,
+              {
+                index: S,
+                totalCards: A.length,
+                "data-testid": y(
+                  "expense-automation-overview-page-month-end-close-check-card",
+                  n.id
+                ),
+                cardDisabled: l,
+                onClick: () => {
+                  m === !1 && u(n.id);
+                },
+                children: [
+                  /* @__PURE__ */ t.jsxs(K, { children: [
+                    /* @__PURE__ */ t.jsx(
+                      Z,
+                      {
+                        cardDisabled: l,
+                        isDarkMode: h.mode === "dark",
+                        children: /* @__PURE__ */ t.jsx(
+                          J,
+                          {
+                            as: N[n.id] ?? null
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ t.jsxs(M, { children: [
+                      /* @__PURE__ */ t.jsx(k, { cardDisabled: l, children: n.title }),
+                      /* @__PURE__ */ t.jsx(
+                        G,
+                        {
+                          className: "card-description",
+                          cardDisabled: l,
+                          children: n.description
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ t.jsxs(Ue, { children: [
+                    n.id === "month_end_insights" && R != null ? /* @__PURE__ */ t.jsxs(lt, { children: [
+                      /* @__PURE__ */ t.jsx(it, { children: c.texts.closed }),
+                      /* @__PURE__ */ t.jsx(at, { children: R.format(
+                        z.visual.MMMDCommaYYYYformat
+                      ) })
+                    ] }) : null,
+                    /* @__PURE__ */ t.jsx(M, { children: /* @__PURE__ */ t.jsx(
+                      O,
+                      {
+                        className: "card-right-chevron",
+                        disabled: l
+                      }
+                    ) })
+                  ] })
+                ]
+              },
+              n.id
+            );
+          }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+const Ye = r.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  row-gap: ${o.sp3};
+`, Ge = r.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp6};
+  background-color: ${(e) => e.theme.colors.grey5};
+  box-shadow: ${(e) => e.theme.colors.elevation1};
+  padding-bottom: ${o.sp5};
+`, Oe = r.div`
+  background-repeat: no-repeat;
+  background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/expense-automation-background.png);
+`, Je = r.div`
+  display: flex;
+  align-items: center;
+  padding-left: ${o.sp8};
+  padding-right: ${o.sp8};
+  justify-content: space-between;
+  column-gap: ${o.sp4};
+  height: 100%;
+`, Ze = r(be)`
+  color: ${(e) => e.theme.colors.primary};
+`, L = r(Me)`
+  color: ${(e) => e.theme.colors.hero};
+  font-family: ${V.Roboto};
+`, Ke = r.div`
+  display: flex;
+  column-gap: ${o.sp4};
+  align-items: center;
+`, Xe = r.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp3};
+  width: 450px;
+`, qe = r.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+  row-gap: ${o.sp4};
+`, Qe = r.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp5};
+  padding-bottom: ${o.sp4};
+  padding-top: ${o.sp3};
+  padding-left: ${o.sp8};
+  padding-right: ${o.sp8};
+`, k = r(De)`
+  color: ${(e) => e.cardDisabled ? e.theme.colors.grey2 : e.theme.colors.primary};
+`, F = r.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp3};
+`, H = r.div`
+  display: flex;
+  flex-direction: column;
+`, Y = r.div`
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding: ${o.sp4};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-top-right-radius: ${(e) => e.index === 0 ? o.sp2 : 0};
+  border-top-left-radius: ${(e) => e.index === 0 ? o.sp2 : 0};
+  border-bottom-right-radius: ${(e) => e.index === e.totalCards - 1 ? o.sp2 : 0};
+  border-bottom-left-radius: ${(e) => e.index === e.totalCards - 1 ? o.sp2 : 0};
+  cursor: ${(e) => e.cardDisabled ? "not-allowed" : "pointer"};
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp8};
+  justify-content: space-between;
+  box-shadow: ${(e) => e.theme.colors.elevation1};
+  ${(e) => e.cardDisabled === !1 ? U`
+          &:hover {
+            border: 1px solid ${e.theme.colors.primary};
+            .card-right-chevron,
+            .card-description,
+            .progress-complete-text {
+              color: ${e.theme.colors.primary};
+            }
+          }
+        ` : null}
+`, G = r(j)`
+  color: ${(e) => e.cardDisabled ? e.theme.colors.grey2 : e.theme.colors.hero};
+`, Ue = r.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp7};
+`, M = r.div``, O = r(Ee)`
+  color: ${(e) => e.disabled ? e.theme.colors.grey2 : e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+`, J = r.div`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.primary};
+`, Z = r.div`
+  width: ${o.sp7};
+  height: ${o.sp7};
+  background-color: ${(e) => e.isDarkMode ? e.theme.colors.brandColorJadeDark : e.theme.colors.brandColorJadeLight};
+  border-radius: 50%;
+  opacity: ${(e) => e.cardDisabled ? 0.2 : 1};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, K = r.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp3};
+  width: 352px;
+`, Ve = r.div`
+  display: flex;
+  height: 96px;
+  justify-content: center;
+  margin-bottom: ${o.sp7};
+  margin-left: ${o.sp7};
+`, et = r.div`
+  color: ${(e) => e.theme.colors.hero};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, tt = r.div`
+  display: flex;
+  align-items: flex-end;
+  column-gap: ${o.sp2};
+`, ot = r(j)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-bottom: ${o.sp1};
+`, rt = r.div`
+  height: 96px;
+  width: 96px;
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${o.sp5};
+    color: ${(e) => e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, X = r.div`
+  display: flex;
+  height: 100vh;
+  overflow: auto;
+  background-color: ${(e) => e.theme.colors.grey5};
+  justify-content: center;
+  align-items: center;
+`, st = he`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`, nt = r(Se, {
+  shouldForwardProp: (e) => typeof e == "string" && e !== "$spinning"
+})`
+  cursor: pointer;
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+  animation: ${(e) => e.$spinning ? U`
+          ${st} 2s linear infinite;
+        ` : "none"};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, it = r(ee)`
+  color: ${(e) => e.theme.colors.success};
+`, at = r(j)`
+  color: ${(e) => e.theme.colors.success};
+`, lt = r.div`
+  width: 82px;
+  text-align: center;
+`, dt = r.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+`, ct = r.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp1};
+`, q = r.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp2};
+`, w = r(we)`
+  color: ${(e) => e.theme.colors.primary};
+  font-family: ${V.Roboto};
+`, ht = r(Be)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, pt = r(Ne)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, mt = r.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  row-gap: ${o.sp2};
+`, gt = r(Le)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  margin-bottom: 6px;
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ut = r(ee)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp1};
+`;
+export {
+  St as default
+};