@zeniai/web-components 3.16.96 → 3.16.98

package/dist/ZeniAccountListViewPage-BmBDya-j.js

@@ -1,1078 +0,0 @@
-import { j as t, g as De, u as _e, F as Re, m as Fe } from "./vendor-.pnpm-B2klaOGU.js";
-import * as S from "react";
-import { useEffect as Ee, useState as R } from "react";
-import o from "@emotion/styled";
-import { u as X, a as K, S as n, C as i, hW as Ne, j5 as Ge, F as j, B as Ue, E as ee, dB as We, fa as Ye, hv as E, t as b, e as N, R as x, a2 as G, Z as ye, j6 as Oe, aw as Ze, J as He, aq as qe, y as Ve, _ as Je, D as a, ag as ke, j7 as Qe, z as Xe, P as Ke, aD as et, dM as tt, ey as nt, aP as O, fM as ot, aQ as oe, aR as ie, j8 as it, aE as st, V as rt, o as at, ai as ct, K as lt } from "./index-CQQUoxL8.js";
-import { hasAnyFinOpRole as dt } from "@zeniai/client-epic-state";
-import { B as pt } from "./BusyIndication-BqO5GnlW.js";
-import { S as ut } from "./auto-transfer-rule-mbafm5D3.js";
-import { S as mt } from "./clock-CJkylEKt.js";
-import { S as ht } from "./shield-DOlUxcFf.js";
-import { Z as gt } from "./ZeniAccountNavBarPieces-L0SC7nSH.js";
-import { Z as xt } from "./ZeniTransferAmountSlider-D3v1YHoZ.js";
-const $t = (e) => /* @__PURE__ */ S.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ S.createElement("path", { d: "M23.0041 11.8483C23.0373 14.1699 22.335 16.4424 20.9979 18.3405C19.6607 20.2386 17.7572 21.665 15.5599 22.4153C13.3627 23.1656 10.9844 23.2014 8.76551 22.5175C6.54667 21.8337 4.60111 20.4653 3.20741 18.6083C1.81371 16.7513 1.04335 14.5009 1.00664 12.1794C0.969926 9.85784 1.66875 7.58422 3.00303 5.68407C4.33732 3.78392 6.23864 2.3547 8.43475 1.60106C10.6309 0.84741 13.0091 0.807991 15.229 1.48844", stroke: "#757D7E", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M7.17736 14.8498L12.3225 8.44116C12.431 8.30616 12.5835 8.21419 12.7532 8.1815C12.9228 8.14882 13.0985 8.17753 13.2493 8.26255L16.2512 9.95329C16.4047 10.0398 16.5839 10.0678 16.7561 10.0324C16.9283 9.99691 17.0819 9.90029 17.1889 9.76018L21.3745 4.27979", stroke: "#757D7E", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M18.4739 4.60986L21.3623 4.13001L21.845 7.03577", stroke: "#757D7E", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), {
-  spendManagement: {
-    treasury: { promoBanner: m, promoPage: se }
-  }
-} = K.getLocalizedStrings(), ft = ({
-  yieldPercentage: e = 4.35,
-  insuredAmount: c = 5e5,
-  onGetStartedClick: f,
-  style: v
-}) => {
-  const r = X(), B = (l, L) => Object.entries(L).reduce(
-    (I, [C, $]) => I.replace(new RegExp(`__${C}__`, "g"), $),
-    l
-  ), P = (l) => `$${Intl.NumberFormat("en", { notation: "compact" }).format(
-    l
-  )}`, T = `${e}%`, w = P(c), z = [
-    {
-      icon: /* @__PURE__ */ t.jsx(vt, {}),
-      title: B(m.features.yield, {
-        yieldPercentage: T
-      }),
-      id: "yield"
-    },
-    {
-      icon: /* @__PURE__ */ t.jsx(Bt, {}),
-      title: B(m.features.insured, {
-        insuredAmount: w
-      }),
-      id: "insured"
-    },
-    {
-      icon: /* @__PURE__ */ t.jsx(zt, {}),
-      title: m.features.liquidity,
-      showAsterisk: !0,
-      id: "liquidity"
-    },
-    {
-      icon: /* @__PURE__ */ t.jsx(Lt, {}),
-      title: m.features.automation,
-      id: "automation"
-    }
-  ];
-  return /* @__PURE__ */ t.jsxs(wt, { style: v, children: [
-    /* @__PURE__ */ t.jsx(yt, {}),
-    r !== "small" && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsx(kt, {}),
-      /* @__PURE__ */ t.jsx(jt, {})
-    ] }),
-    /* @__PURE__ */ t.jsx(Ct, { windowSize: r, children: r === "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsxs(At, { children: [
-        /* @__PURE__ */ t.jsx(re, { windowSize: r, children: /* @__PURE__ */ t.jsx(ae, { windowSize: r }) }),
-        /* @__PURE__ */ t.jsx(ce, { children: m.title })
-      ] }),
-      /* @__PURE__ */ t.jsx(le, { windowSize: r, children: z.map((l) => /* @__PURE__ */ t.jsxs(de, { windowSize: r, children: [
-        /* @__PURE__ */ t.jsx(pe, { children: l.icon }),
-        /* @__PURE__ */ t.jsxs(ue, { children: [
-          l.title,
-          l.showAsterisk === !0 && /* @__PURE__ */ t.jsx(me, { children: "*" })
-        ] })
-      ] }, l.id)) }),
-      /* @__PURE__ */ t.jsx(bt, { children: /* @__PURE__ */ t.jsx(he, { children: /* @__PURE__ */ t.jsx(
-        ge,
-        {
-          variant: "primary",
-          label: m.button,
-          onClick: f,
-          size: "small",
-          style: {
-            padding: `${n.sp1} 12px`
-          }
-        }
-      ) }) }),
-      /* @__PURE__ */ t.jsx(xe, { windowSize: r, children: /* @__PURE__ */ t.jsxs($e, { windowSize: r, children: [
-        m.disclaimer.split("__termsLink__")[0],
-        /* @__PURE__ */ t.jsx(
-          fe,
-          {
-            href: se.zeniTermsOfServiceLink,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            children: m.termsLink
-          }
-        ),
-        m.disclaimer.split("__termsLink__")[1]
-      ] }) })
-    ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsx(re, { windowSize: r, children: /* @__PURE__ */ t.jsx(ae, { windowSize: r }) }),
-      /* @__PURE__ */ t.jsxs(St, { windowSize: r, children: [
-        /* @__PURE__ */ t.jsx(ce, { children: m.title }),
-        /* @__PURE__ */ t.jsx(le, { windowSize: r, children: z.map((l) => /* @__PURE__ */ t.jsxs(de, { windowSize: r, children: [
-          /* @__PURE__ */ t.jsx(pe, { children: l.icon }),
-          /* @__PURE__ */ t.jsxs(ue, { children: [
-            l.title,
-            l.showAsterisk === !0 && /* @__PURE__ */ t.jsx(me, { children: "*" })
-          ] })
-        ] }, l.id)) }),
-        /* @__PURE__ */ t.jsx(xe, { windowSize: r, children: /* @__PURE__ */ t.jsxs($e, { windowSize: r, children: [
-          m.disclaimer.split("__termsLink__")[0],
-          /* @__PURE__ */ t.jsx(
-            fe,
-            {
-              href: se.zeniTermsOfServiceLink,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              children: m.termsLink
-            }
-          ),
-          m.disclaimer.split("__termsLink__")[1]
-        ] }) })
-      ] }),
-      /* @__PURE__ */ t.jsx(he, { children: /* @__PURE__ */ t.jsx(
-        ge,
-        {
-          variant: "primary",
-          label: m.button,
-          onClick: f,
-          size: "small",
-          style: {
-            padding: `${n.sp1} 12px`
-          }
-        }
-      ) })
-    ] }) })
-  ] });
-}, wt = o.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background: ${i.neutralGrey5Light};
-  border: 1px solid ${i.brandColorGold};
-  border-radius: ${n.sp2};
-  overflow: hidden;
-  width: 100%;
-`, yt = o.div`
-  position: absolute;
-  top: ${n.sp0};
-  left: ${n.sp0};
-  right: ${n.sp0};
-  bottom: ${n.sp0};
-  background: ${i.brandColorGold};
-  opacity: 0.2;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: ${n.sp0};
-    left: ${n.sp0};
-    right: ${n.sp0};
-    bottom: ${n.sp0};
-    background: ${i.brandColorGoldDark};
-    opacity: 0.45;
-    background-image: repeating-linear-gradient(
-      45deg,
-      transparent,
-      transparent ${n.sp2},
-      rgba(199, 116, 25, 0.1) ${n.sp2},
-      rgba(199, 116, 25, 0.1) ${n.sp3}
-    );
-  }
-`, kt = o.div`
-  position: absolute;
-  top: ${n.sp0};
-  right: ${n.sp0};
-  width: 200px;
-  height: 150px;
-  z-index: 0;
-  pointer-events: none;
-  overflow: hidden;
-  background-image: url("https://storage.googleapis.com/zeni-apis.appspot.com/images/treasury-promo-right-pattern.png");
-  background-repeat: no-repeat;
-  background-position: top right;
-  background-size: contain;
-`, jt = o.div`
-  position: absolute;
-  bottom: -${n.sp1};
-  left: -${n.sp1};
-  width: 150px;
-  height: 100px;
-  z-index: 0;
-  pointer-events: none;
-  overflow: hidden;
-  background-image: url("https://storage.googleapis.com/zeni-apis.appspot.com/images/treasury-promo-left-pattern.png");
-  background-repeat: no-repeat;
-  background-position: bottom left;
-  background-size: contain;
-`, Ct = o.div`
-  position: relative;
-  display: flex;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-  align-items: ${(e) => e.windowSize === "small" ? "stretch" : "center"};
-  gap: ${(e) => e.windowSize === "small" ? n.sp2 : "12px"};
-  padding: ${(e) => e.windowSize === "small" ? n.sp3 : `${n.sp3} ${n.sp4}`};
-  z-index: 1;
-`, re = o.div`
-  display: flex;
-  align-self: flex-start;
-  justify-content: center;
-  width: ${(e) => e.windowSize === "small" ? n.sp6 : n.sp9};
-  height: ${(e) => e.windowSize === "small" ? n.sp6 : n.sp9};
-  flex-shrink: 0;
-`, At = o.div`
-  display: flex;
-  align-items: center;
-  gap: ${n.sp2};
-`, bt = o.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin-top: ${n.sp2};
-  margin-left: ${n.sp7};
-`, ae = o(Ne)`
-  width: ${(e) => e.windowSize === "small" ? n.sp6 : n.sp9};
-  height: ${(e) => e.windowSize === "small" ? n.sp6 : n.sp9};
-  color: ${i.brandColorGoldDark};
-
-  & path {
-    stroke: ${i.brandColorGoldDark};
-    stroke-width: 1px;
-  }
-`, St = o.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${n.sp1};
-  flex: 1;
-`, ce = o(Ge)`
-  color: ${i.brandColorGoldDark};
-  margin-bottom: ${n.sp1};
-`, le = o.div`
-  display: ${(e) => e.windowSize === "small" ? "flex" : "grid"};
-  ${(e) => e.windowSize === "small" ? `
-      flex-direction: column;
-      gap: ${n.sp2};
-      margin-left: ${n.sp7};
-    ` : `
-      grid-template-columns: 1fr 1fr;
-      gap: ${n.sp1};
-    `}
-`, de = o.div`
-  display: flex;
-  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
-  gap: ${n.sp1};
-`, pe = o.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${n.sp3};
-  height: ${n.sp3};
-  flex-shrink: 0;
-`, ue = o(j)`
-  color: ${i.primaryLight};
-`, me = o.span`
-  color: ${i.primaryLight};
-`, he = o.div`
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-`, ge = o(Ue)`
-  background: ${i.brandColorGoldDark};
-  border-color: ${i.brandColorGoldDark};
-  color: ${i.neutralGrey5Light};
-  :hover {
-    background: ${i.brandColorGoldDark};
-    border-color: ${i.brandColorGoldDark};
-    color: ${i.neutralGrey5Light};
-  }
-`, xe = o.div`
-  position: relative;
-  margin-top: ${(e) => e.windowSize === "small" ? n.sp2 : "0"};
-  padding: ${(e) => e.windowSize === "small" ? `0 ${n.sp2}` : "0"};
-`, $e = o(ee)`
-  color: ${i.heroLight};
-  white-space: pre-line;
-  text-align: ${(e) => e.windowSize === "small" ? "center" : "left"};
-`, fe = o.a`
-  color: ${i.heroLight};
-  text-decoration: underline;
-  text-decoration-color: ${i.neutralGrey2Light};
-  cursor: pointer;
-
-  &:hover {
-    color: ${i.primaryLight};
-    text-decoration-color: ${i.primaryLight};
-  }
-`, vt = o($t)`
-  width: ${n.sp3};
-  height: ${n.sp3};
-  color: ${i.brandColorGoldDark};
-
-  & path {
-    stroke: currentColor;
-  }
-`, Bt = o(ht)`
-  width: ${n.sp3};
-  height: ${n.sp3};
-  color: ${i.brandColorGoldDark};
-`, zt = o(mt)`
-  width: ${n.sp3};
-  height: ${n.sp3};
-  color: ${i.brandColorGoldDark};
-`, Lt = o(ut)`
-  width: ${n.sp3};
-  height: ${n.sp3};
-  color: ${i.brandColorGoldDark};
-`, Pt = (e) => /* @__PURE__ */ S.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ S.createElement("path", { d: "M1.50005 3.41819V11.3868C1.49582 13.9724 2.27853 16.4989 3.74542 18.6344C5.2123 20.77 7.29478 22.4147 9.71941 23.3528L10.8398 23.7848C11.5863 24.0717 12.4137 24.0717 13.1602 23.7848L14.2806 23.3528C16.7052 22.4147 18.7877 20.77 20.2546 18.6344C21.7215 16.4989 22.5042 13.9724 22.4999 11.3868V3.41819C22.5025 3.11029 22.4157 2.80819 22.2499 2.54802C22.0842 2.28785 21.8466 2.08063 21.5655 1.95114C18.5518 0.635546 15.2915 -0.0291648 12 0.000981362C8.70855 -0.0291648 5.44817 0.635546 2.43455 1.95114C2.15343 2.08063 1.91579 2.28785 1.75007 2.54802C1.58435 2.80819 1.49755 3.11029 1.50005 3.41819Z", fill: "#36B37E" }), /* @__PURE__ */ S.createElement("path", { d: "M16.5194 8.42881L11.3671 13.3387C11.3022 13.4007 11.2254 13.4489 11.1414 13.4802C11.0573 13.5116 10.9677 13.5256 10.8781 13.5212C10.7897 13.517 10.703 13.4951 10.6232 13.4568C10.5434 13.4185 10.4721 13.3646 10.4135 13.2982L8.06814 10.6339", stroke: "#FAFAFA", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), g = {
-  bankAccListBottomMargin: new x(a[7], a[6]),
-  iconWidthHeight: new x(a[6], a[4]),
-  containerWidth: new x(96, 67),
-  containerTopMargin: new x(a[4], a[6]),
-  BankAccListTopMargin: new x(a[4], a[8]),
-  containerSidePadding: new x(a[3], a[0]),
-  accountRowLeftRightPadding: new x(a[3], a[4]),
-  accountRowTopBottomPadding: new x(a[3], a[4]),
-  accountRowBottomMargin: new x(a[3], a[5]),
-  totalInsuredAndYieldContainerTopMargin: new x(a[3], a[0]),
-  paymentAccountIconSize: new x(a[6], a[7])
-}, Tt = {
-  bankAccountName: new Ze("standardRegular", "largeMedium")
-}, p = K.getLocalizedStrings(), Z = (e) => /* @__PURE__ */ t.jsx(Ot, { children: e }), It = ({
-  fetchState: e,
-  onReloadTransactions: c
-}) => e === "Error" ? /* @__PURE__ */ t.jsxs(dn, { children: [
-  /* @__PURE__ */ t.jsx(
-    pn,
-    {
-      onClick: c,
-      "data-testid": N("zeni-account-list-reload"),
-      children: /* @__PURE__ */ t.jsx(un, {})
-    }
-  ),
-  /* @__PURE__ */ t.jsx(mn, { children: p.peoplePage.reloadPage.label })
-] }) : /* @__PURE__ */ t.jsx(pt, { fetchState: e, styles: { margin: "auto" } }), Mt = ({
-  zeniAccountListView: e,
-  zeniAccountsConfigDetail: c,
-  maxInsuredAmountString: f,
-  analytics: v,
-  onZeniAccountRowClick: r,
-  onReloadTransactions: B,
-  handleAddInternalAccountClick: P,
-  onAddFundClick: T,
-  onTreasuryGetStartedClick: w,
-  treasuryYieldPercentage: z,
-  treasuryInsuredAmount: l,
-  showTreasuryPromo: L
-}) => {
-  const { depositAccountsSelectorView: I, fetchState: C, summary: $ } = e, u = X(), M = We(), y = M.loggedInUserRoleMap.deposit_accounts_user === !0 || dt(M.loggedInUserRoleMap), D = (s) => {
-    v.trackAccountsListPageClicked(
-      "Add Funds",
-      s.accountName,
-      "active"
-    ), T("transfer", s);
-  }, F = (s) => {
-    switch (s) {
-      case "totalBalance":
-        return "320px";
-      case "insuredBalance":
-        return "320px";
-      case "totalInterest":
-        return "290px";
-      default:
-        return "320px";
-    }
-  }, A = (s) => {
-    let k = /* @__PURE__ */ t.jsx(t.Fragment, {});
-    switch (s) {
-      case "insuredBalance":
-        k = /* @__PURE__ */ t.jsx(q, { style: { width: "300px" }, children: p.spendManagement.zeniAccounts.zeniAccountList.insuranceTooltip.replace(
-          "__amount__",
-          f
-        ) });
-        break;
-      case "totalInterest":
-        k = /* @__PURE__ */ t.jsx(q, { children: p.spendManagement.zeniAccounts.zeniAccountList.yieldTooltip });
-        break;
-      case "totalBalance":
-        k = /* @__PURE__ */ t.jsxs(q, { style: { paddingTop: "12px", paddingBottom: "12px" }, children: [
-          /* @__PURE__ */ t.jsx(fn, { children: p.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.base }),
-          /* @__PURE__ */ t.jsxs(V, { children: [
-            /* @__PURE__ */ t.jsx(J, { children: p.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.balance }),
-            /* @__PURE__ */ t.jsx(Q, { children: G("0,0[.]00", $?.totalBalance.current) })
-          ] }),
-          /* @__PURE__ */ t.jsxs(V, { children: [
-            /* @__PURE__ */ t.jsx(J, { children: p.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.processing }),
-            /* @__PURE__ */ t.jsx(Q, { children: G("0,0[.]00", $?.totalBalance.hold) })
-          ] }),
-          /* @__PURE__ */ t.jsxs(V, { children: [
-            /* @__PURE__ */ t.jsx(J, { children: p.spendManagement.zeniAccounts.zeniAccountList.balanceTooltip.available }),
-            /* @__PURE__ */ t.jsx(Q, { children: G("0,0[.]00", $?.totalBalance.available) })
-          ] })
-        ] });
-        break;
-    }
-    return /* @__PURE__ */ t.jsx(gn, { children: /* @__PURE__ */ t.jsx(
-      ye,
-      {
-        style: {
-          textAlign: "left",
-          padding: n.sp1
-        },
-        maxWidth: F(s),
-        display: "flex",
-        placement: u === "small" ? "bottom" : "top",
-        title: k,
-        children: s === "insuredBalance" ? /* @__PURE__ */ t.jsx($n, {}) : /* @__PURE__ */ t.jsx(xn, {})
-      }
-    ) });
-  }, U = (s) => /* @__PURE__ */ t.jsx(
-    Wt,
-    {
-      color: Oe(s)
-    }
-  );
-  return Ye({
-    componentName: "checking.list",
-    enabled: C === "Completed"
-  }), /* @__PURE__ */ t.jsx(Dt, { children: C === "Completed" ? /* @__PURE__ */ t.jsxs(hn, { windowSize: u, children: [
-    /* @__PURE__ */ t.jsxs(Et, { windowSize: u, children: [
-      /* @__PURE__ */ t.jsxs(Yt, { windowSize: u, children: [
-        /* @__PURE__ */ t.jsxs(H, { children: [
-          Z(
-            p.spendManagement.zeniAccounts.zeniAccountList.totalAvailableBalance
-          ),
-          A("totalBalance")
-        ] }),
-        /* @__PURE__ */ t.jsx(E, { amount: $?.totalBalance.available })
-      ] }),
-      /* @__PURE__ */ t.jsxs(_t, { windowSize: u, children: [
-        /* @__PURE__ */ t.jsxs(Jt, { children: [
-          /* @__PURE__ */ t.jsxs(H, { children: [
-            Z(
-              p.spendManagement.zeniAccounts.zeniAccountList.insuredFund
-            ),
-            A("insuredBalance")
-          ] }),
-          /* @__PURE__ */ t.jsx(
-            E,
-            {
-              amount: $?.insuredBalance.available,
-              integerStyles: b.largeMedium.cssObject,
-              decimalStyles: b.smallMedium.cssObject
-            }
-          ),
-          /* @__PURE__ */ t.jsx(qt, { children: p.spendManagement.zeniAccounts.zeniAccountList.insuranceInfo.replace(
-            "__amount__",
-            f
-          ) })
-        ] }),
-        /* @__PURE__ */ t.jsxs(Qt, { children: [
-          /* @__PURE__ */ t.jsxs(H, { children: [
-            Z(
-              p.spendManagement.zeniAccounts.common.totalYieldEarned
-            ),
-            A("totalInterest")
-          ] }),
-          /* @__PURE__ */ t.jsx(
-            E,
-            {
-              amount: $?.totalInterest.available,
-              integerStyles: b.largeMedium.cssObject,
-              decimalStyles: b.smallMedium.cssObject
-            }
-          ),
-          /* @__PURE__ */ t.jsxs(Zt, { children: [
-            p.spendManagement.zeniAccounts.zeniAccountList.currentAverageYield,
-            /* @__PURE__ */ t.jsx(Ht, { children: c.zeniAccountsConfigDetail.annualPercentageYield })
-          ] })
-        ] })
-      ] })
-    ] }),
-    L === !0 && /* @__PURE__ */ t.jsx(wn, { windowSize: u, children: /* @__PURE__ */ t.jsx(
-      ft,
-      {
-        yieldPercentage: z,
-        insuredAmount: l,
-        onGetStartedClick: () => {
-          v.trackAccountsListPageClicked("Move Money"), w?.();
-        }
-      }
-    ) }),
-    /* @__PURE__ */ t.jsxs(Ut, { windowSize: u, children: [
-      I.depositAccounts.map(
-        (s, k) => /* @__PURE__ */ t.jsxs(
-          Xt,
-          {
-            isClickEnabled: !0,
-            windowSize: u,
-            onClick: () => r?.(
-              s.id,
-              s.accountName
-            ),
-            "data-testid": N(
-              "deposit-account-clicked",
-              s.id
-            ),
-            children: [
-              /* @__PURE__ */ t.jsxs(Vt, { children: [
-                U(k),
-                /* @__PURE__ */ t.jsxs(Kt, { children: [
-                  /* @__PURE__ */ t.jsx(en, { windowSize: u, children: s.accountName }),
-                  /* @__PURE__ */ t.jsxs(tn, { windowSize: u, children: [
-                    /* @__PURE__ */ t.jsx(Nt, { children: /* @__PURE__ */ t.jsx(nn, { children: s.maskedAccountNumber }) }),
-                    /* @__PURE__ */ t.jsxs(Gt, { children: [
-                      u === "small" ? null : /* @__PURE__ */ t.jsx(on, {}),
-                      /* @__PURE__ */ t.jsx(sn, { windowSize: u, children: p.spendManagement.zeniAccounts.zeniAccountList.active })
-                    ] })
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ t.jsxs(rn, { children: [
-                /* @__PURE__ */ t.jsx(
-                  E,
-                  {
-                    amount: s.accountBalance.available,
-                    integerStyles: b.largeMedium.cssObject,
-                    decimalStyles: b.smallMedium.cssObject
-                  }
-                ),
-                y ? null : /* @__PURE__ */ t.jsx(
-                  Rt,
-                  {
-                    onClick: (_) => {
-                      _.stopPropagation(), D(s);
-                    },
-                    "data-testid": N(
-                      "add-fund",
-                      s.id
-                    ),
-                    children: /* @__PURE__ */ t.jsx(Ft, { children: p.spendManagement.zeniAccounts.zeniAccountList.addFundBtnText })
-                  }
-                )
-              ] })
-            ]
-          },
-          s.id
-        )
-      ),
-      /* @__PURE__ */ t.jsxs(
-        an,
-        {
-          onClick: P,
-          "data-testid": N("add-new-internal-zeni-account"),
-          children: [
-            /* @__PURE__ */ t.jsx(cn, {}),
-            /* @__PURE__ */ t.jsx(ln, { children: p.spendManagement.zeniAccounts.zeniAccountList.addAccountText })
-          ]
-        }
-      )
-    ] })
-  ] }) : /* @__PURE__ */ t.jsx(
-    It,
-    {
-      fetchState: C,
-      onReloadTransactions: B
-    }
-  ) });
-}, Dt = o.div`
-  display: block;
-  height: 100%;
-`, _t = o.div`
-  display: flex;
-  justify-content: space-between;
-  gap: ${n.sp5};
-  margin: ${(e) => `${g.totalInsuredAndYieldContainerTopMargin.valuePx(e.windowSize)} ${n.sp0} ${n.sp0} ${n.sp0}`};
-`, Rt = o.button`
-  cursor: pointer;
-  border-radius: ${n.sp1};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey2};
-  padding: 1px 6px;
-  :hover {
-    border: 1px solid ${(e) => e.theme.colors.hero};
-  }
-`, Ft = o(qe)`
-  color: ${(e) => e.theme.colors.hero};
-`, Et = o.div`
-  margin: ${(e) => g.containerTopMargin.valuePx(e.windowSize)}
-    ${n.sp0} ${n.sp0} ${n.sp0};
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-  padding: ${(e) => `${n.sp0} ${g.containerSidePadding.valuePx(e.windowSize)} ${n.sp0} ${g.containerSidePadding.valuePx(e.windowSize)}`};
-`, Nt = o.div`
-  display: flex;
-`, Gt = o.div`
-  display: flex;
-  align-items: center;
-`, Ut = o.div`
-  margin: ${(e) => `${g.BankAccListTopMargin.valuePx(e.windowSize)} ${n.sp0} 
-    ${g.bankAccListBottomMargin.valuePx(e.windowSize)} ${n.sp0}`};
-  width: 100%;
-  padding: ${(e) => `${n.sp0}  ${g.containerSidePadding.valuePx(e.windowSize)}`};
-`, Wt = o(Qe)`
-  min-width: ${n.sp7};
-  width: ${n.sp7};
-  height: ${n.sp7};
-  margin-right: 12px;
-`, Yt = o.div`
-  ${(e) => e.windowSize !== "small" ? `
-        width: 50%;
-` : null}
-`, H = o.div`
-  display: flex;
-`, Ot = o(j)`
-  color: ${(e) => e.theme.colors.hero};
-  margin-right: ${n.sp1};
-`, Zt = o(ee)`
-  color: ${(e) => e.theme.colors.hero};
-`, Ht = o.span`
-  margin-left: 2px;
-`, qt = o(ee)`
-  color: ${(e) => e.theme.colors.hero};
-`, Vt = o.div`
-  display: flex;
-  align-items: center;
-  width: calc(100% - 96px);
-`, Jt = o.div``, Qt = o.div``, Xt = o.div`
-  padding-left: ${(e) => g.accountRowTopBottomPadding.valuePx(e.windowSize)};
-  padding-right: ${(e) => g.accountRowTopBottomPadding.valuePx(e.windowSize)};
-  padding-top: ${(e) => g.accountRowTopBottomPadding.valuePx(e.windowSize)};
-  padding-bottom: ${(e) => g.accountRowTopBottomPadding.valuePx(e.windowSize)};
-  background: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${n.sp0} 2px ${n.sp1} ${e.theme.colors.dropShadowNormal} `};
-  border-radius: ${n.sp2};
-  margin-bottom: ${(e) => g.accountRowBottomMargin.valuePx(e.windowSize)};
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  cursor: ${(e) => e.isClickEnabled ? "pointer" : "default"};
-  &:hover {
-    border-color: ${(e) => e.theme.colors.primary};
-    color: ${(e) => e.isClickEnabled ? e.theme.colors.champion : e.theme.colors.hero};
-  }
-`, Kt = o.div`
-  max-width: calc(100% - 30px);
-  width: calc(100% - 40px);
-  white-space: nowrap;
-  overflow: hidden;
-`, en = o(He)`
-  ${(e) => `${Tt.bankAccountName.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  max-width: ${`calc(100% - ${n.sp3})`};
-  text-transform: capitalize;
-  overflow: hidden;
-`, tn = o.div`
-  display: flex;
-  color: ${(e) => e.theme.colors.hero};
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-  align-items: ${(e) => e.windowSize === "small" ? "start" : "center"};
-`, nn = o(j)`
-  margin-left: ${n.sp1};
-`, on = o.div`
-  width: ${n.sp1};
-  height: ${n.sp1};
-  border-radius: 50%;
-  background-color: ${(e) => e.theme.colors.grey1};
-  margin-left: ${n.sp2};
-  margin-right: ${n.sp2};
-`, sn = o(j)`
-  color: ${i.success};
-  border-radius: 50px;
-`, rn = o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-`, an = o.div`
-  padding: ${n.sp3};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid ${(e) => e.theme.colors.hero};
-  border-radius: ${n.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  cursor: pointer;
-  margin-top: ${n.sp4};
-  pointer-events: ${(e) => e.isLoading === !0 ? "none" : "auto"};
-  &:hover {
-    svg {
-      color: ${(e) => e.theme.colors.primary};
-    }
-    color: ${(e) => e.theme.colors.primary};
-    border: 1px solid ${(e) => e.theme.colors.primary};
-  }
-`, cn = o(Ve)`
-  margin-right: ${n.sp2};
-  width: ${n.sp4};
-  height: ${n.sp4};
-  color: ${(e) => e.theme.colors.hero};
-`, ln = o(Je)``, dn = o.div`
-  display: flex;
-  width: 100%;
-  height: calc(100% - 60px);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`, pn = o.div`
-  height: ${n.sp12};
-  width: ${n.sp12};
-  background: ${(e) => e.theme.colors.background};
-  border-radius: 50%;
-  cursor: pointer;
-  & svg {
-    margin: ${n.sp5};
-    color: ${(e) => e.theme.colors.grey1};
-  }
-  &:hover {
-    & svg {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, un = o(Xe)`
-  height: ${n.sp5};
-  width: ${n.sp5};
-  color: ${(e) => e.theme.colors.grey1};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, mn = o(Ke)`
-  margin-top: ${n.sp3};
-  color: ${(e) => e.theme.colors.hero};
-`, hn = o.div`
-  max-width: 726px;
-  width: ${(e) => g.containerWidth.valuePercentage(e.windowSize)};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: auto;
-`, gn = o.div`
-  display: flex;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-    svg {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, xn = o(ke)`
-  width: ${n.sp3};
-  height: ${n.sp3};
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, $n = o(Pt)`
-  width: ${n.sp3};
-  height: ${n.sp3};
-`, q = o(j)`
-  padding: ${n.sp2} ${n.sp3};
-  color: ${(e) => e.theme.colors.hero};
-  border-radius: ${n.sp1};
-`, V = o(j)`
-  color: ${(e) => e.theme.colors.brandColorPearl};
-  margin-top: ${n.sp2};
-  display: flex;
-  justify-content: space-between;
-`, fn = o(j)`
-  margin-bottom: ${n.sp2};
-  display: flex;
-`, J = o.div`
-  color: ${(e) => e.theme.colors.hero};
-`, Q = o.div`
-  color: ${i.primaryDark};
-`, wn = o.div`
-  margin-top: ${n.sp4};
-`, {
-  common: yn,
-  spendManagement: { zeniAccounts: d }
-} = K.getLocalizedStrings(), we = "checkingAccountCreation-form", Un = ({
-  zeniAccountListView: e,
-  analytics: c,
-  maxInsuredAmount: f,
-  isBillPayEnabled: v,
-  isExpressPayEnabled: r,
-  onBackClick: B,
-  onZeniAccountClick: P,
-  onSettingsClick: T,
-  handleMoveMoneyOptionSelection: w,
-  onReloadTransactions: z,
-  onCreateCheckingClick: l,
-  onClickMenuIcon: L,
-  onTreasuryGetStartedClick: I,
-  showTreasuryPromo: C,
-  treasuryYieldPercentage: $,
-  treasuryInsuredAmount: u
-}) => {
-  const M = X(), y = De({
-    mode: "all"
-  }), D = e.newCheckingAccount.fetchState, F = et(D);
-  Ee(() => {
-    F === "In-Progress" && D === "Completed" && (s(!1), _(!0), y.reset());
-  }, [F, D, y]);
-  const A = _e(), [U, s] = R(!1), [k, _] = R(!1), [je, W] = R(!1), [Ce, Ae] = R(0), [be, Se] = R(0), ve = (h, Y) => {
-    P(h, Y);
-  }, Be = {
-    pageName: "listPage",
-    onOptionSelection: (h) => {
-      h === "payBill" ? (c.trackAccountsListPageClicked("Pay Someone"), W(!0)) : (h === "sendMoney" ? c.trackSendMoneyClick() : h === "checkDeposit" ? c.trackAccountsListPageClicked("Deposit a Check") : h === "transfer" && c.trackAccountsListPageClicked("Transfer Between Accounts"), w(h));
-    }
-  }, ze = {
-    onOkClick: () => {
-    },
-    onCancelClick: () => {
-      c.trackAccountsListPageClicked("Add Business Account Cancel"), y.reset(), s(!1);
-    }
-  }, Le = {
-    onOkClick: () => {
-      const h = e.depositAccountsSelectorView.depositAccounts.find(
-        (Y) => Y.id === e.newCheckingAccount.accountId
-      );
-      c.trackAccountsListPageClicked("Add Business Account Add Funds"), w("transfer", h), _(!1);
-    },
-    onCancelClick: () => {
-      c.trackAccountsListPageClicked("Add Business Account Not Now"), _(!1);
-    }
-  }, Pe = {
-    onOkClick: () => {
-      c.trackAccountsListPageClicked("Proceed on Bills pop up"), w("payBill"), W(!1);
-    },
-    onCancelClick: () => {
-      c.trackAccountsListPageClicked("Not Now on Bills pop up"), W(!1);
-    }
-  }, Te = y.handleSubmit((h) => {
-    c.trackAccountsListPageClicked("Add Business Account Create"), l?.(h.checkingAccountNickName);
-  }), te = e.zeniAccountsConfig.zeniAccountsConfigDetail.depositProductConfig.depositProducts, Ie = te[te.length - 1].annualPercentageYield.toString(), ne = tt(
-    nt(f),
-    f,
-    yn.currency.currencySymbol
-  ).toUpperCase(), Me = /* @__PURE__ */ t.jsx(
-    gt,
-    {
-      onSettingsClick: T,
-      isBillPayEnabled: v,
-      isExpressPayEnabled: r,
-      zeniBankProps: Be,
-      analytics: c
-    }
-  );
-  return /* @__PURE__ */ t.jsxs(kn, { children: [
-    U ? /* @__PURE__ */ t.jsx(
-      O,
-      {
-        titleComponent: /* @__PURE__ */ t.jsx(ie, { children: d.zeniAccountList.createPopUpInfo.title }),
-        descriptionComponent: /* @__PURE__ */ t.jsx(oe, { children: d.zeniAccountList.createPopUpInfo.description }),
-        primaryButtonText: d.zeniAccountList.createPopUpInfo.primaryButtonText,
-        isLoading: e.newCheckingAccount.fetchState === "In-Progress",
-        formId: we,
-        secondaryButtonText: d.zeniAccountList.createPopUpInfo.secondaryButtonText,
-        style: { background: i.overlayLight },
-        action: ze,
-        children: /* @__PURE__ */ t.jsx(Re, { ...y, children: /* @__PURE__ */ t.jsx(
-          "form",
-          {
-            id: we,
-            onSubmit: Te,
-            style: {
-              height: n.sp8,
-              width: "80%",
-              marginBottom: n.sp5
-            },
-            children: /* @__PURE__ */ t.jsx(
-              ot,
-              {
-                type: "text",
-                name: "checkingAccountNickName",
-                placeholder: d.zeniAccountList.createPopUpInfo.placeholder,
-                style: {
-                  display: "flex",
-                  flexGrow: 1,
-                  cursor: "inherit",
-                  height: n.sp7,
-                  textAlign: "left",
-                  width: "100%",
-                  background: Fe(
-                    y.formState.errors,
-                    "checkingAccountNickName"
-                  ) === !0 ? i.importantLight : A.colors.grey5,
-                  border: `1px solid ${A.colors.grey2}`
-                },
-                registerOptions: {
-                  required: !0,
-                  validate: (h) => !!h
-                }
-              }
-            )
-          }
-        ) })
-      }
-    ) : null,
-    k ? /* @__PURE__ */ t.jsx(
-      O,
-      {
-        titleComponent: /* @__PURE__ */ t.jsx(t.Fragment, {}),
-        descriptionComponent: /* @__PURE__ */ t.jsx(t.Fragment, {}),
-        primaryButtonText: d.zeniAccountList.addFundsPopUpInfo.primaryButtonText,
-        secondaryButtonText: d.zeniAccountList.addFundsPopUpInfo.secondaryButtonText,
-        action: Le,
-        primaryButtonWidth: 130,
-        secondaryButtonWidth: 130,
-        containerStyle: {
-          minWidth: 352,
-          maxWidth: 544,
-          width: "90%"
-        },
-        children: /* @__PURE__ */ t.jsxs(Cn, { children: [
-          /* @__PURE__ */ t.jsx(
-            it,
-            {
-              width: 150,
-              height: 150,
-              shouldDisplay: !0,
-              animationInLoop: 1,
-              styles: { marginBottom: -n.sp4 }
-            }
-          ),
-          /* @__PURE__ */ t.jsx(An, { children: d.zeniAccountList.addFundsPopUpInfo.title }),
-          /* @__PURE__ */ t.jsx(bn, { children: d.zeniAccountList.addFundsPopUpInfo.description.replace("__rate__", Ie).replace("__amount__", ne) }),
-          /* @__PURE__ */ t.jsx(
-            xt,
-            {
-              transferAmount: 5e5,
-              currentAccountBalance: 0,
-              zeniAccountsConfigDetail: e.zeniAccountsConfig,
-              minStep: 0.1,
-              setTotalBalance: Se,
-              setYieldEarned: Ae
-            }
-          ),
-          /* @__PURE__ */ t.jsxs(Sn, { children: [
-            /* @__PURE__ */ t.jsxs(Bn, { children: [
-              d.zeniAccountList.transferDrawer.calculator.footerText.annualYieldEarned,
-              /* @__PURE__ */ t.jsx(vn, { children: G("0,0", {
-                amount: Ce,
-                currencySymbol: "$"
-              }) }),
-              /* @__PURE__ */ t.jsx(
-                ye,
-                {
-                  variant: "small-description",
-                  maxWidth: "280px",
-                  data: d.zeniAccountList.transferDrawer.calculator.footerText.annualYieldEarnedTooltipText,
-                  display: "flex",
-                  placement: "left",
-                  children: /* @__PURE__ */ t.jsx(Ln, {})
-                }
-              )
-            ] }),
-            /* @__PURE__ */ t.jsxs(zn, { children: [
-              d.zeniAccountList.transferDrawer.calculator.footerText.for,
-              Intl.NumberFormat("en", {
-                currency: "USD",
-                notation: "compact",
-                style: "currency",
-                minimumFractionDigits: 0
-              }).format(be)
-            ] })
-          ] })
-        ] })
-      }
-    ) : null,
-    je ? /* @__PURE__ */ t.jsx(
-      O,
-      {
-        titleComponent: /* @__PURE__ */ t.jsx(ie, { children: d.zeniAccountList.billPayupPopUpInfo.title }),
-        descriptionComponent: /* @__PURE__ */ t.jsx(oe, { children: d.zeniAccountList.billPayupPopUpInfo.description }),
-        primaryButtonText: d.zeniAccountList.billPayupPopUpInfo.primaryButtonText,
-        secondaryButtonText: d.zeniAccountList.billPayupPopUpInfo.secondaryButtonText,
-        action: Pe,
-        primaryButtonWidth: 130,
-        secondaryButtonWidth: 130
-      }
-    ) : null,
-    /* @__PURE__ */ t.jsx(
-      st,
-      {
-        title: d.zeniAccountList.tabsById.zeniAccounts,
-        onBackClick: B,
-        showMenuIcon: M === "medium-compact" || M === "small",
-        backgroundColor: A.colors.grey4,
-        style: { zIndex: 3, ...b.largeSemiBold.cssObject },
-        rightSideComponent: Me,
-        onClickMenuIcon: L,
-        hideSearchBtn: !0,
-        source: "ZeniAccountListViewPage"
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      jn,
-      {
-        isLoading: e.fetchState === "In-Progress",
-        children: /* @__PURE__ */ t.jsx(
-          Mt,
-          {
-            zeniAccountsConfigDetail: e.zeniAccountsConfig,
-            zeniAccountListView: e,
-            onZeniAccountRowClick: ve,
-            onAddFundClick: w,
-            handleAddInternalAccountClick: () => {
-              c.trackAccountsListPageClicked("Add Business Account"), s(!0);
-            },
-            analytics: c,
-            onReloadTransactions: z,
-            maxInsuredAmountString: ne,
-            onTreasuryGetStartedClick: I,
-            treasuryYieldPercentage: $,
-            treasuryInsuredAmount: u,
-            showTreasuryPromo: C
-          }
-        )
-      }
-    )
-  ] });
-}, kn = o.div`
-  display: flex;
-  min-height: 100%;
-  flex-direction: column;
-  width: 100%;
-`, jn = o.div`
-  display: ${(e) => e.isLoading ? "flex" : "block"};
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  min-height: ${(e) => e.isLoading ? `calc(100vh - ${n.sp10})` : "100vh"};
-  height: ${(e) => e.isLoading ? `calc(100vh - ${n.sp10})` : "100%"};
-`, Cn = o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: ${n.sp4};
-`, An = o(rt)`
-  padding-left: ${n.sp8};
-  padding-right: ${n.sp8};
-  color: ${(e) => e.theme.colors.primary};
-  word-break: break-word;
-`, bn = o(at)`
-  color: ${(e) => e.theme.colors.hero};
-  padding-left: ${n.sp6};
-  padding-right: ${n.sp6};
-  margin-bottom: ${n.sp3};
-  margin-top: ${n.sp3};
-  white-space: pre-line;
-`, Sn = o.div`
-  min-height: ${n.sp10};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`, vn = o.span`
-  font-weight: ${lt.medium};
-  margin-left: ${n.sp1};
-`, Bn = o(ct)`
-  color: ${i.success};
-  display: flex;
-  align-items: center;
-`, zn = o(j)`
-  color: ${(e) => e.theme.colors.grey1};
-  display: block;
-`, Ln = o(ke)`
-  width: ${n.sp3};
-  color: ${(e) => e.theme.colors.hero};
-  height: ${n.sp3};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`;
-export {
-  Un as default
-};