@zeniai/web-components 3.16.52 → 3.16.54

package/dist/LockCardPage-D-quZPt4.js

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