@zeniai/web-components 3.16.31 → 3.16.32

package/dist/LockCardPage-C0sABFjo.js

@@ -0,0 +1,1880 @@
+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-Cynhe4j_.js";
+import { hasChargeCardAdminLevelAccess as jo } from "@zeniai/client-epic-state";
+import { c as vo, a as So, g as To } from "./ChargeCardUtils-BlLiJhdJ.js";
+import { R as to } from "./RoleWithToolTip-BfLzD5K8.js";
+import { C as ro } from "./CardNumberSubText-C1IwXiVs.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
+};