@zeniai/web-components 3.16.96 → 3.16.98

package/dist/LockCardPage-9IpNKs7J.js

@@ -1,2032 +0,0 @@
-import { g as he, m as me, j as o, C as Ue, F as ue, ag as $t, u as Be, D as Ve } from "./vendor-.pnpm-B2klaOGU.js";
-import { useEffect as Ye, useState as Te } from "react";
-import r from "@emotion/styled";
-import { u as ge, a as Y, R as a, aS as wt, B as pe, S as t, C as Q, e_ as xe, D as c, dD as ft, dB as bt, e as le, a2 as oe, ij as yt, ea as ie, kh as vt, ki as jt, kc as St, ae as ze, hG as Tt, o as b, aA as Ct, v as Ae, s as qe, t as Ge, Z as Xe, aB as Qe, at as X, fM as Je, A as Ke, ao as Ze, b as Ie, H as et, k as $e, F as J, be as tt, O as ot, ab as rt, E as nt } from "./index-CQQUoxL8.js";
-import { hasChargeCardAdminLevelAccess as kt } from "@zeniai/client-epic-state";
-import { R as it } from "./RoleWithToolTip-Ct0hfqtb.js";
-import { C as st } from "./CardNumberSubText-CGk4CKVa.js";
-const ee = "cardName", fe = Y.getLocalizedStrings().spendManagement.chargeCard.renamePopup;
-function kr({
-  currentCardName: e,
-  renameFetchState: w,
-  onCancelClick: h,
-  onSubmitClick: p
-}) {
-  const d = ge(), f = "RenameCardForm", l = he({
-    mode: "all",
-    defaultValues: { [ee]: e },
-    values: {
-      [ee]: e
-    }
-  });
-  Ye(() => {
-    l.setFocus(ee);
-  }, []);
-  const u = () => {
-    h();
-  }, _ = l.handleSubmit(() => {
-    const $ = l.getValues(ee);
-    $ != null && p($);
-  }), R = me(l.formState.errors, ee), n = Y.getLocalizedStrings().common, L = de.largeLabelWidth.value(d);
-  return /* @__PURE__ */ o.jsx(Pt, { windowSize: d, role: "presentation", children: /* @__PURE__ */ o.jsx(Ue, { onClickAway: () => h(), children: /* @__PURE__ */ o.jsxs(zt, { windowSize: d, children: [
-    /* @__PURE__ */ o.jsx(ue, { ...l, children: /* @__PURE__ */ o.jsxs(
-      Ot,
-      {
-        id: f,
-        onSubmit: ($) => {
-          $.preventDefault(), _();
-        },
-        children: [
-          /* @__PURE__ */ o.jsx(Lt, { windowSize: d, children: fe.heading }),
-          /* @__PURE__ */ o.jsx(Mt, { hasError: R, children: /* @__PURE__ */ o.jsx(
-            wt,
-            {
-              label: {
-                label: fe.newName,
-                width: L
-              },
-              style: {
-                width: "auto"
-              },
-              text: {
-                type: "text",
-                name: ee,
-                defaultValue: e,
-                placeholder: fe.placeholder,
-                options: {
-                  required: !0,
-                  validate: ($) => $ != null
-                }
-              }
-            }
-          ) })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ o.jsx(Et, { children: /* @__PURE__ */ o.jsxs(Nt, { children: [
-      /* @__PURE__ */ o.jsx(
-        pe,
-        {
-          label: n.cancel,
-          onClick: u,
-          style: { width: 84 }
-        }
-      ),
-      /* @__PURE__ */ o.jsx(Rt, {}),
-      /* @__PURE__ */ o.jsx(
-        pe,
-        {
-          variant: "primary",
-          label: n.texts.update,
-          style: { width: 84, whiteSpace: "nowrap" },
-          loading: w === "In-Progress",
-          type: "submit",
-          form: f
-        }
-      )
-    ] }) })
-  ] }) }) });
-}
-const de = {
-  width: new a(343, 500, 500),
-  largeLabelWidth: new a(108, 108, 108),
-  popupLeftRightPadding: new a(c[5], c[6]),
-  popupTopBottomPadding: new a(c[5], c[5])
-}, Pt = r.div`
-  position: fixed;
-  top: ${t.sp0};
-  left: ${t.sp0};
-  width: 100%;
-  z-index: 100;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: ${Q.overlayDark};
-`, zt = r.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: center;
-  text-align: center;
-  background: ${(e) => e.theme.colors.grey4};
-  border-radius: ${t.sp2};
-  position: relative;
-  margin: auto;
-  width: ${(e) => de.width.valuePx(e.windowSize)};
-  padding: ${(e) => `${de.popupTopBottomPadding.valuePx(e.windowSize)} ${de.popupLeftRightPadding.valuePx(e.windowSize)}`};
-  box-sizing: border-box;
-`, Lt = r(xe)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-bottom: ${t.sp3};
-`, Nt = r.div`
-  display: flex;
-  justify-content: center;
-  padding-top: ${t.sp4};
-`, Rt = r.div`
-  width: ${t.sp3};
-`, Et = r.div`
-  display: flex;
-  flex-direction: column;
-`, Mt = r.div`
-  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-  box-shadow: ${(e) => `${t.sp0} 1px 2px ${t.sp0} ${e.theme.colors.issueChargeCardBackgroundShadow}`};
-  border-radius: ${t.sp2};
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: 100%;
-  :hover {
-    border: ${(e) => `1px solid ${e.theme.colors.primary}`};
-    input {
-      background-color: ${(e) => e.hasError ? Q.importantLight : e.theme.colors.background} !important;
-    }
-  }
-`, Ot = r.form`
-  display: contents;
-`, te = "spendLimit", I = Y.getLocalizedStrings().spendManagement.chargeCard.updateSpendLimitPopup, { dateFormat: be } = Y.getLocalizedStrings();
-function Pr({
-  controllerEmails: e,
-  isChargeCardFeatureEnabled: w,
-  isDebitCardFeatureEnabled: h,
-  isDebitCardSetupEnabled: p,
-  isChargeCardSetupEnabled: d,
-  cardDetail: f,
-  transactionStatistics: l,
-  depositAccountLimitFetchState: u,
-  creditAccount: _,
-  creditAccountRepayment: R,
-  signedInUser: n,
-  isDebitCard: L,
-  classListFetchState: $,
-  currentLimitAmount: B,
-  currentSpentAmount: V,
-  productInformation: y,
-  creditAccountInformation: A,
-  debitAccountInformation: q,
-  maxLimitAmount: W,
-  isDisabled: K,
-  updateLimitFetchState: Z,
-  recommendations: E,
-  cardIssuedByRoles: G,
-  cardHolderRoles: g,
-  loggedInUserRole: M,
-  cardIssuedByDepartmentName: N,
-  cardHolderDepartmentName: i,
-  onCancelClick: T,
-  onSubmitClick: s
-}) {
-  const O = ft().analytics, v = ge(), se = "SpendLimitForm", at = bt();
-  kt(
-    at.loggedInUserRoleMap
-  );
-  const re = he({
-    mode: "onBlur",
-    reValidateMode: "onBlur",
-    defaultValues: { [te]: void 0 }
-  }), {
-    control: lt,
-    formState: { errors: dt }
-  } = re, [ct, pt] = Te(
-    void 0
-  ), ae = $t({
-    control: lt,
-    name: te
-  }), Ce = f?.type.code.includes("physical") === !0 ? f.cardActivationAttemptHistory[0]?.timestamp : f?.createTime, ke = (f?.recommendations ?? []).map(
-    (x) => x.creditLimit.amount
-  ), ht = () => {
-    f != null && Le({
-      analytics: O,
-      controllerEmails: e,
-      isChargeCardFeatureEnabled: w,
-      cardDetail: f,
-      transactionStatistics: l,
-      depositAccountLimitFetchState: u,
-      creditAccount: _,
-      creditAccountRepayment: R,
-      signedInUser: n,
-      isDebitCard: L,
-      classListFetchState: $,
-      currentLimitAmount: B,
-      recommendedLimitAmounts: ke,
-      cardActivationDate: Ce,
-      cardIssuedByRoles: G,
-      cardHolderRoles: g,
-      cardIssuedByDepartmentName: N,
-      cardHolderDepartmentName: i,
-      loggedInUserRole: M,
-      clickItem: "Cancel",
-      newSpendLimitAmount: ae,
-      productInformation: y,
-      creditAccountInformation: A,
-      debitAccountInformation: q
-    }), T();
-  }, mt = re.handleSubmit(() => {
-    const x = re.getValues(te);
-    x != null && (Le({
-      analytics: O,
-      controllerEmails: e,
-      isChargeCardFeatureEnabled: w,
-      cardDetail: f,
-      transactionStatistics: l,
-      depositAccountLimitFetchState: u,
-      creditAccount: _,
-      creditAccountRepayment: R,
-      signedInUser: n,
-      isDebitCard: L,
-      classListFetchState: $,
-      currentLimitAmount: B,
-      recommendedLimitAmounts: ke,
-      cardActivationDate: Ce,
-      cardIssuedByRoles: G,
-      cardHolderRoles: g,
-      cardIssuedByDepartmentName: N,
-      cardHolderDepartmentName: i,
-      loggedInUserRole: M,
-      productInformation: y,
-      creditAccountInformation: A,
-      debitAccountInformation: q,
-      clickItem: "Update",
-      newSpendLimitAmount: x
-    }), s(x));
-  }), ut = (x) => {
-    re.setValue(te, x, { shouldValidate: !0 });
-  }, Pe = me(dt, te), we = Y.getLocalizedStrings().common, gt = ce.largeLabelWidth.value(v);
-  Ye(() => {
-    pt(
-      Ht(V, W, ae)
-    );
-  }, [ae, V, W]);
-  const xt = (x, ne) => /* @__PURE__ */ o.jsxs(
-    qt,
-    {
-      isSelected: ae === x.amount,
-      onClick: () => ut(x.amount),
-      "data-testid": le(
-        "quick-amount-button",
-        ne.toString()
-      ),
-      children: [
-        ne === 1 && /* @__PURE__ */ o.jsx(Gt, {}),
-        oe("0,0.[00]", x)
-      ]
-    },
-    ne
-  );
-  return /* @__PURE__ */ o.jsx(
-    Ft,
-    {
-      windowSize: v,
-      role: "presentation",
-      "data-testid": le("update-spend-limit-popup"),
-      children: /* @__PURE__ */ o.jsx(Ue, { onClickAway: () => T(), children: /* @__PURE__ */ o.jsxs(_t, { windowSize: v, children: [
-        /* @__PURE__ */ o.jsx(ue, { ...re, children: /* @__PURE__ */ o.jsxs(
-          Xt,
-          {
-            id: se,
-            onSubmit: (x) => {
-              x.preventDefault(), mt();
-            },
-            children: [
-              /* @__PURE__ */ o.jsx(Wt, { windowSize: v, children: I.heading }),
-              /* @__PURE__ */ o.jsxs(Dt, { windowSize: v, children: [
-                I.currentLimit,
-                we.strings.space,
-                " ",
-                oe("0,0.[00]", B),
-                I.slashMonth
-              ] }),
-              /* @__PURE__ */ o.jsxs(Yt, { hasError: Pe, children: [
-                /* @__PURE__ */ o.jsx(
-                  yt,
-                  {
-                    label: {
-                      label: I.newLimit,
-                      width: gt
-                    },
-                    showAdditionalInfoLabel: Pe,
-                    additionalInfoLabel: ct,
-                    formattedTextField: {
-                      type: "number",
-                      name: te,
-                      defaultValue: void 0,
-                      placeholder: I.placeholder,
-                      returnValueType: "floatValue",
-                      prefix: "$",
-                      allowNegative: !0,
-                      isNumericString: !1,
-                      registerOptions: {
-                        required: !0,
-                        validate: (x) => !!x && x > 0 && x > V.amount && (W != null ? x <= W.amount : !0)
-                      },
-                      autoComplete: "off",
-                      decimalSeparator: ".",
-                      decimalScale: 2,
-                      fixedDecimalScale: !1,
-                      thousandSeparator: !0
-                    },
-                    style: {
-                      width: "auto"
-                    },
-                    showOutlineOnFocus: !1
-                  }
-                ),
-                E?.length ? /* @__PURE__ */ o.jsx(At, { windowSize: v, children: E?.map(
-                  (x, ne) => xt(x.creditLimit, ne)
-                ) }) : null
-              ] })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ o.jsx(Vt, { children: /* @__PURE__ */ o.jsxs(Ut, { children: [
-          /* @__PURE__ */ o.jsx(
-            pe,
-            {
-              label: we.cancel,
-              onClick: ht,
-              style: { width: 84 },
-              "data-testid": le(
-                "update-spend-limit-cancel-button"
-              )
-            }
-          ),
-          /* @__PURE__ */ o.jsx(Bt, {}),
-          /* @__PURE__ */ o.jsx(
-            pe,
-            {
-              variant: "primary",
-              label: we.texts.update,
-              style: { width: 84, whiteSpace: "nowrap" },
-              loading: Z === "In-Progress",
-              type: "submit",
-              form: se,
-              "data-testid": le(
-                "update-spend-limit-submit-button"
-              ),
-              disabled: K
-            }
-          )
-        ] }) })
-      ] }) })
-    }
-  );
-}
-const Ht = (e, w, h) => {
-  if (h != null) {
-    if (h <= e.amount)
-      return I.amountBelowError.replace(
-        "_amount_",
-        oe("0,0.[00]", e)
-      );
-    if (w != null && h > w.amount)
-      return I.amountExceedError.replace(
-        "_amount_",
-        oe("0,0.[00]", w)
-      );
-  }
-}, Le = ({
-  analytics: e,
-  controllerEmails: w,
-  isChargeCardFeatureEnabled: h,
-  productInformation: p,
-  creditAccountInformation: d,
-  debitAccountInformation: f,
-  cardDetail: l,
-  transactionStatistics: u,
-  depositAccountLimitFetchState: _,
-  creditAccount: R,
-  creditAccountRepayment: n,
-  signedInUser: L,
-  isDebitCard: $,
-  classListFetchState: B,
-  currentLimitAmount: V,
-  recommendedLimitAmounts: y,
-  cardActivationDate: A,
-  cardIssuedByRoles: q,
-  cardHolderRoles: W,
-  cardIssuedByDepartmentName: K,
-  cardHolderDepartmentName: Z,
-  loggedInUserRole: E,
-  clickItem: G,
-  newSpendLimitAmount: g
-}) => {
-  l != null && B === "Completed" && u != null && u.fetchState === "Completed" && (!h || R.fetchState === "Completed" && n.fetchState === "Completed") && (!$ || _ === "Completed") && e.trackCardsUpdateSpendLimitClick(
-    w,
-    p,
-    {
-      cardId: l.id,
-      cardName: l.cardName,
-      cardType: jt(l.type.code),
-      cardCategory: l.type.code.includes("physical") ? "physical" : "virtual",
-      cardLimit: ie(l.limit.amount),
-      cardLastFourDigits: l.accountLast4,
-      cardStatus: l.status.code,
-      cardAssignedDate: l.createTime?.format(
-        be.analytics.MMMDashDDDashYYYYFormat
-      ),
-      cardIssuedDate: l.providerCardCreateTime?.format(
-        be.analytics.MMMDashDDDashYYYYFormat
-      ),
-      cardActivatedDate: A?.format(
-        be.analytics.MMMDashDDDashYYYYFormat
-      ),
-      cardLimitFrequency: l.creditLimitFrequency.name,
-      cardSpentAmount: ie(l.balance.amount),
-      cardAvailableLimit: ie(l.available.amount),
-      cardUtilizationPercent: vt(
-        l.limit.amount,
-        l.available.amount
-      ),
-      cardUtilizationAmount: ie(
-        St(l)
-      ),
-      totalNumberOfDeclinedTransactions: u.statistics.totalNumberOfDeclinedTransactions,
-      numberOfDeclinedTransactionsCurrentMonth: u.statistics.numberOfDeclinedTransactionsCurrentMonth,
-      totalNumberOfPaidTransactions: u.statistics.totalNumberOfPaidTransactions,
-      numberOfPaidTransactionsCurrentMonth: u.statistics.numberOfPaidTransactionsCurrentMonth,
-      totalNumberOfCanceledTransactions: u.statistics.totalNumberOfCanceledTransactions,
-      numberOfCanceledTransactionsCurrentMonth: u.statistics.numberOfCanceledTransactionsCurrentMonth,
-      totalNumberOfAuthorizedTransactions: u.statistics.totalNumberOfAuthorizedTransactions,
-      numberOfAuthorizedTransactionsCurrentMonth: u.statistics.numberOfAuthorizedTransactionsCurrentMonth,
-      totalNumberOfTransactionsWithReceipts: u.statistics.totalNumberOfTransactionsWithReceipts,
-      numberOfTransactionsWithReceiptsCurrentMonth: u.statistics.numberOfTransactionsWithReceiptsCurrentMonth
-    },
-    {
-      cardIssuedByName: ze(l.cardCreatedByUser, !1),
-      cardIssuedByEmail: l.cardCreatedByUser?.email,
-      cardIssuedByUserId: l.cardCreatedByUser?.userId,
-      cardIssuedByRole: q,
-      cardIssuedByDepartment: K
-    },
-    {
-      cardholderName: ze(l.cardHolderUser, !1),
-      cardholderEmail: l.cardHolderUser?.email,
-      cardholderRole: W,
-      cardholderUserId: l.cardHolderUser?.userId,
-      cardholderDepartment: Z
-    },
-    {
-      cardLimitUpdatedByName: Tt(L),
-      cardLimitUpdatedByEmail: L.userEmail,
-      cardLimitUpdatedByRole: E,
-      cardLimitUpdatedByUserId: L.userId
-    },
-    G,
-    ie(V.amount),
-    y,
-    g != null ? y.includes(g) : !1,
-    g,
-    d,
-    f
-  );
-}, ce = {
-  width: new a(343, 500, 500),
-  largeLabelWidth: new a(108, 108, 108),
-  popupLeftRightPadding: new a(c[5], c[6]),
-  popupTopBottomPadding: new a(c[5], c[5])
-}, Ft = r.div`
-  position: fixed;
-  top: ${t.sp0};
-  left: ${t.sp0};
-  width: 100%;
-  z-index: 100;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: ${Q.overlayDark};
-`, _t = r.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: center;
-  text-align: center;
-  background: ${(e) => e.theme.colors.grey4};
-  border-radius: ${t.sp2};
-  position: relative;
-  margin: auto;
-  width: ${(e) => ce.width.valuePx(e.windowSize)};
-  padding: ${(e) => `${ce.popupTopBottomPadding.valuePx(e.windowSize)} ${ce.popupLeftRightPadding.valuePx(e.windowSize)}`};
-  box-sizing: border-box;
-`, Wt = r(xe)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-bottom: ${t.sp2};
-`, Dt = r(b)`
-  color: ${(e) => e.theme.colors.hero};
-  margin-bottom: ${t.sp3};
-`, Ut = r.div`
-  display: flex;
-  justify-content: center;
-  padding-top: ${t.sp4};
-`, Bt = r.div`
-  width: ${t.sp3};
-`, Vt = r.div`
-  display: flex;
-  flex-direction: column;
-`, Yt = r.div`
-  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-  box-shadow: ${(e) => `${t.sp0} 1px 2px ${t.sp0} ${e.theme.colors.issueChargeCardBackgroundShadow}`};
-  border-radius: ${t.sp2};
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: 100%;
-  :hover {
-    border: ${(e) => `1px solid ${e.theme.colors.primary}`};
-    input {
-      background-color: ${(e) => e.hasError ? Q.importantLight : e.theme.colors.background} !important;
-    }
-  }
-`, At = r.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: ${t.sp2};
-  margin: ${t.sp0} ${t.sp4} ${t.sp3} ${t.sp4};
-`, qt = r(b)`
-  color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
-  border: 1px solid
-    ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.grey2};
-  border-radius: ${t.sp1};
-  padding: 2px ${t.sp2};
-  background-color: ${(e) => e.theme.colors.grey5};
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  :hover {
-    color: ${(e) => e.theme.colors.primary};
-    border: ${(e) => `1px solid ${e.theme.colors.primary}`};
-  }
-`, Gt = r(Ct)`
-  color: ${Q.brandColorJade};
-  fill: ${Q.brandColorJade};
-  width: ${t.sp3};
-  height: ${t.sp3};
-`, Xt = r.form`
-  display: contents;
-`, P = {
-  navBarContainerPaddingXaxis: new a(10, 19),
-  containerPaddingLeft: new a(16, 40, 56),
-  containerPaddingRight: new a(16, 40, 56),
-  successContentMargin: new a(c[3], c[12]),
-  buttonTrayGap: new a(c[4], c[5]),
-  largeLabelWidth: new a(120, 120, 200),
-  webkitLineClamp: new a(2, 1, 1, 1, 1),
-  overlayWidth: new a(100, 100, 58),
-  cardHolderDetailsPaddingX: new a(c[3], c[4]),
-  cardNameSectionMarginLeft: new a(c[7], 0),
-  cardHolderDetailsGap: new a(c[1], 0),
-  recurringExpenseMerchantWidth: new a(112, 240),
-  recurringExpenseNextPaymentDateWidth: new a(112, 104),
-  recurringExpenseAmountWidth: new a(100, 312),
-  reasonTextFieldMarginTop: new a(c[3], 0)
-}, { common: j, closeCard: D } = Y.getLocalizedStrings().spendManagement.chargeCard, C = "reasonSection", Ne = "closeCardPage", H = (e, w) => `${e}.${w}`, Re = (e) => `${e}_form`, {
-  common: ye,
-  dateFormat: Qt,
-  cockpit: Jt
-} = Y.getLocalizedStrings(), zr = ({
-  showCloseCardDrawer: e,
-  onCloseCloseCardDrawer: w,
-  isChargeCardAdmin: h,
-  chargeCardsByCardId: p,
-  cardRecurringExpensesByCardId: d,
-  cardRecurringExpenseFetchState: f,
-  closeCardFetchState: l,
-  onRemoveCardClick: u,
-  onConfirmClick: _,
-  onDismissClick: R
-}) => {
-  const n = ge(), L = Be(), [$, B] = Te(
-    Object.fromEntries(
-      Object.keys(d).map((i, T) => [
-        i,
-        T === 0
-      ])
-    )
-  ), V = (i) => {
-    B((T) => T[i] ? {
-      ...T,
-      [i]: !1
-    } : {
-      ...Object.fromEntries(Object.keys(T).map((s) => [s, !1])),
-      [i]: !0
-    });
-  }, y = he({
-    mode: "all",
-    reValidateMode: "onBlur",
-    defaultValues: {
-      [C]: {
-        reason: void 0,
-        reasonType: void 0
-      }
-    },
-    values: {
-      [C]: {
-        reason: void 0,
-        reasonType: void 0
-      }
-    }
-  }), A = P.largeLabelWidth.value(n), { isValid: q, errors: W } = y.formState, K = (i) => `${p[i].cardHolderUser?.firstName ?? ""} ${p[i].cardHolderUser?.lastName ?? ""}`, Z = me(
-    W,
-    H(C, "reasonType")
-  ), E = y.watch("reasonSection.reasonType"), G = y.handleSubmit(() => {
-    if (q) {
-      const i = y.getValues(), T = {
-        reason: i[C].reason,
-        reasonType: i[C].reasonType
-      };
-      _(T);
-    }
-  }), g = Object.keys(d).length > 1, M = Object.keys(d).length, N = Object.values(
-    d
-  ).reduce((i, T) => i + T.length, 0);
-  return /* @__PURE__ */ o.jsx(
-    Ve,
-    {
-      anchor: "right",
-      open: e,
-      onClose: w,
-      PaperProps: {
-        style: {
-          width: P.overlayWidth.valuePercentage(n),
-          boxShadow: "none"
-        }
-      },
-      slotProps: {
-        backdrop: {
-          style: {
-            backgroundColor: L.colors.black,
-            opacity: 0.75,
-            cursor: "pointer"
-          }
-        }
-      },
-      transitionDuration: 250,
-      children: /* @__PURE__ */ o.jsxs(Kt, { windowSize: n, children: [
-        /* @__PURE__ */ o.jsxs(Zt, { windowSize: n, children: [
-          /* @__PURE__ */ o.jsx(It, { windowSize: n, children: /* @__PURE__ */ o.jsx(
-            to,
-            {
-              onClick: () => {
-                R();
-              }
-            }
-          ) }),
-          n === "small" ? /* @__PURE__ */ o.jsx(co, { windowSize: n, children: g ? D.closeCards : D.closeCard }) : /* @__PURE__ */ o.jsx(po, { children: g ? D.closeCards : D.closeCard }),
-          f === "Completed" ? /* @__PURE__ */ o.jsx(ue, { ...y, children: /* @__PURE__ */ o.jsxs("form", { id: Re(Ne), onSubmit: G, children: [
-            /* @__PURE__ */ o.jsxs(ho, { children: [
-              /* @__PURE__ */ o.jsx(mo, { windowSize: n, children: g ? N > 0 ? `${D.multipleCardsHasRecurringExpenses.replace("_number_of_cards_", M.toString()).replace("_number_of_recurring_expenses_", N.toString())} ${N === 1 ? j.expense : j.expenses} ${D.multipleCardsHasRecurringExpensesSuffix}` : D.multipleCardsNoRecurringExpenses.replace(
-                "_number_of_cards_",
-                M.toString()
-              ) : D.firstCardHasRecurringExpenses.replace(
-                "_number_of_recurring_expenses_",
-                N.toString()
-              ).replace(
-                "_expense_",
-                N === 1 ? j.expense : j.expenses
-              ) }),
-              g && /* @__PURE__ */ o.jsx(No, { children: `${M} ${M === 1 ? j.card : j.cards} ${j.selected}` }),
-              Object.keys(d).map(
-                (i, T) => {
-                  const s = d[i].length > 0;
-                  return /* @__PURE__ */ o.jsxs(
-                    uo,
-                    {
-                      onClick: () => s ? V(i) : void 0,
-                      isMoreThanOneCard: g,
-                      isLastCard: T === Object.keys(d).length - 1,
-                      children: [
-                        /* @__PURE__ */ o.jsxs(xo, { windowSize: n, children: [
-                          /* @__PURE__ */ o.jsxs(
-                            $o,
-                            {
-                              windowSize: n,
-                              children: [
-                                /* @__PURE__ */ o.jsxs(wo, { windowSize: n, children: [
-                                  p[i].cardHolderUser?.photo !== void 0 ? /* @__PURE__ */ o.jsx(
-                                    oo,
-                                    {
-                                      src: p[i].cardHolderUser?.photo.href,
-                                      alt: Jt.userProfileAltText,
-                                      onError: ({ currentTarget: m }) => {
-                                        m.onerror = null, m.src = Ae;
-                                      },
-                                      loading: "lazy"
-                                    }
-                                  ) : /* @__PURE__ */ o.jsx(
-                                    qe,
-                                    {
-                                      firstName: p[i].cardHolderUser?.firstName ?? "",
-                                      lastName: p[i].cardHolderUser?.lastName ?? "",
-                                      size: t.sp6
-                                    }
-                                  ),
-                                  /* @__PURE__ */ o.jsxs("div", { children: [
-                                    /* @__PURE__ */ o.jsx(go, { children: K(i) }),
-                                    /* @__PURE__ */ o.jsx(fo, { children: /* @__PURE__ */ o.jsx(
-                                      it,
-                                      {
-                                        roles: p[i].cardHolderRoles.userRoles
-                                      }
-                                    ) })
-                                  ] })
-                                ] }),
-                                n === "small" && s && ($[i] ? /* @__PURE__ */ o.jsx(Me, {}) : /* @__PURE__ */ o.jsx(Oe, {}))
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ o.jsxs(bo, { windowSize: n, children: [
-                            p[i].cardName,
-                            /* @__PURE__ */ o.jsx(
-                              st,
-                              {
-                                cardDetail: p[i],
-                                forDetailPage: !0,
-                                styles: {
-                                  ...Ge.smallRegular.cssObject,
-                                  position: "relative",
-                                  top: "-5px"
-                                }
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ o.jsxs(
-                            yo,
-                            {
-                              windowSize: n,
-                              children: [
-                                /* @__PURE__ */ o.jsxs(Po, { children: [
-                                  /* @__PURE__ */ o.jsx(zo, { children: d[i].length }),
-                                  /* @__PURE__ */ o.jsx(ko, { children: j.recurringExpenses })
-                                ] }),
-                                n !== "small" && s && ($[i] ? /* @__PURE__ */ o.jsx(Me, {}) : /* @__PURE__ */ o.jsx(Oe, {}))
-                              ]
-                            }
-                          )
-                        ] }),
-                        g && /* @__PURE__ */ o.jsx(io, { children: /* @__PURE__ */ o.jsx(
-                          Xe,
-                          {
-                            variant: "standard",
-                            title: ye.remove,
-                            children: /* @__PURE__ */ o.jsx(
-                              no,
-                              {
-                                onClick: () => u(i)
-                              }
-                            )
-                          }
-                        ) }),
-                        $[i] && s && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-                          /* @__PURE__ */ o.jsx(Ee, {}),
-                          /* @__PURE__ */ o.jsxs(vo, { children: [
-                            /* @__PURE__ */ o.jsxs(Lo, { children: [
-                              /* @__PURE__ */ o.jsx(
-                                je,
-                                {
-                                  width: n === "small" ? 112 : 240,
-                                  children: j.merchant
-                                }
-                              ),
-                              /* @__PURE__ */ o.jsx(
-                                je,
-                                {
-                                  width: n === "small" ? 112 : 104,
-                                  children: j.nextPaymentDate
-                                }
-                              ),
-                              /* @__PURE__ */ o.jsx(
-                                Ro,
-                                {
-                                  width: n === "small" ? 100 : 312,
-                                  children: j.amount
-                                }
-                              )
-                            ] }),
-                            d[i].map(
-                              (m, O) => /* @__PURE__ */ o.jsxs("div", { children: [
-                                O > 0 && /* @__PURE__ */ o.jsx(Ee, {}),
-                                /* @__PURE__ */ o.jsxs(
-                                  jo,
-                                  {
-                                    children: [
-                                      /* @__PURE__ */ o.jsxs(
-                                        So,
-                                        {
-                                          windowSize: n,
-                                          children: [
-                                            /* @__PURE__ */ o.jsx(
-                                              so,
-                                              {
-                                                src: m.merchant.logo?.url?.href
-                                              }
-                                            ),
-                                            /* @__PURE__ */ o.jsx(
-                                              ro,
-                                              {
-                                                windowSize: n,
-                                                children: m.merchant.brandName ?? m.merchant.name
-                                              }
-                                            )
-                                          ]
-                                        }
-                                      ),
-                                      /* @__PURE__ */ o.jsx(
-                                        To,
-                                        {
-                                          windowSize: n,
-                                          children: m.nextPaymentDate.format(
-                                            Qt.visual.MMMDCommaYYYYformat
-                                          )
-                                        }
-                                      ),
-                                      /* @__PURE__ */ o.jsx(
-                                        Co,
-                                        {
-                                          windowSize: n,
-                                          children: oe(
-                                            "0,0.00",
-                                            m.amount
-                                          )
-                                        }
-                                      )
-                                    ]
-                                  },
-                                  m.merchant.name
-                                )
-                              ] }, m.merchant.name)
-                            )
-                          ] })
-                        ] })
-                      ]
-                    },
-                    i
-                  );
-                }
-              )
-            ] }),
-            /* @__PURE__ */ o.jsx(Mo, { windowSize: n, children: j.letUsKnowWhy }),
-            /* @__PURE__ */ o.jsxs(
-              Eo,
-              {
-                isReasonTextFieldVisible: E === "other",
-                children: [
-                  /* @__PURE__ */ o.jsxs(ao, { size: n, children: [
-                    /* @__PURE__ */ o.jsx(
-                      Qe,
-                      {
-                        label: j.reasonLabel,
-                        htmlFor: H(C, "reasonType"),
-                        style: {
-                          padding: `${t.sp2} ${t.sp0}`,
-                          width: "fit-content"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ o.jsxs(
-                      lo,
-                      {
-                        labelWidth: A,
-                        size: n,
-                        children: [
-                          /* @__PURE__ */ o.jsx(
-                            X,
-                            {
-                              label: {
-                                label: j.reason.lost
-                              },
-                              style: {
-                                width: "auto"
-                              },
-                              radioField: {
-                                name: H(C, "reasonType"),
-                                id: `${H(C, "reasonType")}.Lost or stolen`,
-                                value: "Lost or stolen",
-                                style: {
-                                  height: t.sp3,
-                                  width: t.sp3
-                                },
-                                registerOptions: {
-                                  required: !h,
-                                  validate: (i) => h ? !0 : !!i
-                                },
-                                radioSize: "small"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ o.jsx(
-                            X,
-                            {
-                              label: {
-                                label: j.reason.fraud
-                              },
-                              style: {
-                                width: "auto"
-                              },
-                              radioField: {
-                                name: H(C, "reasonType"),
-                                id: `${H(C, "reasonType")}.Fraud detected`,
-                                value: "Fraud detected",
-                                style: {
-                                  height: t.sp3,
-                                  width: t.sp3
-                                },
-                                registerOptions: {
-                                  required: !h,
-                                  validate: (i) => h ? !0 : !!i
-                                },
-                                radioSize: "small"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ o.jsx(
-                            X,
-                            {
-                              label: {
-                                label: j.reason.not_needed
-                              },
-                              style: {
-                                width: "auto"
-                              },
-                              radioField: {
-                                name: H(C, "reasonType"),
-                                id: `${H(C, "reasonType")}.Not needed`,
-                                value: "Not needed",
-                                style: {
-                                  height: t.sp3,
-                                  width: t.sp3
-                                },
-                                registerOptions: {
-                                  required: !h,
-                                  validate: (i) => h ? !0 : !!i
-                                },
-                                radioSize: "small"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ o.jsx(
-                            X,
-                            {
-                              label: {
-                                label: j.reason.other
-                              },
-                              style: {
-                                width: "auto"
-                              },
-                              radioField: {
-                                name: H(C, "reasonType"),
-                                id: `${H(C, "reasonType")}.other`,
-                                value: "other",
-                                style: {
-                                  height: t.sp3,
-                                  width: t.sp3
-                                },
-                                registerOptions: {
-                                  required: !h,
-                                  validate: (i) => h ? !0 : !!i
-                                },
-                                radioSize: "small"
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ] }),
-                  E === "other" ? /* @__PURE__ */ o.jsx(
-                    Je,
-                    {
-                      style: {
-                        height: t.sp6,
-                        width: "100%",
-                        backgroundColor: L.colors.background,
-                        marginTop: `${P.reasonTextFieldMarginTop.valuePx(n)}`
-                      },
-                      type: "text",
-                      name: H(C, "reason"),
-                      placeholder: D.reasonPlaceholder,
-                      className: "reason-text-field",
-                      registerOptions: {
-                        required: !h,
-                        validate: (i) => h ? !0 : !!i
-                      }
-                    }
-                  ) : E == null && !h && Z ? /* @__PURE__ */ o.jsx(eo, { children: D.youNeedToProvideReasonToCloseCard }) : (
-                    // TODO check with design team if we need to show this error message
-                    null
-                  )
-                ]
-              }
-            )
-          ] }) }) : /* @__PURE__ */ o.jsx(
-            Ke,
-            {
-              size: "Standard",
-              start: !0,
-              style: {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "calc(100vh - 210px)"
-              }
-            }
-          )
-        ] }),
-        f === "Completed" && /* @__PURE__ */ o.jsx(
-          Ze,
-          {
-            style: {
-              zIndex: 4,
-              paddingTop: t.sp3,
-              paddingBottom: t.sp3
-            },
-            formId: Re(Ne),
-            helperStyle: { paddingTop: t.sp0, paddingBottom: t.sp0 },
-            primaryBtn: {
-              label: ye.confirm,
-              isLoading: l === "In-Progress",
-              variant: "danger"
-            },
-            cancelBtn: {
-              label: ye.cancel,
-              style: { width: "90px" },
-              onClick: () => {
-                R?.();
-              }
-            }
-          }
-        )
-      ] })
-    }
-  );
-}, Kt = r.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey4};
-  overflow-x: hidden;
-  height: 100vh;
-  width: 100%;
-`, Zt = r.div`
-  height: auto;
-  padding-left: ${(e) => `${P.containerPaddingLeft.valuePx(e.windowSize)}`};
-  padding-right: ${(e) => `${P.containerPaddingRight.valuePx(e.windowSize)}`};
-  margin-bottom: auto;
-`, It = r.div`
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  top: ${t.sp0};
-  padding: ${(e) => `${P.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${t.sp0}`};
-  z-index: 2;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, eo = r(J)`
-  color: ${(e) => e.theme.colors.important};
-  text-align: end;
-`, to = r(Ie)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${t.sp4};
-  height: ${t.sp4};
-  min-height: ${t.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, oo = r.img`
-  height: ${t.sp6};
-  width: ${t.sp6};
-  border-radius: 50%;
-  justify-content: center;
-  color: ${(e) => e.theme.colors.hero};
-`, ro = r(b)`
-  margin-right: ${t.sp3};
-  color: inherit;
-  -webkit-line-clamp: ${(e) => P.webkitLineClamp.value(e.windowSize)};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-transform: capitalize;
-`, no = r(rt)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${t.sp3};
-  height: ${t.sp3};
-  min-height: ${t.sp3};
-  background-color: ${(e) => e.theme.colors.grey5};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, io = r.div`
-  position: absolute;
-  right: -${t.sp2};
-  top: -${t.sp2};
-`, so = r.img`
-  display: flex;
-  width: ${t.sp4};
-  height: ${t.sp4};
-  min-width: ${t.sp4};
-`, ao = r.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  min-height: ${t.sp6};
-  padding-top: ${t.sp2};
-  align-items: ${(e) => e.size === "small" ? "flex-start" : "center"};
-  flex-direction: ${(e) => e.size === "small" ? "column" : "row"};
-`, lo = r.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;
-  gap: ${t.sp5};
-  ${(e) => e.size === "small" && `
-
-    flex-wrap: wrap;
-    flex-direction: column;
-    width: unset;
-    height: unset;
-    justify-content: start;
-    height: ${t.sp11};
-    align-items: start;
-    `}
-`, co = r(xe)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${t.sp3};
-  margin-bottom: ${t.sp0};
-  margin-right: ${t.sp3};
-`, po = r(et)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${t.sp3};
-  margin-bottom: ${t.sp2};
-`, ho = r.div``, mo = r(b)`
-  color: ${(e) => e.theme.colors.hero};
-  margin-bottom: ${t.sp3};
-`, uo = r.div`
-  cursor: pointer;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border-radius: ${t.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  position: relative;
-  margin-bottom: ${(e) => e.isLastCard ? t.sp0 : t.sp3};
-  color: ${(e) => e.theme.colors.hero};
-  box-shadow: 0px 1px 2px 0px ${(e) => e.theme.colors.dropShadowHover};
-  &:hover {
-    z-index: 1;
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-    color: ${(e) => e.theme.colors.primary};
-    .cardName {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, go = r(b)`
-  color: inherit;
-`, xo = r.div`
-  display: flex;
-  justify-content: space-between;
-  padding-top: ${t.sp3};
-  padding-bottom: ${t.sp3};
-  padding-left: ${(e) => `${P.cardHolderDetailsPaddingX.valuePx(e.windowSize)}`};
-  padding-right: ${(e) => `${P.cardHolderDetailsPaddingX.valuePx(e.windowSize)}`};
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-  gap: ${(e) => `${P.cardHolderDetailsGap.valuePx(e.windowSize)}`};
-`, $o = r.div`
-  display: flex;
-  justify-content: space-between;
-`, wo = r.div`
-  width: 200px;
-  color: inherit;
-  display: flex;
-  gap: ${t.sp2};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`, fo = r(J)`
-  color: inherit;
-  position: relative;
-  top: -5px;
-`, bo = r(b)`
-  width: 216px;
-  color: inherit;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-left: ${(e) => `${P.cardNameSectionMarginLeft.valuePx(e.windowSize)}`};
-`, yo = r.div`
-  width: 163px;
-  color: inherit;
-  display: flex;
-  align-items: center;
-  gap: ${t.sp3};
-  margin-left: ${(e) => `${P.cardNameSectionMarginLeft.valuePx(e.windowSize)}`};
-`, vo = r.div`
-  margin: ${t.sp3} ${t.sp4} ${t.sp0} ${t.sp4};
-  padding-bottom: ${t.sp2};
-`, jo = r.div`
-  display: flex;
-  justify-content: space-between;
-  margin: ${t.sp2} ${t.sp0};
-`, Ee = r.div`
-  background-color: ${(e) => e.theme.mode === "light" ? e.theme.colors.background : Q.neutralGrey3Dark};
-  min-height: 1px;
-  max-height: 1px;
-  width: 100%;
-`, So = r(b)`
-  width: ${(e) => `${P.recurringExpenseMerchantWidth.valuePx(e.windowSize)}`};
-  text-align: left;
-  color: inherit;
-  display: flex;
-  gap: ${t.sp2};
-`, To = r(b)`
-  width: ${(e) => `${P.recurringExpenseNextPaymentDateWidth.valuePx(e.windowSize)}`};
-  text-align: left;
-  color: inherit;
-`, Co = r(b)`
-  width: ${(e) => `${P.recurringExpenseAmountWidth.valuePx(e.windowSize)}`};
-  text-align: right;
-  color: inherit;
-`, ko = r(J)`
-  color: inherit;
-  position: relative;
-  top: -5px;
-`, Po = r(J)`
-  color: inherit;
-`, zo = r(b)`
-  color: inherit;
-`, Lo = r.div`
-  display: flex;
-  justify-content: space-between;
-  margin: ${t.sp1} ${t.sp0};
-`, No = r($e)`
-  color: ${(e) => e.theme.colors.primary};
-  padding: ${t.sp3} ${t.sp0};
-`, Me = r(tt)`
-  width: ${t.sp4};
-  height: ${t.sp4};
-  min-width: ${t.sp4};
-  min-height: ${t.sp4};
-  color: inherit;
-`, Oe = r(ot)`
-  cursor: pointer;
-  width: ${t.sp4};
-  height: ${t.sp4};
-  min-width: ${t.sp4};
-  min-height: ${t.sp4};
-  color: inherit;
-`, je = r(nt)`
-  width: ${(e) => e.width}px;
-  color: ${(e) => e.theme.colors.hero};
-`, Ro = r(je)`
-  text-align: right;
-`, Eo = r.div`
-  border-radius: ${t.sp2};
-  padding-left: ${t.sp4};
-  padding-right: ${t.sp4};
-  padding-bottom: ${(e) => e.isReasonTextFieldVisible ? t.sp3 : t.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: 0px 1px 2px 0px ${(e) => e.theme.colors.dropShadowHover};
-  background: ${(e) => e.theme.colors.grey5};
-  margin-bottom: ${t.sp6};
-  &:hover {
-    z-index: 1;
-    border: 1px solid ${(e) => e.theme.colors.primary};
-    .reason-text-field > input {
-      background-color: ${(e) => e.theme.colors.background};
-    }
-  }
-`, Mo = r($e)`
-  margin-bottom: ${t.sp3};
-  margin-top: ${t.sp7};
-  color: ${(e) => e.theme.colors.primary};
-`, z = {
-  navBarContainerPaddingXaxis: new a(10, 19),
-  containerPaddingLeft: new a(16, 40, 56),
-  containerPaddingRight: new a(16, 40, 56),
-  successContentMargin: new a(c[3], c[12]),
-  buttonTrayGap: new a(c[4], c[5]),
-  largeLabelWidth: new a(120, 120, 200),
-  webkitLineClamp: new a(2, 1, 1, 1, 1),
-  overlayWidth: new a(100, 100, 58),
-  cardHolderDetailsPaddingX: new a(c[3], c[4]),
-  cardNameSectionMarginLeft: new a(c[7], 0),
-  cardHolderDetailsGap: new a(c[1], 0),
-  recurringExpenseMerchantWidth: new a(112, 240),
-  recurringExpenseNextPaymentDateWidth: new a(112, 104),
-  recurringExpenseAmountWidth: new a(100, 312),
-  reasonTextFieldMarginTop: new a(c[3], 0)
-}, { lockCard: U, common: S } = Y.getLocalizedStrings().spendManagement.chargeCard, k = "reasonSection", He = "lockCardPage", F = (e, w) => `${e}.${w}`, Fe = (e) => `${e}_form`, {
-  common: ve,
-  dateFormat: Oo,
-  cockpit: Ho
-} = Y.getLocalizedStrings(), Lr = ({
-  showLockCardDrawer: e,
-  onCloseLockCardDrawer: w,
-  isChargeCardAdmin: h,
-  chargeCardsByCardId: p,
-  cardRecurringExpensesByCardId: d,
-  cardRecurringExpenseFetchState: f,
-  lockCardFetchState: l,
-  onRemoveCardClick: u,
-  onConfirmClick: _,
-  onDismissClick: R
-}) => {
-  const n = ge(), L = Be(), [$, B] = Te(
-    Object.fromEntries(
-      Object.keys(d).map((s, m) => [
-        s,
-        m === 0
-      ])
-    )
-  ), V = (s) => {
-    B((m) => m[s] ? {
-      ...m,
-      [s]: !1
-    } : {
-      ...Object.fromEntries(Object.keys(m).map((O) => [O, !1])),
-      [s]: !0
-    });
-  }, y = he({
-    mode: "all",
-    reValidateMode: "onBlur",
-    defaultValues: {
-      [k]: {
-        reason: void 0,
-        reasonType: void 0
-      }
-    },
-    values: {
-      [k]: {
-        reason: void 0,
-        reasonType: void 0
-      }
-    }
-  }), A = z.largeLabelWidth.value(n), { isValid: q, errors: W } = y.formState, K = (s) => `${p[s].cardHolderUser?.firstName ?? ""} ${p[s].cardHolderUser?.lastName ?? ""}`, Z = me(
-    W,
-    F(k, "reasonType")
-  ), E = y.watch("reasonSection.reasonType"), G = y.handleSubmit(() => {
-    if (q) {
-      const s = y.getValues(), m = {
-        reason: s[k].reason,
-        reasonType: s[k].reasonType
-      };
-      _(m);
-    }
-  }), g = Object.keys(d).length > 1, M = Object.keys(d).length, N = Object.values(
-    d
-  ).reduce((s, m) => s + m.length, 0), T = d[Object.keys(d)[0]].length > 0;
-  return /* @__PURE__ */ o.jsx(
-    Ve,
-    {
-      anchor: "right",
-      open: e,
-      onClose: w,
-      PaperProps: {
-        style: {
-          width: z.overlayWidth.valuePercentage(n),
-          boxShadow: "none"
-        }
-      },
-      slotProps: {
-        backdrop: {
-          style: {
-            backgroundColor: L.colors.black,
-            opacity: 0.75,
-            cursor: "pointer"
-          }
-        }
-      },
-      transitionDuration: 250,
-      children: /* @__PURE__ */ o.jsxs(Fo, { windowSize: n, children: [
-        /* @__PURE__ */ o.jsxs(_o, { windowSize: n, children: [
-          /* @__PURE__ */ o.jsx(Uo, { windowSize: n, children: /* @__PURE__ */ o.jsx(
-            Vo,
-            {
-              onClick: () => {
-                R();
-              }
-            }
-          ) }),
-          n === "small" ? /* @__PURE__ */ o.jsx(Jo, { windowSize: n, children: g ? U.lockCards : U.lockCard }) : /* @__PURE__ */ o.jsx(Ko, { children: g ? U.lockCards : U.lockCard }),
-          f === "Completed" ? /* @__PURE__ */ o.jsx(ue, { ...y, children: /* @__PURE__ */ o.jsxs("form", { id: Fe(He), onSubmit: G, children: [
-            /* @__PURE__ */ o.jsxs(Zo, { children: [
-              /* @__PURE__ */ o.jsx(Io, { windowSize: n, children: g ? N > 0 ? `${U.multipleCardsHasRecurringExpenses.replace("_number_of_cards_", M.toString()).replace("_number_of_recurring_expenses_", N.toString())} ${N === 1 ? S.expense : S.expenses}.` : U.multipleCardsNoRecurringExpenses.replace(
-                "_number_of_cards_",
-                M.toString()
-              ) : T ? U.firstCardHasRecurringExpenses.replace(
-                "_number_of_recurring_expenses_",
-                N.toString()
-              ).replace(
-                "_expense_",
-                N === 1 ? S.expense : S.expenses
-              ) : U.firstCardNoRecurringExpenses }),
-              g && /* @__PURE__ */ o.jsx(xr, { children: `${M} ${M === 1 ? S.card : S.cards} ${S.selected}` }),
-              Object.keys(d).map(
-                (s, m) => {
-                  const O = d[s].length > 0;
-                  return /* @__PURE__ */ o.jsxs(
-                    er,
-                    {
-                      onClick: () => O ? V(s) : void 0,
-                      isMoreThanOneCard: g,
-                      isLastCard: m === Object.keys(d).length - 1,
-                      children: [
-                        /* @__PURE__ */ o.jsxs(or, { windowSize: n, children: [
-                          /* @__PURE__ */ o.jsxs(
-                            Do,
-                            {
-                              windowSize: n,
-                              children: [
-                                /* @__PURE__ */ o.jsxs(rr, { windowSize: n, children: [
-                                  p[s].cardHolderUser?.photo !== void 0 ? /* @__PURE__ */ o.jsx(
-                                    Yo,
-                                    {
-                                      src: p[s].cardHolderUser?.photo.href,
-                                      alt: Ho.userProfileAltText,
-                                      onError: ({ currentTarget: v }) => {
-                                        v.onerror = null, v.src = Ae;
-                                      },
-                                      loading: "lazy"
-                                    }
-                                  ) : /* @__PURE__ */ o.jsx(
-                                    qe,
-                                    {
-                                      firstName: p[s].cardHolderUser?.firstName ?? "",
-                                      lastName: p[s].cardHolderUser?.lastName ?? "",
-                                      size: t.sp6
-                                    }
-                                  ),
-                                  /* @__PURE__ */ o.jsxs("div", { children: [
-                                    /* @__PURE__ */ o.jsx(tr, { children: K(s) }),
-                                    /* @__PURE__ */ o.jsx(nr, { children: /* @__PURE__ */ o.jsx(
-                                      it,
-                                      {
-                                        roles: p[s].cardHolderRoles.userRoles
-                                      }
-                                    ) })
-                                  ] })
-                                ] }),
-                                n === "small" && O && ($[s] ? /* @__PURE__ */ o.jsx(We, {}) : /* @__PURE__ */ o.jsx(De, {}))
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ o.jsxs(ir, { windowSize: n, children: [
-                            p[s].cardName,
-                            /* @__PURE__ */ o.jsx(
-                              st,
-                              {
-                                cardDetail: p[s],
-                                forDetailPage: !0,
-                                styles: {
-                                  ...Ge.smallRegular.cssObject,
-                                  position: "relative",
-                                  top: "-5px"
-                                }
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ o.jsxs(
-                            sr,
-                            {
-                              windowSize: n,
-                              children: [
-                                /* @__PURE__ */ o.jsxs(hr, { children: [
-                                  /* @__PURE__ */ o.jsx(ur, { children: d[s].length }),
-                                  /* @__PURE__ */ o.jsx(mr, { children: S.recurringExpenses })
-                                ] }),
-                                n !== "small" && O && ($[s] ? /* @__PURE__ */ o.jsx(We, {}) : /* @__PURE__ */ o.jsx(De, {}))
-                              ]
-                            }
-                          )
-                        ] }),
-                        g && /* @__PURE__ */ o.jsx(Wo, { children: /* @__PURE__ */ o.jsx(
-                          Xe,
-                          {
-                            variant: "standard",
-                            title: ve.remove,
-                            children: /* @__PURE__ */ o.jsx(
-                              qo,
-                              {
-                                onClick: () => u(s)
-                              }
-                            )
-                          }
-                        ) }),
-                        $[s] && O && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-                          /* @__PURE__ */ o.jsx(_e, {}),
-                          /* @__PURE__ */ o.jsxs(ar, { children: [
-                            /* @__PURE__ */ o.jsxs(gr, { children: [
-                              /* @__PURE__ */ o.jsx(
-                                Se,
-                                {
-                                  width: n === "small" ? 112 : 240,
-                                  children: S.merchant
-                                }
-                              ),
-                              /* @__PURE__ */ o.jsx(
-                                Se,
-                                {
-                                  width: n === "small" ? 112 : 104,
-                                  children: S.nextPaymentDate
-                                }
-                              ),
-                              /* @__PURE__ */ o.jsx(
-                                $r,
-                                {
-                                  width: n === "small" ? 100 : 312,
-                                  children: S.amount
-                                }
-                              )
-                            ] }),
-                            d[s].map(
-                              (v, se) => /* @__PURE__ */ o.jsxs("div", { children: [
-                                se > 0 && /* @__PURE__ */ o.jsx(_e, {}),
-                                /* @__PURE__ */ o.jsxs(
-                                  lr,
-                                  {
-                                    children: [
-                                      /* @__PURE__ */ o.jsxs(
-                                        dr,
-                                        {
-                                          windowSize: n,
-                                          children: [
-                                            /* @__PURE__ */ o.jsx(
-                                              Go,
-                                              {
-                                                src: v.merchant.logo?.url?.href
-                                              }
-                                            ),
-                                            /* @__PURE__ */ o.jsx(
-                                              Ao,
-                                              {
-                                                windowSize: n,
-                                                children: v.merchant.brandName ?? v.merchant.name
-                                              }
-                                            )
-                                          ]
-                                        }
-                                      ),
-                                      /* @__PURE__ */ o.jsx(
-                                        cr,
-                                        {
-                                          windowSize: n,
-                                          children: v.nextPaymentDate.format(
-                                            Oo.visual.MMMDCommaYYYYformat
-                                          )
-                                        }
-                                      ),
-                                      /* @__PURE__ */ o.jsx(
-                                        pr,
-                                        {
-                                          windowSize: n,
-                                          children: oe(
-                                            "0,0.00",
-                                            v.amount
-                                          )
-                                        }
-                                      )
-                                    ]
-                                  },
-                                  v.merchant.name
-                                )
-                              ] }, v.merchant.name)
-                            )
-                          ] })
-                        ] })
-                      ]
-                    },
-                    s
-                  );
-                }
-              )
-            ] }),
-            /* @__PURE__ */ o.jsx(fr, { windowSize: n, children: S.letUsKnowWhy }),
-            /* @__PURE__ */ o.jsxs(
-              wr,
-              {
-                isReasonTextFieldVisible: E === "other",
-                children: [
-                  /* @__PURE__ */ o.jsxs(Xo, { size: n, children: [
-                    /* @__PURE__ */ o.jsx(
-                      Qe,
-                      {
-                        label: S.reasonLabel,
-                        htmlFor: F(k, "reasonType"),
-                        style: {
-                          padding: `${t.sp2} ${t.sp0}`,
-                          width: "fit-content"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ o.jsxs(
-                      Qo,
-                      {
-                        labelWidth: A,
-                        size: n,
-                        children: [
-                          /* @__PURE__ */ o.jsx(
-                            X,
-                            {
-                              label: {
-                                label: S.reason.lost
-                              },
-                              style: {
-                                width: "auto"
-                              },
-                              radioField: {
-                                name: F(k, "reasonType"),
-                                id: `${F(k, "reasonType")}.Lost or stolen`,
-                                value: "Lost or stolen",
-                                style: {
-                                  height: t.sp3,
-                                  width: t.sp3
-                                },
-                                radioSize: "small"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ o.jsx(
-                            X,
-                            {
-                              label: {
-                                label: S.reason.fraud
-                              },
-                              style: {
-                                width: "auto"
-                              },
-                              radioField: {
-                                name: F(k, "reasonType"),
-                                id: `${F(k, "reasonType")}.Fraud detected`,
-                                value: "Fraud detected",
-                                style: {
-                                  height: t.sp3,
-                                  width: t.sp3
-                                },
-                                radioSize: "small"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ o.jsx(
-                            X,
-                            {
-                              label: {
-                                label: S.reason.not_needed
-                              },
-                              style: {
-                                width: "auto"
-                              },
-                              radioField: {
-                                name: F(k, "reasonType"),
-                                id: `${F(k, "reasonType")}.Not needed`,
-                                value: "Not needed",
-                                style: {
-                                  height: t.sp3,
-                                  width: t.sp3
-                                },
-                                radioSize: "small"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ o.jsx(
-                            X,
-                            {
-                              label: {
-                                label: S.reason.other
-                              },
-                              style: {
-                                width: "auto"
-                              },
-                              radioField: {
-                                name: F(k, "reasonType"),
-                                id: `${F(k, "reasonType")}.other`,
-                                value: "other",
-                                style: {
-                                  height: t.sp3,
-                                  width: t.sp3
-                                },
-                                radioSize: "small"
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ] }),
-                  E === "other" ? /* @__PURE__ */ o.jsx(
-                    Je,
-                    {
-                      style: {
-                        height: t.sp6,
-                        width: "100%",
-                        backgroundColor: L.colors.background,
-                        marginTop: `${z.reasonTextFieldMarginTop.valuePx(n)}`
-                      },
-                      type: "text",
-                      name: F(k, "reason"),
-                      placeholder: U.reasonPlaceholder,
-                      className: "reason-text-field"
-                    }
-                  ) : E == null && !h && Z ? /* @__PURE__ */ o.jsx(Bo, { children: U.youNeedToProvideReasonToLockCard }) : (
-                    // TODO check with design team if we need to show this error message
-                    null
-                  )
-                ]
-              }
-            )
-          ] }) }) : /* @__PURE__ */ o.jsx(
-            Ke,
-            {
-              size: "Standard",
-              start: !0,
-              style: {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "calc(100vh - 210px)"
-              }
-            }
-          )
-        ] }),
-        f === "Completed" && /* @__PURE__ */ o.jsx(
-          Ze,
-          {
-            style: {
-              zIndex: 4,
-              paddingTop: t.sp3,
-              paddingBottom: t.sp3
-            },
-            formId: Fe(He),
-            helperStyle: { paddingTop: t.sp0, paddingBottom: t.sp0 },
-            primaryBtn: {
-              label: ve.confirm,
-              isLoading: l === "In-Progress"
-            },
-            cancelBtn: {
-              label: ve.cancel,
-              style: { width: "90px" },
-              onClick: () => {
-                R?.();
-              }
-            }
-          }
-        )
-      ] })
-    }
-  );
-}, Fo = r.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey4};
-  overflow-x: hidden;
-  height: 100vh;
-  width: 100%;
-`, _o = r.div`
-  height: auto;
-  padding-left: ${(e) => `${z.containerPaddingLeft.valuePx(e.windowSize)}`};
-  padding-right: ${(e) => `${z.containerPaddingRight.valuePx(e.windowSize)}`};
-  margin-bottom: auto;
-`, Wo = r.div`
-  position: absolute;
-  right: -${t.sp2};
-  top: -${t.sp2};
-`, Do = r.div`
-  display: flex;
-  justify-content: space-between;
-`, Uo = r.div`
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  top: ${t.sp0};
-  padding: ${(e) => `${z.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${t.sp0}`};
-  z-index: 2;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, Bo = r(J)`
-  color: ${(e) => e.theme.colors.important};
-  text-align: end;
-`, Vo = r(Ie)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${t.sp4};
-  height: ${t.sp4};
-  min-height: ${t.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Yo = r.img`
-  height: ${t.sp6};
-  width: ${t.sp6};
-  border-radius: 50%;
-  justify-content: center;
-  color: ${(e) => e.theme.colors.hero};
-`, Ao = r(b)`
-  margin-right: ${t.sp3};
-  color: inherit;
-  -webkit-line-clamp: ${(e) => z.webkitLineClamp.value(e.windowSize)};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-transform: capitalize;
-`, qo = r(rt)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${t.sp3};
-  height: ${t.sp3};
-  min-height: ${t.sp3};
-  background-color: ${(e) => e.theme.colors.grey5};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Go = r.img`
-  display: flex;
-  width: ${t.sp4};
-  height: ${t.sp4};
-`, Xo = r.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  min-height: ${t.sp6};
-  padding-top: ${t.sp2};
-  align-items: ${(e) => e.size === "small" ? "flex-start" : "center"};
-  flex-direction: ${(e) => e.size === "small" ? "column" : "row"};
-`, Qo = r.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;
-  gap: ${t.sp5};
-  ${(e) => e.size === "small" && `
-
-    flex-wrap: wrap;
-    flex-direction: column;
-    width: unset;
-    height: unset;
-    justify-content: start;
-    height: ${t.sp11};
-    align-items: start;
-    `}
-`, Jo = r(xe)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${t.sp3};
-  margin-bottom: ${t.sp0};
-  margin-right: ${t.sp3};
-`, Ko = r(et)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${t.sp3};
-  margin-bottom: ${t.sp2};
-`, Zo = r.div``, Io = r(b)`
-  color: ${(e) => e.theme.colors.hero};
-  margin-bottom: ${t.sp3};
-`, er = r.div`
-  cursor: pointer;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border-radius: ${t.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  position: relative;
-  margin-bottom: ${(e) => e.isLastCard ? t.sp0 : t.sp3};
-  color: ${(e) => e.theme.colors.hero};
-  box-shadow: 0px 1px 2px 0px ${(e) => e.theme.colors.dropShadowHover};
-  &:hover {
-    z-index: 1;
-    border: 1px solid ${(e) => e.theme.colors.primary};
-    color: ${(e) => e.theme.colors.primary};
-    .cardName {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, tr = r(b)`
-  color: inherit;
-`, or = r.div`
-  display: flex;
-  justify-content: space-between;
-  padding-top: ${t.sp3};
-  padding-bottom: ${t.sp3};
-  padding-left: ${(e) => `${z.cardHolderDetailsPaddingX.valuePx(e.windowSize)}`};
-  padding-right: ${(e) => `${z.cardHolderDetailsPaddingX.valuePx(e.windowSize)}`};
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-  gap: ${(e) => `${z.cardHolderDetailsGap.valuePx(e.windowSize)}`};
-`, rr = r.div`
-  width: 200px;
-  color: inherit;
-  display: flex;
-  gap: ${t.sp2};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`, nr = r(J)`
-  color: inherit;
-  position: relative;
-  top: -5px;
-`, ir = r(b)`
-  width: 216px;
-  color: inherit;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-left: ${(e) => `${z.cardNameSectionMarginLeft.valuePx(e.windowSize)}`};
-`, sr = r.div`
-  width: 163px;
-  color: inherit;
-  display: flex;
-  align-items: center;
-  gap: ${t.sp3};
-  margin-left: ${(e) => `${z.cardNameSectionMarginLeft.valuePx(e.windowSize)}`};
-`, ar = r.div`
-  margin: ${t.sp3} ${t.sp4} ${t.sp0} ${t.sp4};
-  padding-bottom: ${t.sp2};
-`, lr = r.div`
-  display: flex;
-  justify-content: space-between;
-  margin: ${t.sp2} ${t.sp0};
-`, _e = r.div`
-  background-color: ${(e) => e.theme.mode === "light" ? e.theme.colors.background : Q.neutralGrey3Dark};
-  min-height: 1px;
-  max-height: 1px;
-  width: 100%;
-`, dr = r(b)`
-  width: ${(e) => `${z.recurringExpenseMerchantWidth.valuePx(e.windowSize)}`};
-  text-align: left;
-  color: inherit;
-  display: flex;
-  gap: ${t.sp2};
-`, cr = r(b)`
-  width: ${(e) => `${z.recurringExpenseNextPaymentDateWidth.valuePx(e.windowSize)}`};
-  text-align: left;
-  color: inherit;
-`, pr = r(b)`
-  width: ${(e) => `${z.recurringExpenseAmountWidth.valuePx(e.windowSize)}`};
-  text-align: right;
-  color: inherit;
-`, hr = r(J)`
-  color: inherit;
-`, mr = r(J)`
-  color: inherit;
-  position: relative;
-  top: -5px;
-`, ur = r(b)`
-  color: inherit;
-`, gr = r.div`
-  display: flex;
-  justify-content: space-between;
-  margin: ${t.sp1} ${t.sp0};
-`, xr = r($e)`
-  color: ${(e) => e.theme.colors.primary};
-  padding: ${t.sp3} ${t.sp0};
-`, We = r(tt)`
-  width: ${t.sp4};
-  height: ${t.sp4};
-  min-width: ${t.sp4};
-  min-height: ${t.sp4};
-  color: inherit;
-`, De = r(ot)`
-  cursor: pointer;
-  width: ${t.sp4};
-  height: ${t.sp4};
-  min-width: ${t.sp4};
-  min-height: ${t.sp4};
-  color: inherit;
-`, Se = r(nt)`
-  width: ${(e) => e.width}px;
-  color: ${(e) => e.theme.colors.hero};
-`, $r = r(Se)`
-  text-align: right;
-`, wr = r.div`
-  border-radius: ${t.sp2};
-  padding-left: ${t.sp4};
-  padding-right: ${t.sp4};
-  padding-bottom: ${(e) => e.isReasonTextFieldVisible ? t.sp3 : t.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: 0px 1px 2px 0px ${(e) => e.theme.colors.dropShadowHover};
-  background: ${(e) => e.theme.colors.grey5};
-  margin-bottom: ${t.sp6};
-  &:hover {
-    z-index: 1;
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-    .reason-text-field > input {
-      background-color: ${(e) => e.theme.colors.background};
-    }
-  }
-`, fr = r($e)`
-  margin-bottom: ${t.sp3};
-  margin-top: ${t.sp7};
-  color: ${(e) => e.theme.colors.primary};
-`;
-export {
-  zr as C,
-  Lr as L,
-  kr as R,
-  Pr as U
-};