@zeniai/web-components 3.16.31 → 3.16.32

package/dist/TreasuryOverviewPage-C-yNzG5C.js

@@ -0,0 +1,1890 @@
+import { u as L, j as t, V as Ke, a1 as me, aP as xe, X as ge, Y as ue, aQ as ye, R as Ue } from "./vendor-.pnpm-DxbX2tX4.js";
+import Je, { useState as q, useEffect as de, useRef as Xe, useMemo as O, forwardRef as qe, useCallback as J, memo as Ae } from "react";
+import i from "@emotion/styled";
+import { stringToUnionStrict as Ze, zeniDate as V } from "@zeniai/client-epic-state";
+import { R as m, a as I, u as k, eV as Qe, t as re, j as W, E as _, ab as fe, S as o, G as b, fI as et, aa as tt, D as s, a5 as Y, C as y, p as D, x as He, P as Oe, dz as ot, i1 as it, B as nt, dB as st, f8 as rt, Z as ce, aE as at, A as lt, ag as dt, hs as ee, av as R, J as ct, kf as ht, eD as pt, h7 as mt, aI as xt, hK as gt } from "./index-Cynhe4j_.js";
+import { D as ut } from "./commonDimensions-kvPZ9uhR.js";
+import { H as Ee, a as Ne, e as yt, O as ft, d as wt } from "./common-Rl8Wheq8.js";
+import { css as we } from "@emotion/react";
+import { B as $e } from "./BoxItem-DR7ZjTUs.js";
+import { a as $t, g as he } from "./treasuryColorHelper-73WJKkar.js";
+import { S as jt } from "./transaction-placeholder-CpOwZAMG.js";
+import { M as St } from "./MoreMenuButton-DlyZNbUC.js";
+import { a as vt } from "./money-2cg1MuG4.js";
+import { S as bt } from "./shield-DOlUxcFf.js";
+const pe = I.getLocalizedStrings().spendManagement.treasury.overviewPage.header, Tt = {
+  key: "description",
+  value: pe.trasnactionTitle,
+  sortOrder: "ascending",
+  width: new m(120, 250, 400, 400, 500)
+}, Ct = {
+  key: "date",
+  value: pe.paymentDate,
+  sortOrder: "ascending",
+  width: new m(100, 120, 200, 250, 300)
+}, kt = {
+  key: "amount",
+  value: pe.amount,
+  sortOrder: "ascending",
+  width: new m(80, 100, 150, 180, 200)
+}, ae = () => [
+  Tt,
+  Ct,
+  kt
+], v = {
+  containerPaddingLeft: o.sp4,
+  containerPaddingRight: o.sp4,
+  containerPaddingTop: o.sp3,
+  containerPaddingBottom: o.sp3,
+  headerLastColumnTopPadding: new m(s[0], s[4]),
+  headerLastColumnRightPadding: new m(s[3], s[11]),
+  headerLastColumnBottomPadding: new m(s[0], s[4]),
+  headerLastColumnLeftPadding: new m(s[3], s[11]),
+  headerHeight: new m(Ee, Ne),
+  sortIconSize: new m(s[2], s[2]),
+  headerPaddingTop: new m(s[0], 2)
+};
+function Pt({
+  companyNameSticky: e,
+  sortConfig: n,
+  onColumnSortConfigChanged: a
+}) {
+  const p = L(), l = k(), [r, u] = q(
+    ae()
+  );
+  de(() => {
+    const d = [...r];
+    for (const c of d)
+      c.key === n.sortKey ? c.sortOrder = n.sortOrder : c.sortOrder = "ascending";
+    u(d);
+  }, [n.sortKey, n.sortOrder]);
+  const h = (d, c) => {
+    let f = c;
+    n.sortKey === d && (f = c === "ascending" ? "descending" : "ascending"), a(d, f);
+  }, g = r.find((d) => d.key === n.sortKey) ?? r[0], x = (d) => r.find((c) => c.key === d)?.value ?? "", w = r.map((d) => d.key), S = I.getLocalizedStrings().spendManagement.chargeCard.cardList;
+  return l === "small" ? /* @__PURE__ */ t.jsxs(Dt, { windowSize: l, children: [
+    /* @__PURE__ */ t.jsxs(Bt, { children: [
+      /* @__PURE__ */ t.jsx(Ht, { children: /* @__PURE__ */ t.jsx(At, {}) }),
+      /* @__PURE__ */ t.jsx(
+        Qe,
+        {
+          title: S.sortBy,
+          placeholder: S.sortBy,
+          pickerValues: w,
+          valueToLabel: x,
+          selectedValue: n.sortKey,
+          onPickerSelectionChanged: (d) => {
+            h(
+              d,
+              "ascending"
+            );
+          },
+          optionTextStyle: re.extraSmallRegular,
+          titleTextStyle: re.extraSmallRegular,
+          titleColor: p.colors.primary,
+          selectedOptionColor: p.colors.hero,
+          optionBackgroundColor: p.colors.grey5,
+          downChevronVisible: !1,
+          backgroundColor: p.colors.grey4
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsxs(
+      Nt,
+      {
+        onClick: () => h(
+          g.key,
+          g.sortOrder
+        ),
+        "data-testid": W(
+          "mobile-cards-list-sort-clicked",
+          n.sortKey
+        ),
+        children: [
+          /* @__PURE__ */ t.jsx(_, { children: g.value }),
+          /* @__PURE__ */ t.jsx(
+            je,
+            {
+              windowSize: l,
+              sortDataValue: n.sortKey,
+              headerdata: g,
+              children: /* @__PURE__ */ t.jsx(
+                Se,
+                {
+                  windowSize: l,
+                  isSelected: n.sortKey === g.key,
+                  children: /* @__PURE__ */ t.jsx(fe, {})
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ t.jsx(It, { windowSize: l, children: /* @__PURE__ */ t.jsx(Lt, { children: r.map(
+    (d) => d.width.value(l) !== 0 && /* @__PURE__ */ t.jsxs(
+      Rt,
+      {
+        companyNameSticky: e,
+        sortDataValue: n.sortKey,
+        actualDataValue: d.key,
+        wrapperWidth: d.width,
+        windowSize: l,
+        children: [
+          /* @__PURE__ */ t.jsxs(
+            Et,
+            {
+              onClick: () => h(
+                d.key,
+                d.sortOrder
+              ),
+              "data-testid": W(
+                "cards-list-sort-clicked",
+                n.sortKey
+              ),
+              children: [
+                /* @__PURE__ */ t.jsx(_, { children: d.value }),
+                /* @__PURE__ */ t.jsx(
+                  je,
+                  {
+                    windowSize: l,
+                    sortDataValue: n.sortKey,
+                    headerdata: d,
+                    children: /* @__PURE__ */ t.jsx(
+                      Se,
+                      {
+                        windowSize: l,
+                        isSelected: n.sortKey === d.key,
+                        children: /* @__PURE__ */ t.jsx(fe, {})
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            Ot,
+            {
+              sortDataValue: n.sortKey,
+              windowSize: l,
+              isVisible: n.sortKey === d.key && d.key !== "date",
+              children: /* @__PURE__ */ t.jsx(
+                Mt,
+                {
+                  onClick: () => h("date", "ascending"),
+                  "data-testid": W(
+                    "cards-list-sort-cancel",
+                    n.sortKey
+                  )
+                }
+              )
+            }
+          )
+        ]
+      },
+      d.key
+    )
+  ) }) });
+}
+const zt = Je.memo(Pt), It = i.div`
+  top: ${o.sp0};
+  left: ${o.sp0};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+  position: sticky;
+  margin-left: ${o.sp8};
+  margin-right: ${o.sp8};
+`, Lt = i.div`
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${v.containerPaddingTop} ${v.containerPaddingRight}
+    ${v.containerPaddingBottom} ${v.containerPaddingLeft};
+  justify-content: space-between;
+`, Dt = i(b)`
+  top: ${o.sp0};
+  left: ${o.sp0};
+  min-height: ${(e) => v.headerHeight.valuePx(e.windowSize)};
+  max-height: ${(e) => v.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${(e) => `${v.headerLastColumnTopPadding.valuePx(
+  e.windowSize
+)} ${v.headerLastColumnRightPadding.valuePx(
+  e.windowSize
+)} ${v.headerLastColumnBottomPadding.valuePx(
+  e.windowSize
+)} ${v.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${(e) => e.theme.colors.grey4};
+  justify-content: space-between;
+  position: sticky;
+`, Rt = i.div`
+  color: ${(e) => e.sortDataValue === e.actualDataValue ? e.theme.colors.primary : e.theme.colors.hero};
+  width: ${(e) => e.wrapperWidth.valuePx(e.windowSize)};
+  max-width: ${(e) => e.wrapperWidth.valuePx(e.windowSize)};
+  min-width: ${(e) => e.wrapperWidth.valuePx(e.windowSize)};
+  padding-left: ${(e) => e.companyNameSticky ? o.sp4 : o.sp0};
+  padding-right: ${o.sp0};
+  display: flex;
+  align-items: center;
+  left: ${o.sp0};
+  justify-content: ${(e) => e.actualDataValue === "amount" ? "flex-end" : "flex-start"};
+  ${(e) => e.companyNameSticky ? we`
+          position: sticky;
+          z-index: 1;
+        ` : we`
+          position: static;
+          z-index: 0;
+        `};
+
+  padding-left: ${o.sp0};
+  box-sizing: border-box;
+  overflow: hidden;
+`, Mt = i(tt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+`, je = i.div`
+  display: flex;
+  align-items: center;
+  transform: ${(e) => e.sortDataValue === e.headerdata.key && e.headerdata.sortOrder === "descending" ? "rotate(180deg)" : "rotate(0deg)"};
+  ${(e) => e.headerdata.sortOrder === "ascending" ? `padding-top: ${v.headerPaddingTop.valuePx(e.windowSize)}` : "padding-bottom: 2px"}
+`, Se = i.div`
+  width: ${({ windowSize: e }) => v.sortIconSize.valuePx(e)};
+  height: ${({ windowSize: e }) => v.sortIconSize.valuePx(e)};
+  cursor: pointer;
+  color: ${(e) => e.isSelected === !0 ? e.theme.colors.primary : e.theme.colors.hero};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, Bt = i.div`
+  gap: ${o.sp1};
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+`, At = i(et)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: inherit;
+`, Ht = i.div`
+  margin-right: ${o.sp1};
+  display: flex;
+  align-items: center;
+`, Ot = i.div`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  align-items: center;
+  padding-top: 2px;
+`, Et = i.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Nt = i.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  color: ${(e) => e.theme.colors.primary};
+`, K = {
+  containerPaddingLeft: new m(s[3], s[4]),
+  containerPaddingRight: new m(s[2], s[3]),
+  containerPaddingTop: new m(s[2], s[3]),
+  containerPaddingBottom: new m(s[2], s[3]),
+  containerMarginLeft: new m(s[4], s[8]),
+  containerMarginRight: new m(s[4], s[8]),
+  cardHolderNamePaddingLeft: new m(s[0], s[3])
+};
+function Ft({
+  data: e,
+  boxType: n
+}) {
+  const { description: a, amount: p, status: l, date: r } = e, u = Y("0,0.00", p), h = k(), { dateFormat: g } = I.getLocalizedStrings(), x = ae(), w = x[0].width, S = x[1].width, d = x[2].width, c = $t(l);
+  if (h === "small") {
+    const $ = /* @__PURE__ */ t.jsx(Xt, { children: /* @__PURE__ */ t.jsxs(qt, { children: [
+      /* @__PURE__ */ t.jsxs(Zt, { children: [
+        /* @__PURE__ */ t.jsxs(eo, { children: [
+          /* @__PURE__ */ t.jsx(ve, {}),
+          /* @__PURE__ */ t.jsx(to, { children: /* @__PURE__ */ t.jsx(oo, { children: /* @__PURE__ */ t.jsxs(io, { children: [
+            a,
+            l != null && l.code !== "completed" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+              /* @__PURE__ */ t.jsx(no, {}),
+              /* @__PURE__ */ t.jsx(so, { color: c?.color, children: c?.value })
+            ] }) : null
+          ] }) }) })
+        ] }),
+        /* @__PURE__ */ t.jsx(ro, { children: /* @__PURE__ */ t.jsx(ao, { children: r != null ? `${ae()[1].value}: ` + r.format(g.visual.MMMDCommaYYYYformat) : null }) })
+      ] }),
+      /* @__PURE__ */ t.jsx(Qt, { children: /* @__PURE__ */ t.jsx(lo, { children: /* @__PURE__ */ t.jsx(Te, { children: u }) }) })
+    ] }) });
+    return /* @__PURE__ */ t.jsx(
+      $e,
+      {
+        content: $,
+        boxType: n,
+        isDisabled: !0,
+        isNotClickable: !0
+      }
+    );
+  }
+  const f = /* @__PURE__ */ t.jsxs(Wt, { windowSize: h, children: [
+    /* @__PURE__ */ t.jsxs(
+      Yt,
+      {
+        windowSize: h,
+        width: w,
+        children: [
+          /* @__PURE__ */ t.jsx(ve, {}),
+          /* @__PURE__ */ t.jsxs(Vt, { windowSize: h, children: [
+            /* @__PURE__ */ t.jsx(be, { children: a }),
+            l != null && l.code !== "completed" ? /* @__PURE__ */ t.jsxs(Kt, { windowSize: h, children: [
+              /* @__PURE__ */ t.jsx(Jt, {}),
+              /* @__PURE__ */ t.jsx(Ut, { color: c?.color, children: c?.value })
+            ] }) : null
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(_t, { windowSize: h, width: S, children: /* @__PURE__ */ t.jsx(be, { children: r != null ? r.format(g.visual.MMMDCommaYYYYformat) : null }) }),
+    /* @__PURE__ */ t.jsx(Gt, { windowSize: h, width: d, children: /* @__PURE__ */ t.jsx(Te, { children: u }) })
+  ] });
+  return /* @__PURE__ */ t.jsx(
+    $e,
+    {
+      content: f,
+      boxType: n,
+      isDisabled: !0,
+      isNotClickable: !0
+    }
+  );
+}
+const Wt = i.div`
+  width: 100%;
+  display: flex;
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-left: ${(e) => K.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => K.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => K.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => K.containerPaddingBottom.valuePx(e.windowSize)};
+  box-shadow: ${(e) => e.theme.mode === "dark" ? `${y.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${y.dropShadowNormalLight}`};
+  border-radius: ${o.sp2};
+  justify-content: space-between;
+  align-items: center;
+`, Yt = i.div`
+  display: flex;
+  align-items: center;
+  width: ${(e) => e.width.valuePx(e.windowSize)};
+  max-width: ${(e) => e.width.valuePx(e.windowSize)};
+  min-width: ${(e) => e.width.valuePx(e.windowSize)};
+  padding-left: ${o.sp0};
+  box-sizing: border-box;
+`, _t = i.div`
+  display: flex;
+  align-items: center;
+  width: ${(e) => e.width.valuePx(e.windowSize)};
+  max-width: ${(e) => e.width.valuePx(e.windowSize)};
+  min-width: ${(e) => e.width.valuePx(e.windowSize)};
+  box-sizing: border-box;
+`, Gt = i.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: ${(e) => e.width.valuePx(e.windowSize)};
+  max-width: ${(e) => e.width.valuePx(e.windowSize)};
+  min-width: ${(e) => e.width.valuePx(e.windowSize)};
+  padding-right: ${o.sp2};
+  box-sizing: border-box;
+`, ve = i(jt)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+`, be = i(D)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  max-height: ${o.sp11};
+  text-overflow: ellipsis;
+  word-break: break-word;
+  text-align: left;
+  overflow: hidden;
+`, Vt = i.div`
+  display: flex;
+  align-items: center;
+  text-align: left;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  margin-left: ${o.sp3};
+  max-height: ${o.sp11};
+  word-break: break-word;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`, Kt = i.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: center;
+`, Ut = i(_)`
+  color: ${(e) => e.color};
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+`, Jt = i.div`
+  display: block;
+  width: ${o.sp1};
+  height: ${o.sp1};
+  border-radius: 50%;
+  background-color: ${(e) => e.theme.colors.grey1};
+  margin-left: ${o.sp2};
+  margin-right: ${o.sp2};
+`, Te = i(D)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  text-align: right;
+  width: 100%;
+`, Xt = i.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding: ${o.sp3};
+  box-shadow: ${(e) => e.theme.mode === "dark" ? `${y.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${y.dropShadowNormalLight}`};
+  border-radius: ${o.sp2};
+  gap: ${o.sp1};
+`, qt = i.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: flex-start;
+`, Zt = i.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  max-width: 60%;
+`, Qt = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-left: ${o.sp4};
+`, eo = i.div`
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: ${o.sp1};
+`, to = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: ${o.sp3};
+  flex: 1;
+  min-width: 0;
+`, oo = i.div`
+  width: 100%;
+`, io = i(D)`
+  display: block;
+  color: ${(e) => e.theme.colors.hero};
+  line-height: 1.4;
+  text-align: left;
+  word-break: break-word;
+  overflow-wrap: break-word;
+`, no = i.span`
+  display: inline-block;
+  width: ${o.sp1};
+  height: ${o.sp1};
+  border-radius: 50%;
+  background-color: ${(e) => e.theme.colors.grey1};
+  margin-left: ${o.sp2};
+  margin-right: ${o.sp2};
+  vertical-align: middle;
+`, so = i(_)`
+  display: inline;
+  color: ${(e) => e.color};
+  white-space: nowrap;
+`, ro = i.div`
+  display: flex;
+  align-items: center;
+  margin-top: ${o.sp1};
+  margin-left: ${o.sp6};
+`, ao = i(_)`
+  color: ${(e) => e.theme.colors.grey1};
+  text-align: left;
+`, lo = i.div`
+  display: flex;
+  align-items: flex-start;
+`, le = {
+  lastListItemHeight: new m(200, 128),
+  bannerGap: new m(s[2], s[3]),
+  contentContainerMargin: new m(s[3], s[4], s[8]),
+  creditSpendBarContainerMarginLeft: new m(s[4], s[0]),
+  creditSpendInfoContainerMarginTop: new m(s[3], s[0]),
+  infoSubheadingTextMarginTop: new m(s[0], s[0]),
+  bannerWrapperMarginLeftRight: new m(s[3], s[8]),
+  styledThunderIconContainerSize: new m(s[3], s[4]),
+  tooltipIconContainerMarginLeft: new m(s[1], s[0]),
+  rowWrapperMarginLeftRight: new m(s[3], s[8])
+}, {
+  spendManagement: { chargeCard: co },
+  common: ho
+} = I.getLocalizedStrings(), po = ({
+  transactionList: e,
+  uiState: n,
+  fetchState: a,
+  onReloadCards: p,
+  onColumnSortConfigChanged: l
+}) => {
+  const r = k(), u = Xe(null), h = O(() => r !== "small" ? yt : ut + 40, [r]), g = () => h, x = r === "small" ? Ee : Ne, w = O(() => e.length * h + x, [e.length, h, x]);
+  de(() => {
+    u.current?.resetAfterIndex(0);
+  }, [r]);
+  const S = () => a === "Error" ? /* @__PURE__ */ t.jsxs(fo, { children: [
+    /* @__PURE__ */ t.jsx(
+      wo,
+      {
+        onClick: p,
+        "data-testid": W("treasury-list-reload"),
+        children: /* @__PURE__ */ t.jsx($o, {})
+      }
+    ),
+    /* @__PURE__ */ t.jsx(jo, { children: ho.reloadPage.label })
+  ] }) : a === "Completed" && e.length === 0 ? null : /* @__PURE__ */ t.jsx(We, { children: /* @__PURE__ */ t.jsx(So, { windowSize: r, children: /* @__PURE__ */ t.jsx(
+    Ke,
+    {
+      ref: u,
+      height: w,
+      itemCount: e.length,
+      innerElementType: (d) => mo(
+        d,
+        l,
+        n,
+        a
+      ),
+      itemSize: g,
+      estimatedItemSize: wt,
+      itemKey: (d) => e[d].id,
+      width: "100%",
+      overscanCount: ft,
+      initialScrollOffset: 0,
+      style: { overflow: "hidden" },
+      children: (d) => /* @__PURE__ */ t.jsx(go, { ...d, transactionList: e })
+    }
+  ) }) });
+  return /* @__PURE__ */ t.jsx(yo, { fetchState: a, children: S() });
+}, mo = (e, n, a, p) => /* @__PURE__ */ t.jsx(
+  Fe,
+  {
+    ...e,
+    onColumnSortConfigChanged: n,
+    uiState: {
+      sortKey: a.sortKey,
+      sortOrder: a.sortOrder
+    },
+    fetchState: p
+  }
+), Fe = qe(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e, n) => {
+    const { children: a, style: p, uiState: l, onColumnSortConfigChanged: r, ...u } = e;
+    return /* @__PURE__ */ t.jsxs(
+      We,
+      {
+        ref: n,
+        style: {
+          ...p,
+          width: "auto"
+        },
+        ...u,
+        children: [
+          /* @__PURE__ */ t.jsx(
+            zt,
+            {
+              companyNameSticky: !1,
+              onColumnSortConfigChanged: r,
+              sortConfig: {
+                sortKey: l.sortKey,
+                sortOrder: l.sortOrder
+              }
+            }
+          ),
+          /* @__PURE__ */ t.jsx(bo, { children: a })
+        ]
+      }
+    );
+  }
+);
+Fe.displayName = co.cardList.headerElementDisplayName;
+const xo = ({
+  transactionList: e,
+  fetchState: n,
+  uiState: a,
+  onReloadCards: p,
+  onColumnSortConfigChanged: l
+}) => /* @__PURE__ */ t.jsx(
+  po,
+  {
+    transactionList: e,
+    fetchState: n,
+    onReloadCards: p,
+    uiState: a,
+    onColumnSortConfigChanged: l
+  }
+), go = ({ index: e, style: n, transactionList: a }) => {
+  const p = k();
+  return /* @__PURE__ */ t.jsx(
+    vo,
+    {
+      style: {
+        ...n,
+        width: "100%",
+        paddingLeft: le.rowWrapperMarginLeftRight.valuePx(p),
+        paddingRight: le.rowWrapperMarginLeftRight.valuePx(p)
+      },
+      className: "spend-management-list-item",
+      children: /* @__PURE__ */ t.jsx(uo, { transaction: a[e] })
+    },
+    "listItem" + a[e].id
+  );
+}, uo = ({
+  transaction: e
+}) => /* @__PURE__ */ t.jsx(
+  Ft,
+  {
+    data: e,
+    boxType: "roundedBox"
+  },
+  e.id
+), yo = i.div`
+  margin: ${(e) => e.fetchState === "Error" ? "auto" : "unset"};
+  display: block;
+  height: 100%;
+`, fo = i.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, wo = i.div`
+  height: 96px;
+  width: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+`, $o = i(He)`
+  height: ${o.sp5};
+  width: ${o.sp5};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, jo = i(Oe)`
+  margin-top: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, So = i.div`
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  .spend-management-list-item:last-of-type {
+    height: ${(e) => le.lastListItemHeight.valuePx(e.windowSize)} !important;
+    padding-bottom: ${o.sp9};
+  }
+`, vo = i.div`
+  top: ${o.sp0};
+  left: ${o.sp0};
+  padding-bottom: ${o.sp3};
+  box-sizing: border-box;
+`, bo = i.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`, We = i.div``, To = [
+  "editPortfolio",
+  "taxLetter",
+  "statements",
+  "settings"
+], Co = (e) => Ze(e ?? "", To), U = I.getLocalizedStrings().spendManagement.treasury.overviewPage, Ce = [
+  { value: "editPortfolio", label: U.editPortfolio },
+  { value: "taxLetter", label: U.taxLetter },
+  { value: "statements", label: U.statements },
+  { value: "settings", label: U.settings }
+], ko = ({
+  onOptionSelection: e,
+  onTransferClick: n
+}) => {
+  const a = ot(), p = k(), l = I.getLocalizedStrings().spendManagement.treasury.overviewPage, r = a.loggedInUserRoleMap.treasury_user === !0 || it(a), u = Ce.filter(
+    (g) => g.value === "statements" || g.value === "taxLetter"
+  ), h = L();
+  return /* @__PURE__ */ t.jsxs(Po, { isTopAlign: !1, children: [
+    /* @__PURE__ */ t.jsx(
+      St,
+      {
+        entity: "zeni_treasury",
+        onOptionSelection: (g) => {
+          const x = Co(g);
+          x != null && e(x);
+        },
+        isMoreOption: !0,
+        backgroundColor: h.colors.grey5,
+        options: r ? u : Ce
+      }
+    ),
+    !r && (p === "small" ? /* @__PURE__ */ t.jsx(zo, { onClick: n }) : /* @__PURE__ */ t.jsx(
+      nt,
+      {
+        variant: "primary",
+        size: "small",
+        style: {
+          display: "flex",
+          alignItems: "center"
+        },
+        onClick: n,
+        label: l.transferFunds
+      }
+    ))
+  ] });
+}, Po = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: ${({ isTopAlign: e }) => e ? "flex-start" : "center"};
+  gap: ${o.sp3};
+`, zo = i(vt)`
+  min-width: ${o.sp4};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, Io = i.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, P = {
+  tickLabelText: new R("extraSmallRegular", "smallRegular"),
+  balanceIntegerStyles: new R("h5Regular", "h3Regular"),
+  integerStyles: new R("largeRegular", "h6Regular"),
+  decimalStyles: new R("standardRegular", "standardRegular"),
+  fundSummaryStyles: new R(
+    "extraSmallSemiBold",
+    "smallSemiBold"
+  ),
+  yieldValueStyles: new R("standardMedium", "largeMedium")
+}, z = {
+  accountDetailHeaderPaddingRight: new m(s[3], s[8]),
+  accountDetailHeaderPaddingBottom: new m(s[3], s[6]),
+  accountDetailHeaderPaddingLeft: new m(s[3], s[8]),
+  accountDetailHeaderPaddingTop: new m(s[3], s[6]),
+  accountDetailContentMarginTop: new m(s[4], s[4]),
+  areaChartHeight: new m(114, 209),
+  accountDetailHeaderGap: new m(18, 100, 184)
+}, {
+  spendManagement: {
+    zeniAccounts: ke,
+    treasury: { overviewPage: j }
+  },
+  dateFormat: te,
+  common: Lo
+} = I.getLocalizedStrings(), Ye = Ae(
+  ({ accountHistory: e }) => {
+    const n = k(), a = L(), [p, l] = q(), r = O(() => {
+      const $ = V((/* @__PURE__ */ new Date()).toISOString()), T = $.clone().subtract(84, "day"), C = 84 / 6;
+      return Array.from({ length: 7 }).map((Z, E) => {
+        const Q = E / 6;
+        let G;
+        return Q < 0.5 ? G = 0 : Q < 0.6 ? G = 0.9 * ((Q - 0.5) / 0.09999999999999998) : G = 0.9, {
+          date: (E === 6 ? $ : T.clone().add(Math.round(E * C), "day")).toISOString(),
+          value: G
+        };
+      });
+    }, []), u = O(() => (r.length <= 0, 0), [r.length]), h = e.fetchState === "Completed" && (e.accountHistoryWithBalance.length === 0 || e.accountHistoryWithBalance.every(
+      (c) => c.balance?.available.amount === 0
+    )), g = O(
+      () => e.accountHistoryWithBalance.map((c) => ({
+        ...c,
+        date: c.date.toISOString()
+      })),
+      [e.accountHistoryWithBalance]
+    ), x = J((c) => {
+      const f = Array.isArray(c) ? c : [];
+      let $ = "", T = "";
+      if (Array.isArray(f) && f.length > 0) {
+        const C = f[0].payload?.balance?.available;
+        T = Y("0,0[.]00", C), $ = V(f[0].payload?.date ?? "").format(
+          te.visual.DMMMYYYYFormat
+        );
+      }
+      return /* @__PURE__ */ t.jsxs(ei, { children: [
+        /* @__PURE__ */ t.jsx(De, { children: $ }),
+        /* @__PURE__ */ t.jsx(De, { isSublabel: !0, children: T })
+      ] });
+    }, []), w = J(
+      (c) => {
+        const f = c, { x: $, y: T } = f, { value: C } = f.payload;
+        let Z = !1;
+        e.accountHistoryWithBalance.length > 360 && (Z = !0);
+        const E = Z ? V(C).format(te.visual.MMMformat) : V(C).format(te.visual.MMMDFormat);
+        return /* @__PURE__ */ t.jsx(Go, { translateX: $, translateY: T, children: /* @__PURE__ */ t.jsx(Xo, { windowSize: n, dy: 20, dx: -25, children: E }) });
+      },
+      [e.accountHistoryWithBalance.length, n]
+    ), S = J(
+      ({ cx: c, cy: f, dataKey: $ }) => ($ === "balance.available.amount" && (p?.x !== c || p?.y !== f) && l({ x: c, y: f }), /* @__PURE__ */ t.jsx(ti, { cx: c, cy: f, strokeWidth: 1, r: s[1] })),
+      [p]
+    ), d = O(() => {
+      const c = e.accountHistoryWithBalance.length;
+      return c <= 0 ? 0 : c > 360 ? Math.floor(c / 12) : Math.floor(c / 7);
+    }, [e.accountHistoryWithBalance.length]);
+    return /* @__PURE__ */ t.jsx(qo, { children: h ? /* @__PURE__ */ t.jsxs(di, { children: [
+      /* @__PURE__ */ t.jsx(
+        me,
+        {
+          height: z.areaChartHeight.value(n),
+          width: "99%",
+          children: /* @__PURE__ */ t.jsxs(
+            xe,
+            {
+              data: r,
+              margin: { top: 0, right: 0, bottom: 0, left: 0 },
+              children: [
+                /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsxs(
+                  Pe,
+                  {
+                    id: "colorUv",
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1",
+                    children: [
+                      /* @__PURE__ */ t.jsx(
+                        ze,
+                        {
+                          offset: "0%",
+                          stopColor: a.colors.grey2,
+                          stopOpacity: 1
+                        }
+                      ),
+                      /* @__PURE__ */ t.jsx(
+                        Ie,
+                        {
+                          offset: "100%",
+                          stopColor: a.colors.grey2,
+                          stopOpacity: 0.02
+                        }
+                      )
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ t.jsx(
+                  ge,
+                  {
+                    dataKey: "date",
+                    stroke: a.colors.grey3,
+                    tickSize: 0,
+                    tick: (c) => w(c),
+                    interval: u,
+                    padding: { right: s[4] }
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(ue, { tick: !1, axisLine: !1, domain: [0, 1] }),
+                /* @__PURE__ */ t.jsx(
+                  ye,
+                  {
+                    activeDot: void 0,
+                    fillOpacity: 1,
+                    dot: !1,
+                    type: "monotone",
+                    dataKey: "value",
+                    stroke: a.colors.grey2,
+                    strokeDasharray: "4 4",
+                    fill: "url(#colorUv)"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(ci, { children: /* @__PURE__ */ t.jsx(li, { children: j.noData }) })
+    ] }) : /* @__PURE__ */ t.jsx(
+      me,
+      {
+        height: z.areaChartHeight.value(n),
+        width: "99%",
+        children: /* @__PURE__ */ t.jsxs(
+          xe,
+          {
+            data: g,
+            margin: { top: 0, right: 0, bottom: 0, left: 0 },
+            children: [
+              /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsxs(Pe, { id: "colorUv", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ t.jsx(
+                  ze,
+                  {
+                    offset: "0%",
+                    stopColor: y.brandColorJade,
+                    stopOpacity: 1
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(
+                  Ie,
+                  {
+                    offset: "100%",
+                    stopColor: y.brandColorJade,
+                    stopOpacity: 0.03
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ t.jsx(
+                ge,
+                {
+                  dataKey: "date",
+                  stroke: a.colors.grey3,
+                  tickSize: 0,
+                  reversed: !0,
+                  tick: (c) => w(c),
+                  padding: { right: s[4] },
+                  interval: d
+                }
+              ),
+              /* @__PURE__ */ t.jsx(ue, { tick: !1, axisLine: !1 }),
+              /* @__PURE__ */ t.jsx(
+                Ue,
+                {
+                  position: p,
+                  content: ({ payload: c }) => x(c),
+                  cursor: {
+                    strokeDasharray: "3",
+                    stroke: y.brandColorJade
+                  }
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                ye,
+                {
+                  activeDot: S,
+                  fillOpacity: 1,
+                  dot: !1,
+                  type: "monotone",
+                  dataKey: "balance.available.amount",
+                  stroke: y.brandColorJade,
+                  fill: "url(#colorUv)"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+Ye.displayName = "AccountBalanceGraph";
+const Zi = ({
+  treasuryDetail: e,
+  treasurySetupView: n,
+  onColumnSortConfigChanged: a,
+  onBackClick: p,
+  onReloadTreasuryTransactions: l,
+  handleTreasuryOptionSelection: r,
+  onTransferClick: u
+}) => {
+  const h = k(), g = L(), w = st().analytics;
+  rt({
+    componentName: "treasury.overview",
+    enabled: e.fetchState === "Completed"
+  });
+  const S = ($) => {
+    w.trackTreasuryDashboardInteraction(
+      (() => {
+        switch ($) {
+          case "editPortfolio":
+            return "Edit Portfolio";
+          case "taxLetter":
+            return "Tax Letter";
+          case "statements":
+            return "Statement";
+          default:
+            return "Settings";
+        }
+      })()
+    ), r($);
+  }, d = e.accountSummary, c = J(
+    ($) => {
+      let T = null, C;
+      switch ($) {
+        case "insuredFunds":
+          T = /* @__PURE__ */ t.jsx(Re, { children: j.insuredFundsTooltip }), C = "280px";
+          break;
+        case "totalBalance":
+          T = /* @__PURE__ */ t.jsxs(ai, { children: [
+            /* @__PURE__ */ t.jsx(ri, { children: j.balanceTooltip.base }),
+            /* @__PURE__ */ t.jsxs(ie, { children: [
+              /* @__PURE__ */ t.jsx(ne, { children: j.balanceTooltip.balance }),
+              /* @__PURE__ */ t.jsx(se, { children: Y("0,0[.]00", d?.totalBalance) })
+            ] }),
+            /* @__PURE__ */ t.jsxs(ie, { children: [
+              /* @__PURE__ */ t.jsx(ne, { children: j.balanceTooltip.processing }),
+              /* @__PURE__ */ t.jsx(se, { children: Y("0,0[.]00", d?.processingBalance) })
+            ] }),
+            /* @__PURE__ */ t.jsxs(ie, { children: [
+              /* @__PURE__ */ t.jsx(ne, { children: j.balanceTooltip.available }),
+              /* @__PURE__ */ t.jsx(se, { children: Y("0,0[.]00", d?.availableBalance) })
+            ] })
+          ] }), C = "312px";
+          break;
+        case "sevenDayYield":
+          T = /* @__PURE__ */ t.jsx(Re, { children: j.fundTile.sevenDayYieldTooltip }), C = "464px";
+          break;
+        default:
+          T = /* @__PURE__ */ t.jsx(t.Fragment, {});
+          break;
+      }
+      return /* @__PURE__ */ t.jsx(Ge, { children: /* @__PURE__ */ t.jsx(
+        ce,
+        {
+          display: "flex",
+          placement: h === "small" ? "bottom" : "top",
+          title: T,
+          style: {
+            textAlign: "left"
+          },
+          maxWidth: C,
+          children: $ === "insuredFunds" ? /* @__PURE__ */ t.jsx(Ti, {}) : /* @__PURE__ */ t.jsx(Ve, {})
+        }
+      ) });
+    },
+    [d, h]
+  ), f = /* @__PURE__ */ t.jsx(
+    ko,
+    {
+      onOptionSelection: S,
+      onTransferClick: () => {
+        w.trackTreasuryDashboardInteraction("Transfer Funds"), u();
+      }
+    }
+  );
+  return /* @__PURE__ */ t.jsxs(Eo, { children: [
+    /* @__PURE__ */ t.jsx(
+      at,
+      {
+        title: j.title,
+        onBackClick: p,
+        showMenuIcon: !1,
+        backgroundColor: g.colors.grey5,
+        style: { zIndex: 3, ...re.largeSemiBold.cssObject },
+        rightSideComponent: f,
+        source: "treasury"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(No, { windowSize: h, children: [
+      /* @__PURE__ */ t.jsxs(Fo, { windowSize: h, children: [
+        /* @__PURE__ */ t.jsx(
+          Do,
+          {
+            fundAllocation: n.currentAllocation,
+            fundsData: n.fundsData,
+            getToolTipContent: c,
+            treasuryDetail: e,
+            hasAccountActivity: e.transactions.length > 0
+          }
+        ),
+        /* @__PURE__ */ t.jsx(_o, { windowSize: h, children: /* @__PURE__ */ t.jsx(
+          Ye,
+          {
+            accountHistory: e.accountHistory
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ t.jsx(
+        Ro,
+        {
+          analytics: w,
+          fundsData: n.fundsData,
+          fundAllocation: n.currentAllocation,
+          hasAccountActivity: e.transactions.length > 0
+        }
+      )
+    ] }),
+    e.transactionsFetchState.fetchState === "Completed" ? /* @__PURE__ */ t.jsx(
+      _e,
+      {
+        treasuryDetail: e,
+        onColumnSortConfigChanged: a
+      }
+    ) : e.transactionsFetchState.fetchState === "Error" ? /* @__PURE__ */ t.jsxs(Vo, { children: [
+      /* @__PURE__ */ t.jsx(
+        Ko,
+        {
+          onClick: l,
+          "data-testid": W("account-detail-reload"),
+          children: /* @__PURE__ */ t.jsx(Jo, {})
+        }
+      ),
+      /* @__PURE__ */ t.jsx(Uo, { children: Lo.reloadPage.label })
+    ] }) : /* @__PURE__ */ t.jsx(Io, { children: /* @__PURE__ */ t.jsx(lt, { size: "ExtraLarge", start: !0 }) })
+  ] });
+}, _e = Ae(
+  ({ treasuryDetail: e, onColumnSortConfigChanged: n }) => {
+    const a = k();
+    return /* @__PURE__ */ t.jsx(t.Fragment, { children: e.transactions.length > 0 ? /* @__PURE__ */ t.jsx(Oo, { windowSize: a, children: /* @__PURE__ */ t.jsx(
+      xo,
+      {
+        transactionList: e.transactions,
+        fetchState: e.fetchState,
+        uiState: e.uiState,
+        onReloadCards: () => {
+        },
+        onColumnSortConfigChanged: n
+      }
+    ) }) : /* @__PURE__ */ t.jsx(Ho, {}) });
+  }
+);
+_e.displayName = "TransactionListScreen";
+const Do = ({
+  treasuryDetail: e,
+  hasAccountActivity: n,
+  getToolTipContent: a,
+  fundAllocation: p,
+  fundsData: l
+}) => {
+  const r = k(), [u, h] = q(!1);
+  return de(() => {
+    u === !0 && setTimeout(() => {
+      h(!1);
+    }, 800);
+  }, [u]), /* @__PURE__ */ t.jsxs(Wo, { children: [
+    /* @__PURE__ */ t.jsxs(X, { children: [
+      /* @__PURE__ */ t.jsx(Zo, { children: /* @__PURE__ */ t.jsxs(F, { children: [
+        N(
+          ke.zeniAccountList.totalAvailableBalance
+        ),
+        a("totalBalance")
+      ] }) }),
+      /* @__PURE__ */ t.jsx(si, { windowSize: r, children: e.accountSummary?.availableBalance ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+        ee,
+        {
+          amount: e.accountSummary?.availableBalance,
+          integerStyles: P.balanceIntegerStyles.styleObject(
+            r
+          ),
+          decimalStyles: P.balanceIntegerStyles.styleObject(
+            r
+          )
+        }
+      ) }) : null })
+    ] }),
+    /* @__PURE__ */ t.jsxs(X, { children: [
+      /* @__PURE__ */ t.jsxs(F, { children: [
+        N(j.insuredFunds),
+        a("insuredFunds")
+      ] }),
+      /* @__PURE__ */ t.jsx(
+        oe,
+        {
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */ t.jsx(
+            ee,
+            {
+              amount: {
+                amount: e.accountSummary?.insuredFunds.amount ?? 0,
+                currencyCode: "USD",
+                currencySymbol: "$"
+              },
+              integerStyles: P.integerStyles.styleObject(r),
+              decimalStyles: P.decimalStyles.styleObject(r)
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(F, { children: N(j.insuredFundsAmount) })
+    ] }),
+    n && /* @__PURE__ */ t.jsxs(Yo, { children: [
+      /* @__PURE__ */ t.jsxs(Le, { children: [
+        /* @__PURE__ */ t.jsx(F, { children: N(ke.common.totalYieldEarned) }),
+        /* @__PURE__ */ t.jsx(
+          oe,
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ t.jsx(
+              ee,
+              {
+                amount: e.accountSummary?.totalYield,
+                integerStyles: P.integerStyles.styleObject(r),
+                decimalStyles: P.decimalStyles.styleObject(r)
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t.jsxs(Le, { children: [
+        /* @__PURE__ */ t.jsxs(F, { children: [
+          N(j.sevenDayYield),
+          " ",
+          a("sevenDayYield")
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          oe,
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ t.jsxs(Qo, { windowSize: r, children: [
+              Ao(p ?? {}, l),
+              "%"
+            ] })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, Ro = ({
+  analytics: e,
+  fundsData: n,
+  fundAllocation: a,
+  hasAccountActivity: p
+}) => {
+  const [l, r] = q(!1), u = k(), h = L(), g = () => {
+    r((x) => !x);
+  };
+  return /* @__PURE__ */ t.jsx(hi, { windowSize: u, allTilesExpanded: l, children: n.map((x, w) => {
+    const S = l, d = he(w, h);
+    return /* @__PURE__ */ t.jsxs(
+      pi,
+      {
+        expanded: S,
+        windowSize: u,
+        children: [
+          /* @__PURE__ */ t.jsx(Si, { bgColor: d.headerBackground }),
+          /* @__PURE__ */ t.jsx(
+            Mo,
+            {
+              fund: x,
+              fundIndex: w,
+              fundAllocation: a != null ? a[x.fundCode] : 0,
+              hasAccountActivity: p
+            }
+          ),
+          !l && /* @__PURE__ */ t.jsx(mi, { children: /* @__PURE__ */ t.jsxs(
+            gi,
+            {
+              onClick: () => {
+                e.trackTreasuryDashboardInteraction(
+                  "View Details " + x.fundCompanyName + " " + x.fundName
+                ), g();
+              },
+              children: [
+                j.fundTile.viewDetails,
+                /* @__PURE__ */ t.jsx(ii, {})
+              ]
+            }
+          ) }),
+          S && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            /* @__PURE__ */ t.jsx(Bi, {}),
+            /* @__PURE__ */ t.jsx(
+              Bo,
+              {
+                analytics: e,
+                fund: x,
+                fundIndex: w,
+                onHide: g
+              }
+            )
+          ] })
+        ]
+      },
+      x.fundCode
+    );
+  }) });
+}, Mo = ({
+  fund: e,
+  fundIndex: n,
+  fundAllocation: a
+}) => {
+  const p = L(), l = he(n, p), r = k();
+  return /* @__PURE__ */ t.jsxs(xi, { windowSize: r, children: [
+    /* @__PURE__ */ t.jsxs(Me, { style: { width: r === "small" ? "100%" : "50%" }, children: [
+      /* @__PURE__ */ t.jsx(yi, { children: /* @__PURE__ */ t.jsxs(fi, { children: [
+        /* @__PURE__ */ t.jsx(Be, { windowSize: r, children: e.fundCode }),
+        /* @__PURE__ */ t.jsxs(Be, { windowSize: r, children: [
+          a,
+          "%"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ t.jsxs(wi, { color: l.fundNameColor, children: [
+        /* @__PURE__ */ t.jsx(X, { children: e.fundCompanyName }),
+        /* @__PURE__ */ t.jsx(X, { children: e.fundName })
+      ] })
+    ] }),
+    /* @__PURE__ */ t.jsx(ui, { windowSize: r, children: /* @__PURE__ */ t.jsxs(
+      Me,
+      {
+        style: {
+          alignItems: r === "small" ? "flex-start" : "flex-end"
+        },
+        children: [
+          /* @__PURE__ */ t.jsxs(ji, { children: [
+            j.sevenDayYield,
+            /* @__PURE__ */ t.jsx(
+              Ge,
+              {
+                style: { marginRight: "-20px", marginTop: "2px" },
+                children: /* @__PURE__ */ t.jsx(
+                  ce,
+                  {
+                    placement: r === "small" ? "bottom" : "bottom-end",
+                    data: j.fundTile.sevenDayYieldTooltip,
+                    variant: "small-description",
+                    maxWidth: "464px",
+                    children: /* @__PURE__ */ t.jsx(Ve, {})
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsxs($i, { windowSize: r, children: [
+            e.yield,
+            "%"
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}, Bo = ({
+  analytics: e,
+  fund: n,
+  fundIndex: a,
+  onHide: p
+}) => {
+  const l = L(), { common: r, spendManagement: u } = I.getLocalizedStrings(), h = u.treasury.promoPage, g = he(a, l);
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(Ci, { children: n.description }),
+    /* @__PURE__ */ t.jsxs(ki, { children: [
+      /* @__PURE__ */ t.jsxs(M, { children: [
+        /* @__PURE__ */ t.jsxs(B, { children: [
+          /* @__PURE__ */ t.jsx(H, {}),
+          " Liquidity"
+        ] }),
+        /* @__PURE__ */ t.jsx(A, { children: n.liquidityTimeline })
+      ] }),
+      /* @__PURE__ */ t.jsxs(M, { children: [
+        /* @__PURE__ */ t.jsxs(B, { children: [
+          /* @__PURE__ */ t.jsx(H, {}),
+          " ",
+          h.fundSize
+        ] }),
+        /* @__PURE__ */ t.jsx(A, { color: g.fundNameColor, children: ht(n.fundSize, n.currencyCode) })
+      ] }),
+      /* @__PURE__ */ t.jsxs(M, { children: [
+        /* @__PURE__ */ t.jsxs(B, { children: [
+          /* @__PURE__ */ t.jsx(H, {}),
+          " ",
+          h.maturity
+        ] }),
+        /* @__PURE__ */ t.jsxs(A, { children: [
+          n.maturity,
+          " ",
+          r.timeStrings.days
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsxs(M, { children: [
+        /* @__PURE__ */ t.jsxs(B, { children: [
+          /* @__PURE__ */ t.jsx(H, {}),
+          " ",
+          h.expenseRatio
+        ] }),
+        /* @__PURE__ */ t.jsxs(A, { children: [
+          n.expenseRatio,
+          h.expenseRatioSuffix
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsxs(M, { children: [
+        /* @__PURE__ */ t.jsxs(B, { children: [
+          /* @__PURE__ */ t.jsx(H, {}),
+          " ",
+          h.riskRating
+        ] }),
+        /* @__PURE__ */ t.jsx(A, { children: n.riskRating })
+      ] }),
+      /* @__PURE__ */ t.jsxs(M, { children: [
+        /* @__PURE__ */ t.jsxs(B, { children: [
+          /* @__PURE__ */ t.jsx(H, {}),
+          " ",
+          h.composition
+        ] }),
+        /* @__PURE__ */ t.jsx(A, { children: /* @__PURE__ */ t.jsxs(Pi, { children: [
+          n.compositions[0].investedIn,
+          " ",
+          n.compositions[0].percentage,
+          Array.isArray(n.compositions) && n.compositions.length > 0 && /* @__PURE__ */ t.jsx(
+            ce,
+            {
+              style: { textAlign: "left", display: "inline" },
+              title: /* @__PURE__ */ t.jsx(zi, { children: n.compositions.map((x, w) => /* @__PURE__ */ t.jsxs(Ii, { children: [
+                /* @__PURE__ */ t.jsx(Li, {}),
+                /* @__PURE__ */ t.jsx(b, { children: x.investedIn }),
+                /* @__PURE__ */ t.jsx(
+                  b,
+                  {
+                    style: {
+                      marginLeft: "auto",
+                      textAlign: "right"
+                    },
+                    children: x.percentage
+                  }
+                )
+              ] }, w)) }),
+              children: /* @__PURE__ */ t.jsxs(Di, { children: [
+                "+",
+                n.compositions.length
+              ] })
+            }
+          )
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ t.jsxs(vi, { children: [
+      /* @__PURE__ */ t.jsxs(
+        Ri,
+        {
+          onClick: () => e.trackTreasuryProspectusClick(
+            n.fundCompanyName + " " + n.fundName,
+            n.fundCode,
+            "Treasury Overview Page"
+          ),
+          href: n.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: [
+            h.asOf,
+            " ",
+            n.asOfDate.format("MMM D, YYYY"),
+            /* @__PURE__ */ t.jsx(Mi, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ t.jsxs(bi, { onClick: p, children: [
+        h.hide,
+        /* @__PURE__ */ t.jsx(ni, {})
+      ] })
+    ] })
+  ] });
+};
+function Ao(e, n) {
+  let a = 0;
+  for (const p of n) {
+    const l = e[p.fundCode] ?? 0;
+    l > 0 && p.yield != null && (a += p.yield * l);
+  }
+  return Number((a / 100).toFixed(2));
+}
+const N = (e) => /* @__PURE__ */ t.jsx(oi, { children: e }), Ho = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`, Oo = i.div`
+  margin-top: ${(e) => z.accountDetailContentMarginTop.valuePx(e.windowSize)};
+  margin-bottom: ${o.sp0};
+`, Eo = i.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`, No = i.div`
+  display: flex;
+  flex-direction: column;
+  background: ${(e) => e.theme.colors.grey5};
+  padding-top: ${(e) => z.accountDetailHeaderPaddingTop.valuePx(e.windowSize)};
+  padding-right: ${(e) => z.accountDetailHeaderPaddingRight.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => z.accountDetailHeaderPaddingBottom.valuePx(e.windowSize)};
+  padding-left: ${(e) => z.accountDetailHeaderPaddingLeft.valuePx(e.windowSize)};
+  justify-content: space-between;
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, Fo = i.div`
+  display: flex;
+  width: 100%;
+  gap: ${(e) => `${z.accountDetailHeaderGap.valuePx(e.windowSize)}`};
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  justify-content: space-between;
+`, Wo = i.div`
+  display: flex;
+  gap: ${o.sp4};
+  flex-direction: column;
+  justify-content: space-between;
+`, X = i.div``, Yo = i.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${o.sp6};
+`, _o = i.div`
+  display: flex;
+  gap: ${o.sp3};
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: ${(e) => e.windowSize === "small" ? o.sp3 : o.sp0};
+`, Go = i.g`
+  transform: ${(e) => `translate(${e.translateX}px, ${e.translateY}px)`};
+`, Vo = i.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, Ko = i.div`
+  height: ${o.sp12};
+  width: ${o.sp12};
+  background: ${(e) => e.theme.colors.background};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${o.sp5};
+    color: ${(e) => e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, Uo = i(Oe)`
+  margin-top: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, Jo = i(He)`
+  height: ${o.sp5};
+  width: ${o.sp5};
+  margin: ${o.sp5};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Xo = i.text`
+  fill: ${(e) => e.theme.colors.hero};
+  ${(e) => `${P.tickLabelText.style(e.windowSize)}`};
+`, Pe = i.linearGradient``, ze = i.stop``, Ie = i.stop``, qo = i.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-left: -${o.sp8};
+  .recharts-cartesian-grid {
+    .recharts-cartesian-grid-horizontal {
+      line:last-child {
+        display: none;
+      }
+    }
+  }
+`, oe = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+`, Le = i.div`
+  display: flex;
+  flex: 1;
+  min-width: 140px;
+  flex-direction: column;
+`, Zo = i(b)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+`, Qo = i.div`
+  color: ${(e) => e.theme.colors.success};
+  ${(e) => P.integerStyles.style(e.windowSize)};
+`, ei = i.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  top: -22px;
+  right: 103px;
+  min-height: ${o.sp6};
+  min-width: 66px;
+  border-radius: ${o.sp1};
+  padding: ${o.sp0} ${o.sp2};
+  background-color: ${y.blackColor};
+`, ti = i.circle`
+  stroke: ${(e) => e.theme.colors.brandColorJade};
+  fill: ${(e) => e.theme.colors.grey5};
+`, De = i(b)`
+  color: ${(e) => e.isSublabel === !0 ? y.neutralGrey1Light : y.brandColorPearl};
+`, F = i.div`
+  display: flex;
+  gap: ${o.sp1};
+`, oi = i(b)`
+  color: ${(e) => e.theme.colors.hero};
+`, ii = i(ct)`
+  height: 12px;
+  width: 12px;
+  margin-left: ${o.sp1};
+  margin-right: ${o.sp1};
+  color: ${(e) => e.theme.colors.hero};
+`, ni = i(gt)`
+  height: 12px;
+  width: 12px;
+  margin-left: ${o.sp1};
+  margin-right: ${o.sp1};
+  color: ${(e) => e.theme.colors.hero};
+`, si = i.div`
+  display: flex;
+  align-items: baseline;
+  color: ${(e) => e.theme.colors.primary};
+`, Ge = i.div`
+  display: flex;
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, ri = i(b)`
+  margin-bottom: ${o.sp2};
+  display: flex;
+  text-align: left;
+`, ai = i(b)`
+  padding: ${o.sp2} ${o.sp2};
+  color: ${(e) => e.theme.colors.hero};
+  background: ${(e) => e.theme.colors.black};
+  border-radius: ${o.sp1};
+`, ie = i(b)`
+  color: ${(e) => e.theme.colors.brandColorPearl};
+  display: flex;
+  justify-content: space-between;
+`, ne = i.div`
+  color: ${(e) => e.theme.colors.hero};
+`, se = i.div`
+  color: ${y.primaryDark};
+`, Ve = i(dt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Re = i(b)`
+  padding: ${o.sp2};
+  background: ${(e) => e.theme.colors.black};
+  border-radius: ${o.sp1};
+`, li = i(D)`
+  color: ${(e) => e.theme.colors.hero};
+  white-space: pre-line;
+  text-align: center;
+`, di = i.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`, ci = i.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+`, hi = i.div`
+  display: flex;
+  flex-wrap: ${(e) => e.windowSize === "small" ? "wrap" : "nowrap"};
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  gap: ${(e) => e.windowSize === "small" ? o.sp3 : o.sp6};
+  margin-top: ${o.sp6};
+  align-items: ${(e) => e.allTilesExpanded === !0 ? "stretch" : "flex-start"};
+  width: 100%;
+`, pi = i.div`
+  background: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey2};
+  border-radius: ${o.sp2};
+  flex: 1;
+  width: ${(e) => e.windowSize === "small" ? "100%" : `calc((100% - ${o.sp6}) / 2)`};
+  box-shadow: ${`0px 1px 2px 0px ${y.boxShadowElevation}`};
+  transition: box-shadow 0.2s;
+  display: flex;
+  flex-direction: column;
+`, mi = i.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: ${o.sp2} ${o.sp3};
+  justify-content: space-between;
+`, xi = i.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: ${o.sp3} ${o.sp6} 0 ${o.sp4};
+  gap: ${o.sp3};
+`, gi = i(b)`
+  margin-top: ${o.sp2};
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: flex-end;
+  cursor: pointer;
+  align-items: center;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    cursor: pointer;
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, Me = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`, ui = i.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${(e) => e.windowSize === "small" ? o.sp4 : o.sp3};
+  align-items: flex-start;
+`, yi = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${o.sp1};
+`, fi = i(pt)`
+  display: flex;
+  gap: ${o.sp2};
+`, Be = i.div`
+  color: ${(e) => e.theme.colors.primary};
+  ${(e) => P.fundSummaryStyles.style(e.windowSize)};
+`, wi = i(mt)`
+  color: ${(e) => e.color ?? y.brandColorGoldDark};
+  display: flex;
+  flex-direction: column;
+`, $i = i.div`
+  color: ${y.success};
+  text-align: ${(e) => e.windowSize === "small" ? "left" : "right"};
+  ${(e) => P.yieldValueStyles.style(e.windowSize)};
+`, ji = i(b)`
+  display: flex;
+  gap: ${o.sp1};
+  color: ${y.heroLight};
+  text-align: right;
+`, Si = i.div`
+  width: 100%;
+  height: ${o.sp2};
+  background: ${(e) => e.bgColor ?? y.neutralGrey2Light};
+  border-radius: ${o.sp1} ${o.sp1} 0 0;
+`, vi = i.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0 ${o.sp4} ${o.sp3} ${o.sp4};
+  box-sizing: border-box;
+`, bi = i.button`
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  color: ${(e) => e.theme.colors.hero};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    cursor: pointer;
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, Ti = i(bt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${y.success};
+`, Ci = i(D)`
+  padding: ${o.sp3} ${o.sp4} 0 ${o.sp4};
+  color: ${y.heroLight};
+`, ki = i.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${o.sp2} ${o.sp5};
+`, M = i.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-bottom: ${o.sp1};
+`, B = i(D)`
+  color: ${(e) => e.theme.colors.hero};
+  width: 140px;
+  display: flex;
+  align-items: center;
+`, A = i(D)`
+  color: ${(e) => e.color ?? e.theme.colors.primary};
+  flex: 1;
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+  padding-bottom: 4px;
+`, H = i.div`
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: ${(e) => e.theme.colors.hero};
+  display: inline-block;
+  margin-right: ${o.sp2};
+  vertical-align: middle;
+`, Pi = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${o.sp1};
+`, zi = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${o.sp1};
+  padding: ${o.sp2};
+`, Ii = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${o.sp2};
+`, Li = i.div`
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: ${y.neutralGrey1Light};
+`, Di = i(b)`
+  color: ${(e) => e.theme.colors.hero};
+  border: 1px solid ${(e) => e.theme.colors.grey2};
+  border-radius: ${o.sp1};
+  padding: 0 6px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+`, Ri = i.a`
+  color: ${(e) => e.theme.colors.grey1};
+  display: flex;
+  align-items: center;
+  gap: ${o.sp2};
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 400;
+  width: fit-content;
+  text-decoration: none;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    cursor: pointer;
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, Mi = i(xt)`
+  width: 12px;
+  height: 12px;
+`, Bi = i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+  margin-top: ${o.sp4};
+`;
+export {
+  Zi as default
+};