@zeniai/web-components 3.16.31 → 3.16.32

package/dist/LockCardPage-62coj_g_.js

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