@zeniai/web-components 3.16.52 → 3.16.54

package/dist/IssueChargeCardPage-CdoWbyWu.js

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