@zeniai/web-components 3.16.53 → 3.16.55

package/dist/TreasuryTransferOrReviewPage-DMaGU-Gd.js

@@ -0,0 +1,1938 @@
+import { j as o, u as Ft, aD as Mt, g as Bt, h as Rt, F as zt, k as It } from "./vendor-.pnpm-Q8NJHkXi.js";
+import r from "@emotion/styled";
+import { dB as Et, j as C, S as t, C as S, G as N, dK as Nt, a as be, u as Se, aD as D, Z as Ot, hs as st, av as E, ik as _t, ap as lt, R as g, b as Oe, K as ct, p as H, e_ as dt, hz as ut, _ as pt, a5 as G, A as mt, w as Vt, hP as Wt, D as l, ab as Yt, fa as qt, W as Gt, Q as Ht, hR as Xt, hJ as Zt, hX as Jt, ia as Kt, am as Ut, E as Dt, hK as Qt, bb as eo, iY as to, B as He, aj as oo, L as ro, V as no } from "./index-Dc_o2gSy.js";
+import { useState as M, useEffect as B, useCallback as Ce, useMemo as ao } from "react";
+import { zeniDate as ht, getNextNthWorkingDay as io, dateNow as so, checkIfLowBalance as V } from "@zeniai/client-epic-state";
+import { P as gt } from "./PortfolioDetails-BMo4nZPY.js";
+const lo = be.getLocalizedStrings().spendManagement.treasury, z = [0, 125e4, 25e5, 35e5, 5e6], co = 1e3;
+function uo({
+  interestRate: e = 4.35,
+  transferAmount: i,
+  setYieldEarned: d,
+  setTransferAmount: n
+}) {
+  const u = Et().analytics, [m, p] = M(i);
+  B(() => {
+    p(i);
+  }, [i]);
+  const v = (x) => {
+    const a = parseFloat(x.target.value), $ = ye(
+      a,
+      e
+    );
+    p(a), d($), n(a), u.trackTreasuryCalculatorClick("fund transfer", a);
+  }, A = (x) => {
+    const a = ye(
+      x,
+      e
+    );
+    p(x), n(x), d(a), u.trackTreasuryCalculatorClick("fund transfer", x);
+  };
+  return /* @__PURE__ */ o.jsxs(xo, { sliderValue: m, children: [
+    /* @__PURE__ */ o.jsx(
+      go,
+      {
+        sliderValue: m,
+        type: "range",
+        min: z[0],
+        max: z[z.length - 1],
+        step: co,
+        value: m,
+        onChange: v
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      fo,
+      {
+        style: {
+          width: `${Math.min(m / z[z.length - 1] * 92.5, 92.5)}%`
+        }
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      bo,
+      {
+        sliderValue: m,
+        style: {
+          left: `calc(${Math.min(Math.max(m / z[z.length - 1] * 100, 5), 95)}% - 50px)`
+          // Position based on slider value with boundaries
+        },
+        children: po(m)
+      }
+    ),
+    /* @__PURE__ */ o.jsx(yo, { children: z.map((x, a) => /* @__PURE__ */ o.jsx(
+      $o,
+      {
+        onClick: () => A(x),
+        "data-testid": C("slider-label", x.toString()),
+        style: { left: mo(a) },
+        children: /* @__PURE__ */ o.jsx(wo, { isSelected: m >= x, children: ho(x) })
+      },
+      x
+    )) })
+  ] });
+}
+const po = (e) => {
+  const i = Nt(
+    "0,0.[00]a",
+    e,
+    "$"
+  ).toUpperCase();
+  return `${lo.transferDrawer.calculator.sliderTooltipText} ${i}`;
+};
+function ye(e, i) {
+  const n = i / 100, c = e * Math.pow(1 + n / 12, 12);
+  return Math.floor(c - e);
+}
+const mo = (e) => {
+  switch (e) {
+    case 0:
+      return "3%";
+    case 1:
+      return "28%";
+    case 2:
+      return "50.2%";
+    case 3:
+      return "74.5%";
+    case 4:
+      return "98%";
+    default:
+      return "100%";
+  }
+}, ho = (e) => Intl.NumberFormat("en", {
+  notation: "compact",
+  maximumFractionDigits: 2
+}).format(e), go = r.input`
+  width: 100%;
+  &[type="range"]::-webkit-slider-runnable-track {
+    height: 2px;
+    cursor: pointer;
+    background-color: ${(e) => e.theme.colors.grey3};
+  }
+
+  &[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  &[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: ${t.sp5};
+    width: ${t.sp5};
+    border-radius: 100%;
+    margin-top: -${t.sp3}; // Centers thumb on the track
+    box-shadow: ${t.sp0} ${t.sp0} 2px ${S.blackColor};
+    background-image: ${(e) => `url(https://storage.googleapis.com/zeni-apis.appspot.com/images/slider-icon-${e.theme.mode === "dark" ? "light" : "dark"}.svg)`};
+    background-repeat: no-repeat;
+    cursor: pointer;
+  }
+`, xo = r.div`
+  position: relative;
+  width: 70%;
+  margin-left: 30px;
+  margin-right: 30px;
+  margin-bottom: 20px;
+  margin-top: ${t.sp5};
+  min-height: ${t.sp8};
+`, fo = r.div`
+  position: absolute;
+  height: 2px;
+  margin-top: -${t.sp2};
+  background-color: ${(e) => e.theme.colors.hero};
+`, yo = r.div`
+  position: absolute;
+  bottom: ${t.sp0};
+  top: ${t.sp5};
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`, $o = r.span`
+  position: absolute;
+  cursor: pointer;
+  transform: translateX(-50%);
+`, wo = r(N)`
+  color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.grey1};
+  white-space: nowrap;
+`, bo = r(N)`
+  position: absolute;
+  top: -${t.sp5};
+  white-space: nowrap;
+  color: ${S.primaryDark};
+  background-color: ${S.success};
+  display: flex;
+  border-radius: ${t.sp1};
+  justify-content: center;
+  align-items: center;
+  padding: 2px ${t.sp2};
+`, Q = {
+  navBarContainerPaddingXaxis: new g(10, 19),
+  containerPaddingLeft: new g(l[3], l[6], l[8]),
+  containerPaddingRight: new g(l[3], l[6], l[8]),
+  reviewContentWrapperPaddingBottom: new g(l[5], l[8]),
+  elementsContainerPadding: new g(l[3], l[4])
+}, Ee = {
+  pageTitle: new E("h6Regular", "h5Regular"),
+  integerStyles: new E("h5Regular", "h2Regular"),
+  decimalStyles: new E("extraLargeMedium", "h5Medium")
+}, {
+  common: {
+    edit: So,
+    footer: { back: vo }
+  },
+  dateFormat: {
+    visual: { DMMMYYYYFormat: jo }
+  },
+  spendManagement: {
+    treasury: { transferDrawer: F },
+    billPay: {
+      insufficientFunds: {
+        lowBalance: Ao,
+        addOrSwitchInitiateTransfer: To,
+        lowBalanceIn: Po
+      }
+    }
+  }
+} = be.getLocalizedStrings(), ko = ({
+  fromAccount: e,
+  themeContext: i,
+  toAccount: d,
+  transferDetails: n
+}) => {
+  const c = Se();
+  if (c === "small") {
+    const u = Ro(
+      e,
+      d,
+      n.treasuryAccount.id
+    );
+    return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+      /* @__PURE__ */ o.jsxs(
+        ge,
+        {
+          style: u.topAccount?.id === n.treasuryAccount.id ? {
+            borderColor: i.colors.grey1,
+            position: "relative"
+          } : {},
+          windowSize: c,
+          children: [
+            /* @__PURE__ */ o.jsx(xe, { children: u.topAccountLabel }),
+            /* @__PURE__ */ o.jsxs(he, { windowSize: c, children: [
+              Y(
+                n.transferMoneyParties,
+                u.topAccount?.id ?? "",
+                !0,
+                u.topAccount?.id === n.treasuryAccount.id,
+                !0
+              ),
+              /* @__PURE__ */ o.jsxs(pe, { windowSize: c, children: [
+                u.topAccount?.label,
+                /* @__PURE__ */ o.jsx(me, { children: q(
+                  n.transferMoneyParties,
+                  n.treasuryAccount,
+                  u.topAccount?.id ?? "",
+                  !0,
+                  !0,
+                  !0
+                ) })
+              ] })
+            ] }),
+            ue(
+              u.topAccount,
+              n.treasuryAccount.id,
+              c,
+              !1
+            ) ? /* @__PURE__ */ o.jsx(fe, {}) : null
+          ]
+        }
+      ),
+      u.arrowDirection === "up" ? /* @__PURE__ */ o.jsx(pr, {}) : /* @__PURE__ */ o.jsx(mr, {}),
+      /* @__PURE__ */ o.jsxs(
+        ge,
+        {
+          style: u.bottomAccount?.id === n.treasuryAccount.id ? {
+            borderColor: i.colors.grey1,
+            position: "relative"
+          } : {},
+          windowSize: c,
+          children: [
+            /* @__PURE__ */ o.jsx(xe, { children: u.bottomAccountLabel }),
+            /* @__PURE__ */ o.jsxs(he, { windowSize: c, children: [
+              Y(
+                n.transferMoneyParties,
+                u.bottomAccount?.id ?? "",
+                !0,
+                u.bottomAccount?.id === n.treasuryAccount.id,
+                !0
+              ),
+              /* @__PURE__ */ o.jsxs(pe, { windowSize: c, children: [
+                u.bottomAccount?.label,
+                /* @__PURE__ */ o.jsx(me, { children: q(
+                  n.transferMoneyParties,
+                  n.treasuryAccount,
+                  u.bottomAccount?.id ?? "",
+                  !0,
+                  !1,
+                  !0
+                ) })
+              ] })
+            ] }),
+            ue(
+              u.bottomAccount,
+              n.treasuryAccount.id,
+              c,
+              !0
+            ) ? /* @__PURE__ */ o.jsx(fe, {}) : null
+          ]
+        }
+      )
+    ] });
+  } else
+    return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+      /* @__PURE__ */ o.jsxs(
+        ge,
+        {
+          style: e?.id === n.treasuryAccount.id ? {
+            borderColor: i.colors.grey1,
+            position: "relative"
+          } : {},
+          windowSize: c,
+          children: [
+            /* @__PURE__ */ o.jsx(xe, { children: "Transfer Funds From" }),
+            /* @__PURE__ */ o.jsxs(he, { windowSize: c, children: [
+              Y(
+                n.transferMoneyParties,
+                e?.id ?? "",
+                !0,
+                e?.id === n.treasuryAccount.id,
+                !0
+              ),
+              /* @__PURE__ */ o.jsxs(pe, { windowSize: c, children: [
+                e?.label,
+                /* @__PURE__ */ o.jsx(me, { children: q(
+                  n.transferMoneyParties,
+                  n.treasuryAccount,
+                  e?.id ?? "",
+                  !0,
+                  !0,
+                  !0
+                ) })
+              ] })
+            ] }),
+            ue(
+              e,
+              n.treasuryAccount.id,
+              c,
+              !1
+            ) ? /* @__PURE__ */ o.jsx(fe, {}) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ o.jsx(ur, {}),
+      /* @__PURE__ */ o.jsxs(
+        ge,
+        {
+          style: d?.id === n.treasuryAccount.id ? {
+            borderColor: i.colors.grey1,
+            position: "relative"
+          } : {},
+          windowSize: c,
+          children: [
+            /* @__PURE__ */ o.jsx(xe, { children: "To" }),
+            /* @__PURE__ */ o.jsxs(he, { windowSize: c, children: [
+              Y(
+                n.transferMoneyParties,
+                d?.id ?? "",
+                !0,
+                d?.id === n.treasuryAccount.id,
+                !0
+              ),
+              /* @__PURE__ */ o.jsxs(pe, { windowSize: c, children: [
+                d?.label,
+                /* @__PURE__ */ o.jsx(me, { children: q(
+                  n.transferMoneyParties,
+                  n.treasuryAccount,
+                  d?.id ?? "",
+                  !0,
+                  !1,
+                  !0
+                ) })
+              ] })
+            ] }),
+            ue(
+              d,
+              n.treasuryAccount.id,
+              c,
+              !1
+            ) ? /* @__PURE__ */ o.jsx(fe, {}) : null
+          ]
+        }
+      )
+    ] });
+}, Lo = (e, i, d) => {
+  if (!e)
+    return !0;
+  if (e.id === i.id) {
+    const n = i.balance;
+    return n ? V(d, n) : !0;
+  }
+  if ("accountBalance" in e) {
+    const n = e.accountBalance?.available;
+    return n == null ? !1 : V(d, n);
+  }
+  return !1;
+}, Co = ({
+  transferDetails: e,
+  fundDetails: i,
+  portfolioAllocation: d,
+  isOnSetup: n,
+  setShowReviewContent: c,
+  onTransferClick: u,
+  onCancelClick: m
+}) => {
+  const p = Se(), v = Ft(), A = D(e.fetchState), [x, a] = M(!1);
+  B(() => {
+    A === "In-Progress" && e.fetchState === "Error" && e.error != null ? a(!0) : a(!1);
+  }, [e.error]);
+  const { fromAccount: $, toAccount: P, amount: h } = e.treasuryTransferMoneyLocalData, k = Lo(
+    $,
+    e.treasuryAccount,
+    h
+  );
+  return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    /* @__PURE__ */ o.jsxs(Yo, { windowSize: p, children: [
+      /* @__PURE__ */ o.jsx(Jo, { windowSize: p, children: /* @__PURE__ */ o.jsx(Ot, { title: "Close", enterTouchDelay: 600, placement: "bottom", children: /* @__PURE__ */ o.jsx(
+        Xe,
+        {
+          "data-testid": C("nav-bar-close-transfer-review"),
+          onClick: m
+        }
+      ) }) }),
+      /* @__PURE__ */ o.jsx(Ko, { windowSize: p, children: n === !0 ? F.stepTitle : F.reviewAndConfirm }),
+      n === !0 && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        /* @__PURE__ */ o.jsx(Uo, { windowSize: p, children: /* @__PURE__ */ o.jsx(Do, { children: /* @__PURE__ */ o.jsxs(Qo, { children: [
+          /* @__PURE__ */ o.jsx(Ze, {}),
+          /* @__PURE__ */ o.jsx(Ze, {}),
+          /* @__PURE__ */ o.jsx(er, {})
+        ] }) }) }),
+        p === "small" ? /* @__PURE__ */ o.jsx(dr, { children: F.subTitle }) : /* @__PURE__ */ o.jsx(Ue, { children: F.subTitle })
+      ] }),
+      /* @__PURE__ */ o.jsx(cr, { windowSize: p, children: /* @__PURE__ */ o.jsx(
+        st,
+        {
+          amount: h,
+          alwaysShowDecimal: !0,
+          integerStyles: Ee.integerStyles.styleObject(p),
+          decimalStyles: Ee.decimalStyles.styleObject(p)
+        }
+      ) }),
+      n !== !0 && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        /* @__PURE__ */ o.jsx(Xo, {}),
+        /* @__PURE__ */ o.jsx(Ue, { children: /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          F.review.prefix,
+          `"${P?.label}" `,
+          F.success.midfix,
+          ` "${$?.label}" `,
+          F.review.suffix.replace(
+            "__date__",
+            ht(
+              io(
+                so().toDate(),
+                [0, 6],
+                1
+              ).toDateString()
+            ).format(jo)
+          )
+        ] }) })
+      ] }),
+      k ? /* @__PURE__ */ o.jsx(
+        _t,
+        {
+          variant: "low-balance",
+          style: { marginTop: t.sp3, marginBottom: t.sp3 },
+          title: Po.replace(
+            "__account__",
+            $?.id === e.treasuryAccount.id ? $?.label ?? "" : `${$?.label ?? ""} ${$?.maskedAccountNumber ?? ""}`
+          ),
+          description: To
+        }
+      ) : null,
+      x ? /* @__PURE__ */ o.jsx(Wo, { children: /* @__PURE__ */ o.jsxs(No, { children: [
+        /* @__PURE__ */ o.jsxs(qo, { children: [
+          /* @__PURE__ */ o.jsx(Ho, {}),
+          /* @__PURE__ */ o.jsxs(Oo, { children: [
+            /* @__PURE__ */ o.jsx(_o, { children: e.error?.title }),
+            /* @__PURE__ */ o.jsx(Vo, { children: e.error?.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ o.jsx(Go, { children: /* @__PURE__ */ o.jsx(
+          Xe,
+          {
+            "data-testid": C(
+              "close-error-transfer-review"
+            ),
+            onClick: () => {
+              a(!1);
+            },
+            style: {
+              width: t.sp3,
+              height: t.sp3,
+              color: S.heroLight
+            }
+          }
+        ) })
+      ] }) }) : null,
+      /* @__PURE__ */ o.jsx(Zo, { windowSize: p, children: /* @__PURE__ */ o.jsxs(zo, { windowSize: p, children: [
+        /* @__PURE__ */ o.jsx(Io, { windowSize: p, children: /* @__PURE__ */ o.jsx(
+          ko,
+          {
+            fromAccount: $,
+            themeContext: v,
+            toAccount: P,
+            transferDetails: e
+          }
+        ) }),
+        /* @__PURE__ */ o.jsx(Eo, { children: /* @__PURE__ */ o.jsx(
+          gt,
+          {
+            isInReview: !0,
+            isSetup: !1,
+            fundDetails: i,
+            allocation: d,
+            amount: Mo(e),
+            fundAllocations: Bo(e),
+            page: "transfer review"
+          }
+        ) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ o.jsx(
+      lt,
+      {
+        style: n !== !0 ? { zIndex: 4, paddingTop: t.sp3, paddingBottom: t.sp0 } : { zIndex: 4 },
+        helperText: n !== !0 ? F.review.footNote : void 0,
+        helperStyle: {
+          padding: `${t.sp0} ${t.sp0} ${t.sp3} ${t.sp0}`
+        },
+        cancelBtn: {
+          label: n === !0 ? vo : So,
+          onClick: () => {
+            a(!1), c(!1);
+          },
+          style: { minWidth: 94 }
+        },
+        primaryBtn: {
+          label: F.transferBtn,
+          onClick: u,
+          isLoading: e.fetchState === "In-Progress",
+          isDisabled: k,
+          style: { minWidth: 94 }
+        }
+      }
+    )
+  ] });
+}, Y = (e, i, d, n, c) => {
+  if (n === !0)
+    return /* @__PURE__ */ o.jsx(
+      Je,
+      {
+        isOptionSelected: d,
+        isForReview: c,
+        children: /* @__PURE__ */ o.jsx(Ke, { color: S.brandColorGoldDark })
+      }
+    );
+  if (i === "")
+    return /* @__PURE__ */ o.jsx(lr, { isForReview: c, children: /* @__PURE__ */ o.jsx(Vt, {}) });
+  const u = e.find(
+    (p) => p.id === i
+  ), m = e.findIndex(
+    (p) => p.id === i
+  );
+  if (u != null) {
+    if (u.accType === "depositAccount")
+      return /* @__PURE__ */ o.jsx(
+        Je,
+        {
+          isOptionSelected: d,
+          isForReview: c,
+          children: /* @__PURE__ */ o.jsx(
+            Ke,
+            {
+              color: Wt(m)
+            }
+          )
+        }
+      );
+    if (u.accType === "paymentAccount")
+      return u.logo !== void 0 && (u.logo.base64 || u.logo.url) ? /* @__PURE__ */ o.jsx(
+        ar,
+        {
+          src: Fo(u.logo),
+          isOptionSelected: d,
+          isForReview: c,
+          loading: "lazy"
+        }
+      ) : /* @__PURE__ */ o.jsx(
+        ir,
+        {
+          isOptionSelected: d,
+          isForReview: c,
+          children: /* @__PURE__ */ o.jsx(sr, {})
+        }
+      );
+  }
+  return null;
+}, q = (e, i, d, n, c, u, m) => {
+  if (!d)
+    return null;
+  if (d === i.id)
+    return (u || !n) && i.balance ? /* @__PURE__ */ o.jsx(Fe, { children: G("0,0[.]00", i.balance) }) : null;
+  const p = e.find(
+    (A) => A.id === d
+  );
+  let v = !1;
+  return c === !0 && m != null && p?.accountBalance?.available?.amount != null && (v = V(
+    m,
+    p.accountBalance.available
+  )), n === !0 && !u ? /* @__PURE__ */ o.jsx(or, { children: p?.maskedAccountNumber }) : /* @__PURE__ */ o.jsxs(tr, { className: "option-sublabel", children: [
+    /* @__PURE__ */ o.jsx(Fe, { children: p?.maskedAccountNumber }),
+    p?.accountBalance?.available ? /* @__PURE__ */ o.jsx(nr, { className: "dot" }) : null,
+    p?.accountBalance?.available ? /* @__PURE__ */ o.jsxs(Fe, { children: [
+      G("0,0[.]00", p.accountBalance.available),
+      v ? /* @__PURE__ */ o.jsx(rr, { children: Ao }) : null
+    ] }) : null,
+    p?.balanceFetchStatus?.fetchState === "In-Progress" ? /* @__PURE__ */ o.jsx(mt, { size: "Small", start: !0 }) : null
+  ] });
+}, Fo = (e) => e.base64 !== void 0 ? `${Zt}${e.base64.toString()}` : e.url !== void 0 ? e.url.toString() : "", Mo = (e) => {
+  const { fromAccount: i } = e.treasuryTransferMoneyLocalData;
+  if (i?.id !== e.treasuryAccount.id)
+    return e.treasuryTransferMoneyLocalData.amount;
+}, Bo = (e) => {
+  const { fromAccount: i } = e.treasuryTransferMoneyLocalData;
+  if (i?.id === e.treasuryAccount.id)
+    return e.treasuryAccount.fundAllocations;
+}, Ro = (e, i, d) => e?.id === d ? {
+  topAccount: i,
+  bottomAccount: e,
+  topAccountLabel: "To",
+  bottomAccountLabel: "Transfer Funds From",
+  arrowDirection: "up"
+} : {
+  topAccount: e,
+  bottomAccount: i,
+  topAccountLabel: "Transfer Funds From",
+  bottomAccountLabel: "To",
+  arrowDirection: "down"
+}, ue = (e, i, d, n) => d === "small" ? e?.id === i && n : e?.id === i, pe = r.div`
+  display: flex;
+  flex-direction: column;
+`, me = r(N)`
+  color: ${(e) => e.theme.colors.hero};
+`, he = r(H)`
+  display: flex;
+  align-items: center;
+`, zo = r.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) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.sp2};
+  padding: ${(e) => `${Q.elementsContainerPadding.valuePx(e.windowSize)}`};
+  gap: ${t.sp4};
+  ${(e) => e.windowSize === "small" && `
+    width: auto;
+  `}
+`, Io = r.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  justify-content: space-between;
+  align-items: ${(e) => e.windowSize === "small" ? "stretch" : "center"};
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey5};
+`, ge = r.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${t.sp1};
+  padding: ${t.sp2} ${t.sp3};
+  background-color: ${(e) => e.theme.colors.grey4};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${t.sp2};
+  width: ${(e) => e.windowSize === "small" ? "auto" : "288px"};
+`, Eo = r.div`
+  padding: ${t.sp2} ${t.sp3};
+  background-color: ${(e) => e.theme.colors.grey4};
+  border: 1px solid ${(e) => e.theme.colors.grey1};
+  border-radius: ${t.sp2};
+`, No = r.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: ${t.sp3} ${t.sp4};
+  background-color: ${S.importantLight};
+  border-radius: ${t.sp2};
+`, Oo = r.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: ${t.sp2};
+`, _o = r(pt)`
+  color: ${S.important};
+`, Vo = r(H)`
+  color: ${S.important};
+`, Wo = r.div`
+  margin-top: ${t.sp3};
+  display: flex;
+  background-color: ${(e) => e.theme.colors.grey5};
+  justify-content: space-between;
+  padding: ${t.sp3} ${t.sp4};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  border-radius: ${t.sp2};
+  box-shadow: ${(e) => `${t.sp0} 2px 2px ${e.theme.colors.dropShadowNormal}`};
+`, Yo = r.div`
+  height: auto;
+  padding-left: ${(e) => `${Q.containerPaddingLeft.valuePx(e.windowSize)}`};
+  padding-right: ${(e) => `${Q.containerPaddingRight.valuePx(e.windowSize)}`};
+  margin-bottom: auto;
+`, qo = r.div`
+  display: flex;
+  align-items: flex-start;
+`, Go = r.div``, Ho = r(ut)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${S.important};
+`, Xe = r(Oe)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${t.sp4};
+  height: ${t.sp4};
+  min-height: ${t.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Xo = r.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, xe = r(N)`
+  color: ${(e) => e.theme.colors.hero};
+`, Zo = r.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${t.sp3};
+  padding-bottom: ${(e) => `${Q.reviewContentWrapperPaddingBottom.valuePx(
+  e.windowSize
+)}`};
+`, Jo = r.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  top: ${t.sp0};
+  padding: ${(e) => `${Q.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${t.sp0}`};
+  z-index: 2;
+  background-color: transparent;
+`, Ko = r(ct)`
+  ${(e) => `${Ee.pageTitle.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  padding: ${t.sp3} ${t.sp0} ${t.sp2} ${t.sp0};
+  ${(e) => e.windowSize === "small" && `
+    padding-bottom: ${t.sp0};
+  `}
+`, Uo = r.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${t.sp3};
+  width: 100%;
+  margin-bottom: ${t.sp3};
+`, Do = r.div`
+  display: flex;
+  align-items: center;
+`, Qo = r.div`
+  display: flex;
+  width: 100%;
+  gap: ${t.sp3};
+`, Ze = r.div`
+  width: 33.33%;
+  height: 2px;
+  background-color: ${(e) => e.theme.colors.primary};
+  border-radius: ${t.sp2};
+`, er = r.div`
+  width: 33.33%;
+  height: 2px;
+  background-color: ${(e) => e.theme.colors.grey2};
+  border-radius: ${t.sp2};
+`, tr = r(N)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.sp2};
+`, or = r.span`
+  margin-left: ${t.sp2};
+`, Fe = r.div``, rr = r(Ht)`
+  color: ${(e) => e.theme.colors.brandColorGoldDark};
+  margin-left: ${t.sp1};
+`, nr = r.div`
+  width: ${t.sp1};
+  height: ${t.sp1};
+  min-width: ${t.sp1};
+  background-color: ${(e) => e.theme.colors.grey1};
+  border-radius: 50%;
+`, ar = r.img`
+  display: flex;
+  width: ${(e) => e.isForReview ? t.sp6 : e.isOptionSelected ? t.sp4 : t.sp5};
+  height: ${(e) => e.isForReview ? t.sp6 : e.isOptionSelected ? t.sp4 : t.sp5};
+  min-width: ${(e) => e.isForReview ? t.sp6 : e.isOptionSelected ? t.sp4 : t.sp5};
+  margin-right: ${t.sp2};
+`, ir = r.div`
+  min-width: ${(e) => e.isForReview ? t.sp6 : e.isOptionSelected ? t.sp4 : t.sp5};
+  width: ${(e) => e.isForReview ? t.sp6 : e.isOptionSelected ? t.sp4 : t.sp5};
+  height: ${(e) => e.isForReview ? t.sp6 : e.isOptionSelected ? t.sp4 : t.sp5};
+  margin-right: ${t.sp2};
+`, sr = r(Jt)`
+  min-width: inherit;
+  width: inherit;
+  height: inherit;
+  margin-right: ${t.sp2};
+`, Je = r.div`
+  min-width: ${(e) => e.isForReview ? t.sp6 : e.isOptionSelected ? t.sp4 : t.sp5};
+  width: ${(e) => e.isForReview ? t.sp6 : e.isOptionSelected ? t.sp4 : t.sp5};
+  height: ${(e) => e.isForReview ? t.sp6 : e.isOptionSelected ? t.sp4 : t.sp5};
+  margin-right: ${t.sp2};
+`, Ke = r(Xt)`
+  min-width: inherit;
+  width: inherit;
+  height: inherit;
+  margin-right: ${t.sp2};
+`, lr = r.div`
+  width: ${(e) => e.isForReview ? t.sp6 : t.sp4};
+  height: ${(e) => e.isForReview ? t.sp6 : t.sp4};
+  margin-right: 12px;
+  margin-left: ${t.sp1};
+  color: ${(e) => e.theme.colors.hero};
+`, cr = r(dt)`
+  color: ${(e) => e.theme.colors.primary};
+  margin: ${t.sp2} ${t.sp0} ${t.sp3} ${t.sp0};
+  ${(e) => e.windowSize === "small" && `
+    margin-top: ${t.sp1};
+    margin-bottom: ${t.sp1};
+  `}
+`, Ue = r(H)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-top: ${t.sp3};
+`, dr = r(N)`
+  color: ${(e) => e.theme.colors.hero};
+`, ur = r(Gt)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, pr = r(Yt)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${(e) => e.theme.colors.hero};
+  align-self: center;
+`, mr = r(qt)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${(e) => e.theme.colors.hero};
+  align-self: center;
+`, fe = r.div`
+  width: 1px;
+  height: 25px;
+  background-color: ${(e) => e.theme.colors.grey1};
+  position: absolute;
+  right: 50%;
+  bottom: -25px;
+`, {
+  common: Me,
+  spendManagement: {
+    treasury: I,
+    zeniAccounts: { zeniAccountList: hr },
+    billPay: { insufficientFunds: Be }
+  }
+} = be.getLocalizedStrings(), xt = "amount", gr = "transferTo", xr = "transferFrom", W = "transferDetails", ft = "transferDetailPage", Re = (e, i) => `${e}.${i}`, yt = (e) => `${e}_form`, y = {
+  largeLabelWidth: new g(120, 120, 160),
+  rowContentPaddingLeft: new g(l[3], l[4]),
+  labeleMarginLeft: new g(l[0], l[0]),
+  labelMarginRight: new g(l[3], l[3]),
+  labeleMarginBottom: new g(l[2], l[0]),
+  labeledFieldPaddingLeft: new g(l[3], l[0]),
+  labeledFieldPaddingRight: new g(l[3], l[2]),
+  labeledFieldPaddingTop: new g(l[3], l[3]),
+  labeledFieldPaddingBottom: new g(l[3], l[2]),
+  infoLabelPaddingRight: new g(l[0], l[3]),
+  infoLabelMarginTop: new g(l[1], l[0]),
+  controllerWrapperFlex: new g(1, l[0]),
+  portfolioContainerPadding: new g(l[3], l[4]),
+  rowContentSelectPaddingLeft: new g(l[3], l[4]),
+  formFieldPaddingLeft: new g(0, l[2]),
+  formFieldPaddingRight: new g(0, l[2])
+}, $e = {
+  yieldEarned: new E("smallMedium", "standardMedium"),
+  calculatorFooterText: new E(
+    "extraSmallRegular",
+    "smallRegular"
+  ),
+  integerStyles: new E("h5Regular", "h2Regular"),
+  decimalStyles: new E("extraLargeMedium", "h5Medium")
+};
+function fr({
+  transferDetails: e,
+  fundDetails: i,
+  portfolioAllocation: d,
+  isFirstTransfer: n,
+  maxInsuredAmount: c,
+  plaidConnectionDetails: u,
+  isOnSetup: m,
+  onSaveChangesToLocalStore: p,
+  onReviewClick: v,
+  onEstablishConnectionClick: A,
+  onFetchLinkTokenClick: x
+}) {
+  const a = Se(), $ = y.largeLabelWidth.value(a), [P, h] = M(!1), [k, X] = M(!1), [w, Z] = M(
+    e.treasuryTransferMoneyLocalData.amount?.amount ?? 0
+  ), O = i.reduce((s, f) => {
+    const T = f.yield;
+    return Math.max(s, T);
+  }, 0), [ve, te] = M(
+    ye(w, O)
+  ), b = u.link_account_no_microdeposit, [R, je] = M(b.linkToken ?? null), [oe, re] = M(!1), [ne, _e] = M(!1), Ae = e.transferMoneyPartiesFetchState, Ve = D(Ae), Te = e.treasuryTransferMoneyLocalData.fromAccount?.id, Pe = e.treasuryTransferMoneyLocalData.toAccount?.id, We = D(Te), Ye = D(Pe), ke = e.transferMoneyParties.map(
+    (s) => s.id
+  ), Le = D(ke), $t = Ce(
+    (s) => {
+      A?.(s), _e(!1), re(!1);
+    },
+    [A]
+  ), wt = Ce((s, f) => {
+    s != null && console.log("Plaid Connection Error", s, f);
+  }, []), { open: ae, ready: J } = Mt({
+    token: R,
+    onSuccess: $t,
+    onExit: wt
+  }), K = Ce(
+    (s) => {
+      s.preventDefault(), s.stopPropagation(), J ? ae() : re(!0);
+    },
+    [ae, J]
+  ), _ = Bt({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: ao(
+      () => Qe(
+        e,
+        n,
+        m ?? !1,
+        K
+      ),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [e, n]
+    )
+  }), { isValid: bt } = _.formState, { setError: St, clearErrors: vt } = _;
+  B(() => {
+    b.fetchStatus.fetchState === "Completed" && b.linkToken != null && b.linkToken !== R && je(b.linkToken);
+  }, [b.fetchStatus.fetchState, b.linkToken, R]), B(() => {
+    b.linkToken === R && b.fetchStatus.fetchState === "Completed" && J && _e(!0);
+  }, [
+    J,
+    R,
+    b.fetchStatus,
+    b.linkToken,
+    b.fetchStatus.fetchState
+  ]), B(() => {
+    ne && oe && ae();
+  }, [ne, ae, oe]), B(() => {
+    (ht((/* @__PURE__ */ new Date()).toISOString()).isAfter(b.expiration) || b.linkToken == null) && x?.("link_account_no_microdeposit");
+  }, []), B(() => {
+    const s = Le != null && JSON.stringify(Le) !== JSON.stringify(ke);
+    (Ve === "In-Progress" && Ae === "Completed" || We !== Te || Ye !== Pe || s) && _.reset(
+      Qe(
+        e,
+        n,
+        m ?? !1,
+        K
+      )
+    );
+  }, [
+    J,
+    R,
+    b.fetchStatus.fetchState,
+    Ve,
+    Ae,
+    We,
+    Ye,
+    Pe,
+    Te,
+    Le,
+    ke,
+    _,
+    e,
+    n,
+    m,
+    K
+  ]);
+  const jt = () => e.transferMoneyParties.find(
+    (s) => s.id !== e.treasuryAccount.id && s.accType === "depositAccount"
+  ), At = () => {
+    const s = e.primaryPaymentAccount?.paymentAccountId;
+    return e.transferMoneyParties.find(
+      (f) => f.id === s
+    );
+  }, Tt = async (s, f) => {
+    if (s != null) {
+      const T = { ...f }, ie = T[W].transferFrom.selectedOption, se = T[W].transferTo.selectedOption;
+      let le = e.transferMoneyParties.find(
+        (de) => de.id === ie
+      ), ce = e.transferMoneyParties.find(
+        (de) => de.id === se
+      );
+      ie === e.treasuryAccount.id && (le = e.treasuryAccount), se === e.treasuryAccount.id && (ce = e.treasuryAccount);
+      const Ge = {
+        amount: T[W].amount ?? 0,
+        currencyCode: "USD",
+        currencySymbol: "$"
+      };
+      s.includes("transferFrom") ? ie === e.treasuryAccount.id ? se === e.treasuryAccount.id && (ce = jt()) : ce = e.treasuryAccount : s.includes("transferTo") && (se === e.treasuryAccount.id ? ie === e.treasuryAccount.id && (le = At()) : le = e.treasuryAccount);
+      const Ct = {
+        amount: Ge,
+        fromAccount: le,
+        toAccount: ce
+      };
+      Z(Ge.amount), p(Ct);
+    }
+  };
+  B(() => {
+    const s = _.watch((f, { name: T }) => {
+      T != null && f != null && Rt(() => Tt(T, f));
+    });
+    return () => {
+      s.unsubscribe();
+    };
+  }), B(() => {
+    te(
+      ye(w, O)
+    );
+  }, [w, O]);
+  const Pt = () => {
+    if (U?.id == null || U.id === "" || !L.amount)
+      return !1;
+    if (U.id === e.treasuryAccount.id) {
+      const s = e.treasuryAccount.balance;
+      if (s && V(L, s))
+        return !0;
+    } else {
+      const s = e.transferMoneyParties.find(
+        (f) => f.id === U.id
+      );
+      if (s?.accountBalance?.available && V(
+        L,
+        s.accountBalance.available
+      ))
+        return !0;
+    }
+    return !1;
+  }, kt = _.handleSubmit(() => {
+    if (Pt()) {
+      St("transferDetails.transferFrom", {
+        type: "lowBalance",
+        message: Be.addMoney
+      });
+      return;
+    }
+    vt("transferDetails.transferFrom"), bt && v();
+  }), {
+    fromAccount: U,
+    toAccount: qe,
+    amount: L
+  } = e.treasuryTransferMoneyLocalData, Lt = (s) => {
+    if (!s || !L.amount)
+      return "";
+    const f = e.transferMoneyParties.find(
+      (T) => T.id === s
+    );
+    if (s === e.treasuryAccount.id) {
+      const T = e.treasuryAccount.balance;
+      if (T && V(L, T))
+        return Be.addMoney;
+    } else if (f?.accountBalance?.available && V(L, f.accountBalance.available))
+      return Be.addMoney;
+    return "";
+  };
+  return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    P ? /* @__PURE__ */ o.jsx(yr, { children: /* @__PURE__ */ o.jsxs(wr, { children: [
+      /* @__PURE__ */ o.jsxs(br, { children: [
+        /* @__PURE__ */ o.jsx(vr, {}),
+        /* @__PURE__ */ o.jsxs(jr, { children: [
+          /* @__PURE__ */ o.jsx(Ar, { children: e.error?.title }),
+          /* @__PURE__ */ o.jsx(Tr, { children: e.error?.message })
+        ] })
+      ] }),
+      /* @__PURE__ */ o.jsx(Sr, { children: /* @__PURE__ */ o.jsx(
+        Cr,
+        {
+          "data-testid": C("amount-details-error-close"),
+          onClick: () => {
+            h(!1);
+          },
+          style: {
+            width: t.sp3,
+            height: t.sp3,
+            color: S.heroLight
+          }
+        }
+      ) })
+    ] }) }) : null,
+    /* @__PURE__ */ o.jsx(Pr, { windowSize: a, children: /* @__PURE__ */ o.jsx(
+      st,
+      {
+        amount: L,
+        integerStyles: $e.integerStyles.styleObject(a),
+        decimalStyles: $e.decimalStyles.styleObject(a),
+        alwaysShowDecimal: !0
+      }
+    ) }),
+    /* @__PURE__ */ o.jsx(zt, { ..._, children: /* @__PURE__ */ o.jsxs($r, { id: yt(ft), onSubmit: kt, children: [
+      /* @__PURE__ */ o.jsxs(kr, { children: [
+        /* @__PURE__ */ o.jsx(Ne, { size: a, children: /* @__PURE__ */ o.jsx(
+          et,
+          {
+            label: {
+              label: Me.labels.transferFrom,
+              width: $,
+              style: {
+                marginLeft: y.labeleMarginLeft.valuePx(a),
+                marginBottom: y.labeleMarginBottom.valuePx(a),
+                marginRight: y.labelMarginRight.valuePx(a)
+              }
+            },
+            style: {
+              paddingTop: y.labeledFieldPaddingTop.valuePx(a),
+              paddingBottom: y.labeledFieldPaddingBottom.valuePx(a),
+              paddingLeft: y.labeledFieldPaddingLeft.valuePx(a),
+              paddingRight: y.labeledFieldPaddingRight.valuePx(a),
+              border: "none",
+              width: "100%",
+              outline: "none",
+              padding: 0,
+              display: a === "small" ? "flex" : "inherit"
+            },
+            infoLabelStyle: {
+              textAlign: a === "small" ? "left" : "right",
+              paddingRight: y.infoLabelPaddingRight.valuePx(a),
+              marginTop: y.infoLabelMarginTop.valuePx(a),
+              color: S.brandColorGoldDark
+            },
+            singleSelectPickerField: {
+              name: Re(W, xr),
+              style: { position: "relative" },
+              capitalizeOptions: !0,
+              placeholder: I.transferDrawer.selectAccount,
+              valueToLogo: (s, f) => Y(
+                e.transferMoneyParties,
+                s,
+                f,
+                s === e.treasuryAccount.id,
+                !1
+              ),
+              valueToSubLabels: (s, f) => q(
+                e.transferMoneyParties,
+                e.treasuryAccount,
+                s,
+                f,
+                !0,
+                !1,
+                L
+              ),
+              defaultValue: {
+                selectedOption: U?.id,
+                allOptions: we(
+                  e,
+                  !0,
+                  n,
+                  !0,
+                  K,
+                  !1
+                )
+              },
+              textAlignment: "right",
+              registerOptions: {
+                required: !0,
+                validate: (s) => s != null && !!s.selectedOption
+              }
+            },
+            valueToAdditionalLabel: Lt
+          }
+        ) }),
+        !n && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          /* @__PURE__ */ o.jsx(ze, {}),
+          /* @__PURE__ */ o.jsx(Ne, { size: a, children: /* @__PURE__ */ o.jsx(
+            et,
+            {
+              label: {
+                label: Me.labels.transferTo,
+                width: $,
+                style: {
+                  marginLeft: y.labeleMarginLeft.valuePx(a),
+                  marginBottom: y.labeleMarginBottom.valuePx(a),
+                  marginRight: y.labelMarginRight.valuePx(a)
+                }
+              },
+              style: {
+                paddingTop: y.labeledFieldPaddingTop.valuePx(a),
+                paddingBottom: y.labeledFieldPaddingBottom.valuePx(
+                  a
+                ),
+                paddingLeft: y.labeledFieldPaddingLeft.valuePx(a),
+                paddingRight: y.labeledFieldPaddingRight.valuePx(a),
+                border: "none",
+                width: "100%",
+                outline: "none",
+                padding: 0,
+                display: a === "small" ? "flex" : "inherit"
+              },
+              infoLabelStyle: {
+                textAlign: a === "small" ? "left" : "right",
+                paddingRight: y.infoLabelPaddingRight.valuePx(a),
+                marginTop: y.infoLabelMarginTop.valuePx(a),
+                color: S.brandColorGoldDark
+              },
+              singleSelectPickerField: {
+                name: Re(W, gr),
+                style: { position: "relative" },
+                capitalizeOptions: !0,
+                placeholder: I.transferDrawer.selectAccount,
+                valueToLogo: (s, f) => Y(
+                  e.transferMoneyParties,
+                  s,
+                  f,
+                  s === e.treasuryAccount.id,
+                  !1
+                ),
+                valueToSubLabels: (s, f) => q(
+                  e.transferMoneyParties,
+                  e.treasuryAccount,
+                  s,
+                  f,
+                  !1,
+                  !1
+                ),
+                defaultValue: {
+                  selectedOption: qe?.id,
+                  allOptions: we(
+                    e,
+                    !1,
+                    n,
+                    !0,
+                    K,
+                    !1
+                  )
+                },
+                textAlignment: "right",
+                registerOptions: {
+                  required: !0,
+                  validate: (s) => s != null && !!s.selectedOption
+                }
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ o.jsx(ze, {}),
+        /* @__PURE__ */ o.jsx(
+          Kt,
+          {
+            showAdditionalInfoLabel: !1,
+            label: {
+              label: Me.labels.amount,
+              width: $
+            },
+            style: {
+              padding: t.sp2,
+              paddingLeft: t.sp0,
+              paddingRight: y.formFieldPaddingRight.valuePx(a),
+              width: "auto"
+            },
+            formattedTextField: {
+              type: "number",
+              name: Re(W, xt),
+              defaultValue: L.amount === 0 ? void 0 : L.amount,
+              returnValueType: "floatValue",
+              prefix: "$",
+              allowNegative: !1,
+              isNumericString: !1,
+              registerOptions: {
+                required: !0,
+                validate: (s) => !!s && s > 0
+              },
+              placeholder: I.transferDrawer.amountPlaceholder,
+              autoComplete: "off",
+              decimalSeparator: ".",
+              decimalScale: 2,
+              fixedDecimalScale: !1,
+              thousandSeparator: !0,
+              allowLeadingZeros: !1
+            }
+          }
+        ),
+        n && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          /* @__PURE__ */ o.jsx(ze, {}),
+          /* @__PURE__ */ o.jsx(Lr, { size: a, children: /* @__PURE__ */ o.jsx(
+            gt,
+            {
+              isInReview: !0,
+              fundDetails: i,
+              allocation: d,
+              isSetup: !1,
+              amount: L,
+              page: "fund transfer"
+            }
+          ) })
+        ] })
+      ] }),
+      !n && qe?.accType === "treasuryAccount" && /* @__PURE__ */ o.jsxs(Fr, { children: [
+        k ? /* @__PURE__ */ o.jsxs(Mr, { children: [
+          /* @__PURE__ */ o.jsx(Br, { windowSize: a, children: I.transferDrawer.calculator.heading.replace(
+            "__amount__",
+            G("0,0.[00]a", {
+              amount: c,
+              currencySymbol: "$"
+            })
+          ).replace("__rate__", O.toString()) }),
+          /* @__PURE__ */ o.jsx(
+            uo,
+            {
+              interestRate: O,
+              transferAmount: w,
+              setYieldEarned: te,
+              setTransferAmount: Z
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ o.jsxs(zr, { windowSize: a, children: [
+          /* @__PURE__ */ o.jsxs(Nr, { windowSize: a, children: [
+            /* @__PURE__ */ o.jsx(Ir, { children: /* @__PURE__ */ o.jsx(Rr, { windowSize: a, children: `${I.transferDrawer.calculator.footerText.annualYieldEarned} ${G(
+              "0,0",
+              {
+                amount: ve,
+                currencySymbol: "$"
+              }
+            )}` }) }),
+            /* @__PURE__ */ o.jsx(Er, { windowSize: a }),
+            /* @__PURE__ */ o.jsx(Or, { children: `${I.transferDrawer.calculator.footerText.forTotalDeposit} ${G(
+              "0,0",
+              {
+                amount: w,
+                currencySymbol: "$"
+              }
+            )}` })
+          ] }),
+          k ? /* @__PURE__ */ o.jsxs(
+            ot,
+            {
+              windowSize: a,
+              onClick: () => X(!1),
+              "data-testid": C("calculator-footer-close"),
+              children: [
+                /* @__PURE__ */ o.jsx(
+                  tt,
+                  {
+                    className: "calculatorFooterLeftText",
+                    windowSize: a,
+                    children: I.transferDrawer.calculator.footerText.hide
+                  }
+                ),
+                /* @__PURE__ */ o.jsx(_r, { className: "calculatorFooterArrowIcon" })
+              ]
+            }
+          ) : /* @__PURE__ */ o.jsxs(
+            ot,
+            {
+              windowSize: a,
+              onClick: () => X(!0),
+              "data-testid": C("calculator-footer-show"),
+              children: [
+                /* @__PURE__ */ o.jsx(
+                  tt,
+                  {
+                    className: "calculatorFooterLeftText",
+                    windowSize: a,
+                    children: I.transferDrawer.calculator.footerText.showYieldCalculator
+                  }
+                ),
+                /* @__PURE__ */ o.jsx(Vr, { className: "calculatorFooterArrowIcon" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+const we = (e, i, d, n = !0, c, u = !1, m, p) => {
+  const v = e.treasuryTransferMoneyLocalData.fromAccount?.id, A = e.treasuryTransferMoneyLocalData.toAccount?.id, x = e.transferMoneyParties.find(
+    (h) => h.id === v
+  ) || e.treasuryAccount, a = e.transferMoneyParties.find(
+    (h) => h.id === A
+  ) || e.treasuryAccount;
+  let $ = e.transferMoneyParties;
+  i || ($ = $.filter(
+    (h) => h.accType !== "paymentAccount"
+  ));
+  const P = $.map(
+    (h) => {
+      const k = {
+        label: h.label,
+        value: h.id
+      };
+      return n && (i ? k.isDisabled = h.id === A || h.accType === "paymentAccount" && a?.accType === "paymentAccount" : k.isDisabled = h.id === v || h.accType === "paymentAccount" && x?.accType === "paymentAccount"), k;
+    }
+  );
+  if (!d) {
+    const h = {
+      label: "Treasury",
+      value: e.treasuryAccount.id,
+      isDisabled: !1
+    };
+    n && (i ? h.isDisabled = !1 : h.isDisabled = e.treasuryAccount.id === v), i ? P.push(h) : P.unshift(h);
+  }
+  if (u && c) {
+    const h = {
+      label: hr.transferDrawer.selectAddAccount,
+      value: "",
+      type: "button",
+      onClick: c
+    };
+    P.push(h);
+  }
+  return P;
+}, De = (e) => {
+  let i = -1, d;
+  return e.transferMoneyParties.forEach((n) => {
+    const c = n.accountBalance?.available?.amount ?? 0;
+    c > i && (i = c, d = n.id);
+  }), d;
+}, Qe = (e, i, d, n) => {
+  const {
+    fromAccount: c,
+    toAccount: u,
+    amount: m
+  } = e.treasuryTransferMoneyLocalData, p = () => d ? De(e) : c != null ? c.id : De(e);
+  return {
+    transferDetails: {
+      [xt]: m.amount === 0 ? void 0 : m.amount,
+      transferFrom: {
+        allOptions: we(
+          e,
+          !0,
+          i,
+          !0,
+          n,
+          !1
+        ),
+        selectedOption: p()
+      },
+      transferTo: {
+        allOptions: we(
+          e,
+          !1,
+          i,
+          !0,
+          n,
+          !1
+        ),
+        selectedOption: u?.id
+      }
+    }
+  };
+}, yr = r.div`
+  margin-top: ${t.sp3};
+  display: flex;
+  background-color: ${(e) => e.theme.colors.grey5};
+  justify-content: space-between;
+  padding: ${t.sp3} ${t.sp4};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  border-radius: ${t.sp2};
+  box-shadow: ${(e) => `${t.sp0} 2px 2px ${e.theme.colors.dropShadowNormal}`};
+`, $r = r.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, wr = r.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: ${t.sp3} ${t.sp4};
+  background-color: ${S.importantLight};
+  border-radius: ${t.sp2};
+`, br = r.div`
+  display: flex;
+  align-items: flex-start;
+`, Sr = r.div``, vr = r(ut)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${S.important};
+`, jr = r.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: ${t.sp2};
+`, Ar = r(pt)`
+  color: ${S.important};
+`, Tr = r(H)`
+  color: ${S.important};
+`, Pr = r(dt)`
+  color: ${(e) => e.theme.colors.primary};
+  margin: ${t.sp5} ${t.sp0} ${t.sp3} ${t.sp0};
+  ${(e) => e.windowSize === "small" && `
+    margin-top: ${t.sp1};
+    margin-bottom: ${t.sp1};
+  `}
+`, et = r(
+  Ut
+)`
+  border-radius: ${t.sp2};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+`, kr = r.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) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.sp2};
+`, ze = r.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, Ne = r.div`
+  display: flex;
+  flex-direction: row;
+  padding: ${t.sp2};
+  padding-left: ${({ size: e }) => y.rowContentSelectPaddingLeft.valuePx(e)};
+  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;
+  }
+
+  ${({ size: e }) => e === "small" && `   
+    .select-value-container {
+      margin-right: ${t.sp1} !important;
+    }
+  `}
+`, Lr = r(Ne)`
+  padding: ${({ size: e }) => y.portfolioContainerPadding.valuePx(e)};
+  padding-top: ${t.sp2};
+`, Cr = r(Oe)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${t.sp4};
+  height: ${t.sp4};
+  min-height: ${t.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Fr = r.div`
+  margin-bottom: ${t.sp6};
+  width: 90%;
+`, Mr = r.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;
+`, Br = r(H)`
+  color: ${(e) => e.theme.colors.hero};
+  margin: ${(e) => e.windowSize === "small" ? t.sp3 : `${t.sp3} ${t.sp8}`};
+  white-space: pre-line;
+  text-align: center;
+`, Rr = r.div`
+  ${(e) => $e.yieldEarned.style(e.windowSize)}
+  color: ${S.success};
+  white-space: nowrap;
+`, zr = r.div`
+  display: flex;
+  align-items: center;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  justify-content: space-between;
+  padding: ${t.sp2} ${t.sp3};
+  background-color: ${(e) => e.theme.colors.grey3};
+  border-bottom-right-radius: ${t.sp1};
+  border-bottom-left-radius: ${t.sp1};
+`, Ir = r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`, tt = r.div`
+  ${(e) => $e.calculatorFooterText.style(e.windowSize)}
+  color: ${(e) => e.theme.colors.hero};
+  cursor: pointer;
+`, ot = r.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};
+    }
+  }
+`, Er = r.div`
+  display: ${(e) => e.windowSize === "small" ? "none" : "block"};
+  width: ${t.sp1};
+  height: ${t.sp1};
+  min-width: ${t.sp1};
+  margin: 0 ${t.sp2};
+  background-color: ${(e) => e.theme.colors.grey1};
+  border-radius: 50%;
+`, Nr = r.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"};
+`, Or = r(Dt)`
+  color: ${(e) => e.theme.colors.hero};
+`, _r = r(Qt)`
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  min-width: 12px;
+  min-height: 12px;
+  color: ${(e) => e.theme.colors.hero};
+`, Vr = r(eo)`
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  min-width: 12px;
+  min-height: 12px;
+  color: ${(e) => e.theme.colors.hero};
+`, ee = {
+  navBarContainerPaddingXaxis: new g(10, 19),
+  containerPaddingLeft: new g(l[3], l[6], l[8]),
+  containerPaddingRight: new g(l[3], l[6], l[8]),
+  successContentMargin: new g(l[3], l[12]),
+  buttonTrayGap: new g(l[4], l[5])
+}, Wr = {
+  formTitle: new E("h6Regular", "h5Regular")
+}, {
+  common: Ie,
+  spendManagement: { treasury: j }
+} = be.getLocalizedStrings(), dn = ({
+  transferDetails: e,
+  treasurySetupView: i,
+  showReviewContent: d,
+  maxInsuredAmount: n,
+  isFirstTransfer: c,
+  plaidConnectionDetails: u,
+  isOnSetup: m,
+  onSaveChangesToLocalStore: p,
+  onTransferClick: v,
+  onAnotherTransferClick: A,
+  onCancelClick: x,
+  onBackClick: a,
+  setShowReviewContent: $,
+  onReviewClick: P,
+  onEstablishConnectionClick: h,
+  onFetchLinkTokenClick: k,
+  onSkipClick: X
+}) => {
+  const w = Se(), { fundsData: Z, currentAllocation: O, fundAllocationOptions: ve, fetchState: te } = i, b = ve.find(
+    (ne) => It(ne.allocation, O)
+  ) ?? {
+    allocation: {},
+    riskLevel: "Conservative",
+    riskScore: 0,
+    optionIndex: 0
+  }, R = () => te === "Completed" && (e.treasuryTransferMoneyLocalData.fromAccount != null || e.treasuryTransferMoneyLocalData.toAccount != null || e.treasuryTransferMoneyLocalData.amount.amount > 0), { fromAccount: je, toAccount: oe, amount: re } = e.treasuryTransferMoneyLocalData;
+  return /* @__PURE__ */ o.jsx(Gr, { windowSize: w, children: e.fetchState === "Completed" ? /* @__PURE__ */ o.jsxs(rt, { windowSize: w, isTransferCompleted: !0, children: [
+    /* @__PURE__ */ o.jsx(nt, { windowSize: w, children: /* @__PURE__ */ o.jsx(
+      at,
+      {
+        "data-testid": C(
+          "cross-transfer-success-close-button"
+        ),
+        onClick: () => {
+          x();
+        }
+      }
+    ) }),
+    /* @__PURE__ */ o.jsxs(Jr, { windowSize: w, children: [
+      /* @__PURE__ */ o.jsx(
+        to,
+        {
+          width: 150,
+          height: 150,
+          shouldDisplay: !0,
+          animationInLoop: 1
+        }
+      ),
+      /* @__PURE__ */ o.jsx(Hr, { children: /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        j.transferDrawer.success.prefix,
+        /* @__PURE__ */ o.jsx(Xr, { children: G("0,0.[00]", re) }),
+        j.transferDrawer.success.midfix,
+        `"${je?.label}"`,
+        j.transferDrawer.success.midfix2,
+        `"${oe?.label}".`
+      ] }) }),
+      /* @__PURE__ */ o.jsxs(Zr, { windowSize: w, children: [
+        /* @__PURE__ */ o.jsx(
+          He,
+          {
+            variant: "secondary",
+            label: j.transferDrawer.anotherTransfer,
+            "data-testid": C(
+              "another-transfer-button",
+              "treasury"
+            ),
+            onClick: () => {
+              A?.();
+            },
+            style: {
+              minWidth: 200
+            }
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          He,
+          {
+            variant: "primary",
+            label: j.transferDrawer.backToTreasury,
+            "data-testid": C("back-to-treasury-button"),
+            onClick: () => {
+              x();
+            },
+            style: {
+              minWidth: 200
+            }
+          }
+        )
+      ] })
+    ] })
+  ] }) : d ? /* @__PURE__ */ o.jsx(
+    Co,
+    {
+      transferDetails: e,
+      setShowReviewContent: $,
+      onTransferClick: v,
+      fundDetails: Z,
+      portfolioAllocation: b,
+      isOnSetup: m,
+      onCancelClick: x
+    }
+  ) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    /* @__PURE__ */ o.jsxs(rt, { windowSize: w, isTransferCompleted: !1, children: [
+      /* @__PURE__ */ o.jsx(nt, { windowSize: w, children: /* @__PURE__ */ o.jsx(
+        at,
+        {
+          "data-testid": C(
+            "cross-amount-details-close-button"
+          ),
+          onClick: () => {
+            x();
+          }
+        }
+      ) }),
+      w === "small" ? /* @__PURE__ */ o.jsx(Kr, { windowSize: w, children: m === !0 ? j.transferDrawer.stepTitle : c ? j.transferDrawer.title : j.transferDrawer.transferBetweenAccounts }) : /* @__PURE__ */ o.jsx(Ur, { windowSize: w, children: m === !0 ? j.transferDrawer.stepTitle : c ? j.transferDrawer.title : j.transferDrawer.transferBetweenAccounts }),
+      m === !0 && /* @__PURE__ */ o.jsx(Dr, { windowSize: w, children: /* @__PURE__ */ o.jsx(Qr, { children: /* @__PURE__ */ o.jsxs(en, { children: [
+        /* @__PURE__ */ o.jsx(it, {}),
+        /* @__PURE__ */ o.jsx(it, {}),
+        /* @__PURE__ */ o.jsx(tn, {})
+      ] }) }) }),
+      w === "small" ? /* @__PURE__ */ o.jsx(qr, { children: j.transferDrawer.subTitle }) : /* @__PURE__ */ o.jsx(Yr, { children: j.transferDrawer.subTitle }),
+      e.transferMoneyPartiesFetchState === "Completed" ? /* @__PURE__ */ o.jsx(
+        fr,
+        {
+          onSaveChangesToLocalStore: p,
+          transferDetails: e,
+          onReviewClick: P,
+          fundDetails: Z,
+          portfolioAllocation: b,
+          isOnSetup: m,
+          isFirstTransfer: c,
+          maxInsuredAmount: n,
+          plaidConnectionDetails: u,
+          onEstablishConnectionClick: h,
+          onFetchLinkTokenClick: k
+        }
+      ) : /* @__PURE__ */ o.jsx(
+        mt,
+        {
+          size: "Standard",
+          start: !0,
+          style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "calc(100vh - 500px)"
+          }
+        }
+      )
+    ] }),
+    R() ? /* @__PURE__ */ o.jsx(
+      lt,
+      {
+        style: {
+          zIndex: 4,
+          paddingTop: t.sp3,
+          paddingBottom: t.sp3
+        },
+        formId: yt(ft),
+        helperStyle: { paddingTop: t.sp0, paddingBottom: t.sp0 },
+        leftSideComponent: m === !0 && X ? /* @__PURE__ */ o.jsx(
+          on,
+          {
+            onClick: X,
+            "data-testid": C("skip-transfer-link"),
+            children: j.transferDrawer.skip
+          }
+        ) : null,
+        primaryBtn: {
+          label: Ie.review
+        },
+        cancelBtn: {
+          label: m === !0 ? Ie.footer.back : Ie.cancel,
+          onClick: () => {
+            m === !0 ? a() : x();
+          }
+        }
+      }
+    ) : null
+  ] }) });
+}, Yr = r(H)`
+  color: ${(e) => e.theme.colors.hero};
+`, qr = r(N)`
+  color: ${(e) => e.theme.colors.hero};
+`, Gr = r.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100vh;
+  width: 100%;
+`, Hr = r(oo)`
+  color: ${(e) => e.theme.colors.primary};
+  text-align: center;
+`, Xr = r(ro)`
+  display: inline;
+`, rt = r.div`
+  height: ${(e) => e.isTransferCompleted ? "100%" : "auto"};
+  padding-left: ${(e) => `${ee.containerPaddingLeft.valuePx(e.windowSize)}`};
+  padding-right: ${(e) => `${ee.containerPaddingRight.valuePx(e.windowSize)}`};
+  margin-bottom: auto;
+`, Zr = r.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column-reverse" : "row"};
+  margin-top: ${t.sp6};
+  gap: ${(e) => `${ee.buttonTrayGap.valuePx(e.windowSize)}`};
+`, Jr = r.div`
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: ${(e) => `${t.sp0} ${ee.successContentMargin.valuePx(
+  e.windowSize
+)}`};
+  align-items: center;
+`, nt = r.div`
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  top: ${t.sp0};
+  padding: ${(e) => `${ee.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${t.sp0}`};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, at = r(Oe)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${t.sp4};
+  height: ${t.sp4};
+  min-height: ${t.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Kr = r(no)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${t.sp3};
+  margin-bottom: ${t.sp0};
+  margin-right: ${t.sp3};
+`, Ur = r(ct)`
+  ${(e) => `${Wr.formTitle.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${t.sp3};
+  margin-bottom: ${t.sp2};
+`, Dr = r.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${t.sp3};
+  width: 100%;
+  margin-bottom: ${t.sp3};
+`, Qr = r.div`
+  display: flex;
+  align-items: center;
+`, en = r.div`
+  display: flex;
+  width: 100%;
+  gap: ${t.sp3};
+`, it = r.div`
+  width: 33.33%;
+  height: 2px;
+  background-color: ${(e) => e.theme.colors.primary};
+  border-radius: ${t.sp2};
+`, tn = r.div`
+  width: 33.33%;
+  height: 2px;
+  background-color: ${(e) => e.theme.colors.grey2};
+  border-radius: ${t.sp2};
+`, on = r(N)`
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  color: ${(e) => e.theme.colors.hero};
+  text-decoration: none;
+  margin-left: ${t.sp6};
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 1px;
+    width: 100%;
+    background: ${(e) => e.theme.colors.grey2};
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`;
+export {
+  dn as default
+};