@zeniai/web-components 3.17.10 → 3.17.12

package/dist/InternationalWireSwiftDetailsPage-xTxmuyFG.js

@@ -1,753 +0,0 @@
-import { d as Y, m as J, j as i, e as se, g as de, h as ce, k as ue, F as he } from "./vendor-.pnpm-B2klaOGU.js";
-import { useEffect as re, useMemo as ge, useState as me } from "react";
-import l from "@emotion/styled";
-import { getFormattedAddress as ee } from "@zeniai/client-epic-state";
-import { jm as pe, eq as fe, e as M, B as be, S as c, u as T, V as xe, C as $, t as we, fH as ve, e$ as Se, R as o, aq as $e, D as t, aB as ye, aw as ke, p as je, aD as te, a as Q, jx as q, aS as O, aY as ie, fj as Ce, aP as Le, aQ as Pe, aR as Ie, ao as Be, w as ze } from "./index-DcL7gbcq.js";
-import { B as De, a as Re } from "./BankAccountWarningSection-D2CFkT4U.js";
-import { M as We } from "./MailingDetailsSection-CflsAymm.js";
-import { M as Ee } from "./MagicLinkTitleSection-BzFyzj29.js";
-const _ = {
-  tooltipRightPosition: new o(t[6], t[6]),
-  tooltipTopPosition: new o(35, 35),
-  tooltipWidth: new o(180, 193)
-}, Ne = ({
-  protectedInfoText: e
-}) => {
-  const a = T();
-  return /* @__PURE__ */ i.jsxs(He, { children: [
-    /* @__PURE__ */ i.jsx(Ue, {}),
-    /* @__PURE__ */ i.jsx(qe, { className: "info-tooltip", windowSize: a, children: /* @__PURE__ */ i.jsx(Oe, { children: e }) })
-  ] });
-};
-function Me({
-  type: e,
-  name: a,
-  placeholder: n,
-  placeholderAlignment: g,
-  autoComplete: s = "off",
-  autoCapitalize: x = "off",
-  autoTrim: y = "off",
-  isDisabled: b,
-  defaultValue: P,
-  style: I,
-  hoverBgColor: w,
-  registerOptions: B,
-  protectedInfoText: v,
-  isSaveError: k = !1,
-  buttonProps: S,
-  disableCopyPaste: u = !1
-}) {
-  const {
-    control: r,
-    register: m,
-    formState: { errors: j },
-    setFocus: p
-  } = Y(), E = J(j, a), C = Object.assign({}, B), {
-    label: f,
-    isDisabled: V,
-    fetchState: N,
-    onButtonClick: F
-  } = S;
-  switch (e) {
-    case "email":
-      Object.assign(C, {
-        pattern: fe
-      });
-      break;
-    case "number":
-      Object.assign(C, { valueAsNumber: !0 });
-      break;
-    case "url":
-      Object.assign(C, {
-        pattern: pe
-      });
-  }
-  const A = b === "disabled" || b === "readonly" || v != null;
-  return v != null ? /* @__PURE__ */ i.jsxs(Fe, { style: I, children: [
-    /* @__PURE__ */ i.jsx(Ne, { protectedInfoText: v }),
-    /* @__PURE__ */ i.jsx(Ae, { id: a, children: P })
-  ] }) : /* @__PURE__ */ i.jsx(
-    Ve,
-    {
-      isError: E,
-      fetchState: N,
-      style: { display: "flex", alignItems: "center", width: "100%" },
-      keepButtonVisible: S.keepButtonVisible,
-      isButtonHidden: S.isHidden,
-      children: /* @__PURE__ */ i.jsx(
-        se,
-        {
-          name: a,
-          control: r,
-          rules: {
-            ...B
-          },
-          defaultValue: P ?? "",
-          "data-testid": M("text-field-with-button", a),
-          render: ({ field: { onChange: H, onBlur: K, value: U, ref: D } }) => /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-            /* @__PURE__ */ i.jsx(
-              Te,
-              {
-                type: e === "password" || e === "hidden" ? e : void 0,
-                isError: E,
-                style: I,
-                placeholder: n,
-                disabled: A,
-                ...m(a, C),
-                id: a,
-                ref: D,
-                value: U,
-                autoComplete: s,
-                placeholderAlignment: g,
-                hoverBgColor: w,
-                isSaveError: k,
-                onBlur: K,
-                onChange: H,
-                "data-testid": M(
-                  "text-field-with-button-input",
-                  a
-                ),
-                onInput: (h) => {
-                  const d = h.target;
-                  switch (x) {
-                    case "off":
-                      break;
-                    case "characters":
-                      d.value = d.value.toLocaleUpperCase();
-                      break;
-                    case "words":
-                      d.value = d.value.charAt(0).toLocaleUpperCase().concat(d.value.slice(1));
-                      break;
-                  }
-                  switch (y) {
-                    case "off":
-                      break;
-                    case "trimStart":
-                      d.value = d.value.trimStart();
-                      break;
-                    case "trimEnd":
-                      d.value = d.value.trimEnd();
-                      break;
-                    case "trim":
-                      d.value = d.value.trim();
-                      break;
-                  }
-                },
-                onPaste: (h) => {
-                  u && h.preventDefault();
-                },
-                onCopy: (h) => {
-                  u && h.preventDefault();
-                },
-                keepButtonVisible: S.keepButtonVisible
-              }
-            ),
-            /* @__PURE__ */ i.jsx(
-              be,
-              {
-                label: f,
-                onClick: (h) => {
-                  h.stopPropagation(), p(a), setTimeout(() => {
-                    F();
-                  });
-                },
-                style: { outline: "none" },
-                size: "xs-small",
-                disabled: V,
-                variant: "success",
-                reverseSpinnerColor: !0,
-                loading: N === "In-Progress",
-                "data-testid": M(
-                  "text-field-button",
-                  `${a}-${f}`
-                )
-              }
-            )
-          ] })
-        }
-      )
-    }
-  );
-}
-const Te = l(ve)`
-  display: flex;
-  border-width: ${c.sp0};
-  outline-width: ${c.sp0};
-  color: ${(e) => !e.isError && e.isSaveError === !1 ? e.theme.colors.primary : $.important};
-  background-color: ${(e) => e.isSaveError === !0 ? $.importantLight : e.theme.colors.grey5};
-  border-radius: ${c.sp1};
-  text-align: ${(e) => e.keepButtonVisible ? "left" : "right"};
-  padding: 0 ${c.sp3};
-  ::placeholder {
-    text-align: ${(e) => e.placeholderAlignment};
-    color: ${(e) => e.isError ? $.important : e.theme.colors.grey1};
-  }
-  &:focus {
-    text-align: left;
-    outline: none;
-    background-color: ${(e) => e.isError ? $.importantLight : e.theme.colors.background};
-    ${we.standardRegular.css};
-  }
-  &:hover {
-    background-color: ${(e) => e.isError ? $.importantLight : e.hoverBgColor !== null ? e.hoverBgColor : e.theme.colors.background};
-  }
-  &:disabled {
-    background-color: ${(e) => e.theme.colors.grey5};
-  }
-`, Ve = l.div`
-  position: relative;
-  button {
-    display: ${(e) => e.keepButtonVisible ? "flex" : "none"};
-    position: absolute;
-    right: ${c.sp3};
-  }
-
-  &:focus-within button {
-    display: ${(e) => e.isButtonHidden ? "none" : "flex"};
-  }
-`, Fe = l.div`
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  padding: 0 ${c.sp3};
-`, Ae = l(xe)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-left: 12px;
-  margin-top: 6px;
-`, He = l.div`
-  color: ${(e) => e.theme.colors.primary};
-`, Ue = l(Se)`
-  color: ${(e) => e.theme.colors.hero};
-  width: ${c.sp3};
-  height: ${c.sp3};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-    & + .info-tooltip {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-`, qe = l.div`
-  display: none;
-  background-color: ${(e) => e.theme.colors.primary};
-  position: absolute;
-  padding: 2px 5px;
-  border: 1px solid ${(e) => e.theme.colors.primary};
-  border-radius: ${c.sp1};
-  z-index: 1;
-  right: ${(e) => _.tooltipRightPosition.valuePx(e.windowSize)};
-  width: ${(e) => _.tooltipWidth.valuePx(e.windowSize)};
-  top: ${(e) => _.tooltipTopPosition.valuePx(e.windowSize)};
-`, Oe = l($e)`
-  color: ${(e) => e.theme.colors.grey5};
-`, L = {
-  width: new o(343, 580, 726),
-  height: new o(t[6], t[6]),
-  controlHeight: new o(t[6], t[6]),
-  paddingTopBottom: new o(t[2], t[2]),
-  marginTop: new o(t[2], t[2]),
-  marginBottom: new o(t[2], t[2]),
-  marginRight: new o(t[2], t[2]),
-  labelMarginLeft: new o(t[3], t[4]),
-  labelMarginRight: new o(t[3], t[4]),
-  labelMarginTop: new o(t[2], t[2])
-}, _e = {
-  infoLabel: new ke("extraSmallRegular", "smallRegular")
-};
-function Ge({
-  isDisabled: e,
-  label: a,
-  text: n,
-  style: g,
-  additionalInfoLabel: s,
-  showAdditionalInfoLabel: x = !0,
-  protectedInfoText: y,
-  isSaveError: b,
-  showTickIcon: P,
-  showErrorInfoLabel: I,
-  errorInfoLabel: w,
-  disableCopyPaste: B = !1,
-  showTooltip: v = !1,
-  tooltipTitle: k,
-  onBlur: S
-}) {
-  const u = T(), {
-    formState: { errors: r }
-  } = Y(), m = J(r, n.name);
-  return /* @__PURE__ */ i.jsxs(
-    Qe,
-    {
-      size: u,
-      style: g,
-      isDisabled: e != null,
-      isError: m,
-      "data-testid": M(
-        "labeled-text-field-with-button",
-        n.name
-      ),
-      children: [
-        /* @__PURE__ */ i.jsx(
-          ye,
-          {
-            isDisabled: e,
-            label: a.label,
-            style: {
-              marginLeft: L.labelMarginLeft.value(u),
-              marginRight: L.labelMarginRight.value(u),
-              marginTop: L.labelMarginTop.value(u),
-              width: a.width ?? "auto"
-            },
-            showTooltip: v,
-            tooltipTitle: k
-          }
-        ),
-        /* @__PURE__ */ i.jsxs(Ye, { labelWidth: a.width, children: [
-          /* @__PURE__ */ i.jsx(
-            Me,
-            {
-              ...n,
-              style: {
-                ...n.style,
-                display: "flex",
-                flexGrow: 1,
-                width: "-webkit-fill-available",
-                height: L.controlHeight.value(u),
-                cursor: "inherit"
-              },
-              protectedInfoText: y,
-              isSaveError: b,
-              onBlur: S,
-              disableCopyPaste: B
-            }
-          ),
-          (x || m) && /* @__PURE__ */ i.jsxs(oe, { size: u, isError: m, children: [
-            P === !0 ? /* @__PURE__ */ i.jsx(Je, { children: /* @__PURE__ */ i.jsx(Ke, {}) }) : null,
-            s
-          ] }),
-          I === !0 && /* @__PURE__ */ i.jsx(oe, { size: u, isError: !0, children: w })
-        ] })
-      ]
-    }
-  );
-}
-const Qe = l.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: ${(e) => L.width.valuePx(e.size)};
-  min-height: ${(e) => L.height.valuePx(e.size)};
-  padding-right: ${(e) => L.marginRight.valuePx(e.size)};
-  padding-top: ${(e) => L.paddingTopBottom.valuePx(e.size)};
-  padding-bottom: ${(e) => L.paddingTopBottom.valuePx(e.size)};
-
-  :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;
-  }
-
-  &:focus-within {
-    z-index: 1;
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-
-    input {
-      background-color: ${(e) => e.isError ? $.importantLight : e.theme.colors.background};
-    }
-  }
-  input {
-    background-color: ${(e) => e.isError ? $.importantLight : e.theme.colors.grey5};
-  }
-  &:hover {
-    z-index: 1;
-    outline: 1px solid
-      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
-    input {
-      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? $.importantLight : e.theme.colors.background};
-    }
-  }
-`, Ye = l.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
-  align-items: flex-end;
-  flex-grow: 1;
-`, oe = l.label`
-  display: flex;
-  color: ${(e) => e.isError ? $.important : e.theme.colors.grey1};
-  ${(e) => `${_e.infoLabel.style(e.size)}`};
-  padding-right: ${c.sp3};
-  text-align: right;
-`, Je = l.div`
-  display: flex;
-  margin-right: ${c.sp1};
-  align-items: center;
-`, Ke = l(je)`
-  width: ${c.sp3};
-  height: ${c.sp3};
-  color: ${$.successDark};
-`, ne = {
-  largeLabelWidth: new o(120, 140, 220),
-  veryLargeLabelWidth: new o(120, 140, 256),
-  paddingTopBottom: new o(t[2], t[2]),
-  labelHeight: new o(t[6], t[6]),
-  labelMarginLeft: new o(t[3], t[4]),
-  labelMarginRight: new o(t[3], t[4]),
-  labelMarginTop: new o(t[2], t[2]),
-  controlHeight: new o(t[6], t[6])
-}, Xe = ({
-  sectionId: e,
-  bankNameBySwift: a,
-  bankAccountToCreate: n,
-  isDisabled: g,
-  fetchBankNameBySwiftStatus: s,
-  onFetchBankNameBySwift: x,
-  style: y
-}) => {
-  const b = T(), {
-    getValues: P,
-    setValue: I,
-    formState: { errors: w }
-  } = Y(), { fetchState: B } = s, v = te(s.fetchState), k = te(n?.bankSwiftCode), S = J(w, R(e, "bankSwiftCode"));
-  re(() => {
-    (v === "In-Progress" || k != null && k !== n?.bankSwiftCode) && s.fetchState === "Completed" && n?.bankSwiftCode != null && Object.keys(a).includes(
-      n?.bankSwiftCode
-    ) && a[n?.bankSwiftCode].bankName && I(
-      R(e, "bankName"),
-      a[n?.bankSwiftCode].bankName
-    );
-  }, [
-    n?.bankName,
-    n?.bankSwiftCode,
-    s.fetchState,
-    v,
-    k
-  ]);
-  const u = Q.getLocalizedStrings().spendManagement.billPay.vendorCreation.wireDetails, { international: r } = u, m = ne.largeLabelWidth.value(b), j = ne.veryLargeLabelWidth.value(b);
-  return /* @__PURE__ */ i.jsx(Ze, { style: y, children: /* @__PURE__ */ i.jsxs(et, { children: [
-    /* @__PURE__ */ i.jsx(
-      Ge,
-      {
-        label: {
-          label: r.swiftCode,
-          width: m
-        },
-        text: {
-          type: "text",
-          name: R(e, "bankSwiftCode"),
-          placeholder: r.addSwiftCode,
-          defaultValue: n?.bankSwiftCode,
-          registerOptions: {
-            required: !0,
-            pattern: q
-          },
-          autoCapitalize: "characters",
-          autoTrim: "trim",
-          buttonProps: {
-            label: r.verify,
-            isDisabled: q.test(n?.bankSwiftCode ?? "") === !1,
-            isHidden: s.fetchState === "Completed",
-            keepButtonVisible: q.test(n?.bankSwiftCode ?? "") === !0 && s.fetchState !== "Completed",
-            fetchState: B,
-            onButtonClick: () => {
-              n?.bankSwiftCode != null && x(n.bankSwiftCode);
-            }
-          }
-        },
-        isDisabled: g,
-        style: { width: "auto" },
-        additionalInfoLabel: n?.bankName ? n?.bankName : void 0,
-        showTickIcon: !!n?.bankName,
-        showAdditionalInfoLabel: !S,
-        errorInfoLabel: r.invalidSwiftCode
-      }
-    ),
-    /* @__PURE__ */ i.jsx(G, {}),
-    /* @__PURE__ */ i.jsx(
-      O,
-      {
-        label: {
-          label: r.iban,
-          width: m
-        },
-        text: {
-          type: "text",
-          name: R(e, "bankAccountIban"),
-          placeholder: r.addIban,
-          defaultValue: n?.bankAccountIban,
-          autoCapitalize: "characters",
-          options: {
-            required: !0,
-            pattern: ie
-          }
-        },
-        isDisabled: g,
-        style: { width: "auto" },
-        showAdditionalInfoLabel: !1,
-        additionalInfoLabel: r.invalidIban
-      }
-    ),
-    /* @__PURE__ */ i.jsx(G, {}),
-    /* @__PURE__ */ i.jsx(
-      O,
-      {
-        label: {
-          label: r.confirmIban,
-          width: j
-        },
-        text: {
-          type: "text",
-          name: R(e, "confirmedBankAccountIban"),
-          placeholder: r.addConfirmIban,
-          defaultValue: n?.confirmedBankAccountIban,
-          autoCapitalize: "characters",
-          options: {
-            required: !0,
-            pattern: ie,
-            validate: (p) => p != null ? P(`${e}.bankAccountIban`) === p : !1
-          }
-        },
-        disableCopyPaste: !0,
-        isDisabled: g,
-        style: { width: "auto" },
-        showAdditionalInfoLabel: !1,
-        additionalInfoLabel: r.ibanDontMatch
-      }
-    ),
-    /* @__PURE__ */ i.jsx(G, {}),
-    /* @__PURE__ */ i.jsx(
-      O,
-      {
-        label: {
-          label: r.accountNickName,
-          width: m
-        },
-        text: {
-          type: "text",
-          name: R(e, "bankAccountName"),
-          placeholder: Ce(
-            r.accountNickName
-          ),
-          defaultValue: n?.bankAccountName,
-          options: {
-            required: !1
-          }
-        },
-        isDisabled: g,
-        style: { width: "auto" }
-      }
-    )
-  ] }) });
-}, R = (e, a) => `${e}.${a}`, Ze = l.div`
-  display: flex;
-  flex-direction: column;
-`, et = l.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${c.sp0} 2px ${c.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${c.sp2};
-`, G = l.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, z = {
-  paddingTop: new o(t[2], t[3]),
-  paddingRight: new o(t[3], t[8]),
-  paddingBottom: new o(t[2], t[3]),
-  paddingLeft: new o(t[3], t[6]),
-  paddingTopBottomContainer: new o(t[3], t[3]),
-  paddingLeftContainer: new o(t[3], t[6]),
-  paddingRightContainer: new o(t[3], t[8]),
-  height: new o(t[6], t[6]),
-  controlHeight: new o(t[6], t[6]),
-  paddingTopBottom: new o(t[2], t[2]),
-  marginTop: new o(t[2], t[2]),
-  marginBottom: new o(t[2], t[3]),
-  marginRight: new o(t[2], t[2]),
-  marginLeft: new o(t[4], t[6]),
-  labelMarginLeft: new o(t[4], t[4]),
-  labelMarginRight: new o(t[4], t[4]),
-  labelMarginTop: new o(t[2], t[2]),
-  buttonWidth: new o(140, 140)
-}, ae = "internationalDetailsPage", W = "internationalWireSwiftAccountSection", tt = "mailingAddressSection", le = (e) => `${e}_form`, ft = ({
-  bankAccountCreationState: e,
-  bankNameBySwift: a,
-  addressType: n,
-  fetchBankNameBySwiftStatus: g,
-  bankAccountToCreate: s,
-  addressToEdit: x,
-  mailingAddress: y,
-  isDisabled: b,
-  style: P,
-  companyName: I,
-  isMagicLink: w,
-  currencySymbol: B,
-  amount: v,
-  onSaveHandler: k,
-  onBankDetailsUpdated: S,
-  onFetchBankNameBySwift: u,
-  onAddressClick: r,
-  onBackClick: m
-}) => {
-  const j = T(), p = de({
-    mode: "all",
-    reValidateMode: "onBlur",
-    defaultValues: ge(
-      () => it(s),
-      [s]
-    )
-  }), [E, C] = me(!1), f = Q.getLocalizedStrings().spendManagement.billPay.vendorCreation, V = Q.getLocalizedStrings().common.footer, { international: N } = f.wireDetails, F = {
-    onOkClick: () => {
-      C(!1), p.reset(), m?.();
-    },
-    onCancelClick: () => {
-      C(!1);
-    }
-  }, A = async (D, h) => {
-    const d = h[W].bankName, X = h[W].bankSwiftCode, Z = Object.assign({}, h);
-    D === `${W}.bankSwiftCode` && (d || !d && a[X]?.bankName) && (Z[W].bankName = a[X]?.bankName ?? ""), S(Z);
-  };
-  re(() => {
-    const D = p.watch((h, { name: d }) => {
-      d != null && h != null && ce(() => A(d, h));
-    });
-    return () => {
-      D.unsubscribe();
-    };
-  });
-  const H = p.handleSubmit((D) => {
-    g.fetchState !== "In-Progress" && k("wire");
-  }), U = !ue(
-    y != null ? ee(y) : y,
-    x != null ? ee(x) : x
-  ) || ot(s) || p.formState.isDirty;
-  return /* @__PURE__ */ i.jsxs(at, { children: [
-    /* @__PURE__ */ i.jsxs(lt, { style: P, size: j, children: [
-      E === !0 ? /* @__PURE__ */ i.jsx(
-        Le,
-        {
-          titleComponent: /* @__PURE__ */ i.jsx(Ie, { children: f.discardTitle }),
-          descriptionComponent: /* @__PURE__ */ i.jsx(Pe, { children: f.discardDescription }),
-          primaryButtonText: f.discard,
-          secondaryButtonText: f.cancel,
-          action: F
-        }
-      ) : null,
-      /* @__PURE__ */ i.jsx(
-        De,
-        {
-          header: w ? /* @__PURE__ */ i.jsx(
-            Ee,
-            {
-              companyName: I ?? "",
-              currencySymbol: B ?? "",
-              amount: v ?? 0
-            }
-          ) : N.addInternationalWireDetails,
-          isMagicLink: w,
-          isDirty: U,
-          onBackClick: m,
-          setShowConfirmationPopup: C
-        }
-      ),
-      e?.fetchState === "Error" && e.error?.code === 409 ? /* @__PURE__ */ i.jsx(
-        Re,
-        {
-          warningText: f.bankAccountCommon.accountExistWarning
-        }
-      ) : null,
-      /* @__PURE__ */ i.jsx(rt, { size: j, children: f.bankAccountCommon.accountDetailsTitle }),
-      /* @__PURE__ */ i.jsx(he, { ...p, children: /* @__PURE__ */ i.jsxs("form", { id: le(ae), onSubmit: H, children: [
-        /* @__PURE__ */ i.jsx(nt, { size: j, children: /* @__PURE__ */ i.jsx(
-          Xe,
-          {
-            bankAccountToCreate: s,
-            bankNameBySwift: a,
-            fetchBankNameBySwiftStatus: g,
-            sectionId: W,
-            isDisabled: b,
-            onFetchBankNameBySwift: u
-          }
-        ) }),
-        /* @__PURE__ */ i.jsx(
-          We,
-          {
-            sectionId: tt,
-            isDisabled: b,
-            addressType: n,
-            addressToEdit: x,
-            onAddressClick: r
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ i.jsx(
-      Be,
-      {
-        formId: le(ae),
-        primaryBtn: {
-          label: w ? f.bankAccountCommon.submitDetails : f.bankAccountCommon.saveAccount,
-          isLoading: e.fetchState === "In-Progress",
-          style: { width: z.buttonWidth.value(j) },
-          isDisabled: b != null
-        },
-        showCancel: !w,
-        cancelBtn: {
-          label: V.cancel,
-          style: { width: z.buttonWidth.value(j) },
-          shouldResetOnCancel: !1,
-          onClick: () => {
-            p.formState.isDirty ? C(!0) : (p.reset(), m?.());
-          }
-        }
-      }
-    )
-  ] });
-}, it = (e) => ({
-  [W]: {
-    bankSwiftCode: e?.bankSwiftCode,
-    bankName: e?.bankName ?? "",
-    bankAccountIban: e?.bankAccountIban,
-    confirmedBankAccountIban: e?.confirmedBankAccountIban,
-    bankAccountName: e?.bankAccountName
-  }
-}), ot = (e) => {
-  if (e == null)
-    return !1;
-  const { bankAccountName: a, bankSwiftCode: n, bankName: g, bankAccountIban: s } = e;
-  return !!a || !!n || !!g || !!s;
-}, nt = l.div`
-  padding-left: ${(e) => z.paddingLeftContainer.valuePx(e.size)};
-  padding-right: ${(e) => z.paddingRightContainer.valuePx(e.size)};
-  padding-top: ${(e) => z.paddingTopBottomContainer.valuePx(e.size)};
-  padding-bottom: ${(e) => z.paddingTopBottomContainer.valuePx(e.size)};
-`, at = l.div`
-  background-color: ${(e) => e.theme.colors.grey4};
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-`, lt = l.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`, rt = l(ze)`
-  color: ${(e) => e.theme.colors.champion};
-  margin-left: ${(e) => z.marginLeft.valuePx(e.size)};
-  margin-top: ${c.sp3};
-`;
-export {
-  ft as I
-};