@zeniai/web-components 3.17.1 → 3.17.2

package/dist/TransferDrawerPage-BPAbhjHx.js

@@ -0,0 +1,1436 @@
+import { g as Ze, h as dt, j as t, F as qe } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as j, useCallback as xe, useMemo as ut, useEffect as D } from "react";
+import n from "@emotion/styled";
+import { u as pe, R as s, aD as de, dM as pt, a as _, ey as gt, C as U, S as o, e as C, a2 as Y, hQ as De, hR as Ce, ij as mt, Z as be, A as He, D as a, hC as ht, _ as Ye, o as ge, b as Ge, f0 as ft, al as xt, ag as wt, E as Ue, F as Se, i2 as $t, be as yt, j8 as bt, B as Ae, jf as St, ao as ve, ai as vt, w as Pt, V as Tt, H as Pe, jg as jt, G as Je, j6 as Lt, j7 as Dt } from "./index-BEMjPEfs.js";
+import { usePlaidLink as Ct } from "react-plaid-link";
+import { zeniDate as At } from "@zeniai/client-epic-state";
+import { Z as Ft } from "./ZeniTransferAmountSlider-o8Hrcfmp.js";
+import { B as Mt } from "./BusyIndication-DSrlHXxu.js";
+import { A as zt } from "./AccountInfoPageContent-B722MfPv.js";
+const {
+  common: ue,
+  spendManagement: {
+    zeniAccounts: { zeniAccountList: y }
+  }
+} = _.getLocalizedStrings(), Qe = "amount", Bt = "transferTo", Fe = "transferFrom", L = "transferDetails", Ke = "transferDetailPage", we = (e, r) => `${e}.${r}`, et = (e) => `${e}_form`, p = {
+  largeLabelWidth: new s(120, 120, 160),
+  rowContentPaddingLeft: new s(a[3], a[4]),
+  labeleMarginLeft: new s(a[0], a[0]),
+  labelMarginRight: new s(a[3], a[3]),
+  labeleMarginBottom: new s(a[2], a[0]),
+  labeledFieldPaddingLeft: new s(a[3], a[0]),
+  labeledFieldPaddingRight: new s(a[3], a[2]),
+  labeledFieldPaddingTop: new s(a[3], a[3]),
+  labeledFieldPaddingBottom: new s(a[3], a[2]),
+  infoLabelPaddingRight: new s(a[0], a[3]),
+  infoLabelMarginTop: new s(a[1], a[0]),
+  controllerWrapperFlex: new s(1, a[0])
+};
+function kt({
+  plaidConnectionDetails: e,
+  transferDetails: r,
+  zeniAccountsConfigDetail: h,
+  isCalculatorOpen: w,
+  showAnnualYieldEarned: b,
+  transferAmount: f,
+  yieldEarned: d,
+  totalBalance: u,
+  maxInsuredAmount: c,
+  setIsCalculatorOpen: S,
+  setShowAnnualYieldEarned: v,
+  setTransferAmount: P,
+  setYieldEarned: k,
+  setTotalBalance: I,
+  onSaveChangesToLocalStore: J,
+  onBackClick: R,
+  onEstablishConnectionClick: N,
+  fireTrackTransferBetweenAccountsFormClicked: W,
+  onFetchLinkTokenClick: Q,
+  onReviewClick: K
+}) {
+  const i = pe(), O = p.largeLabelWidth.value(i), [E, M] = j(!1), g = e.link_account_no_microdeposit, [T, V] = j(g.linkToken ?? null), [x, z] = j(!1), [X, Z] = j(!1), ee = r.transferMoneyPartiesFetchState, ie = de(ee), q = r.transferDetailLocalData.transferFrom?.id, te = r.transferDetailLocalData.transferTo?.id, le = de(q), Te = de(te), me = r.transferMoneyParties.map(
+    (l) => l.id
+  ), he = de(me), tt = xe(
+    (l) => {
+      N?.(l), R(), Z(!1), z(!1);
+    },
+    [R, N]
+  ), ot = xe((l, m) => {
+    l != null && console.log("Plaid Connection Error", l, m);
+  }, []), { open: H, ready: oe } = Ct({
+    token: T,
+    onSuccess: tt,
+    onExit: ot
+  }), se = xe(
+    (l) => {
+      l.preventDefault(), l.stopPropagation(), oe ? H() : z(!0);
+    },
+    [H, oe]
+  ), A = Ze({
+    mode: "all",
+    reValidateMode: "onBlur",
+    defaultValues: ut(
+      () => Me(r, se),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [r]
+    )
+  });
+  D(() => {
+    g.fetchStatus.fetchState === "Completed" && g.linkToken != null && g.linkToken !== T && V(g.linkToken);
+  }, [g.fetchStatus.fetchState, g.linkToken, T]), D(() => {
+    g.linkToken === T && g.fetchStatus.fetchState === "Completed" && oe && Z(!0);
+  }, [
+    oe,
+    T,
+    g.fetchStatus,
+    g.linkToken,
+    g.fetchStatus.fetchState
+  ]), D(() => {
+    X && x && H();
+  }, [X, H, x]), D(() => {
+    (At((/* @__PURE__ */ new Date()).toISOString()).isAfter(g.expiration) || g.linkToken == null) && Q?.("link_account_no_microdeposit");
+  }, []), D(() => {
+    const l = he != null && JSON.stringify(he) !== JSON.stringify(me);
+    (ie === "In-Progress" && ee === "Completed" || le !== q || Te !== te || l) && A.reset(
+      Me(r, () => H())
+    );
+  }, [
+    oe,
+    T,
+    g.fetchStatus.fetchState,
+    ie,
+    ee,
+    le,
+    Te,
+    te,
+    q,
+    he,
+    me,
+    A,
+    r,
+    H
+  ]);
+  const { isValid: nt } = A.formState, rt = async (l, m) => {
+    if (l != null) {
+      const B = { ...m }, ce = {
+        amount: {
+          amount: B[L].amount ?? 0,
+          currencyCode: "USD",
+          currencySymbol: "$"
+        },
+        transferFrom: r.transferMoneyParties.find(
+          (ne) => ne.id === B[L].transferFrom.selectedOption
+        ),
+        transferTo: r.transferMoneyParties.find(
+          (ne) => ne.id === B[L].transferTo.selectedOption
+        )
+      };
+      J(ce);
+    }
+  };
+  D(() => {
+    const l = A.watch((m, { name: B }) => {
+      if (B != null && m != null) {
+        const ce = m[L]?.amount ?? 0, ne = m[L]?.transferFrom, lt = m[L]?.transferTo, st = r.transferMoneyParties.find(
+          (fe) => fe.id === ne?.selectedOption
+        ), ct = r.transferMoneyParties.find(
+          (fe) => fe.id === lt?.selectedOption
+        );
+        st?.accType === "paymentAccount" && ct?.accType === "depositAccount" && ce !== 0 ? (S(!0), v(!0)) : v(!1), P(ce);
+      }
+    });
+    return () => {
+      l.unsubscribe();
+    };
+  }, [A, r.transferMoneyParties]), D(() => {
+    const l = A.watch((m, { name: B }) => {
+      B != null && m != null && dt(() => rt(B, m));
+    });
+    return () => {
+      l.unsubscribe();
+    };
+  }), D(() => {
+    r.reviewTransferDetail.error != null ? M(!0) : M(!1);
+  }, [r.reviewTransferDetail.error]);
+  const at = A.handleSubmit(() => {
+    nt && (W("Review", "Amount Details"), K());
+  });
+  D(() => {
+    r.transferDetailLocalData.transferTo?.accType === "depositAccount" && r.transferDetailLocalData.transferTo.accountBalance?.available?.amount === 0 && r.transferDetailLocalData.transferFrom?.id == null && A.setValue(`${L}.${Fe}`, {
+      selectedOption: r.primaryPaymentAccount?.paymentAccountId,
+      allOptions: re(
+        r,
+        !0,
+        se,
+        !0,
+        !0
+      )
+    });
+  }, [r.transferDetailLocalData.transferTo?.id]);
+  const je = h.zeniAccountsConfigDetail.depositProductConfig.depositProducts, Le = je[je.length - 1].annualPercentageYield.toString(), it = pt(
+    gt(c),
+    c,
+    ue.currency.currencySymbol
+  ).toUpperCase();
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: g.fetchStatus.fetchState === "Completed" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    E ? /* @__PURE__ */ t.jsx(Rt, { children: /* @__PURE__ */ t.jsxs(_t, { children: [
+      /* @__PURE__ */ t.jsxs(Nt, { children: [
+        /* @__PURE__ */ t.jsx(Et, {}),
+        /* @__PURE__ */ t.jsxs(Vt, { children: [
+          /* @__PURE__ */ t.jsx(Xt, { children: r.reviewTransferDetail.error?.title }),
+          /* @__PURE__ */ t.jsx(Zt, { children: r.reviewTransferDetail.error?.message })
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsx(Wt, { children: /* @__PURE__ */ t.jsx(
+        io,
+        {
+          "data-testid": C(
+            "amount-details-error-close"
+          ),
+          onClick: () => {
+            W(
+              "Cross",
+              "Amount Details"
+            ), M(!1);
+          },
+          style: {
+            width: o.sp3,
+            height: o.sp3,
+            color: U.heroLight
+          }
+        }
+      ) })
+    ] }) }) : null,
+    /* @__PURE__ */ t.jsx(qt, { children: Y(
+      "0,0.[00]",
+      r.transferDetailLocalData.amount
+    ) }),
+    /* @__PURE__ */ t.jsx(qe, { ...A, children: /* @__PURE__ */ t.jsxs(
+      Ot,
+      {
+        id: et(Ke),
+        onSubmit: at,
+        children: [
+          /* @__PURE__ */ t.jsxs(ro, { children: [
+            /* @__PURE__ */ t.jsx(Oe, { size: i, children: /* @__PURE__ */ t.jsx(
+              ze,
+              {
+                label: {
+                  label: ue.labels.transferFrom,
+                  width: O,
+                  style: {
+                    marginLeft: p.labeleMarginLeft.valuePx(i),
+                    marginBottom: p.labeleMarginBottom.valuePx(i),
+                    marginRight: p.labelMarginRight.valuePx(i)
+                  }
+                },
+                errorInfoLabel: y.transferDrawer.transferFromError,
+                style: {
+                  paddingTop: p.labeledFieldPaddingTop.valuePx(i),
+                  paddingBottom: p.labeledFieldPaddingBottom.valuePx(
+                    i
+                  ),
+                  paddingLeft: p.labeledFieldPaddingLeft.valuePx(i),
+                  paddingRight: p.labeledFieldPaddingRight.valuePx(i),
+                  border: "none",
+                  width: "100%",
+                  outline: "none",
+                  padding: 0,
+                  display: i === "small" ? "flex" : "inherit"
+                },
+                infoLabelStyle: {
+                  textAlign: i === "small" ? "left" : "right",
+                  paddingRight: p.infoLabelPaddingRight.valuePx(i),
+                  marginTop: p.infoLabelMarginTop.valuePx(i)
+                },
+                singleSelectPickerField: {
+                  name: we(L, Fe),
+                  placeholder: y.transferDrawer.transferFromPlaceholder,
+                  style: { position: "relative" },
+                  capitalizeOptions: !0,
+                  valueToLogo: (l, m) => Ce(
+                    r.transferMoneyParties,
+                    l,
+                    m
+                  ),
+                  valueToSubLabels: (l, m) => De(
+                    r.transferMoneyParties,
+                    l,
+                    m,
+                    !1
+                  ),
+                  defaultValue: {
+                    selectedOption: r.transferDetailLocalData.transferFrom?.id,
+                    allOptions: re(
+                      r,
+                      !0,
+                      se,
+                      !0,
+                      !0
+                    )
+                  },
+                  textAlignment: "right",
+                  registerOptions: {
+                    required: !0,
+                    validate: (l) => l != null && !!l.selectedOption
+                  }
+                }
+              }
+            ) }),
+            /* @__PURE__ */ t.jsx(Re, {}),
+            /* @__PURE__ */ t.jsx(Oe, { size: i, children: /* @__PURE__ */ t.jsx(ao, { size: i, children: /* @__PURE__ */ t.jsx(
+              ze,
+              {
+                label: {
+                  label: ue.labels.transferTo,
+                  width: O,
+                  style: {
+                    marginLeft: p.labeleMarginLeft.valuePx(i),
+                    marginBottom: p.labeleMarginBottom.valuePx(i),
+                    marginRight: p.labelMarginRight.valuePx(i)
+                  }
+                },
+                errorInfoLabel: y.transferDrawer.transferToError,
+                style: {
+                  paddingTop: p.labeledFieldPaddingTop.valuePx(i),
+                  paddingBottom: p.labeledFieldPaddingBottom.valuePx(
+                    i
+                  ),
+                  paddingLeft: p.labeledFieldPaddingLeft.valuePx(
+                    i
+                  ),
+                  paddingRight: p.labeledFieldPaddingRight.valuePx(
+                    i
+                  ),
+                  border: "none",
+                  width: "100%",
+                  outline: "none",
+                  padding: 0,
+                  display: i === "small" ? "flex" : "inherit"
+                },
+                infoLabelStyle: {
+                  textAlign: i === "small" ? "left" : "right",
+                  paddingRight: p.infoLabelPaddingRight.valuePx(i),
+                  marginTop: p.infoLabelMarginTop.valuePx(i)
+                },
+                singleSelectPickerField: {
+                  name: we(L, Bt),
+                  placeholder: y.transferDrawer.transferToPlaceholder,
+                  capitalizeOptions: !0,
+                  style: { position: "relative" },
+                  valueToLogo: (l, m) => Ce(
+                    r.transferMoneyParties,
+                    l,
+                    m
+                  ),
+                  valueToSubLabels: (l, m) => De(
+                    r.transferMoneyParties,
+                    l,
+                    m,
+                    !1
+                  ),
+                  defaultValue: {
+                    selectedOption: r.transferDetailLocalData.transferTo?.id,
+                    allOptions: re(
+                      r,
+                      !1,
+                      se
+                    )
+                  },
+                  textAlignment: "right",
+                  registerOptions: {
+                    required: !0,
+                    validate: (l) => l != null && !!l.selectedOption
+                  }
+                }
+              }
+            ) }) }),
+            /* @__PURE__ */ t.jsx(Re, {}),
+            /* @__PURE__ */ t.jsx(
+              mt,
+              {
+                showAdditionalInfoLabel: !1,
+                label: {
+                  label: ue.labels.amount,
+                  width: O
+                },
+                additionalInfoLabel: y.transferDrawer.amountError,
+                formattedTextField: {
+                  type: "number",
+                  name: we(L, Qe),
+                  defaultValue: r.transferDetailLocalData.amount.amount === 0 ? void 0 : r.transferDetailLocalData.amount.amount,
+                  placeholder: y.transferDrawer.amountPlaceholder,
+                  returnValueType: "floatValue",
+                  prefix: "$",
+                  allowNegative: !1,
+                  isNumericString: !1,
+                  registerOptions: {
+                    required: !0,
+                    validate: (l) => !!l && l > 0
+                  },
+                  autoComplete: "off",
+                  decimalSeparator: ".",
+                  decimalScale: 2,
+                  fixedDecimalScale: !1,
+                  thousandSeparator: !0,
+                  allowLeadingZeros: !1
+                },
+                style: { width: "auto" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsxs(Ut, { children: [
+            w ? /* @__PURE__ */ t.jsxs(Ht, { children: [
+              /* @__PURE__ */ t.jsx(Yt, { children: y.transferDrawer.calculator.heading.replace("__rate__", Le).replace("__amount__", it) }),
+              /* @__PURE__ */ t.jsx(
+                Ft,
+                {
+                  minStep: 0.01,
+                  currentAccountBalance: r.transferDetailLocalData.transferTo?.accountBalance?.available?.amount ?? 0,
+                  transferAmount: f,
+                  zeniAccountsConfigDetail: h,
+                  setYieldEarned: k,
+                  setTotalBalance: I
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ t.jsxs(Jt, { windowSize: i, children: [
+              /* @__PURE__ */ t.jsx(eo, { windowSize: i, children: b ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                /* @__PURE__ */ t.jsxs(Qt, { children: [
+                  /* @__PURE__ */ t.jsx(Be, { children: `${y.transferDrawer.calculator.footerText.annualYieldEarned} ${Y("0,0", {
+                    amount: d,
+                    currencySymbol: "$"
+                  })}` }),
+                  /* @__PURE__ */ t.jsx(
+                    be,
+                    {
+                      variant: "small-description",
+                      display: "flex",
+                      data: y.transferDrawer.calculator.footerText.annualYieldEarnedTooltipText,
+                      placement: i === "small" ? "bottom" : "right",
+                      children: /* @__PURE__ */ t.jsx(Gt, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ t.jsx(Kt, { windowSize: i }),
+                /* @__PURE__ */ t.jsx(to, { children: `${y.transferDrawer.calculator.footerText.forTotalBalance} ${Y("0,0", {
+                  amount: u,
+                  currencySymbol: "$"
+                })}` })
+              ] }) : /* @__PURE__ */ t.jsx(Be, { children: y.transferDrawer.calculator.footerText.earnUptoText.replace(
+                "__rate__",
+                Le
+              ) }) }),
+              w ? /* @__PURE__ */ t.jsxs(
+                Ie,
+                {
+                  windowSize: i,
+                  onClick: () => S(!1),
+                  "data-testid": C(
+                    "calculator-footer-close"
+                  ),
+                  children: [
+                    /* @__PURE__ */ t.jsx(ke, { className: "calculatorFooterLeftText", children: y.transferDrawer.calculator.footerText.hide }),
+                    /* @__PURE__ */ t.jsx(oo, { className: "calculatorFooterArrowIcon" })
+                  ]
+                }
+              ) : /* @__PURE__ */ t.jsxs(
+                Ie,
+                {
+                  windowSize: i,
+                  onClick: () => S(!0),
+                  "data-testid": C(
+                    "calculator-footer-show"
+                  ),
+                  children: [
+                    /* @__PURE__ */ t.jsx(ke, { className: "calculatorFooterLeftText", children: y.transferDrawer.calculator.footerText.showYieldCalculator }),
+                    /* @__PURE__ */ t.jsx(no, { className: "calculatorFooterArrowIcon" })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] }) : /* @__PURE__ */ t.jsx(
+    He,
+    {
+      size: "Standard",
+      start: !0,
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "calc(100vh - 500px)"
+      }
+    }
+  ) });
+}
+const re = (e, r, h, w = !1, b = !1) => {
+  const f = e.transferMoneyParties.map(
+    (d) => {
+      const u = {
+        label: d.label,
+        value: d.id
+      };
+      return w && (r ? u.isDisabled = d.id === e?.transferDetailLocalData?.transferTo?.id || d.accType === "paymentAccount" && e.transferDetailLocalData.transferTo?.accType === "paymentAccount" : u.isDisabled = d.id === e.transferDetailLocalData.transferFrom?.id || d.accType === "paymentAccount" && e.transferDetailLocalData.transferFrom?.accType === "paymentAccount"), u;
+    }
+  );
+  if (b) {
+    const d = {
+      label: y.transferDrawer.selectAddAccount,
+      value: "",
+      type: "button",
+      onClick: h
+    };
+    f.push(d);
+  }
+  return f;
+}, Me = (e, r) => ({
+  transferDetails: {
+    [Qe]: e.transferDetailLocalData.amount.amount === 0 ? void 0 : e.transferDetailLocalData.amount.amount,
+    transferFrom: {
+      allOptions: re(
+        e,
+        !0,
+        r,
+        !0,
+        !0
+      ),
+      selectedOption: e.transferDetailLocalData.transferFrom?.id != null ? e.transferDetailLocalData.transferFrom?.id : It(e)
+    },
+    transferTo: {
+      allOptions: re(
+        e,
+        !1,
+        r,
+        !0,
+        !1
+      ),
+      selectedOption: e.transferDetailLocalData.transferTo?.id
+    }
+  }
+}), It = (e) => e.transferDetailLocalData.transferTo?.accType === "depositAccount" && e.transferDetailLocalData.transferTo?.accountBalance?.available?.amount === 0 ? e.primaryPaymentAccount?.paymentAccountId : void 0, Rt = n.div`
+  margin-top: ${o.sp3};
+  display: flex;
+  background-color: ${(e) => e.theme.colors.grey5};
+  justify-content: space-between;
+  padding: ${o.sp3} ${o.sp4};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  border-radius: ${o.sp2};
+  box-shadow: ${(e) => `${o.sp0} 2px 2px ${e.theme.colors.dropShadowNormal}`};
+`, Ot = n.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, _t = n.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: ${o.sp3} ${o.sp4};
+  background-color: ${U.importantLight};
+  border-radius: ${o.sp2};
+`, Nt = n.div`
+  display: flex;
+  align-items: flex-start;
+`, Wt = n.div``, Et = n(ht)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${U.important};
+`, Vt = n.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: ${o.sp2};
+`, Xt = n(Ye)`
+  color: ${U.important};
+`, Zt = n(ge)`
+  color: ${U.important};
+`, qt = n(ft)`
+  color: ${(e) => e.theme.colors.primary};
+  margin: ${o.sp5} ${o.sp0} ${o.sp3} ${o.sp0};
+`, ze = n(
+  xt
+)`
+  border-radius: ${o.sp2};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+`, Ht = n.div`
+  background-color: ${(e) => e.theme.colors.background};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-top: none;
+  min-height: 182px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`, Yt = n(ge)`
+  color: ${(e) => e.theme.colors.hero};
+  margin: ${o.sp3} ${o.sp8};
+  margin-bottom: ${o.sp3};
+  margin-top: ${o.sp3};
+  white-space: pre-line;
+`, Be = n(Ye)`
+  color: ${U.success};
+  white-space: nowrap;
+`, Gt = n(wt)`
+  width: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  height: ${o.sp3};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ut = n.div`
+  margin-bottom: ${o.sp6};
+  width: 90%;
+`, Jt = n.div`
+  display: flex;
+  align-items: center;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  justify-content: space-between;
+  padding: ${o.sp2} ${o.sp3};
+  background-color: ${(e) => e.theme.colors.grey3};
+  border-bottom-right-radius: ${o.sp1};
+  border-bottom-left-radius: ${o.sp1};
+`, Qt = n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`, ke = n(Se)`
+  color: ${(e) => e.theme.colors.hero};
+  cursor: pointer;
+`, Ie = n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  align-self: ${(e) => e.windowSize === "small" ? "flex-end" : "center"};
+  &:hover {
+    .calculatorFooterLeftText {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    .calculatorFooterArrowIcon {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, Kt = n.div`
+  display: ${(e) => e.windowSize === "small" ? "none" : "block"};
+  width: ${o.sp1};
+  height: ${o.sp1};
+  min-width: ${o.sp1};
+  margin: 0 ${o.sp2};
+  background-color: ${(e) => e.theme.colors.grey1};
+  border-radius: 50%;
+`, eo = n.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  width: ${(e) => e.windowSize === "small" ? "100%" : "unset"};
+`, to = n(Ue)`
+  color: ${(e) => e.theme.colors.hero};
+`, oo = n($t)`
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  min-width: 12px;
+  min-height: 12px;
+  color: ${(e) => e.theme.colors.hero};
+`, no = n(yt)`
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  min-width: 12px;
+  min-height: 12px;
+  color: ${(e) => e.theme.colors.hero};
+`, ro = n.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+`, Re = n.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, Oe = n.div`
+  display: flex;
+  flex-direction: row;
+  padding: ${o.sp2};
+  padding-left: ${(e) => p.rowContentPaddingLeft.valuePx(e.size)};
+  justify-content: space-between;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .select-control {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+  &:focus-within {
+    border-color: ${(e) => e.theme.colors.primary};
+    color: ${(e) => e.theme.colors.primary};
+    z-index: 2;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+  }
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+`, ao = n.div`
+  width: 100%;
+  display: flex;
+  flex-grow: ${(e) => p.controllerWrapperFlex.value(e.size)};
+  align-items: flex-start;
+`, io = n(Ge)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  min-height: ${o.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ae = {
+  navBarContainerPaddingXaxis: new s(10, 19),
+  containerPaddingLeft: new s(16, 40, 56),
+  containerPaddingRight: new s(16, 40, 56),
+  successContentMargin: new s(a[3], a[12]),
+  buttonTrayGap: new s(a[4], a[5])
+}, $ = _.getLocalizedStrings().spendManagement.zeniAccounts.zeniAccountList, lo = ({
+  transferDetails: e,
+  isCalculatorOpen: r,
+  showAnnualYieldEarned: h,
+  transferAmount: w,
+  yieldEarned: b,
+  totalBalance: f,
+  maxInsuredAmount: d,
+  zeniAccountsConfigDetail: u,
+  fireTrackTransferBetweenAccountsFormClicked: c,
+  onSaveChangesToLocalStore: S,
+  onTransferClick: v,
+  onDismissClick: P,
+  onAnotherTransferClick: k,
+  onEstablishConnectionClick: I,
+  onBackClick: J,
+  onFetchLinkTokenClick: R,
+  plaidConnectionDetails: N,
+  showReviewContent: W,
+  setShowReviewContent: Q,
+  setCurrentDrawerContent: K,
+  clearReviewTransferDetail: i,
+  onReviewClick: O,
+  setIsCalculatorOpen: E,
+  setShowAnnualYieldEarned: M,
+  setTransferAmount: g,
+  setYieldEarned: T,
+  setTotalBalance: V
+}) => {
+  const x = pe(), z = e.reviewTransferDetail, X = e.transferDetailLocalData.transferFrom?.accType === "depositAccount" && e.transferDetailLocalData.transferTo?.accType === "depositAccount", Z = () => e.transferDetailLocalData.transferFrom?.id != null || e.transferDetailLocalData.transferTo?.id != null || e.transferDetailLocalData.amount.amount > 0;
+  return /* @__PURE__ */ t.jsx(uo, { windowSize: x, children: e.fetchState === "Completed" ? /* @__PURE__ */ t.jsxs(Ne, { windowSize: x, isTransferCompleted: !0, children: [
+    /* @__PURE__ */ t.jsx(We, { windowSize: x, children: /* @__PURE__ */ t.jsx(
+      Ee,
+      {
+        "data-testid": C(
+          "cross-transfer-success-close-button"
+        ),
+        onClick: () => {
+          c(
+            "Cross",
+            "Transfer Success"
+          ), P?.();
+        }
+      }
+    ) }),
+    /* @__PURE__ */ t.jsxs(mo, { windowSize: x, children: [
+      /* @__PURE__ */ t.jsx(
+        bt,
+        {
+          width: 150,
+          height: 150,
+          shouldDisplay: !0,
+          animationInLoop: 1
+        }
+      ),
+      /* @__PURE__ */ t.jsx(po, { children: X ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        $.transferDrawer.internal.transferSuccessMsgPrefix,
+        /* @__PURE__ */ t.jsx(_e, { children: Y(
+          "0,0.[00]",
+          e.transferDetailLocalData.amount
+        ) }),
+        $.transferDrawer.internal.transferSuccessMsgMidfix,
+        `"${e.transferDetailLocalData.transferFrom?.label}"`,
+        $.transferDrawer.internal.transferSuccessMsgMidfix2,
+        `"${e.transferDetailLocalData.transferTo?.label}".`
+      ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        $.transferDrawer.external.transferSuccessMsgPrefix,
+        /* @__PURE__ */ t.jsx(_e, { children: Y(
+          "0,0.[00]",
+          e.transferDetailLocalData.amount
+        ) }),
+        $.transferDrawer.external.transferSuccessMsgMidfix,
+        `"${e.transferDetailLocalData.transferFrom?.label}"`,
+        $.transferDrawer.external.transferSuccessMsgMidfix1,
+        `"${e.transferDetailLocalData.transferTo?.label}".`,
+        z.reviewTransferMoney.isShowDailyAchLimitWarning ? null : $.transferDrawer.external.transferSuccessMsgMidfix2
+      ] }) }),
+      /* @__PURE__ */ t.jsxs(go, { windowSize: x, children: [
+        /* @__PURE__ */ t.jsx(
+          Ae,
+          {
+            variant: "secondary",
+            label: $.transferDrawer.anotherTransferBtn,
+            "data-testid": C("another-transfer-button"),
+            onClick: () => {
+              c(
+                "Another Transfer",
+                "Transfer Success"
+              ), V(0), E(!1), T(0), M(!1), k();
+            },
+            style: {
+              minWidth: 200
+            }
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          Ae,
+          {
+            variant: "primary",
+            label: $.transferDrawer.backToChecking,
+            "data-testid": C("back-to-checking-button"),
+            onClick: () => {
+              c(
+                "Back to Checking",
+                "Transfer Success"
+              ), P?.();
+            },
+            style: {
+              minWidth: 200
+            }
+          }
+        )
+      ] })
+    ] })
+  ] }) : W ? /* @__PURE__ */ t.jsx(
+    St,
+    {
+      transferDetails: e,
+      setCurrentDrawerContent: K,
+      setShowReviewContent: Q,
+      onTransferClick: v,
+      clearReviewTransferDetail: i,
+      reviewTransferDetail: z,
+      fireTrackTransferBetweenAccountsFormClicked: c
+    }
+  ) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(Ne, { windowSize: x, isTransferCompleted: !1, children: [
+      /* @__PURE__ */ t.jsx(We, { windowSize: x, children: /* @__PURE__ */ t.jsx(
+        Ee,
+        {
+          "data-testid": C(
+            "cross-amount-details-close-button"
+          ),
+          onClick: () => {
+            c(
+              "Cross",
+              "Amount Details"
+            ), P?.();
+          }
+        }
+      ) }),
+      x === "small" ? /* @__PURE__ */ t.jsx(ho, { windowSize: x, children: $.transferDrawer.title }) : /* @__PURE__ */ t.jsx(fo, { children: $.transferDrawer.title }),
+      x === "small" ? /* @__PURE__ */ t.jsx(co, { children: $.transferDrawer.subTitle }) : /* @__PURE__ */ t.jsx(so, { children: $.transferDrawer.subTitle }),
+      e.transferMoneyPartiesFetchState === "Completed" ? /* @__PURE__ */ t.jsx(
+        kt,
+        {
+          isCalculatorOpen: r,
+          showAnnualYieldEarned: h,
+          transferAmount: w,
+          yieldEarned: b,
+          totalBalance: f,
+          onBackClick: J,
+          onSaveChangesToLocalStore: S,
+          plaidConnectionDetails: N,
+          transferDetails: e,
+          zeniAccountsConfigDetail: u,
+          onEstablishConnectionClick: I,
+          onFetchLinkTokenClick: R,
+          onReviewClick: O,
+          setIsCalculatorOpen: E,
+          setShowAnnualYieldEarned: M,
+          setTransferAmount: g,
+          setYieldEarned: T,
+          setTotalBalance: V,
+          fireTrackTransferBetweenAccountsFormClicked: c,
+          maxInsuredAmount: d
+        }
+      ) : /* @__PURE__ */ t.jsx(
+        He,
+        {
+          size: "Standard",
+          start: !0,
+          style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "calc(100vh - 500px)"
+          }
+        }
+      )
+    ] }),
+    Z() ? /* @__PURE__ */ t.jsx(
+      ve,
+      {
+        style: {
+          zIndex: 4,
+          paddingTop: o.sp3,
+          paddingBottom: o.sp3
+        },
+        formId: et(Ke),
+        helperStyle: { paddingTop: o.sp0, paddingBottom: o.sp0 },
+        primaryBtn: {
+          label: _.getLocalizedStrings().common.review,
+          isLoading: z.fetchState === "In-Progress"
+        },
+        cancelBtn: {
+          label: $.transferDrawer.cancelBtn,
+          onClick: () => {
+            c(
+              "Cancel",
+              "Amount Details"
+            ), P?.();
+          }
+        }
+      }
+    ) : null
+  ] }) });
+}, so = n(ge)`
+  color: ${(e) => e.theme.colors.hero};
+`, co = n(Se)`
+  color: ${(e) => e.theme.colors.hero};
+`, uo = n.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100vh;
+  width: 100%;
+`, po = n(vt)`
+  color: ${(e) => e.theme.colors.primary};
+  text-align: center;
+`, _e = n(Pt)`
+  display: inline;
+`, Ne = n.div`
+  height: ${(e) => e.isTransferCompleted ? "100%" : "auto"};
+  padding-left: ${(e) => `${ae.containerPaddingLeft.valuePx(e.windowSize)}`};
+  padding-right: ${(e) => `${ae.containerPaddingRight.valuePx(e.windowSize)}`};
+  margin-bottom: auto;
+`, go = n.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column-reverse" : "row"};
+  margin-top: ${o.sp6};
+  gap: ${(e) => `${ae.buttonTrayGap.valuePx(e.windowSize)}`};
+`, mo = n.div`
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: ${(e) => `${o.sp0} ${ae.successContentMargin.valuePx(
+  e.windowSize
+)}`};
+  align-items: center;
+`, We = n.div`
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  top: ${o.sp0};
+  padding: ${(e) => `${ae.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${o.sp0}`};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, Ee = n(Ge)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  min-height: ${o.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ho = n(Tt)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${o.sp3};
+  margin-bottom: ${o.sp0};
+  margin-right: ${o.sp3};
+`, fo = n(Pe)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${o.sp3};
+  margin-bottom: ${o.sp2};
+`, G = {
+  containerTopMargin: new s(a[4], a[6]),
+  accountRowLeftRightPadding: new s(a[3], a[3]),
+  zeniAccountListPaddingBottom: new s(a[3], a[6]),
+  navBarContainerPaddingXaxis: new s(10, 19),
+  containerPaddingLeft: new s(a[3], a[6], a[8]),
+  containerPaddingRight: new s(a[3], a[6], a[8])
+}, Ve = "wireTransferDetailPage", Xe = (e) => `${e}_form`, xo = _.getLocalizedStrings().spendManagement.zeniAccounts.zeniAccountList.transferDrawer, $e = _.getLocalizedStrings().common, wo = (e) => /* @__PURE__ */ t.jsx(
+  Ao,
+  {
+    color: Lt(e)
+  }
+), $o = ({
+  depositAccountListView: e,
+  setCurrentDrawerContent: r,
+  selectedAccount: h,
+  setShowWireAccountInfo: w,
+  setSelectedAccount: b,
+  fireTrackTransferBetweenAccountsFormClicked: f
+}) => {
+  const d = Ze({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: { selectedAccountId: h?.id }
+  }), u = pe();
+  return D(() => {
+    const c = d.watch(() => {
+      const S = e.depositAccounts.find(
+        (v) => v.id === d.getValues("selectedAccountId")
+      );
+      b(S);
+    });
+    return () => {
+      c.unsubscribe();
+    };
+  }), e.fetchState != "Completed" ? /* @__PURE__ */ t.jsx(Mt, { fetchState: e.fetchState }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(yo, { windowSize: u, children: [
+      /* @__PURE__ */ t.jsx(Do, { windowSize: u, children: /* @__PURE__ */ t.jsx(
+        be,
+        {
+          style: {
+            marginTop: o.sp1
+          },
+          title: $e.navBar.back,
+          enterDelay: 600,
+          placement: "bottom",
+          children: /* @__PURE__ */ t.jsx(
+            Lo,
+            {
+              "data-testid": C(
+                "select-zeni-account-back-button"
+              ),
+              onClick: () => {
+                f(
+                  "Back",
+                  "Select Account for Split Transfer"
+                ), r("achTransfer");
+              }
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ t.jsx(Co, { windowSize: u, children: xo.selectYour }),
+      /* @__PURE__ */ t.jsx(qe, { ...d, children: /* @__PURE__ */ t.jsx(
+        "form",
+        {
+          id: Xe(Ve),
+          onSubmit: d.handleSubmit(() => {
+            f(
+              "Next",
+              "Select Account for Split Transfer"
+            ), w(!0);
+          }),
+          children: /* @__PURE__ */ t.jsx(jo, { windowSize: u, children: e.depositAccounts.map(
+            (c, S) => /* @__PURE__ */ t.jsx(
+              To,
+              {
+                isClickEnabled: !0,
+                windowSize: u,
+                "data-testid": C(
+                  "deposit-account-click",
+                  c.id
+                ),
+                onClick: () => d.setValue(
+                  "selectedAccountId",
+                  c.id
+                ),
+                children: /* @__PURE__ */ t.jsxs(bo, { children: [
+                  /* @__PURE__ */ t.jsx(
+                    jt,
+                    {
+                      name: "selectedAccountId",
+                      id: c.id,
+                      value: c.id,
+                      radioSize: "small",
+                      style: { marginRight: 8 }
+                    }
+                  ),
+                  wo(S),
+                  /* @__PURE__ */ t.jsxs(So, { children: [
+                    /* @__PURE__ */ t.jsx(Po, { windowSize: u, children: c.accountName }),
+                    /* @__PURE__ */ t.jsx(vo, { children: Y(
+                      "0,0[.]00",
+                      c.accountBalance?.available
+                    ) })
+                  ] })
+                ] })
+              },
+              c.id
+            )
+          ) })
+        }
+      ) })
+    ] }),
+    h != null ? /* @__PURE__ */ t.jsx(
+      ve,
+      {
+        style: { zIndex: 4, paddingTop: o.sp3, paddingBottom: o.sp3 },
+        formId: Xe(Ve),
+        cancelBtn: {
+          label: $e.cancel,
+          onClick: () => {
+            f(
+              "Cancel",
+              "Select Account for Split Transfer"
+            ), r("achTransfer");
+          },
+          style: { width: 93 }
+        },
+        primaryBtn: {
+          label: $e.next,
+          style: { width: 93 }
+        }
+      }
+    ) : null
+  ] });
+}, yo = n.div`
+  height: auto;
+  padding-left: ${(e) => `${G.containerPaddingLeft.valuePx(e.windowSize)}`};
+  padding-right: ${(e) => `${G.containerPaddingRight.valuePx(e.windowSize)}`};
+  margin-bottom: auto;
+`, bo = n.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`, So = n.div`
+  max-width: calc(100% - 30px);
+  width: calc(100% - ${o.sp6});
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  top: 2px;
+`, vo = n(Ue)`
+  color: ${(e) => e.theme.colors.grey1};
+  position: relative;
+  top: -${o.sp1};
+`, Po = n(Se)`
+  color: ${(e) => e.theme.colors.hero};
+  max-width: ${`calc(100% - ${o.sp3})`};
+  text-transform: capitalize;
+  overflow: hidden;
+`, To = n.div`
+  padding-left: ${(e) => G.accountRowLeftRightPadding.valuePx(e.windowSize)};
+  padding-right: ${(e) => G.accountRowLeftRightPadding.valuePx(e.windowSize)};
+  background: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal} `};
+  border-radius: ${o.sp2};
+  margin-bottom: ${o.sp3};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  box-sizing: border-box;
+  max-height: ${o.sp8};
+  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};
+  }
+`, jo = n.div`
+  padding-bottom: ${(e) => G.zeniAccountListPaddingBottom.valuePx(e.windowSize)};
+`, Lo = n(Je)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  min-height: ${o.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Do = n.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  top: ${o.sp0};
+  padding: ${(e) => `${G.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${o.sp0}`};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, Co = n(Pe)`
+  color: ${(e) => e.theme.colors.primary};
+  padding: ${o.sp3} ${o.sp0} ${o.sp5} ${o.sp0};
+`, Ao = n(Dt)`
+  min-width: ${o.sp5};
+  width: ${o.sp5};
+  height: ${o.sp5};
+  margin-right: ${o.sp2};
+  padding: 12px ${o.sp0};
+  box-sizing: content-box;
+`, {
+  common: {
+    navBar: { back: Fo }
+  }
+} = _.getLocalizedStrings(), F = {
+  pageTitleMarginXAxis: new s(a[0], a[8]),
+  navBarContainerPaddingXaxis: new s(10, 19),
+  pageContentPaddingLeftRight: new s(a[3], a[0]),
+  navBarContainerMarginLeftRight: new s(a[0], a[8]),
+  descriptionMarginLeftRight: new s(a[0], a[8]),
+  accountInfoPageWrapperMarginLeft: new s(a[0], a[8]),
+  accountInfoPageWrapperMarginRight: new s(a[0], a[5]),
+  accountInfoPageWrapperMarginBottom: new s(a[5], a[8])
+}, ye = _.getLocalizedStrings().spendManagement.zeniAccounts.zeniAccountList.transferDrawer, Mo = ({
+  authParams: e,
+  downloadAccountDetailEndPoint: r,
+  depositAccount: h,
+  zeniAccountsConfigDetail: w,
+  currentTenant: b,
+  onDismissClick: f,
+  fireTrackTransferBetweenAccountsFormClicked: d,
+  setShowWireAccountInfo: u
+}) => {
+  const c = pe();
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(Bo, { windowSize: c, children: [
+      /* @__PURE__ */ t.jsx(Io, { windowSize: c, children: /* @__PURE__ */ t.jsx(be, { title: Fo, enterDelay: 600, placement: "bottom", children: /* @__PURE__ */ t.jsx(
+        ko,
+        {
+          "data-testid": C(
+            "wire-transfer-account-info-back-button"
+          ),
+          onClick: () => {
+            d(
+              "Back",
+              "Wire Transfer Details"
+            ), u(!1);
+          }
+        }
+      ) }) }),
+      /* @__PURE__ */ t.jsx(_o, { windowSize: c, children: ye.wireInstruction.replace(
+        "__accountName__",
+        h.accountName
+      ) }),
+      /* @__PURE__ */ t.jsx(Ro, { windowSize: c, children: /* @__PURE__ */ t.jsx(Oo, { children: ye.wireTransferDescriptionLine1 }) }),
+      /* @__PURE__ */ t.jsx(zo, { windowSize: c, children: /* @__PURE__ */ t.jsx(
+        zt,
+        {
+          authParams: e,
+          downloadAccountDetailEndPoint: r,
+          currentTab: "wireDetails",
+          zeniAccountsConfigDetail: w,
+          currentTenant: b,
+          depositAccount: h
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t.jsx(
+      ve,
+      {
+        style: { zIndex: 4, paddingTop: o.sp3, paddingBottom: o.sp3 },
+        cancelBtn: {
+          label: ""
+        },
+        primaryBtn: {
+          label: ye.backToChecking,
+          onClick: () => {
+            d(
+              "Back to Checking",
+              "Wire Transfer Details"
+            ), f();
+          }
+        },
+        showCancel: !1,
+        showPrimaryButton: !0
+      }
+    )
+  ] });
+}, zo = n.div`
+  margin-left: ${(e) => `${F.accountInfoPageWrapperMarginLeft.valuePx(e.windowSize)}`};
+  margin-right: ${(e) => `${F.accountInfoPageWrapperMarginRight.valuePx(
+  e.windowSize
+)}`};
+  margin-bottom: ${(e) => `${F.accountInfoPageWrapperMarginBottom.valuePx(
+  e.windowSize
+)}`};
+`, Bo = n.div`
+  height: auto;
+  padding: ${(e) => `${o.sp0} ${F.pageContentPaddingLeftRight.valuePx(e.windowSize)}`};
+  margin-bottom: auto;
+`, ko = n(Je)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  min-height: ${o.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Io = n.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  top: ${o.sp0};
+  padding: ${(e) => `${F.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${o.sp0}`};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+  margin: ${(e) => `${o.sp0} ${F.navBarContainerMarginLeftRight.valuePx(e.windowSize)}`};
+`, Ro = n(ge)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-left: ${(e) => F.descriptionMarginLeftRight.valuePx(e.windowSize)};
+  margin-right: ${(e) => F.descriptionMarginLeftRight.valuePx(e.windowSize)};
+  margin-bottom: ${o.sp7};
+`, Oo = n.div``, _o = n(Pe)`
+  color: ${(e) => e.theme.colors.primary};
+  padding: ${o.sp3} ${o.sp0} ${o.sp2} ${o.sp0};
+  margin: ${(e) => `${o.sp0} ${F.pageTitleMarginXAxis.valuePx(
+  e.windowSize
+)} `};
+`, No = ({
+  zeniAccountsConfigDetail: e,
+  depositAccountListView: r,
+  downloadAccountDetailEndPoint: h,
+  authParams: w,
+  selectedAccountId: b,
+  currentTenant: f,
+  setCurrentDrawerContent: d,
+  fireTrackTransferBetweenAccountsFormClicked: u,
+  onDismissClick: c
+}) => {
+  const [S, v] = j(!1), [P, k] = j(
+    r.depositAccounts.find(
+      (I) => I.id === b
+    )
+  );
+  return S && P != null ? /* @__PURE__ */ t.jsx(
+    Mo,
+    {
+      downloadAccountDetailEndPoint: h,
+      authParams: w,
+      currentTenant: f,
+      zeniAccountsConfigDetail: e,
+      depositAccount: P,
+      onDismissClick: c,
+      setShowWireAccountInfo: v,
+      fireTrackTransferBetweenAccountsFormClicked: u
+    }
+  ) : /* @__PURE__ */ t.jsx(
+    $o,
+    {
+      depositAccountListView: r,
+      setCurrentDrawerContent: d,
+      selectedAccount: P,
+      setShowWireAccountInfo: v,
+      setSelectedAccount: k,
+      fireTrackTransferBetweenAccountsFormClicked: u
+    }
+  );
+}, Jo = ({
+  transferDetails: e,
+  zeniAccountsConfigDetail: r,
+  depositAccountListView: h,
+  maxInsuredAmount: w,
+  currentTenant: b,
+  showReviewContent: f,
+  currentDrawerContent: d,
+  downloadAccountDetailEndPoint: u,
+  authParams: c,
+  analytics: S,
+  setCurrentDrawerContent: v,
+  setShowReviewContent: P,
+  onSaveChangesToLocalStore: k,
+  onTransferClick: I,
+  onReviewClick: J,
+  onDismissClick: R,
+  onAnotherTransferClick: N,
+  onEstablishConnectionClick: W,
+  onBackClick: Q,
+  clearReviewTransferDetail: K,
+  onFetchLinkTokenClick: i,
+  plaidConnectionDetails: O
+}) => {
+  const [E, M] = j(!1), [g, T] = j(!1), [V, x] = j(0), [z, X] = j(0), [Z, ee] = j(0), ie = () => {
+    const q = (te, le) => S.trackTransferBetweenAccountsFormClicked(
+      te,
+      le,
+      e.transferDetailLocalData.transferFrom?.label,
+      e.transferDetailLocalData.transferTo?.label,
+      e.transferDetailLocalData.amount.amount,
+      e.reviewTransferDetail.reviewTransferMoney.isShowDailyAchLimitWarning,
+      e.reviewTransferDetail.reviewTransferMoney.transferSchedules.length,
+      e.transferDetailLocalData.transferFrom?.accType === "paymentAccount" && e.transferDetailLocalData.transferTo?.accType === "depositAccount" && r.zeniAccountsConfigDetail.depositProductConfig.depositProducts?.[0].range?.[1] != null && e.transferDetailLocalData.amount.amount > r.zeniAccountsConfigDetail.depositProductConfig.depositProducts[0].range[1]
+    );
+    return d === "achTransfer" ? /* @__PURE__ */ t.jsx(
+      lo,
+      {
+        transferDetails: e,
+        isCalculatorOpen: E,
+        showAnnualYieldEarned: g,
+        transferAmount: V,
+        yieldEarned: z,
+        totalBalance: Z,
+        zeniAccountsConfigDetail: r,
+        fireTrackTransferBetweenAccountsFormClicked: q,
+        onSaveChangesToLocalStore: k,
+        onTransferClick: I,
+        onDismissClick: R,
+        onAnotherTransferClick: N,
+        onEstablishConnectionClick: W,
+        onBackClick: Q,
+        onFetchLinkTokenClick: i,
+        plaidConnectionDetails: O,
+        setCurrentDrawerContent: v,
+        clearReviewTransferDetail: K,
+        onReviewClick: J,
+        setShowReviewContent: P,
+        showReviewContent: f,
+        setIsCalculatorOpen: M,
+        setShowAnnualYieldEarned: T,
+        setTransferAmount: x,
+        setYieldEarned: X,
+        setTotalBalance: ee,
+        maxInsuredAmount: w
+      }
+    ) : /* @__PURE__ */ t.jsx(
+      No,
+      {
+        zeniAccountsConfigDetail: r,
+        depositAccountListView: h,
+        selectedAccountId: e.transferDetailLocalData.transferTo?.id,
+        currentTenant: b,
+        downloadAccountDetailEndPoint: u,
+        authParams: c,
+        fireTrackTransferBetweenAccountsFormClicked: q,
+        setCurrentDrawerContent: v,
+        onDismissClick: R
+      }
+    );
+  };
+  return /* @__PURE__ */ t.jsx(Wo, { children: ie() });
+}, Wo = n.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100%;
+  width: 100%;
+`;
+export {
+  Jo as default
+};