@zeniai/web-components 3.17.11 → 3.17.13

package/dist/BankAccountSection-CiOqypR8.js

@@ -1,398 +0,0 @@
-import { j as a, d as D, m as W, aK as V } from "./vendor-.pnpm-B2klaOGU.js";
-import { useEffect as q } from "react";
-import h from "@emotion/styled";
-import { A as E, S as b, o as F, u as P, e as S, aB as A, R as i, D as t, aD as L, a as H, aS as x, fj as y, at as z, aX as R } from "./index-Dg4HzhKR.js";
-const B = h.div`
-  color: ${(e) => e.theme.colors.primary};
-  align-items: center;
-  justify-content: flex-end;
-  display: flex;
-  padding: 0 ${b.sp3};
-  pointer-events: initial;
-  min-height: 100%;
-`, I = h(F)`
-  color: ${(e) => e.theme.colors.grey1};
-  height: 100%;
-  width: 100%;
-  min-height: 100%;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  user-select: none;
-  margin-right: ${b.sp2};
-`, G = (e) => {
-  const { placeholder: l, loaderSize: o = "Small", style: r } = e;
-  return /* @__PURE__ */ a.jsxs(B, { style: r, children: [
-    l != null ? /* @__PURE__ */ a.jsxs(I, { children: [
-      l,
-      " "
-    ] }) : null,
-    /* @__PURE__ */ a.jsx(
-      E,
-      {
-        size: o,
-        start: !0,
-        style: { display: "flex" }
-      }
-    )
-  ] });
-}, d = {
-  width: new i(343, 580, 726),
-  height: new i(t[6], t[6]),
-  controlHeight: new i(t[6], t[6]),
-  paddingTopBottom: new i(t[2], t[2]),
-  marginTop: new i(t[2], t[2]),
-  marginBottom: new i(t[2], t[2]),
-  marginRight: new i(t[2], t[2]),
-  labelMarginLeft: new i(t[3], t[4]),
-  labelMarginRight: new i(t[3], t[4]),
-  labelMarginTop: new i(t[2], t[2])
-};
-function O({
-  isDisabled: e,
-  label: l,
-  loader: o,
-  style: r
-}) {
-  const m = P();
-  return /* @__PURE__ */ a.jsxs(
-    K,
-    {
-      size: m,
-      isDisabled: e != null,
-      style: r,
-      "data-testid": S("labeled-item-with-loader", l.label),
-      children: [
-        /* @__PURE__ */ a.jsx(
-          A,
-          {
-            isDisabled: e,
-            label: l.label,
-            style: {
-              marginLeft: d.labelMarginLeft.value(m),
-              marginRight: d.labelMarginRight.value(m),
-              marginTop: d.labelMarginTop.value(m),
-              width: l.width ?? "auto"
-            }
-          }
-        ),
-        /* @__PURE__ */ a.jsx(
-          G,
-          {
-            ...o,
-            style: {
-              minHeight: d.controlHeight.value(m),
-              display: "flex",
-              flexGrow: 1,
-              ...o.style
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-const K = h.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: ${(e) => d.width.valuePx(e.size)};
-  min-height: ${(e) => d.height.valuePx(e.size)};
-  padding-right: ${(e) => d.marginRight.valuePx(e.size)};
-  padding-top: ${(e) => d.paddingTopBottom.valuePx(e.size)};
-  padding-bottom: ${(e) => d.paddingTopBottom.valuePx(e.size)};
-  opacity: ${(e) => e.isDisabled ? 0.32 : 1};
-
-  :first-of-type {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-  }
-
-  :last-of-type {
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-`, u = {
-  largeLabelWidth: new i(120, 140, 220),
-  paddingTopBottom: new i(t[2], t[2]),
-  labelHeight: new i(t[6], t[6]),
-  labelMarginLeft: new i(t[3], t[4]),
-  labelMarginRight: new i(t[3], t[4]),
-  labelMarginTop: new i(t[2], t[2]),
-  controlHeight: new i(t[6], t[6])
-}, ee = ({
-  sectionId: e,
-  bankAccountToCreate: l,
-  isDisabled: o,
-  fetchBankNameByRoutingStatus: r,
-  style: m
-}) => {
-  const g = P(), {
-    getValues: M,
-    setValue: N,
-    formState: { errors: T }
-  } = D(), $ = L(
-    r.fetchState
-  ), v = L(l?.bankRoutingNumber), j = W(T, s(e, "bankName"));
-  q(() => {
-    ($ === "In-Progress" || v != null && v !== l?.bankRoutingNumber) && r.fetchState === "Completed" && l?.bankName != null && N(
-      s(e, "bankName"),
-      l?.bankName,
-      { shouldValidate: j }
-    );
-  }, [
-    $,
-    v,
-    j,
-    r.fetchState,
-    e,
-    l?.bankName,
-    l?.bankRoutingNumber,
-    N
-  ]);
-  const k = r.fetchState === "Completed" || r.fetchState === "Error" ? o : "disabled", w = H.getLocalizedStrings().spendManagement.billPay.vendorCreation, { achDetails: n } = w, c = u.largeLabelWidth.value(g);
-  return /* @__PURE__ */ a.jsx(
-    X,
-    {
-      style: m,
-      "data-testid": S("bank-account-section", e),
-      children: /* @__PURE__ */ a.jsxs(_, { children: [
-        /* @__PURE__ */ a.jsx(
-          x,
-          {
-            label: {
-              label: n.bankRoutingNumber,
-              width: c
-            },
-            text: {
-              type: "text",
-              name: s(e, "bankRoutingNumber"),
-              placeholder: y(
-                n.bankRoutingNumber
-              ),
-              defaultValue: l?.bankRoutingNumber,
-              options: {
-                required: !0,
-                pattern: /^\d{9}$/
-              }
-            },
-            isDisabled: o,
-            style: { width: "auto" },
-            showAdditionalInfoLabel: !1,
-            additionalInfoLabel: n.invalidRoutingNumber
-          }
-        ),
-        /* @__PURE__ */ a.jsx(f, {}),
-        r.fetchState === "In-Progress" ? /* @__PURE__ */ a.jsx(
-          O,
-          {
-            label: {
-              label: n.bankName,
-              width: c
-            },
-            loader: {
-              placeholder: n.fetchingBankName
-            },
-            style: {
-              width: "auto"
-            }
-          }
-        ) : /* @__PURE__ */ a.jsx(
-          x,
-          {
-            label: {
-              label: n.bankName,
-              width: c
-            },
-            text: {
-              type: "text",
-              name: s(e, "bankName"),
-              placeholder: y(n.bankName),
-              defaultValue: l?.bankName,
-              options: {
-                required: !0
-              }
-            },
-            isDisabled: k,
-            style: {
-              width: "auto",
-              opacity: k === "disabled" ? 0.32 : 1
-            },
-            showAdditionalInfoLabel: !1,
-            additionalInfoLabel: n.invalidBankName
-          }
-        ),
-        /* @__PURE__ */ a.jsx(f, {}),
-        /* @__PURE__ */ a.jsxs(C, { size: g, children: [
-          /* @__PURE__ */ a.jsx(
-            A,
-            {
-              label: w.achDetails.accountTypeLabel,
-              htmlFor: s(e, "bankAccountType"),
-              style: {
-                marginLeft: u.labelMarginLeft.value(g),
-                marginRight: u.labelMarginRight.value(g),
-                width: c
-              }
-            }
-          ),
-          /* @__PURE__ */ a.jsxs(J, { labelWidth: c, size: g, children: [
-            /* @__PURE__ */ a.jsx(
-              z,
-              {
-                label: {
-                  label: w.achDetails.checkingAccountTypeLabel
-                },
-                style: { paddingRight: `${b.sp4}`, width: "auto" },
-                radioField: {
-                  name: s(e, "bankAccountType"),
-                  id: "checking",
-                  value: "checking",
-                  registerOptions: {
-                    required: !0
-                  }
-                }
-              }
-            ),
-            /* @__PURE__ */ a.jsx(
-              z,
-              {
-                label: {
-                  label: w.achDetails.savingsAccountTypeLabel
-                },
-                style: { width: "auto" },
-                radioField: {
-                  name: s(e, "bankAccountType"),
-                  id: "savings",
-                  value: "savings",
-                  registerOptions: {
-                    required: !0
-                  }
-                }
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ a.jsx(f, {}),
-        /* @__PURE__ */ a.jsx(
-          x,
-          {
-            label: {
-              label: n.bankAccountNumber,
-              width: c
-            },
-            text: {
-              type: "text",
-              name: s(e, "bankAccountNumber"),
-              placeholder: y(
-                n.bankAccountNumber
-              ),
-              defaultValue: l?.bankAccountNumber,
-              options: {
-                required: !0,
-                validate: (p) => p != null ? V.accountNumber(p).isValid : !0,
-                pattern: R
-              }
-            },
-            isDisabled: o,
-            style: { width: "auto" },
-            showAdditionalInfoLabel: !1,
-            additionalInfoLabel: n.invalidAccountNumber
-          }
-        ),
-        /* @__PURE__ */ a.jsx(f, {}),
-        /* @__PURE__ */ a.jsx(
-          x,
-          {
-            label: {
-              label: n.confirmedBankAccountNumber,
-              width: c
-            },
-            text: {
-              type: "text",
-              name: s(e, "confirmedBankAccountNumber"),
-              placeholder: n.confirmedBankAccountNumberPlaceholder,
-              defaultValue: l?.confirmedBankAccountNumber,
-              options: {
-                required: !0,
-                pattern: R,
-                validate: (p) => p != null ? M(`${e}.bankAccountNumber`) === p : !1
-              }
-            },
-            disableCopyPaste: !0,
-            isDisabled: o,
-            style: { width: "auto" },
-            showAdditionalInfoLabel: !1,
-            additionalInfoLabel: n.accountNumberDontMatch
-          }
-        ),
-        /* @__PURE__ */ a.jsx(f, {}),
-        /* @__PURE__ */ a.jsx(
-          x,
-          {
-            label: {
-              label: n.accountNickName,
-              width: c
-            },
-            text: {
-              type: "text",
-              name: s(e, "bankAccountName"),
-              placeholder: y(
-                n.accountNickName
-              ),
-              defaultValue: l?.bankAccountName,
-              options: {
-                required: !1
-              }
-            },
-            isDisabled: o,
-            style: { width: "auto" }
-          }
-        )
-      ] })
-    }
-  );
-}, s = (e, l) => `${e}.${l}`, X = h.div`
-  display: flex;
-  flex-direction: column;
-`, _ = h.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${b.sp0} 2px ${b.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${b.sp2};
-`, f = h.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, C = h.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  min-height: ${(e) => u.labelHeight.valuePx(e.size)};
-  padding-right: ${(e) => u.labelMarginRight.valuePx(e.size)};
-  padding-top: ${(e) => u.labelMarginTop.valuePx(e.size)};
-  padding-bottom: ${(e) => u.paddingTopBottom.valuePx(e.size)};
-  align-items: center;
-  &:hover {
-    z-index: 1;
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-  }
-`, J = h.div`
-  display: flex;
-  flex-direction: row;
-  width: ${(e) => `calc(100% - ${e.labelWidth}px)`};
-  align-items: flex-end;
-  justify-content: flex-end;
-  flex-grow: 1;
-  height: ${(e) => u.controlHeight.valuePx(e.size)};
-  align-items: center;
-`;
-export {
-  ee as B
-};

package/dist/BankAccountWarningSection-Cb3hU6RF.cjs

@@ -1,51 +0,0 @@
-"use strict";const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),t=require("@emotion/styled"),e=require("./index-B3k6KNNf.cjs"),{common:{navBar:{back:m}}}=e.appLocale.getLocalizedStrings(),s={navBarContainerPadding:new e.ResponsiveSized(10,e.sp[3]),formTitleMarginTop:new e.ResponsiveSized(e.sp[0],e.sp[3]),formTitleMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[0]),customTitleMarginBottom:new e.ResponsiveSized(e.sp[0],e.sp[3]),customTitleMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[6]),customTitleMarginRight:new e.ResponsiveSized(e.sp[5],e.sp[8])},x={formTitle:new e.ResponsiveSizedStyle("h6Medium","h5Medium")},u=({header:n,isDirty:r,isMagicLink:l,onBackClick:c,setShowConfirmationPopup:p})=>{const i=e.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[i==="small"?o.jsxRuntimeExports.jsxs($,{windowSize:i,children:[l?null:o.jsxRuntimeExports.jsx(g,{onClick:()=>r?p?.(!0):c?.(),"data-testid":e.generateDataTestId("bank-account-page-back-click-mobile")}),o.jsxRuntimeExports.jsx(d,{windowSize:i,children:n})]}):o.jsxRuntimeExports.jsx(S,{children:l?null:o.jsxRuntimeExports.jsx(e.Tooltip,{title:m,enterDelay:600,placement:"bottom",children:o.jsxRuntimeExports.jsx(g,{onClick:()=>r?p?.(!0):c?.(),"data-testid":e.generateDataTestId("bank-account-page-back-click")})})}),i!=="small"?o.jsxRuntimeExports.jsx(d,{windowSize:i,children:n}):null]})},d=t(e.StyledText)`
-  ${n=>`${x.formTitle.style(n.windowSize)}`};
-  color: ${n=>n.theme.colors.primary};
-  margin-bottom: ${n=>s.customTitleMarginBottom.valuePx(n.windowSize)};
-  margin-top: ${e.Space.sp3};
-  margin-left: ${n=>s.customTitleMarginLeft.valuePx(n.windowSize)};
-  margin-right: ${n=>s.customTitleMarginRight.valuePx(n.windowSize)};
-`,g=t(e.SvgArrowLeft)`
-  cursor: pointer;
-  color: ${n=>n.theme.colors.hero};
-  width: 20px;
-  height: 20px;
-  &:hover {
-    color: ${n=>n.theme.colors.primary};
-  }
-`,S=t.div`
-  margin: ${e.Space.sp3} ${e.Space.sp8} ${e.Space.sp3} ${e.Space.sp6};
-`,$=t.div`
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: ${e.Space.sp0};
-  padding-top: ${n=>s.navBarContainerPadding.valuePx(n.windowSize)};
-  padding-bottom: ${n=>s.navBarContainerPadding.valuePx(n.windowSize)};
-  padding-right: ${e.Space.sp5};
-  padding-left: ${e.Space.sp0};
-  z-index: 2;
-  background-color: ${n=>n.theme.colors.grey4};
-`,a={marginBottom:new e.ResponsiveSized(e.sp[5],e.sp[3]),marginRight:new e.ResponsiveSized(e.sp[3],e.sp[8]),marginLeft:new e.ResponsiveSized(e.sp[3],e.sp[6])},v=({warningText:n})=>{const r=e.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(h,{size:r,children:[o.jsxRuntimeExports.jsx(R,{children:o.jsxRuntimeExports.jsx(z,{})}),o.jsxRuntimeExports.jsx(w,{children:n})]})},h=t.div`
-  display: flex;
-  background-color: ${e.Colors.alertLight};
-  border: 1px solid ${e.Colors.brandColorGoldDark};
-  border-radius: ${e.Space.sp2};
-  color: ${e.Colors.alertDark};
-  margin-bottom: ${n=>a.marginBottom.valuePx(n.size)};
-  padding: ${e.Space.sp3} ${e.Space.sp4} ${e.Space.sp3} ${e.Space.sp4};
-  margin-right: ${n=>a.marginRight.valuePx(n.size)};
-  margin-left: ${n=>a.marginLeft.valuePx(n.size)};
-`,w=t(e.StandardRegular)`
-  display: flex;
-  flex-grow: 1;
-  color: ${e.Colors.brandColorGoldDark};
-`,R=t.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${e.Space.sp2};
-`,z=t(e.SvgHighImportanceFilled)`
-  width: ${e.Space.sp4};
-  height: ${e.Space.sp4};
-  color: ${e.Colors.brandColorGoldDark};
-`;exports.BankAccountPageNavSection=u;exports.BankAccountWarningSection=v;

package/dist/BankAccountWarningSection-Dp_In88x.js

@@ -1,110 +0,0 @@
-import { j as t } from "./vendor-.pnpm-B2klaOGU.js";
-import i from "@emotion/styled";
-import { u as h, e as u, Z as w, a as f, S as o, R as a, G as v, aw as S, J as b, D as n, C as s, ap as z, o as T } from "./index-Dg4HzhKR.js";
-const {
-  common: {
-    navBar: { back: k }
-  }
-} = f.getLocalizedStrings(), l = {
-  navBarContainerPadding: new a(10, n[3]),
-  formTitleMarginTop: new a(n[0], n[3]),
-  formTitleMarginLeft: new a(n[3], n[0]),
-  customTitleMarginBottom: new a(n[0], n[3]),
-  customTitleMarginLeft: new a(n[3], n[6]),
-  customTitleMarginRight: new a(n[5], n[8])
-}, B = {
-  formTitle: new S("h6Medium", "h5Medium")
-}, W = ({
-  header: e,
-  isDirty: c,
-  isMagicLink: g,
-  onBackClick: m,
-  setShowConfirmationPopup: p
-}) => {
-  const r = h();
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    r === "small" ? /* @__PURE__ */ t.jsxs(y, { windowSize: r, children: [
-      g ? null : /* @__PURE__ */ t.jsx(
-        $,
-        {
-          onClick: () => c ? p?.(!0) : m?.(),
-          "data-testid": u(
-            "bank-account-page-back-click-mobile"
-          )
-        }
-      ),
-      /* @__PURE__ */ t.jsx(x, { windowSize: r, children: e })
-    ] }) : /* @__PURE__ */ t.jsx(j, { children: g ? null : /* @__PURE__ */ t.jsx(w, { title: k, enterDelay: 600, placement: "bottom", children: /* @__PURE__ */ t.jsx(
-      $,
-      {
-        onClick: () => c ? p?.(!0) : m?.(),
-        "data-testid": u("bank-account-page-back-click")
-      }
-    ) }) }),
-    r !== "small" ? /* @__PURE__ */ t.jsx(x, { windowSize: r, children: e }) : null
-  ] });
-}, x = i(b)`
-  ${(e) => `${B.formTitle.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  margin-bottom: ${(e) => l.customTitleMarginBottom.valuePx(e.windowSize)};
-  margin-top: ${o.sp3};
-  margin-left: ${(e) => l.customTitleMarginLeft.valuePx(e.windowSize)};
-  margin-right: ${(e) => l.customTitleMarginRight.valuePx(e.windowSize)};
-`, $ = i(v)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: 20px;
-  height: 20px;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, j = i.div`
-  margin: ${o.sp3} ${o.sp8} ${o.sp3} ${o.sp6};
-`, y = i.div`
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: ${o.sp0};
-  padding-top: ${(e) => l.navBarContainerPadding.valuePx(e.windowSize)};
-  padding-bottom: ${(e) => l.navBarContainerPadding.valuePx(e.windowSize)};
-  padding-right: ${o.sp5};
-  padding-left: ${o.sp0};
-  z-index: 2;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, d = {
-  marginBottom: new a(n[5], n[3]),
-  marginRight: new a(n[3], n[8]),
-  marginLeft: new a(n[3], n[6])
-}, A = ({ warningText: e }) => {
-  const c = h();
-  return /* @__PURE__ */ t.jsxs(C, { size: c, children: [
-    /* @__PURE__ */ t.jsx(M, { children: /* @__PURE__ */ t.jsx(R, {}) }),
-    /* @__PURE__ */ t.jsx(P, { children: e })
-  ] });
-}, C = i.div`
-  display: flex;
-  background-color: ${s.alertLight};
-  border: 1px solid ${s.brandColorGoldDark};
-  border-radius: ${o.sp2};
-  color: ${s.alertDark};
-  margin-bottom: ${(e) => d.marginBottom.valuePx(e.size)};
-  padding: ${o.sp3} ${o.sp4} ${o.sp3} ${o.sp4};
-  margin-right: ${(e) => d.marginRight.valuePx(e.size)};
-  margin-left: ${(e) => d.marginLeft.valuePx(e.size)};
-`, P = i(T)`
-  display: flex;
-  flex-grow: 1;
-  color: ${s.brandColorGoldDark};
-`, M = i.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${o.sp2};
-`, R = i(z)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  color: ${s.brandColorGoldDark};
-`;
-export {
-  W as B,
-  A as a
-};