@zeniai/web-components 3.17.22 → 3.17.23

package/dist/TransactionListBig-CDgdq8hU.js

@@ -0,0 +1,658 @@
+import { j as t, C as oe, an as ne, A as ie, as as se } from "./vendor-.pnpm-UYinI_7q.js";
+import v, { createRef as ae, useState as re, useRef as le } from "react";
+import n from "@emotion/styled";
+import { hasAdminLevelAccess as W, hasInvestorBankerLevelAccess as ce, hasZeniAccountsAdminLevelAccess as de } from "@zeniai/client-epic-state";
+import { a as x, ei as O, u as L, A as me, e as w, B as V, S as o, a9 as X, aw as j, C as P, P as q, R as a, D as i, a2 as he, eM as ge, dX as pe, J as Q, eN as ue, t as xe, F as we, V as $e } from "./index-DOFSm78O.js";
+import { g as ye, a as Se } from "./AccountsPromoCardStack-BQeRFxKs.js";
+import { css as be } from "@emotion/react";
+import { Event as Y } from "@zeniai/client-analytics";
+const fe = {
+  textContainer: new j("extraSmallRegular", "smallRegular")
+}, Ce = n.div`
+  color: ${(e) => e.theme.colors.hero};
+  cursor: default;
+`, ve = n.div`
+  color: ${P.important};
+  opacity: 1;
+  cursor: default;
+`, G = n.span`
+  top: -2px;
+  position: relative;
+  color: ${(e) => e.theme.colors.grey1};
+  ${(e) => `${fe.textContainer.style(e.windowSize)}`};
+`, ze = n(X)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  margin-right: 6px;
+  color: ${(e) => e.theme.colors.hero};
+  visibility: hidden;
+  cursor: pointer;
+`, ke = n(X)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  margin-right: 6px;
+  color: ${P.important};
+  visibility: hidden;
+  cursor: pointer;
+`, je = n.div`
+  border: 1px solid ${(e) => e.theme.colors.grey5};
+  cursor: default;
+  padding: ${o.sp1} ${o.sp0} ${o.sp3};
+  z-index: 1;
+  position: absolute;
+  background: ${(e) => e.theme.colors.grey5};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp2} ${e.theme.colors.dropShadowNormal}`};
+  text-align: left;
+  border-radius: ${o.sp1};
+  width: 270px;
+  right: 5%;
+`, J = n.div`
+  padding: 10px 12px 12px ${o.sp0};
+  background: ${(e) => e.checked ? e.theme.colors.grey3 : "transparent"};
+  & input {
+    width: ${o.sp3} !important;
+    height: ${o.sp3};
+    background: transparent;
+    border: solid 1px ${(e) => e.theme.colors.grey1};
+    border-radius: 50%;
+    cursor: pointer;
+    background-clip: content-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: ${o.sp2} ${o.sp2} ${o.sp0} ${o.sp2};
+  }
+  & input[type="radio"]:checked {
+    content: "";
+    padding: 3px;
+    border: solid 1px ${(e) => e.theme.colors.primary};
+    background-color: ${(e) => e.theme.colors.primary};
+  }
+`, De = n.div`
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`, Te = n.div`
+  width: ${o.sp5};
+  height: 29px;
+  margin-right: 2px;
+  border-radius: ${o.sp1};
+  color: ${(e) => e.isSelectedDate ? e.theme.colors.grey5 : e.theme.colors.hero};
+  cursor: pointer;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  background: ${(e) => e.isSelectedDate ? e.theme.colors.primary : ""};
+  &:hover {
+    background: ${(e) => e.isSelectedDate ? e.theme.colors.primary : e.theme.colors.grey2};
+  }
+`, Pe = n(q)`
+  text-align: center;
+`, Z = n(q)`
+  top: -2px;
+  position: relative;
+  cursor: pointer;
+`, Be = n.div`
+  border-top: 1px solid ${(e) => e.theme.colors.grey4};
+  padding-top: ${o.sp3};
+  display: flex;
+  justify-content: center;
+`, Ae = n.span`
+  width: 20px;
+  margin: ${o.sp0} 6px;
+  display: inline-block;
+  background: ${(e) => e.theme.colors.background};
+  text-align: center;
+  border-radius: ${o.sp1};
+`;
+function He({
+  accountDetails: e,
+  analytics: S,
+  isZeniUser: h,
+  onSetAccountsStatementDate: z
+}) {
+  const d = x.getLocalizedStrings().statementCloseDay.dropdown.option1, g = x.getLocalizedStrings().statementCloseDay.dropdown.option2, [D, b] = v.useState(!1), s = e.statementCloseDay, [y, $] = v.useState(
+    s !== "LAST_DAY_OF_THE_MONTH" ? d : g
+  ), [u, m] = v.useState(
+    s !== "LAST_DAY_OF_THE_MONTH" ? s : void 0
+  ), [M, B] = v.useState(!1), _ = v.useRef(s), A = O();
+  v.useEffect(() => {
+    _.current !== s && B(!1);
+  }, [s]);
+  const H = (r) => {
+    W(A.loggedInUserRole ?? []) && (r.stopPropagation(), r.preventDefault(), b(!0), S.trackCardStatementCloseDate(
+      Y.cardStatementCloseDateClicked,
+      e.accountId,
+      e.accountName,
+      "Card Balance",
+      ""
+    ));
+  }, E = (r) => {
+    const c = ["th", "st", "nd", "rd"], U = r % 100;
+    return r + (c[(U - 20) % 10] || c[U] || c[0]);
+  };
+  let k = "";
+  s !== void 0 && (s === "LAST_DAY_OF_THE_MONTH" ? k = x.getLocalizedStrings().statementCloseDay.ordinalText.lastDate : k = `${x.getLocalizedStrings().statementCloseDay.ordinalText.prefix} ${E(s)} ${x.getLocalizedStrings().statementCloseDay.ordinalText.suffix}`);
+  const I = (r) => {
+    const c = r.target.value;
+    c === g && m(void 0), $(c);
+  }, p = (r, c) => {
+    r.stopPropagation(), m(c), $(d);
+  }, f = () => {
+    m(void 0), $(g);
+  }, F = () => {
+    const r = e.accountId, c = u ?? "LAST_DAY_OF_THE_MONTH";
+    s !== c && (B(!0), z?.(r, c)), b(!1), S.trackCardStatementCloseDate(
+      Y.cardStatementCloseDateSaved,
+      e.accountId,
+      e.accountName,
+      "Card Balance",
+      u !== void 0 ? `${u}` : "End"
+    );
+  }, ee = () => /* @__PURE__ */ t.jsxs(Z, { children: [
+    x.getLocalizedStrings().statementCloseDay.pickDate.prefix,
+    /* @__PURE__ */ t.jsx(Ae, { children: u ?? " - " }),
+    x.getLocalizedStrings().statementCloseDay.pickDate.suffix
+  ] }), te = () => /* @__PURE__ */ t.jsxs(
+    je,
+    {
+      role: "presentation",
+      "data-testid": w("statement-close-day-section"),
+      onClick: (r) => {
+        r.stopPropagation();
+      },
+      children: [
+        /* @__PURE__ */ t.jsxs(J, { checked: y === d, children: [
+          /* @__PURE__ */ t.jsx(
+            "input",
+            {
+              type: "radio",
+              name: "statementCloseDay",
+              id: d,
+              value: d,
+              onChange: I,
+              checked: y === d,
+              style: { width: "100%" },
+              "data-testid": w("statement-close-day-input")
+            }
+          ),
+          ee(),
+          /* @__PURE__ */ t.jsx(De, { children: Array.from({ length: 28 }, (r, c) => c + 1).map((r) => /* @__PURE__ */ t.jsx(
+            Te,
+            {
+              isSelectedDate: r === u,
+              "data-testid": w("statement-close-day-text"),
+              onClick: (c) => p(c, r),
+              children: /* @__PURE__ */ t.jsx(Pe, { children: r })
+            },
+            r
+          )) })
+        ] }),
+        /* @__PURE__ */ t.jsxs(J, { checked: y === g, children: [
+          /* @__PURE__ */ t.jsx(
+            "input",
+            {
+              type: "radio",
+              name: "statementCloseDay",
+              id: g,
+              value: g,
+              onChange: I,
+              checked: y === g,
+              style: { width: "100%" },
+              "data-testid": w(
+                "statement-close-day-input-last-day"
+              )
+            }
+          ),
+          /* @__PURE__ */ t.jsx(Z, { onClick: () => f(), children: x.getLocalizedStrings().statementCloseDay.lastDate.text })
+        ] }),
+        /* @__PURE__ */ t.jsxs(Be, { children: [
+          /* @__PURE__ */ t.jsx(
+            V,
+            {
+              size: "small",
+              variant: "secondary",
+              label: "Cancel",
+              onClick: () => {
+                b(!1);
+              },
+              style: { marginRight: o.sp3 },
+              "data-testid": w(
+                "statement-close-day-button-secondary"
+              )
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            V,
+            {
+              size: "small",
+              variant: "primary",
+              label: "Save",
+              onClick: F,
+              disabled: u == null && y !== g,
+              "data-testid": w(
+                "statement-close-day-button-primary"
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  ), N = L();
+  return /* @__PURE__ */ t.jsx(oe, { onClickAway: () => b(!1), children: /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      onClick: H,
+      "data-testid": w("statement-close-day-modal"),
+      children: [
+        M ? /* @__PURE__ */ t.jsx(me, { size: "Small", start: !0 }) : k ? /* @__PURE__ */ t.jsxs(
+          Ce,
+          {
+            "data-testid": w("edit-statement-close-day"),
+            children: [
+              /* @__PURE__ */ t.jsx(ze, {}),
+              /* @__PURE__ */ t.jsx(
+                G,
+                {
+                  className: "statementCloseDayText",
+                  windowSize: N,
+                  children: k
+                }
+              )
+            ]
+          }
+        ) : W(A.loggedInUserRole ?? []) && h === !0 ? /* @__PURE__ */ t.jsxs(
+          ve,
+          {
+            "data-testid": w("add-statement-close-day"),
+            children: [
+              /* @__PURE__ */ t.jsx(ke, {}),
+              /* @__PURE__ */ t.jsx(
+                G,
+                {
+                  className: "statementCloseDayText",
+                  windowSize: N,
+                  children: x.getLocalizedStrings().statementCloseDay.statement
+                }
+              )
+            ]
+          }
+        ) : "",
+        D ? te() : ""
+      ]
+    }
+  ) });
+}
+const Ie = new a(i[9], 98), C = {
+  contentContainerPadding: new a(i[3], i[4]),
+  minItemHeight: new a(i[9], 96),
+  imageHeight: new a(i[5], i[7]),
+  imageWidth: new a(i[5], i[7]),
+  amountWrapperWidth: new a(100, 230),
+  titleLeftMargin: new a(i[2], i[3])
+}, Le = {
+  textContainer: new j("standardMedium", "largeMedium")
+}, Re = n.div`
+  display: flex;
+  width: 100%;
+`, Me = n.div`
+  cursor: ${(e) => e.isClickEnabled === !0 ? "pointer" : null};
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: ${(e) => C.minItemHeight.valuePx(e.windowSize)};
+  background-color: ${(e) => e.theme.colors.grey5};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${o.sp2};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    border-color: ${(e) => e.isClickEnabled ? e.theme.colors.champion : e.theme.colors.grey3};
+    color: ${(e) => e.isClickEnabled ? e.theme.colors.champion : e.theme.colors.hero};
+    ${(e) => e.showEditStatementIcon ? be`
+            .statementCloseDayText {
+              color: ${e.theme.colors.primary};
+              cursor: pointer;
+            }
+            & svg {
+              visibility: visible;
+            }
+          ` : ""}
+  }
+`, _e = n.div`
+  display: flex;
+  padding: ${(e) => C.contentContainerPadding.valuePx(e.windowSize)};
+  width: 100%;
+`, Ee = n.div`
+  display: flex;
+  align-items: center;
+  width: calc(
+    100% - ${(e) => C.amountWrapperWidth.valuePx(e.windowSize)}
+  );
+  max-width: calc(
+    100% - ${(e) => C.amountWrapperWidth.valuePx(e.windowSize)}
+  );
+  ${(e) => `${Le.textContainer.style(e.windowSize)}`};
+`, Fe = n.img`
+  width: ${(e) => C.imageWidth.valuePx(e.windowSize)};
+  height: ${(e) => C.imageHeight.valuePx(e.windowSize)};
+  object-fit: contain;
+`, We = n.div`
+  margin: ${(e) => `${o.sp0} ${o.sp0} ${o.sp0} ${C.titleLeftMargin.valuePx(e.windowSize)}`};
+  overflow: hidden;
+  text-align: left;
+  min-height: ${o.sp5};
+  max-height: 52px;
+  white-space: initial;
+  word-wrap: break-word;
+`, Oe = n.div`
+  width: ${(e) => C.amountWrapperWidth.valuePx(e.windowSize)};
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  justify-content: center;
+`, Ne = n(ge)``;
+function Ue({
+  data: e,
+  showStatementSection: S,
+  analytics: h,
+  isZeniUser: z,
+  onItemClick: d,
+  onSetAccountsStatementDate: g
+}) {
+  const { key: D, title: b, amount: s, logoUri: y } = e, $ = O(), u = $.loggedInUserRole != null && !ce($.loggedInUserRole), m = L();
+  return /* @__PURE__ */ t.jsx(Re, { windowSize: m, children: /* @__PURE__ */ t.jsx(
+    Me,
+    {
+      "data-testid": w(
+        "transaction-list-item-big",
+        e.title
+      ),
+      windowSize: m,
+      showEditStatementIcon: W($.loggedInUserRole ?? []) && z === !0,
+      isClickEnabled: u,
+      onClick: () => u === !0 ? d?.(D, e.source) : null,
+      children: /* @__PURE__ */ t.jsxs(_e, { windowSize: m, children: [
+        /* @__PURE__ */ t.jsxs(Ee, { windowSize: m, children: [
+          /* @__PURE__ */ t.jsx(Fe, { windowSize: m, src: y, loading: "lazy" }),
+          /* @__PURE__ */ t.jsx(We, { windowSize: m, children: b })
+        ] }),
+        /* @__PURE__ */ t.jsxs(Oe, { windowSize: m, children: [
+          /* @__PURE__ */ t.jsx(Ne, { children: he("0,0", s) }),
+          S && m !== "small" && /* @__PURE__ */ t.jsx(
+            He,
+            {
+              accountDetails: e.source,
+              isZeniUser: z,
+              onSetAccountsStatementDate: g,
+              analytics: h
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+}
+const Ve = v.memo(Ue), T = x.getLocalizedStrings().zeniAccountsPromoCard, l = {
+  marginTop: new a(i[6], i[8]),
+  marginBottom: new a(i[3], i[4]),
+  itemPaddingBottom: new a(i[3], i[4]),
+  maxWidth: new a(100, 67),
+  sectionTitleHeight: new a(83, 110),
+  promoBannerPadding: new a(i[3], i[4]),
+  promoBannerMarginBottom: new a(i[3], i[4]),
+  promoBannerGap: new a(i[1], i[3]),
+  promoHighlightContainerMaxHeight: new a(
+    30,
+    xe.h5Regular.lineHeightValue
+  ),
+  promoButtonBorderRadius: new a(i[1], i[2]),
+  promoButtonPaddingVertical: new a(2, 6),
+  promoButtonPaddingHorizontal: new a(i[1], i[3]),
+  promoFooterPositionBottom: new a(i[3], i[1]),
+  promoFooterPositionRight: new a(i[3], i[4]),
+  promoFooterMarginTop: new a(0, i[2])
+}, R = {
+  textContainer: new j("largeMedium", "h6Medium"),
+  promoText: new j("extraSmallRegular", "standardRegular"),
+  promoHighlightText: new j(
+    "extraLargeRegular",
+    "h5Regular"
+  ),
+  promoButtonText: new j("extraSmallMedium", "smallRegular")
+}, K = 8, Ye = n.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: ${(e) => l.sectionTitleHeight.value(e.windowSize) + e.listHeight}px;
+  max-width: ${(e) => l.maxWidth.value(e.windowSize)}%;
+`, Ge = n.div`
+  margin: ${(e) => `${l.marginTop.valuePx(e.windowSize)} ${o.sp0} ${l.marginBottom.valuePx(e.windowSize)} ${o.sp0}`};
+
+  width: 100%;
+`, Je = n.div`
+  flex: 1 1 auto;
+  width: 99.9%;
+`, Ze = n.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${o.sp2};
+  align-items: flex-start;
+  ${(e) => `${R.textContainer.style(e.windowSize)}`};
+`, Ke = n(we)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  color: ${(e) => e.theme.colors.hero};
+  text-align: left;
+`, Xe = n($e)`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  text-align: right;
+`, qe = n.div`
+  display: flex;
+  justify-content: center;
+`, Qe = n.div`
+  width: 100%;
+`, et = n(se)`
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  &::-webkit-scrollbar {
+    width: ${K}px;
+    height: ${o.sp0};
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 2px ${P.scrollbarBoxShadow};
+    -webkit-box-shadow: inset 0 0 2px ${P.scrollbarBoxShadow};
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  &:hover {
+    scrollbar-color: ${(e) => e.theme.colors.grey1} transparent;
+    &::-webkit-scrollbar {
+      width: ${K}px;
+      height: ${o.sp0};
+      background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: ${(e) => e.theme.colors.grey1};
+      border-radius: 2px;
+    }
+  }
+`, tt = n.div`
+  position: relative;
+  padding: ${(e) => l.promoBannerPadding.valuePx(e.size)};
+  background-color: ${(e) => e.theme.colors.zeniAccountsPromoBackgroundColor};
+  border: 1px solid ${P.brandColorJade};
+  border-radius: ${o.sp2};
+  width: ${(e) => e.width}px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  margin-bottom: ${(e) => l.promoBannerMarginBottom.valuePx(e.size)};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, ot = n.div`
+  display: flex;
+  flex-direction: ${(e) => e.size === "small" ? "column" : "row"};
+  align-items: ${(e) => e.size === "small" ? "flex-start" : "center"};
+  gap: ${(e) => l.promoBannerGap.valuePx(e.size)};
+`, nt = n(Q)`
+  ${(e) => `${R.promoText.style(e.size)}`};
+  color: ${(e) => e.theme.colors.zeniAccountsPromoDetailTextColor};
+`, it = n.div`
+  display: flex;
+  max-height: ${(e) => l.promoHighlightContainerMaxHeight.valuePx(e.size)};
+  overflow: hidden;
+  .card-highlight-text {
+    ${(e) => `${R.promoHighlightText.style(e.size)}`};
+    color: ${(e) => e.theme.colors.zeniAccountsPromoButtonColor};
+  }
+  .card-highlight-text-stack {
+    max-height: ${(e) => l.promoHighlightContainerMaxHeight.valuePx(e.size)};
+  }
+`, st = n.div`
+  border: 1px solid
+    ${(e) => e.theme.colors.zeniAccountsPromoButtonColor};
+  border-radius: ${(e) => l.promoButtonBorderRadius.valuePx(e.size)};
+  background: ${(e) => e.theme.colors.zeniAccountsPromoButtonColor};
+  cursor: pointer;
+  display: flex;
+  padding: ${(e) => `${l.promoButtonPaddingVertical.valuePx(
+  e.size
+)} ${l.promoButtonPaddingHorizontal.valuePx(e.size)}`};
+  justify-content: space-around;
+  align-items: center;
+  align-self: ${(e) => e.size === "small" ? "flex-start" : "center"};
+  &:hover {
+    background: ${(e) => e.theme.colors.zeniAccountsPromoButtonHoverColor};
+    border: 1px solid
+      ${(e) => e.theme.colors.zeniAccountsPromoButtonHoverColor};
+  }
+`, at = n(Q)`
+  ${(e) => `${R.promoButtonText.style(e.size)}`};
+  color: ${(e) => e.theme.colors.zeniAccountsPromoButtonTextColor};
+`, rt = n(ue)`
+  color: ${(e) => e.theme.colors.zeniAccountsPromoButtonColor};
+  margin-top: ${(e) => l.promoFooterMarginTop.valuePx(e.size)};
+  text-align: start;
+  position: absolute;
+  bottom: ${(e) => l.promoFooterPositionBottom.valuePx(e.size)};
+  right: ${(e) => l.promoFooterPositionRight.valuePx(e.size)};
+`, lt = ({
+  sectionTitle: e,
+  totalFormatted: S
+}) => {
+  const h = L();
+  return /* @__PURE__ */ t.jsx(Ge, { windowSize: h, children: /* @__PURE__ */ t.jsxs(Ze, { windowSize: h, children: [
+    /* @__PURE__ */ t.jsx(Ke, { children: e }),
+    /* @__PURE__ */ t.jsx(Xe, { children: S })
+  ] }) });
+};
+function wt({
+  sectionTitle: e,
+  analytics: S,
+  transactionArray: h,
+  isZeniUser: z,
+  zeniAccountsPromoCardReport: d,
+  onItemClick: g,
+  onSetAccountsStatementDate: D,
+  onPromoCardBtnClick: b
+}) {
+  const s = L(), y = ae(), [$, u] = re(0), m = O(), M = ne(
+    h,
+    function(p, f) {
+      return p + (f.amount?.amount ?? 0);
+    },
+    0
+  ), B = h.length > 0 ? h[0].amount?.currencySymbol : "", _ = pe("0,0", M, B), A = ({ index: p, style: f }) => /* @__PURE__ */ t.jsx("div", { style: { ...f }, children: /* @__PURE__ */ t.jsx(qe, { children: /* @__PURE__ */ t.jsx(Qe, { windowSize: s, children: /* @__PURE__ */ t.jsx(
+    Ve,
+    {
+      data: h[p],
+      showStatementSection: e === x.getLocalizedStrings().balanceCard.cardBalanceSectionTitle,
+      isZeniUser: z,
+      analytics: S,
+      onItemClick: g,
+      onSetAccountsStatementDate: D
+    }
+  ) }) }) }), H = le(null), E = () => {
+    const p = H.current;
+    p != null && p.clientHeight > 0 && p.clientHeight != $ && u(p.clientHeight);
+  }, k = () => {
+    b?.(d?.depositAccountId ?? "");
+  }, I = de(
+    m.loggedInUserRoleMap
+  );
+  return /* @__PURE__ */ t.jsxs(
+    Ye,
+    {
+      windowSize: s,
+      listHeight: $,
+      "data-testid": w("transaction-list-big"),
+      children: [
+        /* @__PURE__ */ t.jsx(
+          lt,
+          {
+            sectionTitle: e,
+            totalFormatted: _
+          }
+        ),
+        /* @__PURE__ */ t.jsx(Je, { children: /* @__PURE__ */ t.jsx(ie, { children: ({ height: p, width: f }) => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          d?.isShowDepositAccountsPromo === !0 ? /* @__PURE__ */ t.jsxs(tt, { width: f, size: s, children: [
+            /* @__PURE__ */ t.jsxs(ot, { size: s, children: [
+              /* @__PURE__ */ t.jsx(nt, { size: s, children: T.keepInterest.prefixCashBalance }),
+              /* @__PURE__ */ t.jsx(it, { size: s, children: ye(
+                "keepInterest",
+                Se(
+                  d.maxPossibleInterest ?? 0
+                )
+              ) })
+            ] }),
+            /* @__PURE__ */ t.jsx(
+              st,
+              {
+                onClick: k,
+                size: s,
+                children: /* @__PURE__ */ t.jsx(at, { size: s, children: I ? d.depositAccountId != null ? T.button : T.signUp : T.learnMore })
+              }
+            ),
+            /* @__PURE__ */ t.jsx(rt, { size: s, children: T.keepInterest.footer.replace(
+              /<interest>/,
+              d.maxAnnualPercentageYield.toString()
+            ) })
+          ] }) : null,
+          /* @__PURE__ */ t.jsx(
+            et,
+            {
+              ref: y,
+              height: p,
+              width: f,
+              style: { overflow: "unset" },
+              itemCount: h.length,
+              itemSize: Ie.value(s) + l.itemPaddingBottom.value(s),
+              onItemsRendered: E,
+              itemKey: (F) => h[F].key,
+              innerRef: H,
+              children: A
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  );
+}
+export {
+  wt as default,
+  l as dimensions
+};