@zeniai/web-components 3.17.3 → 3.17.4

package/dist/IssueChargeCardPage-0JzSBhRH.js

@@ -0,0 +1,2880 @@
+import { u as Re, d as Ce, j as r, o as Ut, g as Bt, h as Mt, F as Nt } from "./vendor-.pnpm-B2klaOGU.js";
+import { useRef as we, useState as ie, useEffect as Le, useMemo as Ee, useCallback as zt } from "react";
+import s from "@emotion/styled";
+import { a as le, u as ne, R as u, kB as _e, S as t, aS as Ae, ij as Ue, al as ve, t as re, aB as me, at as K, hg as he, D as l, aw as be, F as Be, fV as ut, a2 as Ft, j6 as kt, E as Vt, y as pt, j7 as Wt, e as Ie, Z as qt, kC as Et, C as ae, x as Ht, J as ht, aj as Gt, kD as Zt, K as Jt, ao as Dt, eQ as Kt, k as Qt, b as Xt, H as Yt, ap as er, _ as tr } from "./index-CR2Dmphx.js";
+import { L as mt } from "./LabeledUserSingleSelectWithSubtitlesField-DpHw4Nbh.js";
+import { stringToUnion as rr } from "@zeniai/client-epic-state";
+import { R as gt } from "./RoleWithToolTip-By0gUlaV.js";
+const ge = (e) => {
+  const {
+    common: a,
+    spendManagement: {
+      chargeCard: { issueCard: n }
+    }
+  } = le.getLocalizedStrings();
+  switch (e) {
+    case "monthly":
+      return n.frequencySubLabels.monthly;
+    case "quarterly":
+      return n.frequencySubLabels.quarterly;
+    case "weekly":
+      return n.frequencySubLabels.weekly;
+    case "yearly":
+      return n.frequencySubLabels.yearly;
+    default:
+      return a.strings.empty;
+  }
+}, ar = ["creditCard", "debitCard"], He = (e) => rr(e, ar), p = (e, a) => `${e}.${a}`, {
+  commonSetUp: {
+    businessVerification: { addressPlaceholder: Ge, customAddressPlaceholder: lr }
+  },
+  spendManagement: {
+    chargeCard: { issueCard: M }
+  }
+} = le.getLocalizedStrings(), V = {
+  largeLabelWidth: new u(120, 120, 200),
+  labelMarginRight: new u(l[3], l[4]),
+  labelMarginBottom: new u(l[2], l[0]),
+  infoLabelMarginTop: new u(l[1], l[0]),
+  radioLabelPaddingLeftRight: new u(l[2], l[3]),
+  radioLabelPaddingLeft: new u(l[0], l[3]),
+  radioLabelPaddingRight: new u(10, l[3]),
+  labeledFieldPaddingLeft: new u(l[3], l[0]),
+  labeledFieldPaddingRight: new u(l[3], l[2]),
+  labeledFieldPaddingBottom: new u(l[3], l[2])
+}, ir = {
+  infoLabel: new be("smallRegular", "smallRegular")
+}, dr = "creditCard.physicalCard.amount", sr = "creditCard.physicalCard.cardName", or = "creditCard.physicalCard.user", nr = "creditCard.physicalCard.frequency", de = "creditCard.physicalCard.addressType", cr = ({
+  lineData: e,
+  issueCardSectionId: a,
+  limit: n,
+  creditLimitFrequency: m,
+  activeChargeCardCount: x,
+  allRoles: f,
+  allAccountingClasses: _,
+  companyAddress: b,
+  customAddress: O,
+  userAddress: R,
+  userList: c,
+  maxPhysicalChargeCardPerUser: j,
+  openAddAddressDrawerHandler: g
+}) => {
+  const o = ne(), E = Re(), { getValues: F } = Ce(), C = V.largeLabelWidth.value(o), q = () => {
+    g(e.lineId, "creditCard");
+  }, W = (d, L) => /* @__PURE__ */ r.jsx(pr, { isOptionSelected: L, children: ge(d) }), i = e.creditCard.physicalCard.addressType, h = e.creditCard.physicalCard.amount, $ = _e(n.amount), A = h != null && h > n.amount, v = A ? M.amountExceedError.replace("_amount_", $) : void 0, P = e.creditCard.physicalCard.user, w = P.allUsers.find((d) => d.userId === P.selectedUser), G = w?.userId, D = G != null ? R[G] : void 0, X = (d) => {
+    let L = x[d]?.physicalCardCount ?? 0;
+    return F().lineInfo.forEach((T) => {
+      T.creditCard.cardType === "business_physical_credit_card" && T.creditCard.physicalCard.user.selectedUser === d && (L += 1);
+    }), L >= j;
+  };
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
+      mt,
+      {
+        label: {
+          label: M.cardholderLabel,
+          width: C
+        },
+        userSingleSelectWithSubTitlesField: {
+          name: p(a, or),
+          placeholderLabel: M.usersPlaceholder,
+          value: {
+            allUsers: c,
+            selectedUser: e.creditCard.physicalCard.user.selectedUser
+          },
+          registerOptions: {
+            required: !0,
+            validate: (d) => d?.selectedUser?.length > 0
+          },
+          valueToSubtitle: (d) => {
+            const L = f.find((T) => T.userId === d), y = [];
+            return L?.accountingClassIDs.forEach((T) => {
+              const k = _.find(
+                (fe) => fe.classId === T
+              );
+              k != null && k.className && y.push(k.className);
+            }), y;
+          },
+          additionalLabelInfo: M.additionalInfoPhysical,
+          showOnlyAvatar: !0,
+          showAvatarAndSubtitles: !1,
+          isOptionDisabled: X,
+          disabledOptionHint: M.cardLimitWarning,
+          bigMarginRightForSmallScreens: !0,
+          optionStyles: {
+            maxHeight: t.sp10,
+            minHeight: t.sp6,
+            height: "max-content"
+          }
+        },
+        style: {
+          width: "100%",
+          paddingLeft: V.labelMarginBottom.value(o)
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(Se, {}),
+    /* @__PURE__ */ r.jsx(
+      Ae,
+      {
+        label: {
+          label: M.cardNameLabel,
+          width: C
+        },
+        style: {
+          width: "auto",
+          paddingLeft: V.labelMarginBottom.value(o)
+        },
+        text: {
+          type: "text",
+          name: p(a, sr),
+          defaultValue: e.creditCard.physicalCard.cardName,
+          placeholder: M.cardNamePlaceholder,
+          options: {
+            required: !0,
+            validate: (d) => d != null
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(Se, {}),
+    /* @__PURE__ */ r.jsx(
+      Ue,
+      {
+        label: {
+          label: M.amountLabel,
+          width: C
+        },
+        showAdditionalInfoLabel: A,
+        additionalInfoLabel: v,
+        formattedTextField: {
+          type: "number",
+          name: p(a, dr),
+          defaultValue: e.creditCard.physicalCard.amount,
+          placeholder: M.amountPlaceholder,
+          returnValueType: "floatValue",
+          prefix: "$",
+          allowNegative: !0,
+          isNumericString: !1,
+          registerOptions: {
+            required: !0,
+            validate: (d) => !!d && d > 0 && d <= n.amount
+          },
+          autoComplete: "off",
+          decimalSeparator: ".",
+          decimalScale: 2,
+          fixedDecimalScale: !1,
+          thousandSeparator: !0
+        },
+        isFieldError: A,
+        style: {
+          width: "auto",
+          paddingLeft: V.labelMarginBottom.value(o)
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(Se, {}),
+    /* @__PURE__ */ r.jsx(
+      ve,
+      {
+        isDisabled: "readonly",
+        label: {
+          label: M.frequencyLabel,
+          width: C,
+          style: {
+            marginBottom: V.labelMarginBottom.valuePx(o),
+            marginRight: V.labelMarginRight.valuePx(o)
+          }
+        },
+        style: {
+          width: "100%",
+          paddingLeft: V.labelMarginBottom.valuePx(o)
+        },
+        infoLabelStyle: {
+          ...re.smallRegular.cssObject,
+          textAlign: "right",
+          paddingRight: t.sp3,
+          marginTop: V.infoLabelMarginTop.valuePx(o),
+          color: E.colors.hero
+        },
+        valueToAdditionalLabel: (d) => ge(d),
+        singleSelectPickerField: {
+          name: p(a, nr),
+          placeholder: M.frequencyPlaceholder,
+          style: { position: "relative" },
+          capitalizeOptions: !0,
+          showSubLabelsInSingleValue: !1,
+          defaultValue: {
+            selectedOption: e.creditCard.physicalCard.frequency.selectedOption,
+            allOptions: m.map((d) => ({
+              label: d.name,
+              value: d.code
+            }))
+          },
+          valueToSubLabels: (d, L) => W(d, L),
+          textAlignment: "right",
+          registerOptions: {
+            required: !0,
+            validate: (d) => d != null && !!d.selectedOption
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(Se, {}),
+    /* @__PURE__ */ r.jsxs(hr, { windowSize: o, children: [
+      /* @__PURE__ */ r.jsxs(br, { windowSize: o, children: [
+        /* @__PURE__ */ r.jsx(
+          me,
+          {
+            label: M.address.shippingAddressLabel,
+            htmlFor: p(a, de),
+            style: {
+              marginLeft: t.sp4,
+              marginRight: V.labelMarginRight.valuePx(o),
+              marginTop: t.sp2,
+              width: o === "small" ? "auto" : C
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsx(mr, { windowSize: o, children: /* @__PURE__ */ r.jsxs(fr, { isDisabled: w == null, children: [
+          D != null && /* @__PURE__ */ r.jsx(
+            K,
+            {
+              isContainerClickable: !0,
+              label: {
+                label: M.address.personal
+              },
+              isDisabled: w == null ? "disabled" : void 0,
+              style: {
+                padding: `${t.sp2} ${t.sp0}`,
+                paddingLeft: V.radioLabelPaddingLeftRight.value(o),
+                paddingRight: V.radioLabelPaddingRight.value(o),
+                width: "fit-content"
+              },
+              radioField: {
+                name: p(a, de),
+                id: `${p(a, de)}.${M.address.personal}`,
+                value: "card_holder_personal_address",
+                radioSize: "small",
+                registerOptions: {
+                  required: !0
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            K,
+            {
+              isContainerClickable: !0,
+              label: {
+                label: M.address.company
+              },
+              isDisabled: w == null ? "disabled" : void 0,
+              style: {
+                padding: `${t.sp2} ${t.sp0}`,
+                paddingLeft: V.radioLabelPaddingLeft.value(o),
+                paddingRight: V.radioLabelPaddingRight.value(o),
+                width: "fit-content"
+              },
+              radioField: {
+                name: p(a, de),
+                id: `${p(a, de)}.${M.address.company}`,
+                value: "company_address",
+                radioSize: "small",
+                registerOptions: {
+                  required: !0
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            K,
+            {
+              isContainerClickable: !0,
+              label: {
+                label: M.address.custom
+              },
+              isDisabled: w == null ? "disabled" : void 0,
+              style: {
+                padding: `${t.sp2} ${t.sp0}`,
+                paddingLeft: V.radioLabelPaddingLeft.value(o),
+                paddingRight: V.radioLabelPaddingLeftRight.value(o),
+                width: "fit-content"
+              },
+              radioField: {
+                name: p(a, de),
+                id: `${p(a, de)}.${M.address.custom}`,
+                value: "custom_address",
+                radioSize: "small",
+                registerOptions: {
+                  required: !0
+                }
+              }
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ r.jsx(gr, { windowSize: o, children: w?.user != null && i != null && /* @__PURE__ */ r.jsx(ur, { children: i === "card_holder_personal_address" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        /* @__PURE__ */ r.jsx(
+          he,
+          {
+            name: "personal_address_value_field",
+            defaultValue: D,
+            isDisabled: "readonly",
+            placeholder: Ge,
+            style: {
+              minHeight: t.sp4,
+              paddingTop: t.sp2,
+              paddingBottom: t.sp2,
+              width: "100%",
+              display: "flex",
+              flexGrow: 1
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsx(Ze, { windowSize: o, children: M.address.personalAddressText.replace(
+          "_name_",
+          w.user.firstName
+        ) })
+      ] }) : i === "company_address" ? /* @__PURE__ */ r.jsx(
+        he,
+        {
+          name: "company_address_value_field",
+          defaultValue: b,
+          isDisabled: "readonly",
+          placeholder: Ge,
+          style: {
+            minHeight: t.sp4,
+            paddingTop: t.sp2,
+            paddingBottom: t.sp2,
+            width: "100%",
+            display: "flex",
+            flexGrow: 1
+          }
+        }
+      ) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        /* @__PURE__ */ r.jsx(
+          he,
+          {
+            name: "custom_address_value_field",
+            defaultValue: O[e.lineId],
+            placeholder: lr,
+            style: {
+              minHeight: t.sp4,
+              paddingTop: t.sp2,
+              paddingBottom: t.sp2,
+              width: "100%",
+              display: "flex",
+              flexGrow: 1
+            },
+            onClick: q
+          }
+        ),
+        /* @__PURE__ */ r.jsx(Ze, { windowSize: o, children: M.address.customAddressText })
+      ] }) }) })
+    ] })
+  ] });
+}, ur = s.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: flex-end;
+  flex-grow: 1;
+`, Ze = s(Be)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  padding-right: 12px;
+  text-align: right;
+  ${(e) => `${ir.infoLabel.style(e.windowSize)}`};
+`, pr = s(Be)`
+  color: ${(e) => e.isOptionSelected ? e.theme.colors.primary : e.theme.colors.grey1};
+`, Se = s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, hr = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-height: ${t.sp6};
+  padding-right: ${t.sp2};
+  padding-top: ${t.sp2};
+  padding-bottom: ${t.sp2};
+
+  &: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;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .user-multi-select-field__control {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+`, mr = s.div`
+  flex-grow: 1;
+  display: flex;
+  width: ${(e) => e.windowSize === "small" ? "auto" : `calc(100% - ${V.largeLabelWidth.valuePx(e.windowSize)})`};
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: ${(e) => V.labelMarginBottom.valuePx(e.windowSize)};
+`, gr = s.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  color: ${(e) => e.theme.colors.primary};
+  padding-left: ${t.sp4};
+  width: 100%;
+`, br = s.div`
+  color: ${(e) => e.theme.colors.primary};
+  width: 100%;
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+`, fr = s.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  &:hover {
+    fill: ${(e) => e.theme.colors.primary};
+  }
+`, {
+  spendManagement: {
+    chargeCard: { issueCard: Z }
+  }
+} = le.getLocalizedStrings(), Y = {
+  largeLabelWidth: new u(120, 120, 200),
+  labelMarginRight: new u(l[3], l[4]),
+  largeLabelMarginRight: new u(l[2], 12),
+  labelMarginBottom: new u(l[2], l[0]),
+  infoLabelMarginTop: new u(l[1], l[0])
+}, yr = {
+  infoLabel: new be("smallRegular", "smallRegular")
+}, xr = "debitCard.virtualCard.amount", Cr = "debitCard.virtualCard.cardName", Je = "debitCard.virtualCard.users", vr = "debitCard.virtualCard.frequency", $r = "debitCard.virtualCard.connectedAccount", wr = ({
+  lineData: e,
+  issueCardSectionId: a,
+  cardHolderCandidates: n,
+  creditLimitFrequency: m,
+  allRoles: x,
+  depositAccounts: f,
+  allAccountingClasses: _,
+  activeDebitCardCount: b,
+  maxVirtualDebitCardPerUser: O
+}) => {
+  const R = Re(), c = ne(), { getValues: j } = Ce(), g = Y.largeLabelWidth.value(c), o = e.debitCard.virtualCard.amount, F = f.find(
+    (i) => i.id === e.debitCard.virtualCard.connectedAccount.selectedOption
+  )?.cardLimits.dailyCardTransactionLimit.amount, C = o != null && F != null && o > F, q = C ? Z.amountExceedDebitCardError.replace(
+    "_amount_",
+    _e(F)
+  ) : void 0, W = (i) => {
+    let h = 0;
+    const $ = e.debitCard.virtualCard.connectedAccount.selectedOption;
+    return $ != null && b?.[$]?.[i] != null && (h = b[$][i].virtualCardCount), j().lineInfo.forEach((v) => {
+      v.debitCard.cardType === "business_virtual_debit_card" && v.debitCard.virtualCard.users.selectedUsers.forEach((P) => {
+        P.userId === i && (h += 1);
+      });
+    }), h >= O;
+  };
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
+      Ke,
+      {
+        label: {
+          label: Z.connectedAccountLabel,
+          width: g,
+          style: {
+            marginLeft: t.sp4,
+            marginRight: Y.largeLabelMarginRight.value(c),
+            marginTop: t.sp2,
+            width: g
+          }
+        },
+        style: {
+          width: "auto"
+        },
+        singleSelectPickerField: {
+          name: p(a, $r),
+          placeholder: Z.selectAccountPlaceholder,
+          style: { position: "relative" },
+          capitalizeOptions: !0,
+          valueToLogo: (i, h) => bt(f, i, h),
+          valueToSubLabels: (i, h) => Oe(f, i, h),
+          defaultValue: {
+            selectedOption: e.debitCard.virtualCard.connectedAccount.selectedOption,
+            allOptions: f.map((i) => ({
+              label: i.accountName,
+              value: i.id
+            }))
+          },
+          isOptionRemovable: !1,
+          textAlignment: "right",
+          registerOptions: {
+            required: !0,
+            validate: (i) => i != null && !!i.selectedOption
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(je, {}),
+    /* @__PURE__ */ r.jsxs(Ar, { windowSize: c, children: [
+      /* @__PURE__ */ r.jsx(
+        me,
+        {
+          label: Z.cardholdersLabel,
+          htmlFor: p(a, Je),
+          style: {
+            marginLeft: t.sp4,
+            marginRight: Y.labelMarginRight.value(c),
+            marginTop: t.sp2,
+            width: g
+          }
+        }
+      ),
+      /* @__PURE__ */ r.jsxs(_r, { windowSize: c, children: [
+        /* @__PURE__ */ r.jsx(
+          ut,
+          {
+            hideEmailTooltip: !0,
+            shouldHaveBackgroundColor: !1,
+            showBackgroundColorIfHasAnySelectedOption: !1,
+            placeholderLabel: Z.usersPlaceholder,
+            name: p(a, Je),
+            value: {
+              allUsers: n,
+              selectedUsers: e.debitCard.virtualCard.users.selectedUsers,
+              allNonUsers: [],
+              selectedNonUsers: []
+            },
+            registerOptions: {
+              required: !0,
+              validate: (i) => i?.selectedUsers?.length > 0
+            },
+            valueToSubtitle: (i) => {
+              const h = x.find((A) => A.userId === i), $ = [];
+              return h != null && ($.push(/* @__PURE__ */ r.jsx(gt, { roles: h.userRoles })), h.accountingClassIDs.forEach((A) => {
+                const v = _.find(
+                  (P) => P.classId === A
+                );
+                v != null && v.className && $.push(v.className);
+              })), $;
+            },
+            disableCurrentOption: W,
+            disabledOptionHint: Z.cardLimitWarning,
+            customStyleConfig: {
+              placeholder: () => ({
+                margin: t.sp0
+              }),
+              input: (i, { selectProps: h }) => ({
+                display: h.menuIsOpen === !1 && e.debitCard.virtualCard.users.selectedUsers.length > 0 && c !== "small" ? "none" : "unset",
+                width: c === "small" && e.debitCard.virtualCard.users.selectedUsers.length > 0 ? "100%" : `calc(100% - ${t.sp5})`,
+                padding: e.debitCard.virtualCard.users.selectedUsers.length === 0 ? `${t.sp0} ${t.sp3}` : t.sp0,
+                ...re.standardRegular.cssObject,
+                height: t.sp4,
+                zIndex: 0,
+                position: e.debitCard.virtualCard.users.selectedUsers.length === 0 || c === "small" && h.menuIsOpen === !1 ? "absolute" : "unset",
+                left: t.sp0,
+                ">input": {
+                  ...re.smallBold.cssObject,
+                  height: "100%",
+                  cursor: "pointer"
+                }
+              })
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsx(Rr, { size: c, children: Z.additionalInfoVirtual })
+      ] })
+    ] }),
+    /* @__PURE__ */ r.jsx(je, {}),
+    /* @__PURE__ */ r.jsx(
+      Ae,
+      {
+        label: {
+          label: Z.cardNameLabel,
+          width: g
+        },
+        style: {
+          width: "auto",
+          paddingLeft: Y.labelMarginBottom.value(c)
+        },
+        text: {
+          type: "text",
+          name: p(a, Cr),
+          defaultValue: e.debitCard.virtualCard.cardName,
+          placeholder: Z.cardNamePlaceholder,
+          options: {
+            required: !0,
+            validate: (i) => i != null
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(je, {}),
+    /* @__PURE__ */ r.jsx(
+      Ue,
+      {
+        label: {
+          label: Z.amountLabel,
+          width: g
+        },
+        showAdditionalInfoLabel: C,
+        additionalInfoLabel: q,
+        formattedTextField: {
+          type: "number",
+          name: p(a, xr),
+          defaultValue: e.debitCard.virtualCard.amount,
+          placeholder: Z.amountPlaceholder,
+          returnValueType: "floatValue",
+          prefix: "$",
+          allowNegative: !0,
+          isNumericString: !1,
+          registerOptions: {
+            required: !0,
+            validate: (i) => F != null ? !!i && i > 0 && i <= F : !!i && i > 0
+          },
+          autoComplete: "off",
+          decimalSeparator: ".",
+          decimalScale: 2,
+          fixedDecimalScale: !1,
+          thousandSeparator: !0
+        },
+        style: {
+          width: "auto",
+          paddingLeft: Y.labelMarginBottom.value(c)
+        },
+        isFieldError: C
+      }
+    ),
+    /* @__PURE__ */ r.jsx(je, {}),
+    /* @__PURE__ */ r.jsx(Ir, { size: c, children: /* @__PURE__ */ r.jsx(
+      Ke,
+      {
+        isDisabled: "readonly",
+        label: {
+          label: Z.frequencyLabel,
+          width: g,
+          style: {
+            marginLeft: t.sp0,
+            marginBottom: Y.labelMarginBottom.valuePx(c),
+            marginRight: Y.labelMarginRight.valuePx(c)
+          }
+        },
+        style: {
+          width: "100%",
+          padding: t.sp0,
+          display: c === "small" ? "flex" : "inherit"
+        },
+        infoLabelStyle: {
+          ...re.smallRegular.cssObject,
+          textAlign: "right",
+          paddingRight: t.sp3,
+          marginTop: Y.infoLabelMarginTop.valuePx(c),
+          color: R.colors.hero
+        },
+        valueToAdditionalLabel: (i) => ge(i),
+        singleSelectPickerField: {
+          name: p(a, vr),
+          placeholder: Z.frequencyPlaceholder,
+          style: { position: "relative" },
+          capitalizeOptions: !0,
+          showSubLabelsInSingleValue: !1,
+          defaultValue: {
+            selectedOption: e.debitCard.virtualCard.frequency.selectedOption,
+            allOptions: m.map((i) => ({
+              label: i.name,
+              value: i.code
+            }))
+          },
+          valueToSubLabels: (i, h) => Oe(f, i, h),
+          textAlignment: "right",
+          registerOptions: {
+            required: !0,
+            validate: (i) => i != null && !!i.selectedOption
+          }
+        }
+      }
+    ) })
+  ] });
+}, bt = (e, a, n) => {
+  if (a === "")
+    return /* @__PURE__ */ r.jsx(Pr, {});
+  const m = e.find((f) => f.id === a), x = e.findIndex((f) => f.id === a);
+  return m != null ? /* @__PURE__ */ r.jsx(
+    jr,
+    {
+      isOptionSelected: n,
+      children: /* @__PURE__ */ r.jsx(
+        Tr,
+        {
+          color: kt(x)
+        }
+      )
+    }
+  ) : null;
+}, Oe = (e, a, n) => {
+  if (!a)
+    return null;
+  const m = e.find((x) => x.id === a);
+  return n === !0 ? /* @__PURE__ */ r.jsx(Lr, { children: m?.maskedAccountNumber }) : /* @__PURE__ */ r.jsxs(Or, { className: "option-sublabel", children: [
+    /* @__PURE__ */ r.jsx(De, { children: m?.maskedAccountNumber }),
+    m?.accountBalance?.available ? /* @__PURE__ */ r.jsx(Sr, {}) : null,
+    m?.accountBalance?.available ? /* @__PURE__ */ r.jsx(De, { children: Ft("0,0[.]00", m.accountBalance.available) }) : null
+  ] });
+}, Lr = s.span`
+  margin-left: ${t.sp2};
+`, De = s.div``, Sr = s.div`
+  width: ${t.sp1};
+  height: ${t.sp1};
+  min-width: ${t.sp1};
+  background-color: ${(e) => e.theme.colors.grey1};
+  border-radius: 50%;
+`, jr = s.div`
+  min-width: ${(e) => e.isOptionSelected ? t.sp4 : t.sp5};
+  width: ${(e) => e.isOptionSelected ? t.sp4 : t.sp5};
+  height: ${(e) => e.isOptionSelected ? t.sp4 : t.sp5};
+  margin-right: ${t.sp2};
+`, Tr = s(Wt)`
+  min-width: inherit;
+  width: inherit;
+  height: inherit;
+`, Pr = s(pt)`
+  min-width: ${t.sp4};
+  width: ${t.sp4};
+  height: ${t.sp4};
+  margin-right: 12px;
+  margin-left: ${t.sp1};
+  color: ${(e) => e.theme.colors.hero};
+`, Ir = s.div`
+  display: flex;
+  flex-direction: row;
+  padding: ${t.sp2};
+  padding-left: ${t.sp4};
+  justify-content: space-between;
+  color: ${(e) => e.theme.colors.hero};
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`, Or = s(Vt)`
+  color: ${(e) => e.theme.colors.grey1};
+  display: flex;
+  align-items: center;
+  gap: ${t.sp2};
+`, Rr = s.label`
+  color: ${(e) => e.theme.colors.hero};
+  width: 100%;
+  ${(e) => `${yr.infoLabel.style(e.size)}`};
+  padding-right: ${t.sp3};
+  text-align: right;
+  white-space: pre-line;
+`, je = s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, _r = s.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => `calc(100% - ${Y.largeLabelWidth.valuePx(e.windowSize)})`};
+  align-items: flex-end;
+  flex-grow: 1;
+`, Ke = s(
+  ve
+)`
+  border-radius: ${t.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+`, Ar = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-height: ${t.sp6};
+  padding-right: ${t.sp2};
+  padding-top: ${t.sp2};
+  padding-bottom: ${t.sp2};
+
+  &: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;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .user-multi-select-field__control {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+`, {
+  commonSetUp: {
+    businessVerification: { addressPlaceholder: Qe, customAddressPlaceholder: Ur }
+  },
+  spendManagement: {
+    chargeCard: { issueCard: B }
+  }
+} = le.getLocalizedStrings(), z = {
+  largeLabelWidth: new u(120, 120, 200),
+  labelMarginRight: new u(l[3], l[4]),
+  largeLabelMarginRight: new u(l[2], 12),
+  labelMarginBottom: new u(l[2], l[0]),
+  infoLabelMarginTop: new u(l[1], l[0]),
+  radioLabelPaddingLeftRight: new u(l[2], l[3]),
+  radioLabelPaddingLeft: new u(l[0], l[3]),
+  radioLabelPaddingRight: new u(10, l[3]),
+  labeledFieldPaddingLeft: new u(l[3], l[0]),
+  labeledFieldPaddingRight: new u(l[3], l[2]),
+  labeledFieldPaddingBottom: new u(l[3], l[2])
+}, Br = {
+  infoLabel: new be("smallRegular", "smallRegular")
+}, Mr = "debitCard.physicalCard.amount", Nr = "debitCard.physicalCard.cardName", zr = "debitCard.physicalCard.user", Fr = "debitCard.physicalCard.frequency", se = "debitCard.physicalCard.addressType", kr = "debitCard.physicalCard.connectedAccount", Vr = ({
+  lineData: e,
+  issueCardSectionId: a,
+  creditLimitFrequency: n,
+  activeDebitCardCount: m,
+  allRoles: x,
+  depositAccounts: f,
+  allAccountingClasses: _,
+  companyAddress: b,
+  customAddress: O,
+  userAddress: R,
+  userList: c,
+  maxPhysicalDebitCardPerUser: j,
+  openAddAddressDrawerHandler: g
+}) => {
+  const o = ne(), E = Re(), { getValues: F } = Ce(), C = z.largeLabelWidth.value(o), q = () => {
+    g(e.lineId, "debitCard");
+  }, W = e.debitCard.physicalCard.amount, h = f.find(
+    (d) => d.id === e.debitCard.physicalCard.connectedAccount.selectedOption
+  )?.cardLimits.dailyCardTransactionLimit.amount, $ = W != null && h != null && W > h, A = $ ? B.amountExceedDebitCardError.replace(
+    "_amount_",
+    _e(h)
+  ) : void 0, v = e.debitCard.physicalCard.addressType, P = e.debitCard.physicalCard.user, w = P.allUsers.find((d) => d.userId === P.selectedUser), G = w?.userId, D = G != null ? R[G] : void 0, X = (d) => {
+    let L = 0;
+    const y = e.debitCard.physicalCard.connectedAccount.selectedOption;
+    return y != null && m?.[y]?.[d] != null && (L = m[y][d].physicalCardCount), F().lineInfo.forEach((k) => {
+      k.debitCard.cardType === "business_physical_debit_card" && k.debitCard.physicalCard.user.selectedUser === d && (L += 1);
+    }), L >= j;
+  };
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
+      qr,
+      {
+        label: {
+          label: B.connectedAccountLabel,
+          width: C,
+          style: {
+            marginLeft: t.sp4,
+            marginRight: z.largeLabelMarginRight.value(o),
+            marginTop: t.sp2,
+            width: C
+          }
+        },
+        style: {
+          width: "auto"
+        },
+        singleSelectPickerField: {
+          name: p(a, kr),
+          placeholder: B.selectAccountPlaceholder,
+          style: { position: "relative" },
+          capitalizeOptions: !0,
+          valueToLogo: (d, L) => bt(f, d, L),
+          valueToSubLabels: (d, L) => Oe(f, d, L),
+          defaultValue: {
+            selectedOption: e.debitCard.physicalCard.connectedAccount.selectedOption,
+            allOptions: f.map((d) => ({
+              label: d.accountName,
+              value: d.id
+            }))
+          },
+          textAlignment: "right",
+          isOptionRemovable: !1,
+          registerOptions: {
+            required: !0,
+            validate: (d) => d != null && !!d.selectedOption
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(xe, {}),
+    /* @__PURE__ */ r.jsx(
+      mt,
+      {
+        label: {
+          label: B.cardholderLabel,
+          width: C
+        },
+        userSingleSelectWithSubTitlesField: {
+          name: p(a, zr),
+          placeholderLabel: B.usersPlaceholder,
+          value: {
+            allUsers: c,
+            selectedUser: e.debitCard.physicalCard.user.selectedUser
+          },
+          registerOptions: {
+            required: !0,
+            validate: (d) => d?.selectedUser?.length > 0
+          },
+          valueToSubtitle: (d) => {
+            const L = x.find((T) => T.userId === d), y = [];
+            return L?.accountingClassIDs.forEach((T) => {
+              const k = _.find(
+                (fe) => fe.classId === T
+              );
+              k != null && k.className && y.push(k.className);
+            }), y;
+          },
+          additionalLabelInfo: B.additionalInfoPhysical,
+          showOnlyAvatar: !0,
+          showAvatarAndSubtitles: !1,
+          isOptionDisabled: X,
+          disabledOptionHint: B.cardLimitWarning,
+          bigMarginRightForSmallScreens: !0,
+          optionStyles: {
+            maxHeight: t.sp10,
+            minHeight: t.sp6,
+            height: "max-content"
+          }
+        },
+        style: {
+          width: "auto",
+          paddingLeft: z.labelMarginBottom.value(o)
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(xe, {}),
+    /* @__PURE__ */ r.jsx(
+      Ae,
+      {
+        label: {
+          label: B.cardNameLabel,
+          width: C
+        },
+        style: {
+          width: "auto",
+          paddingLeft: z.labelMarginBottom.value(o)
+        },
+        text: {
+          type: "text",
+          name: p(a, Nr),
+          defaultValue: e.debitCard.physicalCard.cardName,
+          placeholder: B.cardNamePlaceholder,
+          options: {
+            required: !0,
+            validate: (d) => d != null
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(xe, {}),
+    /* @__PURE__ */ r.jsx(
+      Ue,
+      {
+        label: {
+          label: B.amountLabel,
+          width: C
+        },
+        showAdditionalInfoLabel: $,
+        additionalInfoLabel: A,
+        formattedTextField: {
+          type: "number",
+          name: p(a, Mr),
+          defaultValue: e.debitCard.physicalCard.amount,
+          placeholder: B.amountPlaceholder,
+          returnValueType: "floatValue",
+          prefix: "$",
+          allowNegative: !0,
+          isNumericString: !1,
+          registerOptions: {
+            required: !0,
+            validate: (d) => h != null ? !!d && d > 0 && d <= h : !!d && d > 0
+          },
+          autoComplete: "off",
+          decimalSeparator: ".",
+          decimalScale: 2,
+          fixedDecimalScale: !1,
+          thousandSeparator: !0
+        },
+        style: {
+          width: "auto",
+          paddingLeft: z.labelMarginBottom.value(o)
+        },
+        isFieldError: $
+      }
+    ),
+    /* @__PURE__ */ r.jsx(xe, {}),
+    /* @__PURE__ */ r.jsx(
+      ve,
+      {
+        isDisabled: "readonly",
+        label: {
+          label: B.frequencyLabel,
+          width: C,
+          style: {
+            marginBottom: z.labelMarginBottom.valuePx(o),
+            marginRight: z.labelMarginRight.valuePx(o)
+          }
+        },
+        style: {
+          width: "auto",
+          paddingLeft: z.labelMarginBottom.valuePx(o)
+        },
+        infoLabelStyle: {
+          ...re.smallRegular.cssObject,
+          textAlign: "right",
+          paddingRight: t.sp3,
+          marginTop: z.infoLabelMarginTop.valuePx(o),
+          color: E.colors.hero
+        },
+        valueToAdditionalLabel: (d) => ge(d),
+        singleSelectPickerField: {
+          name: p(a, Fr),
+          placeholder: B.frequencyPlaceholder,
+          style: { position: "relative" },
+          capitalizeOptions: !0,
+          showSubLabelsInSingleValue: !1,
+          defaultValue: {
+            selectedOption: e.debitCard.physicalCard.frequency.selectedOption,
+            allOptions: n.map((d) => ({
+              label: d.name,
+              value: d.code
+            }))
+          },
+          valueToSubLabels: (d, L) => Oe(f, d, L),
+          textAlignment: "right",
+          registerOptions: {
+            required: !0,
+            validate: (d) => d != null && !!d.selectedOption
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(xe, {}),
+    /* @__PURE__ */ r.jsxs(Er, { windowSize: o, children: [
+      /* @__PURE__ */ r.jsxs(Zr, { windowSize: o, children: [
+        /* @__PURE__ */ r.jsx(
+          me,
+          {
+            label: B.address.shippingAddressLabel,
+            htmlFor: p(a, se),
+            style: {
+              marginLeft: t.sp4,
+              marginRight: z.labelMarginRight.valuePx(o),
+              marginTop: t.sp2,
+              width: o === "small" ? "auto" : C
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsx(Hr, { windowSize: o, children: /* @__PURE__ */ r.jsxs(Jr, { isDisabled: w == null, children: [
+          D != null && /* @__PURE__ */ r.jsx(
+            K,
+            {
+              isContainerClickable: !0,
+              label: {
+                label: B.address.personal
+              },
+              isDisabled: w == null ? "disabled" : void 0,
+              style: {
+                padding: `${t.sp2} ${t.sp0}`,
+                paddingLeft: z.radioLabelPaddingLeftRight.value(o),
+                paddingRight: z.radioLabelPaddingRight.value(o),
+                width: "fit-content"
+              },
+              radioField: {
+                name: p(a, se),
+                id: `${p(a, se)}.${B.address.personal}`,
+                value: "card_holder_personal_address",
+                radioSize: "small",
+                registerOptions: {
+                  required: !0
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            K,
+            {
+              isContainerClickable: !0,
+              label: {
+                label: B.address.company
+              },
+              isDisabled: w == null ? "disabled" : void 0,
+              style: {
+                padding: `${t.sp2} ${t.sp0}`,
+                paddingLeft: z.radioLabelPaddingLeft.value(o),
+                paddingRight: z.radioLabelPaddingRight.value(o),
+                width: "fit-content"
+              },
+              radioField: {
+                name: p(a, se),
+                id: `${p(a, se)}.${B.address.company}`,
+                value: "company_address",
+                radioSize: "small",
+                registerOptions: {
+                  required: !0
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            K,
+            {
+              isContainerClickable: !0,
+              label: {
+                label: B.address.custom
+              },
+              isDisabled: w == null ? "disabled" : void 0,
+              style: {
+                padding: `${t.sp2} ${t.sp0}`,
+                paddingLeft: z.radioLabelPaddingLeft.value(o),
+                paddingRight: z.radioLabelPaddingLeftRight.value(o),
+                width: "fit-content"
+              },
+              radioField: {
+                name: p(a, se),
+                id: `${p(a, se)}.${B.address.custom}`,
+                value: "custom_address",
+                radioSize: "small",
+                registerOptions: {
+                  required: !0
+                }
+              }
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ r.jsx(Gr, { windowSize: o, children: w?.user != null && v != null && /* @__PURE__ */ r.jsx(Wr, { children: v === "card_holder_personal_address" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        /* @__PURE__ */ r.jsx(
+          he,
+          {
+            name: "personal_address_value_field",
+            defaultValue: D,
+            isDisabled: "readonly",
+            placeholder: Qe,
+            style: {
+              minHeight: t.sp4,
+              paddingTop: t.sp2,
+              paddingBottom: t.sp2,
+              width: "100%",
+              display: "flex",
+              flexGrow: 1
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsx(Xe, { windowSize: o, children: B.address.personalAddressText.replace(
+          "_name_",
+          w.user.firstName
+        ) })
+      ] }) : v === "company_address" ? /* @__PURE__ */ r.jsx(
+        he,
+        {
+          name: "company_address_value_field",
+          defaultValue: b,
+          isDisabled: "readonly",
+          placeholder: Qe,
+          style: {
+            minHeight: t.sp4,
+            paddingTop: t.sp2,
+            paddingBottom: t.sp2,
+            width: "100%",
+            display: "flex",
+            flexGrow: 1
+          }
+        }
+      ) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        /* @__PURE__ */ r.jsx(
+          he,
+          {
+            name: "custom_address_value_field",
+            defaultValue: O[e.lineId],
+            placeholder: Ur,
+            style: {
+              minHeight: t.sp4,
+              paddingTop: t.sp2,
+              paddingBottom: t.sp2,
+              width: "100%",
+              display: "flex",
+              flexGrow: 1
+            },
+            onClick: q
+          }
+        ),
+        /* @__PURE__ */ r.jsx(Xe, { windowSize: o, children: B.address.customAddressText })
+      ] }) }) })
+    ] })
+  ] });
+}, Wr = s.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: flex-end;
+  flex-grow: 1;
+`, qr = s(
+  ve
+)`
+  border-radius: ${t.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+`, Xe = s(Be)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  padding-right: 12px;
+  text-align: right;
+  ${(e) => `${Br.infoLabel.style(e.windowSize)}`};
+`, xe = s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, Er = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-height: ${t.sp6};
+  padding-right: ${t.sp2};
+  padding-top: ${t.sp2};
+  padding-bottom: ${t.sp2};
+
+  &: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;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .user-multi-select-field__control {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+`, Hr = s.div`
+  flex-grow: 1;
+  display: flex;
+  width: ${(e) => e.windowSize === "small" ? "auto" : `calc(100% - ${z.largeLabelWidth.valuePx(e.windowSize)})`};
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: ${(e) => z.labelMarginBottom.valuePx(e.windowSize)};
+`, Gr = s.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  color: ${(e) => e.theme.colors.primary};
+  padding-left: ${t.sp4};
+  width: 100%;
+`, Zr = s.div`
+  color: ${(e) => e.theme.colors.primary};
+  width: 100%;
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+`, Jr = s.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  &:hover {
+    fill: ${(e) => e.theme.colors.primary};
+  }
+`, {
+  spendManagement: {
+    chargeCard: { issueCard: Q }
+  }
+} = le.getLocalizedStrings(), ee = {
+  largeLabelWidth: new u(120, 120, 200),
+  labelMarginRight: new u(l[3], l[4]),
+  labelMarginBottom: new u(l[2], l[0]),
+  infoLabelMarginTop: new u(l[1], l[0])
+}, Dr = {
+  infoLabel: new be("smallRegular", "smallRegular")
+}, Kr = "creditCard.virtualCard.amount", Qr = "creditCard.virtualCard.cardName", Ye = "creditCard.virtualCard.users", Xr = "creditCard.virtualCard.frequency", Yr = ({
+  lineData: e,
+  issueCardSectionId: a,
+  cardHolderCandidates: n,
+  limit: m,
+  creditLimitFrequency: x,
+  allRoles: f,
+  allAccountingClasses: _,
+  activeChargeCardCount: b,
+  maxVirtualChargeCardPerUser: O
+}) => {
+  const R = Re(), c = ne(), { getValues: j } = Ce(), g = ee.largeLabelWidth.value(c), o = (i, h) => /* @__PURE__ */ r.jsx(ta, { isOptionSelected: h, children: ge(i) }), E = e.creditCard.virtualCard.amount, F = _e(m.amount), C = E != null && E > m.amount, q = C ? Q.amountExceedError.replace("_amount_", F) : void 0, W = (i) => {
+    let h = b[i]?.virtualCardCount ?? 0;
+    return j().lineInfo.forEach((A) => {
+      A.creditCard.cardType === "business_virtual_credit_card" && A.creditCard.virtualCard.users.selectedUsers.forEach((v) => {
+        v.userId === i && (h += 1);
+      });
+    }), h >= O;
+  };
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsxs(ia, { windowSize: c, children: [
+      /* @__PURE__ */ r.jsx(
+        me,
+        {
+          label: Q.cardholdersLabel,
+          htmlFor: p(a, Ye),
+          style: {
+            marginLeft: t.sp4,
+            marginRight: ee.labelMarginRight.value(c),
+            marginTop: t.sp2,
+            width: g
+          }
+        }
+      ),
+      /* @__PURE__ */ r.jsxs(aa, { windowSize: c, children: [
+        /* @__PURE__ */ r.jsx(
+          ut,
+          {
+            hideEmailTooltip: !0,
+            shouldHaveBackgroundColor: !1,
+            showBackgroundColorIfHasAnySelectedOption: !1,
+            placeholderLabel: Q.usersPlaceholder,
+            name: p(a, Ye),
+            value: {
+              allUsers: n,
+              selectedUsers: e.creditCard.virtualCard.users.selectedUsers,
+              allNonUsers: [],
+              selectedNonUsers: []
+            },
+            registerOptions: {
+              required: !0,
+              validate: (i) => i?.selectedUsers?.length > 0
+            },
+            valueToSubtitle: (i) => {
+              const h = f.find((A) => A.userId === i), $ = [];
+              return h != null && ($.push(/* @__PURE__ */ r.jsx(gt, { roles: h.userRoles })), h.accountingClassIDs.forEach((A) => {
+                const v = _.find(
+                  (P) => P.classId === A
+                );
+                v != null && v.className && $.push(v.className);
+              })), $;
+            },
+            disableCurrentOption: W,
+            disabledOptionHint: Q.cardLimitWarning,
+            customStyleConfig: {
+              placeholder: () => ({
+                margin: t.sp0
+              }),
+              input: (i, { selectProps: h }) => ({
+                display: h.menuIsOpen === !1 && e.creditCard.virtualCard.users.selectedUsers.length > 0 && c !== "small" ? "none" : "unset",
+                width: c === "small" && e.creditCard.virtualCard.users.selectedUsers.length > 0 ? "100%" : `calc(100% - ${t.sp5})`,
+                padding: e.creditCard.virtualCard.users.selectedUsers.length === 0 ? `${t.sp0} ${t.sp3}` : t.sp0,
+                ...re.standardRegular.cssObject,
+                height: t.sp4,
+                position: e.creditCard.virtualCard.users.selectedUsers.length === 0 || c === "small" && h.menuIsOpen === !1 ? "absolute" : "unset",
+                left: t.sp0,
+                ">input": {
+                  ...re.smallBold.cssObject,
+                  height: "100%",
+                  cursor: "pointer"
+                }
+              })
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsx(ra, { size: c, children: Q.additionalInfoVirtual })
+      ] })
+    ] }),
+    /* @__PURE__ */ r.jsx(Fe, {}),
+    /* @__PURE__ */ r.jsx(
+      Ae,
+      {
+        label: {
+          label: Q.cardNameLabel,
+          width: g
+        },
+        style: {
+          width: "auto",
+          paddingLeft: ee.labelMarginBottom.value(c)
+        },
+        text: {
+          type: "text",
+          name: p(a, Qr),
+          defaultValue: e.creditCard.virtualCard.cardName,
+          placeholder: Q.cardNamePlaceholder,
+          options: {
+            required: !0,
+            validate: (i) => i != null
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(Fe, {}),
+    /* @__PURE__ */ r.jsx(
+      Ue,
+      {
+        label: {
+          label: Q.amountLabel,
+          width: g
+        },
+        showAdditionalInfoLabel: C,
+        additionalInfoLabel: q,
+        formattedTextField: {
+          type: "number",
+          name: p(a, Kr),
+          defaultValue: e.creditCard.virtualCard.amount,
+          placeholder: Q.amountPlaceholder,
+          returnValueType: "floatValue",
+          prefix: "$",
+          allowNegative: !0,
+          isNumericString: !1,
+          registerOptions: {
+            required: !0,
+            validate: (i) => !!i && i > 0 && i <= m.amount
+          },
+          autoComplete: "off",
+          decimalSeparator: ".",
+          decimalScale: 2,
+          fixedDecimalScale: !1,
+          thousandSeparator: !0
+        },
+        style: {
+          width: "auto",
+          paddingLeft: ee.labelMarginBottom.value(c)
+        },
+        isFieldError: C
+      }
+    ),
+    /* @__PURE__ */ r.jsx(Fe, {}),
+    /* @__PURE__ */ r.jsx(ea, { size: c, children: /* @__PURE__ */ r.jsx(
+      la,
+      {
+        isDisabled: "readonly",
+        label: {
+          label: Q.frequencyLabel,
+          width: g,
+          style: {
+            marginLeft: t.sp0,
+            marginBottom: ee.labelMarginBottom.valuePx(c),
+            marginRight: ee.labelMarginRight.valuePx(c)
+          }
+        },
+        style: {
+          width: "100%",
+          padding: t.sp0,
+          display: c === "small" ? "flex" : "inherit"
+        },
+        infoLabelStyle: {
+          ...re.smallRegular.cssObject,
+          textAlign: "right",
+          paddingRight: t.sp3,
+          marginTop: ee.infoLabelMarginTop.valuePx(c),
+          color: R.colors.hero
+        },
+        valueToAdditionalLabel: (i) => ge(i),
+        singleSelectPickerField: {
+          name: p(a, Xr),
+          placeholder: Q.frequencyPlaceholder,
+          style: { position: "relative" },
+          capitalizeOptions: !0,
+          showSubLabelsInSingleValue: !1,
+          defaultValue: {
+            selectedOption: e.creditCard.virtualCard.frequency.selectedOption,
+            allOptions: x.map((i) => ({
+              label: i.name,
+              value: i.code
+            }))
+          },
+          valueToSubLabels: (i, h) => o(i, h),
+          textAlignment: "right",
+          registerOptions: {
+            required: !0,
+            validate: (i) => i != null && !!i.selectedOption
+          }
+        }
+      }
+    ) })
+  ] });
+}, ea = s.div`
+  display: flex;
+  flex-direction: row;
+  padding: ${t.sp2};
+  padding-left: ${t.sp4};
+  justify-content: space-between;
+  color: ${(e) => e.theme.colors.hero};
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`, ta = s(Be)`
+  color: ${(e) => e.isOptionSelected ? e.theme.colors.primary : e.theme.colors.grey1};
+`, ra = s.label`
+  color: ${(e) => e.theme.colors.hero};
+  width: 100%;
+  ${(e) => `${Dr.infoLabel.style(e.size)}`};
+  padding-right: ${t.sp3};
+  text-align: right;
+  white-space: pre-line;
+`, Fe = s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, aa = s.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => `calc(100% - ${ee.largeLabelWidth.valuePx(e.windowSize)})`};
+  align-items: flex-end;
+  flex-grow: 1;
+`, la = s(
+  ve
+)`
+  border-radius: ${t.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+`, ia = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-height: ${t.sp6};
+  padding-right: ${t.sp2};
+  padding-top: ${t.sp2};
+  padding-bottom: ${t.sp2};
+
+  &: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;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .user-multi-select-field__control {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+`, J = {
+  containerPaddingBottom: new u(l[3], l[4]),
+  sectionTitleContainerPadding: new u(l[2], l[3]),
+  largeLabelWidth: new u(120, 120, 200),
+  labelPaddingLeft: new u(l[3], l[4]),
+  radioLabelPaddingLeft: new u(l[4], l[4]),
+  radioLabelPaddingRight: new u(l[2], l[3]),
+  labelPaddingRight: new u(l[4], l[4]),
+  firstItemMarginTop: new u(l[4], l[2]),
+  paddingLeft: new u(l[3], l[5])
+}, {
+  spendManagement: {
+    chargeCard: { issueCard: H }
+  }
+} = le.getLocalizedStrings(), da = (e) => {
+  const {
+    lineData: a,
+    issueCardSectionId: n,
+    cardHolderCandidates: m,
+    userList: x,
+    limit: f,
+    creditLimitFrequency: _,
+    allRoles: b,
+    allAccountingClasses: O,
+    hasMultipleLineItems: R,
+    depositAccounts: c,
+    isIssuePhysicalCardEnabled: j,
+    isIssuePhysicalDebitCardEnabled: g,
+    isDebitCardFeatureEnabled: o,
+    isChargeCardFeatureEnabled: E,
+    isChargeCardSetupEnabled: F,
+    isDebitCardSetupEnabled: C,
+    lineIndex: q,
+    customAddress: W,
+    userAddress: i,
+    onRemoveIssueCardLine: h,
+    companyAddress: $,
+    maxPhysicalChargeCardPerUser: A,
+    maxVirtualChargeCardPerUser: v,
+    maxPhysicalDebitCardPerUser: P,
+    maxVirtualDebitCardPerUser: w,
+    cardsSectionRef: G,
+    openAddAddressDrawerHandler: D,
+    clearTentativeNameForLine: X,
+    activeChargeCardCount: d,
+    activeDebitCardCount: L
+  } = e, y = ne(), T = J.largeLabelWidth.value(y);
+  return /* @__PURE__ */ r.jsxs(
+    oa,
+    {
+      windowSize: y,
+      ref: G,
+      className: "cards-item",
+      children: [
+        R && /* @__PURE__ */ r.jsxs(ua, { windowSize: y, children: [
+          /* @__PURE__ */ r.jsx(pa, { windowSize: y, children: `${H.card} ${q + 1}` }),
+          /* @__PURE__ */ r.jsx(
+            ha,
+            {
+              className: "deleteIconWrapper",
+              windowSize: y,
+              "data-testid": Ie("delete-icon", a.lineId),
+              onClick: () => {
+                X?.(a.lineId ?? "1"), h(q);
+              },
+              children: /* @__PURE__ */ r.jsx(
+                qt,
+                {
+                  enterDelay: 600,
+                  title: H.deleteCard,
+                  placement: "left",
+                  children: /* @__PURE__ */ r.jsx(ma, {})
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r.jsxs(
+          na,
+          {
+            showTopMargin: !R,
+            windowSize: y,
+            children: [
+              o && C && E && F ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                /* @__PURE__ */ r.jsxs(sa, { children: [
+                  /* @__PURE__ */ r.jsx(
+                    K,
+                    {
+                      isContainerClickable: !0,
+                      label: {
+                        label: H.creditCard
+                      },
+                      style: {
+                        padding: `${t.sp3} ${t.sp0}`,
+                        paddingLeft: J.labelPaddingLeft.value(y),
+                        borderTopLeftRadius: "inherit"
+                      },
+                      showOutline: !0,
+                      radioField: {
+                        name: p(n, "chargeCardType"),
+                        id: `${p(n, "chargeCardType")}.creditCard`,
+                        value: "credit_card",
+                        radioSize: "small"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ r.jsx(ca, {}),
+                  /* @__PURE__ */ r.jsx(
+                    K,
+                    {
+                      isContainerClickable: !0,
+                      label: {
+                        label: H.debitCard
+                      },
+                      style: {
+                        padding: `${t.sp3} ${t.sp0}`,
+                        paddingLeft: J.labelPaddingLeft.value(y),
+                        borderTopRightRadius: "inherit"
+                      },
+                      showOutline: !0,
+                      radioField: {
+                        name: p(n, "chargeCardType"),
+                        id: `${p(n, "chargeCardType")}.debitCard`,
+                        value: "debit_card",
+                        radioSize: "small"
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ r.jsx(ke, {})
+              ] }) : null,
+              a.chargeCardType === "credit_card" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                /* @__PURE__ */ r.jsxs(
+                  tt,
+                  {
+                    size: y,
+                    isDebitCardSetupEnabled: C,
+                    isDebitCardFeatureEnabled: o,
+                    children: [
+                      /* @__PURE__ */ r.jsx(
+                        me,
+                        {
+                          label: H.type,
+                          htmlFor: p(n, "creditCard.cardType"),
+                          style: {
+                            padding: `${t.sp2} ${t.sp0}`,
+                            paddingLeft: J.radioLabelPaddingLeft.value(y),
+                            paddingRight: J.radioLabelPaddingRight.value(y),
+                            width: "fit-content"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ r.jsxs(et, { labelWidth: T, children: [
+                        /* @__PURE__ */ r.jsx(
+                          K,
+                          {
+                            label: {
+                              label: H.virtualCard
+                            },
+                            style: {
+                              width: "auto"
+                            },
+                            radioField: {
+                              name: p(n, "creditCard.cardType"),
+                              id: `${p(n, "creditCard.cardType")}.${H.virtualCard}`,
+                              value: "business_virtual_credit_card",
+                              style: {
+                                height: t.sp3,
+                                width: t.sp3,
+                                opacity: j ? 1 : 0
+                              },
+                              radioSize: "small"
+                            }
+                          }
+                        ),
+                        j && /* @__PURE__ */ r.jsx(
+                          K,
+                          {
+                            label: {
+                              label: H.physicalCard
+                            },
+                            style: {
+                              width: "auto",
+                              paddingLeft: J.paddingLeft.valuePx(y)
+                            },
+                            radioField: {
+                              name: p(
+                                n,
+                                "creditCard.cardType"
+                              ),
+                              id: `${p(n, "creditCard.cardType")}.${H.physicalCard}`,
+                              value: "business_physical_credit_card",
+                              style: {
+                                height: t.sp3,
+                                width: t.sp3
+                              },
+                              radioSize: "small"
+                            }
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ r.jsx(ke, {}),
+                a.creditCard.cardType === "business_physical_credit_card" ? /* @__PURE__ */ r.jsx(
+                  cr,
+                  {
+                    lineData: a,
+                    issueCardSectionId: `${n}`,
+                    limit: f,
+                    creditLimitFrequency: _,
+                    companyAddress: $,
+                    openAddAddressDrawerHandler: D,
+                    customAddress: W,
+                    userAddress: i,
+                    activeChargeCardCount: d,
+                    userList: x,
+                    allRoles: b,
+                    allAccountingClasses: O,
+                    maxPhysicalChargeCardPerUser: A
+                  }
+                ) : /* @__PURE__ */ r.jsx(
+                  Yr,
+                  {
+                    lineData: a,
+                    issueCardSectionId: `${n}`,
+                    cardHolderCandidates: m,
+                    limit: f,
+                    creditLimitFrequency: _,
+                    allRoles: b,
+                    allAccountingClasses: O,
+                    activeChargeCardCount: d,
+                    maxVirtualChargeCardPerUser: v
+                  }
+                )
+              ] }) : null,
+              a.chargeCardType === "debit_card" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                /* @__PURE__ */ r.jsxs(
+                  tt,
+                  {
+                    size: y,
+                    isDebitCardSetupEnabled: C,
+                    isDebitCardFeatureEnabled: o,
+                    children: [
+                      /* @__PURE__ */ r.jsx(
+                        me,
+                        {
+                          label: H.type,
+                          htmlFor: p(n, "debitCard.cardType"),
+                          style: {
+                            padding: `${t.sp2} ${t.sp0}`,
+                            paddingLeft: J.radioLabelPaddingLeft.value(y),
+                            paddingRight: J.radioLabelPaddingRight.value(y),
+                            width: "fit-content"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ r.jsxs(et, { labelWidth: T, children: [
+                        /* @__PURE__ */ r.jsx(
+                          K,
+                          {
+                            label: {
+                              label: H.virtualCard
+                            },
+                            style: {
+                              width: "auto"
+                            },
+                            radioField: {
+                              name: p(n, "debitCard.cardType"),
+                              id: `${p(n, "debitCard.cardType")}.${H.virtualCard}`,
+                              value: "business_virtual_debit_card",
+                              style: {
+                                height: t.sp3,
+                                width: t.sp3,
+                                opacity: g ? 1 : 0
+                              },
+                              radioSize: "small"
+                            }
+                          }
+                        ),
+                        g && /* @__PURE__ */ r.jsx(
+                          K,
+                          {
+                            label: {
+                              label: H.physicalCard
+                            },
+                            style: {
+                              width: "auto",
+                              paddingLeft: J.paddingLeft.valuePx(y)
+                            },
+                            radioField: {
+                              name: p(
+                                n,
+                                "debitCard.cardType"
+                              ),
+                              id: `${p(n, "debitCard.cardType")}.${H.physicalCard}`,
+                              value: "business_physical_debit_card",
+                              style: {
+                                height: t.sp3,
+                                width: t.sp3
+                              },
+                              radioSize: "small"
+                            }
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ r.jsx(ke, {}),
+                a.debitCard.cardType === "business_physical_debit_card" ? /* @__PURE__ */ r.jsx(
+                  Vr,
+                  {
+                    lineData: a,
+                    issueCardSectionId: `${n}`,
+                    creditLimitFrequency: _,
+                    companyAddress: $,
+                    openAddAddressDrawerHandler: D,
+                    customAddress: W,
+                    userAddress: i,
+                    depositAccounts: c,
+                    activeDebitCardCount: L,
+                    userList: x,
+                    allRoles: b,
+                    allAccountingClasses: O,
+                    maxPhysicalDebitCardPerUser: P
+                  }
+                ) : /* @__PURE__ */ r.jsx(
+                  wr,
+                  {
+                    lineData: a,
+                    issueCardSectionId: `${n}`,
+                    cardHolderCandidates: m,
+                    depositAccounts: c,
+                    creditLimitFrequency: _,
+                    allRoles: b,
+                    allAccountingClasses: O,
+                    activeDebitCardCount: L,
+                    maxVirtualDebitCardPerUser: w
+                  }
+                )
+              ] }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, sa = s.div`
+  display: flex;
+  flex-direction: row;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+`, et = s.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: ${t.sp6};
+  align-items: center;
+`, oa = s.div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${(e) => J.containerPaddingBottom.valuePx(e.windowSize)};
+  .deleteIconWrapper {
+    ${(e) => e.windowSize === "small" && " display: block; "}
+  }
+  &:hover {
+    .deleteIconWrapper {
+      display: block;
+    }
+  }
+`, na = s.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${t.sp0} 1px 2px ${t.sp0} ${e.theme.colors.issueChargeCardBackgroundShadow}`};
+  border-radius: ${t.sp2};
+  margin-top: ${(e) => e.showTopMargin ? J.firstItemMarginTop.valuePx(e.windowSize) : t.sp0};
+`, ca = s.div`
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-width: 1px;
+  max-width: 1px;
+`, ke = s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, tt = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-height: ${t.sp6};
+  padding-right: ${(e) => J.labelPaddingRight.valuePx(e.size)};
+  padding-top: ${t.sp2};
+  padding-bottom: ${t.sp2};
+  align-items: center;
+  border-top-left-radius: ${(e) => e.isDebitCardFeatureEnabled && e.isDebitCardSetupEnabled ? "unset" : "inherit"};
+  border-top-right-radius: ${(e) => e.isDebitCardFeatureEnabled && e.isDebitCardSetupEnabled ? "unset" : "inherit"};
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+  }
+`, ua = s.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${(e) => `${J.sectionTitleContainerPadding.valuePx(e.windowSize)} ${t.sp0}`};
+`, pa = s(Et)`
+  color: ${(e) => e.theme.colors.primary};
+`, ha = s.div`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  cursor: pointer;
+  display: none;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${ae.important};
+  }
+`, ma = s(Ht)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  cursor: pointer;
+`, Te = {
+  marginTop: new u(l[3], l[4]),
+  addCardButtonMarginBottom: new u(l[3], l[4]),
+  addCardButtonMarginTop: new u(l[2], l[0]),
+  addCardButtonPaddingTopBottom: new u(l[2], l[2]),
+  addCardButtonPaddingLeftRight: new u(l[3], l[4])
+}, ga = {
+  title: new be("standardMedium", "standardMedium")
+}, ba = ({
+  issueChargeCards: e,
+  issueCardSectionId: a,
+  cardHolderCandidates: n,
+  userList: m,
+  limit: x,
+  creditLimitFrequency: f,
+  allRoles: _,
+  allAccountingClasses: b,
+  isIssuePhysicalCardEnabled: O,
+  isIssuePhysicalDebitCardEnabled: R,
+  isDebitCardFeatureEnabled: c,
+  isChargeCardFeatureEnabled: j,
+  isChargeCardSetupEnabled: g,
+  isDebitCardSetupEnabled: o,
+  defaultCardType: E,
+  getInitialLineFormData: F,
+  clearTentativeNameForLine: C,
+  companyAddress: q,
+  containerRef: W,
+  cardsSectionRef: i,
+  openAddAddressDrawerHandler: h
+}) => {
+  const { control: $, watch: A, setValue: v } = Ce(), { fields: P } = Ut({
+    name: a,
+    control: $
+  }), w = A(
+    a,
+    P
+  ), G = Math.max(
+    ...Object.keys(e.localData ?? {}).map(
+      (y) => Number(y)
+    ),
+    0
+  ), D = () => {
+    const y = w[w.length - 1], T = F(
+      w.length,
+      Number(y.lineId) > G ? String(Number(y.lineId) + 1) : String(G + 1),
+      n,
+      f,
+      m,
+      e.depositAccounts,
+      j,
+      c,
+      g,
+      o,
+      q,
+      E
+    );
+    v(a, [...w, T]), setTimeout(() => {
+      Gt(
+        i.current,
+        W.current
+      );
+    }, 50);
+  }, X = (y) => {
+    v(
+      a,
+      w.filter((T, k) => k !== y)
+    );
+  }, d = ne(), {
+    spendManagement: {
+      chargeCard: { issueCard: L }
+    }
+  } = le.getLocalizedStrings();
+  return /* @__PURE__ */ r.jsxs(fa, { ref: W, children: [
+    w.map((y, T) => /* @__PURE__ */ r.jsx(
+      da,
+      {
+        lineIndex: T,
+        lineData: y,
+        issueCardSectionId: `${a}.${T}`,
+        cardHolderCandidates: n,
+        userList: m,
+        limit: x,
+        creditLimitFrequency: f,
+        allRoles: _,
+        allAccountingClasses: b,
+        hasMultipleLineItems: w.length > 1,
+        clearTentativeNameForLine: C,
+        onRemoveIssueCardLine: X,
+        companyAddress: q,
+        cardsSectionRef: i,
+        openAddAddressDrawerHandler: h,
+        depositAccounts: e.depositAccounts,
+        customAddress: e.customAddress,
+        userAddress: e.userAddress,
+        activeChargeCardCount: e.activeChargeCardCount,
+        activeDebitCardCount: e.activeDebitCardCountByDepositAccountId,
+        maxPhysicalChargeCardPerUser: e.chargeCardConfig.creditTerm.maxPhysicalChargeCardPerUser,
+        maxVirtualChargeCardPerUser: e.chargeCardConfig.creditTerm.maxVirtualChargeCardPerUser,
+        maxVirtualDebitCardPerUser: e.chargeCardConfig.creditTerm.maxVirtualDebitCardPerUser,
+        maxPhysicalDebitCardPerUser: e.chargeCardConfig.creditTerm.maxPhysicalDebitCardPerUser,
+        isIssuePhysicalCardEnabled: O,
+        isIssuePhysicalDebitCardEnabled: R,
+        isDebitCardFeatureEnabled: c,
+        isChargeCardFeatureEnabled: j,
+        isChargeCardSetupEnabled: g,
+        isDebitCardSetupEnabled: o
+      },
+      T
+    )),
+    /* @__PURE__ */ r.jsxs(
+      ya,
+      {
+        windowSize: d,
+        onClick: () => {
+          D();
+        },
+        "data-testid": Ie("add-card-button"),
+        children: [
+          /* @__PURE__ */ r.jsx(Ca, {}),
+          /* @__PURE__ */ r.jsx(xa, { windowSize: d, children: L.addCard })
+        ]
+      }
+    )
+  ] });
+}, fa = s.div`
+  display: flex;
+  flex-direction: column;
+`, ya = s.div`
+  padding: ${(e) => `${Te.addCardButtonPaddingTopBottom.valuePx(
+  e.windowSize
+)} ${Te.addCardButtonPaddingLeftRight.valuePx(e.windowSize)}`};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid
+    ${(e) => e.hasError === !0 ? ae.important : e.theme.colors.grey1};
+  border-radius: ${t.sp2};
+  color: ${(e) => e.hasError === !0 ? ae.important : e.theme.colors.primary};
+  cursor: pointer;
+  &:hover {
+    border: 1px solid
+      ${(e) => e.hasError === !0 ? ae.important : e.theme.colors.primary};
+  }
+  margin-bottom: ${(e) => Te.addCardButtonMarginBottom.valuePx(e.windowSize)};
+  margin-top: ${(e) => Te.addCardButtonMarginTop.valuePx(e.windowSize)};
+`, xa = s(ht)`
+  ${(e) => `${ga.title.style(e.windowSize)}`};
+  color: inherit;
+`, Ca = s(pt)`
+  margin-right: ${t.sp2};
+  width: ${t.sp3};
+  height: ${t.sp3};
+`, va = "user", rt = "addressType", at = "physicalCard", lt = "virtualCard", ft = "lineInfo", it = "issueCardDetailPage", $a = 100, dt = (e) => `${e}_form`, {
+  common: te,
+  spendManagement: {
+    chargeCard: { issueCard: Pe }
+  }
+} = le.getLocalizedStrings(), yt = (e) => e != null ? {
+  amount: e,
+  currencyCode: te.currency.currencyCode,
+  currencySymbol: te.currency.currencySymbol
+} : void 0, st = (e, a = !1) => {
+  const n = {
+    userIds: e.users.selectedUsers.map((m) => m.userId),
+    cardName: e.cardName,
+    amount: yt(e.amount),
+    frequency: e.frequency.selectedOption
+  };
+  return a ? {
+    ...n,
+    connectedAccountId: e.connectedAccount.selectedOption
+  } : n;
+}, ot = (e, a = !1) => {
+  const n = {
+    userId: e.user.selectedUser,
+    cardName: e.cardName,
+    amount: yt(e.amount),
+    frequency: e.frequency.selectedOption,
+    addressType: e.addressType,
+    addressId: e.addressId
+  };
+  return a ? {
+    ...n,
+    connectedAccountId: e.connectedAccount.selectedOption
+  } : n;
+}, oe = {
+  containerPaddingLeft: new u(l[4], l[6], l[8]),
+  containerPaddingRight: new u(l[4], l[6], l[8]),
+  navbarHeight: new u(44, l[9]),
+  navBarContainerPaddingXaxis: new u(10, l[4]),
+  closeIconMarginRight: new u(l[4], l[8]),
+  rightSectionWidth: new u(l[12], 58),
+  footerTopPadding: new u(l[3], 10)
+}, wa = {
+  title: new be("standardMedium", "largeSemiBold")
+}, Da = ({
+  issueChargeCards: e,
+  cardHolderCandidates: a,
+  userList: n,
+  companyName: m,
+  allRoles: x,
+  allAccountingClasses: f,
+  isIssuePhysicalCardEnabled: _,
+  isIssuePhysicalDebitCardEnabled: b,
+  isDebitCardFeatureEnabled: O,
+  isChargeCardFeatureEnabled: R,
+  isDebitCardSetupEnabled: c,
+  isChargeCardSetupEnabled: j,
+  signedInUser: g,
+  defaultCardType: o,
+  onSaveChangesToLocalStore: E,
+  onIssueCardClick: F,
+  onDismissClick: C,
+  resetCustomAddressByLineID: q,
+  handleZeniLogoClick: W,
+  openAddAddressDrawerHandler: i,
+  clearTentativeNameForLine: h
+}) => {
+  const {
+    chargeCardConfig: { creditLimitFrequency: $ },
+    creditAccount: { limit: A },
+    companyAddress: v
+  } = e, P = ne(), w = we(null), G = we(null), [D, X] = ie(!0), [d, L] = ie(!0), y = we(null), T = we(null), [k, fe] = ie(0), [Me, vt] = ie(0), [$e, $t] = ie(0), [wt, Lt] = ie(0), [St, jt] = ie(e.localData);
+  Le(() => {
+    const S = new IntersectionObserver(
+      (N) => {
+        N.forEach((ce) => {
+          ce.target === w.current && X(ce.isIntersecting), ce.target === G.current && L(ce.isIntersecting);
+        });
+      },
+      { threshold: 0.1 }
+    ), I = w.current, U = G.current;
+    return I && S.observe(I), U && S.observe(U), () => {
+      I && S.unobserve(I), U && S.unobserve(U);
+    };
+  }, []);
+  const ye = Bt({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: Ee(
+      () => ct(
+        e.localData,
+        a,
+        $,
+        n,
+        e.depositAccounts,
+        R,
+        O,
+        j,
+        c,
+        v,
+        o
+      ),
+      [
+        e,
+        a,
+        $,
+        n,
+        R,
+        O,
+        j,
+        c,
+        v,
+        o
+      ]
+    ),
+    values: Ee(
+      () => ct(
+        e.localData,
+        a,
+        $,
+        n,
+        e.depositAccounts,
+        R,
+        O,
+        j,
+        c,
+        v,
+        o
+      ),
+      [
+        e.localData,
+        e.depositAccounts,
+        a,
+        $,
+        n,
+        R,
+        O,
+        j,
+        c,
+        v,
+        o
+      ]
+    )
+  }), { isValid: Tt } = ye.formState, Ve = (S) => S.map((I) => ({
+    lineId: I.lineId,
+    chargeCardType: I.chargeCardType,
+    creditCard: {
+      cardType: I.creditCard.cardType,
+      virtualCard: st(I.creditCard[lt]),
+      physicalCard: ot(I.creditCard[at])
+    },
+    debitCard: {
+      cardType: I.debitCard.cardType,
+      virtualCard: st(I.debitCard[lt], !0),
+      physicalCard: ot(
+        I.debitCard[at],
+        !0
+      )
+    }
+  })), Pt = async (S, I) => {
+    if (S != null) {
+      const { lineInfo: U } = I, N = Number(S.split(".")[1]);
+      if (S.includes("cardName") || S.includes("amount"))
+        return;
+      if (S.includes("physicalCard.user")) {
+        const ue = He(S.split(".")[2]);
+        U[N][ue].physicalCard.addressType = void 0, U[N].creditCard.physicalCard.addressId = void 0;
+        const pe = U[N].lineId;
+        e.customAddress[pe]?.addressId != null && q(pe, ue);
+      }
+      if (S.includes("physicalCard.addressType")) {
+        const ue = He(S.split(".")[2]), pe = U[N][ue].physicalCard;
+        if (pe[rt] === "card_holder_personal_address") {
+          const ze = pe[va].selectedUser;
+          if (ze != null) {
+            const At = e.userAddress[ze];
+            U[N][ue].physicalCard.addressId = At.addressId;
+          }
+        } else pe[rt] === "company_address" && (U[N][ue].physicalCard.addressId = v?.addressId);
+      }
+      const ce = Ve(U);
+      E(ce);
+    }
+  };
+  Le(() => {
+    const S = ye.watch((I, { name: U }) => {
+      U != null && I != null && Mt(
+        () => Pt(U, I)
+      );
+    });
+    return () => {
+      S.unsubscribe();
+    };
+  });
+  const It = ye.handleSubmit(() => {
+    if (Tt) {
+      const { lineInfo: S } = ye.getValues(), I = Ve(S);
+      E(I), F();
+    }
+  }), Ot = e.issueCardStatus.error?.message ?? te.strings.empty, Rt = e.issueCardStatus.error?.title ?? te.strings.empty, Ne = zt(() => {
+    fe(T.current?.scrollTop ?? 0), Math.abs(k - Me) > $a && vt(k), document.querySelectorAll(".cards-item").forEach((I, U) => {
+      const N = I.getBoundingClientRect();
+      N.top >= 0 && N.bottom <= window.innerHeight && $t(U), N.top < window.innerHeight && N.bottom > 0 && Lt(U);
+    });
+  }, [k, Me]);
+  Le(() => {
+    const S = T.current;
+    return S?.addEventListener("scroll", Ne), () => {
+      S?.removeEventListener("scroll", Ne);
+    };
+  }, [Ne, T]);
+  const We = e.localData;
+  Le(() => {
+    if ($e !== null) {
+      const S = Math.max(0, $e - 2), I = $e + 1, U = We.slice(S, I);
+      jt(U);
+    }
+  }, [$e, wt, We]);
+  const _t = ((S, I, U) => S.length === 0 ? [
+    {
+      cardId: "1",
+      cardType: Ct(
+        R,
+        I,
+        j,
+        c,
+        U
+      ) === "debit_card" ? "business_virtual_debit_card" : "business_virtual_credit_card",
+      cardUUID: "1",
+      limit: {
+        amount: 0,
+        currencyCode: te.currency.currencyCode,
+        currencySymbol: te.currency.currencySymbol
+      }
+    }
+  ] : S.map((N) => ({
+    cardId: N.lineId,
+    cardType: N.chargeCardType === "credit_card" ? N.creditCard.cardType : N.debitCard.cardType,
+    cardUUID: N.lineId,
+    //default limit which is not being used
+    limit: {
+      amount: 0,
+      currencyCode: te.currency.currencyCode,
+      currencySymbol: te.currency.currencySymbol
+    }
+  })))(
+    St,
+    O,
+    o
+  ), qe = !(D && d) || P === "small";
+  return /* @__PURE__ */ r.jsxs(Ta, { windowSize: P, children: [
+    P !== "small" ? /* @__PURE__ */ r.jsxs(Sa, { children: [
+      /* @__PURE__ */ r.jsxs(Ba, { children: [
+        /* @__PURE__ */ r.jsx(
+          Ma,
+          {
+            onClick: W,
+            "data-testid": Ie("issue-card-nav-bar-zeni-logo")
+          }
+        ),
+        /* @__PURE__ */ r.jsxs(
+          Na,
+          {
+            showContent: (
+              //show company name only when signed in user is zeni email
+              g?.userEmailDomain === "zeni.ai"
+            ),
+            children: [
+              /* @__PURE__ */ r.jsx(za, {}),
+              /* @__PURE__ */ r.jsx(Fa, { children: m })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r.jsx(
+        Zt,
+        {
+          cardArrProp: _t,
+          insertFromTop: k < Me,
+          containerScale: 1.2
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ r.jsxs(ja, { windowSize: P, children: [
+      /* @__PURE__ */ r.jsxs(
+        Ia,
+        {
+          windowSize: P,
+          shouldShowTitle: qe,
+          children: [
+            qe && /* @__PURE__ */ r.jsx(Pa, { windowSize: P, children: Pe.title }),
+            /* @__PURE__ */ r.jsx(
+              Oa,
+              {
+                windowSize: P,
+                onClick: C,
+                "data-testid": Ie("issue-card-nav-bar-close")
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ r.jsxs(La, { windowSize: P, ref: T, children: [
+        P !== "small" ? /* @__PURE__ */ r.jsx(Ra, { ref: w, children: Pe.title }) : null,
+        e.issueCardStatus.fetchState === "Error" ? /* @__PURE__ */ r.jsxs(_a, { children: [
+          /* @__PURE__ */ r.jsx(Ua, {}),
+          /* @__PURE__ */ r.jsxs(Aa, { children: [
+            /* @__PURE__ */ r.jsx(nt, { style: { fontWeight: Jt.medium }, children: Rt }),
+            /* @__PURE__ */ r.jsx(nt, { children: Ot })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ r.jsx(Nt, { ...ye, children: /* @__PURE__ */ r.jsx("form", { id: dt(it), onSubmit: It, children: /* @__PURE__ */ r.jsx(
+          ba,
+          {
+            issueChargeCards: e,
+            issueCardSectionId: ft,
+            cardHolderCandidates: a,
+            userList: n,
+            limit: A,
+            creditLimitFrequency: $,
+            allRoles: x,
+            allAccountingClasses: f,
+            getInitialLineFormData: xt,
+            clearTentativeNameForLine: h,
+            companyAddress: v,
+            containerRef: T,
+            cardsSectionRef: y,
+            openAddAddressDrawerHandler: i,
+            isIssuePhysicalCardEnabled: _,
+            isIssuePhysicalDebitCardEnabled: b,
+            isDebitCardFeatureEnabled: O,
+            isChargeCardFeatureEnabled: R,
+            isChargeCardSetupEnabled: j,
+            isDebitCardSetupEnabled: c,
+            defaultCardType: o
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ r.jsx(
+        Dt,
+        {
+          style: {
+            zIndex: 1,
+            padding: oe.footerTopPadding.valuePx(P)
+          },
+          formId: dt(it),
+          helperStyle: { paddingTop: t.sp0, paddingBottom: t.sp0 },
+          primaryBtn: {
+            label: Pe.primaryBtnText,
+            isLoading: e.issueCardStatus.fetchState === "In-Progress",
+            style: { minWidth: 110 }
+          },
+          cancelBtn: {
+            label: Pe.secondaryBtnText,
+            onClick: C,
+            style: {
+              minWidth: 110
+            }
+          },
+          separatorStyle: { marginRight: t.sp4 }
+        }
+      )
+    ] })
+  ] });
+}, La = s.div`
+  padding-left: ${(e) => oe.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => oe.containerPaddingRight.valuePx(e.windowSize)};
+  height: 100%;
+  overflow-y: auto;
+`, Sa = s.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  width: 42%;
+  background-color: ${(e) => e.theme.colors.background};
+  margin-top: unset;
+`, ja = s.div`
+  background-color: ${(e) => e.theme.colors.grey4};
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => oe.rightSectionWidth.valuePercentage(e.windowSize)};
+  overflow: auto;
+  box-shadow: ${(e) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, Ta = s.div`
+  display: flex;
+  height: 100vh;
+  flex-direction: row;
+  width: 100vw;
+  overflow-y: scroll;
+`, Pa = s(ht)`
+  ${(e) => `${wa.title.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  padding-left: ${(e) => oe.containerPaddingLeft.valuePx(e.windowSize)};
+`, Ia = s.div`
+  position: sticky;
+  display: flex;
+  justify-content: ${(e) => e.shouldShowTitle ? "space-between" : "flex-end"};
+  align-items: center;
+  width: 100%;
+  min-height: ${(e) => oe.navbarHeight.valuePx(e.windowSize)};
+  top: ${t.sp0};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, Oa = s(Xt)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${t.sp4};
+  height: ${t.sp4};
+  min-height: ${t.sp4};
+  margin-right: ${(e) => oe.closeIconMarginRight.valuePx(e.windowSize)};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+  padding: 0;
+`, Ra = s(Yt)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${t.sp3};
+  margin-bottom: ${t.sp3};
+`, _a = s.div`
+  background-color: ${ae.alertLight};
+  border: 1px solid ${ae.brandColorGoldDark};
+  border-radius: ${t.sp2};
+  display: flex;
+  gap: ${t.sp2};
+  padding: ${t.sp3} ${t.sp4};
+  margin-bottom: ${t.sp2};
+`, Aa = s.div`
+  display: flex;
+  flex-direction: column;
+`, nt = s(tr)`
+  color: ${ae.brandColorGoldDark};
+`, Ua = s(er)`
+  min-width: ${t.sp4};
+  min-height: ${t.sp4};
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${ae.brandColorGoldDark};
+`, Ba = s.div`
+  margin-bottom: ${t.sp3};
+  margin-top: ${t.sp3};
+  margin-left: ${t.sp8};
+  position: relative;
+  display: flex;
+  align-items: center;
+`, Ma = s(Kt)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.brandColorJade};
+`, Na = s.div`
+  display: ${(e) => e.showContent ? "flex" : "none"};
+  align-items: center;
+`, za = s.div`
+  width: 1px;
+  height: ${t.sp3};
+  margin: ${t.sp0} ${t.sp3};
+  background-color: ${(e) => e.theme.colors.hero};
+`, Fa = s(Qt)`
+  color: ${(e) => e.theme.colors.primary};
+`, ka = (e, a, n, m, x, f, _) => ({
+  lineIndex: a,
+  lineId: e.lineId ?? String(a + 1),
+  chargeCardType: e.chargeCardType,
+  creditCard: {
+    cardType: e.creditCard.cardType,
+    virtualCard: {
+      cardName: e.creditCard.virtualCard?.cardName ?? "",
+      amount: e.creditCard.virtualCard?.amount?.amount ?? void 0,
+      users: {
+        allUsers: n,
+        selectedUsers: n.filter(
+          (b) => e.creditCard.virtualCard?.userIds.includes(b.userId)
+        ),
+        allNonUsers: [],
+        selectedNonUsers: []
+      },
+      frequency: {
+        allOptions: m.map((b) => ({
+          label: b.name,
+          value: b.code
+        })),
+        selectedOption: e.creditCard.virtualCard?.frequency
+      }
+    },
+    physicalCard: {
+      cardName: e.creditCard.physicalCard?.cardName ?? "",
+      amount: e.creditCard.physicalCard?.amount?.amount ?? void 0,
+      user: {
+        allUsers: x,
+        selectedUser: e.creditCard.physicalCard.userId
+      },
+      frequency: {
+        allOptions: m.map((b) => ({
+          label: b.name,
+          value: b.code
+        })),
+        selectedOption: e.creditCard.physicalCard?.frequency
+      },
+      addressType: e.creditCard.physicalCard?.addressType,
+      addressId: e.creditCard.physicalCard?.addressId ?? _?.addressId
+    }
+  },
+  debitCard: {
+    cardType: e.debitCard.cardType,
+    virtualCard: {
+      cardName: e.debitCard.virtualCard?.cardName ?? "",
+      amount: e.debitCard.virtualCard?.amount?.amount ?? void 0,
+      users: {
+        allUsers: n,
+        selectedUsers: n.filter(
+          (b) => e.debitCard.virtualCard?.userIds.includes(b.userId)
+        ),
+        allNonUsers: [],
+        selectedNonUsers: []
+      },
+      connectedAccount: {
+        allOptions: f.map((b) => ({
+          label: b.accountName,
+          value: b.id
+        })),
+        selectedOption: e.debitCard.virtualCard.connectedAccountId
+      },
+      frequency: {
+        allOptions: m.map((b) => ({
+          label: b.name,
+          value: b.code
+        })),
+        selectedOption: e.debitCard.virtualCard?.frequency
+      }
+    },
+    physicalCard: {
+      cardName: e.debitCard.physicalCard?.cardName ?? "",
+      amount: e.debitCard.physicalCard?.amount?.amount ?? void 0,
+      user: {
+        allUsers: x,
+        selectedUser: e.debitCard.physicalCard.userId
+      },
+      connectedAccount: {
+        allOptions: f.map((b) => ({
+          label: b.accountName,
+          value: b.id
+        })),
+        selectedOption: e.debitCard.physicalCard.connectedAccountId
+      },
+      frequency: {
+        allOptions: m.map((b) => ({
+          label: b.name,
+          value: b.code
+        })),
+        selectedOption: e.debitCard.physicalCard?.frequency
+      },
+      addressType: e.debitCard.physicalCard?.addressType,
+      addressId: e.debitCard.physicalCard?.addressId ?? _?.addressId
+    }
+  }
+}), xt = (e, a, n, m, x, f, _, b, O, R, c, j) => ({
+  lineIndex: e,
+  lineId: a,
+  chargeCardType: Ct(
+    _,
+    b,
+    O,
+    R,
+    j
+  ),
+  creditCard: {
+    cardType: "business_virtual_credit_card",
+    physicalCard: {
+      cardName: "",
+      amount: void 0,
+      user: {
+        allUsers: x,
+        selectedUser: void 0
+      },
+      frequency: {
+        allOptions: m.map((g) => ({
+          label: g.name,
+          value: g.code
+        })),
+        selectedOption: "monthly"
+      },
+      addressType: void 0,
+      addressId: c?.addressId
+    },
+    virtualCard: {
+      cardName: "",
+      amount: void 0,
+      users: {
+        allUsers: n,
+        selectedUsers: [],
+        allNonUsers: [],
+        selectedNonUsers: []
+      },
+      frequency: {
+        allOptions: m.map((g) => ({
+          label: g.name,
+          value: g.code
+        })),
+        selectedOption: "monthly"
+      }
+    }
+  },
+  debitCard: {
+    cardType: "business_virtual_debit_card",
+    physicalCard: {
+      cardName: "",
+      amount: void 0,
+      user: {
+        allUsers: x,
+        selectedUser: void 0
+      },
+      frequency: {
+        allOptions: m.map((g) => ({
+          label: g.name,
+          value: g.code
+        })),
+        selectedOption: "monthly"
+      },
+      addressType: void 0,
+      addressId: c?.addressId,
+      connectedAccount: {
+        allOptions: f.map((g) => ({
+          label: g.accountName,
+          value: g.id
+        })),
+        selectedOption: f.length === 1 ? f[0].id : void 0
+      }
+    },
+    virtualCard: {
+      cardName: "",
+      amount: void 0,
+      users: {
+        allUsers: n,
+        selectedUsers: [],
+        allNonUsers: [],
+        selectedNonUsers: []
+      },
+      frequency: {
+        allOptions: m.map((g) => ({
+          label: g.name,
+          value: g.code
+        })),
+        selectedOption: "monthly"
+      },
+      connectedAccount: {
+        allOptions: f.map((g) => ({
+          label: g.accountName,
+          value: g.id
+        })),
+        selectedOption: f.length === 1 ? f[0].id : void 0
+      }
+    }
+  }
+}), Ct = (e, a, n, m, x) => {
+  if (x != null) {
+    if (a && m && x === "debitCard")
+      return "debit_card";
+    if (e && n && x === "creditCard")
+      return "credit_card";
+  }
+  return a && m && (!e || !n) ? "debit_card" : "credit_card";
+}, ct = (e, a, n, m, x, f, _, b, O, R, c) => {
+  const j = [];
+  return Object.values(e).forEach((g, o) => {
+    g?.lineId != null && j.push(
+      ka(
+        g,
+        o,
+        a,
+        n,
+        m,
+        x,
+        R
+      )
+    );
+  }), j.length === 0 && j.push(
+    xt(
+      0,
+      "1",
+      a,
+      n,
+      m,
+      x,
+      f,
+      _,
+      b,
+      O,
+      R,
+      c
+    )
+  ), {
+    [ft]: j
+  };
+};
+export {
+  Da as default,
+  xt as getInitialLineFormData,
+  dt as uniqueFormName
+};