@zeniai/web-components 3.16.62 → 3.16.64

package/dist/TreasuryOverviewPage-CmxphIXy.js

@@ -1,1890 +0,0 @@
-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-DtFedGku.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-DosfnUdx.js";
-import { D as ut } from "./commonDimensions-BQ31MjFy.js";
-import { H as Ee, a as Ne, e as yt, O as ft, d as wt } from "./common-DFxg6rgB.js";
-import { css as we } from "@emotion/react";
-import { B as $e } from "./BoxItem-ZoabduyR.js";
-import { a as $t, g as he } from "./treasuryColorHelper-BQ5HIVfr.js";
-import { S as jt } from "./transaction-placeholder-CpOwZAMG.js";
-import { M as St } from "./MoreMenuButton-BWhjjpQX.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
-};