@zeniai/web-components 3.16.92 → 3.16.94

package/dist/ChargeCardListTable-BFyvNTeY.js

@@ -0,0 +1,2901 @@
+import { j as t, u as He, b as Ie, d as hs, e as ps, g as ms, F as gs, A as xs, V as us } from "./vendor-.pnpm-B2klaOGU.js";
+import me, { useState as fe, useEffect as de, useCallback as xe, useMemo as ze, useRef as fs, forwardRef as $s } from "react";
+import o from "@emotion/styled";
+import { a as ce, R as f, D as m, u as oe, dB as Se, kc as vt, ae as ws, d$ as Z, S as s, a2 as he, e as J, A as St, Z as ve, o as X, F as ee, C as k, k0 as Ae, ag as bt, Q as kt, aw as It, a9 as ys, e$ as Lt, E as Q, kd as js, ke as Cs, eX as vs, t as Re, aa as et, fL as Ss, ab as bs, fa as ks, dD as Is, fU as Ls, ao as _s, fh as Ts, z as zs, P as Ns, gw as Hs, n as Ms, kf as Os, a7 as Ps, bc as Rs, f_ as Es, kg as Bs } from "./index-B9wG56Sb.js";
+import { M as Ve } from "./Menu-B_DpiT_k.js";
+import { H as Us, a as Ws, D as Vs, b as Ks, c as qs, O as Gs, d as Zs } from "./common-Bvc67QXc.js";
+import { css as tt } from "@emotion/react";
+import { Z as _t } from "./ZeniAvatar-DNpCrrKE.js";
+import { R as Tt } from "./RoleWithToolTip-DRSravXg.js";
+import { C as Ke } from "./CardNumberSubText-D76dl24E.js";
+import { S as zt, a as Js } from "./spend-limit-D6SyboD4.js";
+import { S as Qs, a as Xs } from "./unlock-BPWn2I5L.js";
+const $e = ce.getLocalizedStrings().spendManagement.chargeCard.cardList.header, Ys = ce.getLocalizedStrings().common.strings.empty, st = {
+  key: "owner",
+  value: $e.owner,
+  sortOrder: "ascending",
+  width: new f(120, 120, 160, 200, 200)
+}, ot = {
+  key: "cardName",
+  value: $e.cardName,
+  sortOrder: "ascending",
+  width: new f(120, 120, 160, 171, 171)
+}, nt = {
+  key: "cardType",
+  value: $e.cardType,
+  sortOrder: "ascending",
+  width: new f(120, 120, 130, 170, 170)
+}, it = {
+  key: "status",
+  value: $e.status,
+  sortOrder: "ascending",
+  width: new f(115, 115, 125, 132, 132)
+}, rt = {
+  key: "utilisation",
+  value: $e.utilisation,
+  sortOrder: "ascending",
+  width: new f(m[11], m[11], m[11], m[12], 120)
+}, lt = {
+  key: "limit",
+  value: $e.limit,
+  sortOrder: "ascending",
+  width: new f(68, 68, 68, 120, 120)
+}, Nt = (e) => e === !0 ? [
+  {
+    ...st,
+    width: new f(0, 0),
+    value: Ys
+  },
+  ot,
+  nt,
+  it,
+  rt,
+  lt
+] : [
+  st,
+  ot,
+  nt,
+  it,
+  rt,
+  lt
+], {
+  common: je,
+  spendManagement: {
+    billPay: {
+      paymentDetails: { feePercent: Fs }
+    },
+    chargeCard: S
+  }
+} = ce.getLocalizedStrings(), re = {
+  containerPaddingLeft: new f(m[3], m[2]),
+  containerPaddingRight: new f(m[2], m[3]),
+  containerPaddingTop: new f(m[2], m[3]),
+  containerPaddingBottom: new f(m[2], m[3]),
+  containerMarginLeft: new f(m[4], m[0]),
+  containerMarginRight: new f(m[4], m[0]),
+  webkitLineClamp: new f(2, 1, 1, 1, 1),
+  cardHolderNamePaddingLeft: new f(m[0], m[3])
+};
+var Ds = /* @__PURE__ */ ((e) => (e.CLOSE = "close", e.LOCK = "lock", e.UNLOCK = "unlock", e.RENAME = "rename", e.UPDATE_SPEND_LIMIT = "update_spend_limit", e.REVOKE_INVITE = "revoke_invite", e))(Ds || {});
+const As = {
+  moreItemFont: new It("extraSmallRegular", "smallRegular")
+}, eo = ({
+  setCardIdForRowAction: e,
+  setActionTypeForRowAction: n,
+  rowActionView: i,
+  revokeChargeCardsInviteFetchState: d,
+  unlockChargeCardsFetchState: c,
+  cardsSelectedForBulkAction: a,
+  cardDetail: r,
+  isCardControlsEnabled: l,
+  showViewForCardUser: p,
+  signedInUser: j,
+  resendInviteId: u,
+  index: $,
+  onChargeCardRowClick: b,
+  onChargeCardResendInviteClick: C
+}) => {
+  const [g, h] = fe(!1), [w, y] = fe(!1);
+  de(() => {
+    g || y(!1);
+  }, [g]), de(() => {
+    a.length > 0 && g && (h(!1), y(!1));
+  }, [a.length, g]);
+  const M = i.cardId === r.id, _ = a.includes(r.id), z = M && i.unlockChargeCardsFetchState.fetchState === "In-Progress" || _ && c === "In-Progress", O = M && i.revokeChargeCardFetchState.fetchState === "In-Progress" || _ && d === "In-Progress", x = z || O, v = oe(), H = !!Se().loggedInUserRole.includes("charge_card_user") || p, G = xe(() => {
+    b(r.id, $);
+  }, [r.id]), B = vt(r) / r.limit.amount * 100, P = r?.cardHolderUserId === j.userId, R = r.status.code !== "closed" && r.status.code !== "closed_by_customer", U = ws(r.cardHolderUser, !1), Y = r.balance, L = Nt(H), K = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      Z,
+      {
+        isLoading: x,
+        customStyle: {
+          width: s.sp9,
+          height: "20px",
+          borderRadius: s.sp1
+        },
+        children: /* @__PURE__ */ t.jsx(
+          wo,
+          {
+            title: he("0,0.[00]", Y),
+            className: "amountToUtilize",
+            children: he("0,0.[00]", Y)
+          }
+        )
+      }
+    ),
+    B !== 0 ? /* @__PURE__ */ t.jsx(
+      Z,
+      {
+        isLoading: x,
+        customStyle: {
+          width: s.sp11,
+          height: s.sp3,
+          borderRadius: s.sp1
+        },
+        children: /* @__PURE__ */ t.jsx(yo, { className: "amountToUtilize", children: `${Math.round(B)}${Fs}` })
+      }
+    ) : null
+  ] }), W = r.type.code, te = S.cardList.tooltip[W], se = te != null ? P ? te.self : `${U} ${te.cardUser}` : je.strings.empty;
+  return /* @__PURE__ */ t.jsx(so, { windowSize: v, children: /* @__PURE__ */ t.jsx(
+    oo,
+    {
+      onClick: G,
+      "data-testid": J("card-row", r.id),
+      children: /* @__PURE__ */ t.jsxs(io, { children: [
+        H ? null : /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsxs(
+          ro,
+          {
+            windowSize: v,
+            responsiveWidth: L[0].width,
+            children: [
+              /* @__PURE__ */ t.jsx(
+                Z,
+                {
+                  isLoading: x,
+                  flex: "0 0",
+                  customStyle: {
+                    width: s.sp6,
+                    height: s.sp6,
+                    borderRadius: "50%"
+                  },
+                  children: /* @__PURE__ */ t.jsx(
+                    _t,
+                    {
+                      personBasic: r.cardHolderUser,
+                      styles: {
+                        height: s.sp6,
+                        width: s.sp6,
+                        minWidth: s.sp6
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ t.jsxs(ao, { isLoading: x, children: [
+                /* @__PURE__ */ t.jsx(lo, { isLoading: x, children: /* @__PURE__ */ t.jsx(
+                  Z,
+                  {
+                    isLoading: x,
+                    customStyle: {
+                      width: "88px",
+                      height: "20px",
+                      borderRadius: s.sp1
+                    },
+                    children: /* @__PURE__ */ t.jsx(
+                      co,
+                      {
+                        windowSize: v,
+                        title: U,
+                        className: "cardHolderName",
+                        children: U === je.strings.empty ? je.strings.hyphen : U
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ t.jsx(
+                  Z,
+                  {
+                    isLoading: x,
+                    customStyle: {
+                      width: "104px",
+                      height: s.sp3,
+                      borderRadius: s.sp1
+                    },
+                    children: /* @__PURE__ */ t.jsx(ht, { className: "additionalInfoContainer", children: r.cardHolderRoles?.userRoles != null && /* @__PURE__ */ t.jsx(
+                      Tt,
+                      {
+                        roles: r.cardHolderRoles?.userRoles
+                      }
+                    ) })
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsxs(
+          go,
+          {
+            isLoading: x,
+            windowSize: v,
+            responsiveWidth: L[1].width,
+            children: [
+              /* @__PURE__ */ t.jsx(
+                Z,
+                {
+                  isLoading: x,
+                  customStyle: {
+                    width: "88px",
+                    height: "20px",
+                    borderRadius: s.sp1
+                  },
+                  children: /* @__PURE__ */ t.jsx(xo, { title: r.cardName, className: "cardName", children: r.cardName })
+                }
+              ),
+              /* @__PURE__ */ t.jsxs(
+                Z,
+                {
+                  isLoading: x,
+                  customStyle: {
+                    width: "104px",
+                    height: s.sp3,
+                    borderRadius: s.sp1
+                  },
+                  children: [
+                    " ",
+                    /* @__PURE__ */ t.jsx(
+                      ko,
+                      {
+                        windowSize: v,
+                        className: "cardNameSubText",
+                        children: r.status.code === "request_on_hold" ? je.strings.hyphen : S.cardDetails.expiryHideOut + je.strings.space + r.accountLast4
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsx(
+          uo,
+          {
+            windowSize: v,
+            responsiveWidth: L[2].width,
+            children: /* @__PURE__ */ t.jsx(fo, { className: "card-type", children: /* @__PURE__ */ t.jsx(
+              Z,
+              {
+                isLoading: x,
+                customStyle: {
+                  width: "144px",
+                  height: s.sp4,
+                  borderRadius: s.sp1
+                },
+                children: /* @__PURE__ */ t.jsx(
+                  Ke,
+                  {
+                    cardDetail: r,
+                    forDetailPage: !1
+                  }
+                )
+              }
+            ) })
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsx(
+          pt,
+          {
+            windowSize: v,
+            isLoading: x,
+            responsiveWidth: L[3].width,
+            children: /* @__PURE__ */ t.jsx(
+              Z,
+              {
+                isLoading: x,
+                customStyle: {
+                  width: "112px",
+                  height: s.sp4,
+                  borderRadius: s.sp1
+                },
+                children: u === r.id ? /* @__PURE__ */ t.jsx(St, { size: "Small", start: !0 }) : /* @__PURE__ */ t.jsxs($o, { children: [
+                  /* @__PURE__ */ t.jsx(vo, { children: r.status.code === "request_on_hold" ? /* @__PURE__ */ t.jsxs(
+                    ve,
+                    {
+                      display: "flex",
+                      title: se,
+                      placement: "top",
+                      style: { padding: `${s.sp2} ${s.sp3}` },
+                      children: [
+                        /* @__PURE__ */ t.jsx(
+                          Ne,
+                          {
+                            status: r.status.code,
+                            style: { cursor: "pointer" }
+                          }
+                        ),
+                        /* @__PURE__ */ t.jsx(
+                          jo,
+                          {
+                            style: { marginLeft: s.sp1 },
+                            className: "infoIconTooltip"
+                          }
+                        )
+                      ]
+                    }
+                  ) : /* @__PURE__ */ t.jsx(Ne, { status: r.status.code }) }),
+                  r.status.code === "request_on_hold" && !P ? /* @__PURE__ */ t.jsx(
+                    Co,
+                    {
+                      onClick: (F) => {
+                        F.stopPropagation(), C(r.id);
+                      },
+                      "data-testid": J(
+                        "send-reminder",
+                        r.id
+                      ),
+                      children: S.cardList.sendReminder
+                    }
+                  ) : null
+                ] })
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsx(
+          pt,
+          {
+            windowSize: v,
+            isLoading: x,
+            responsiveWidth: L[4].width,
+            children: K
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsxs(
+          ho,
+          {
+            windowSize: v,
+            responsiveWidth: L[5].width,
+            children: [
+              /* @__PURE__ */ t.jsxs(po, { windowSize: v, isLoading: x, children: [
+                /* @__PURE__ */ t.jsx(
+                  Z,
+                  {
+                    isLoading: x,
+                    customStyle: {
+                      width: "68px",
+                      height: "20px",
+                      borderRadius: s.sp1
+                    },
+                    children: /* @__PURE__ */ t.jsx(
+                      mo,
+                      {
+                        className: "limitAmount",
+                        windowSize: v,
+                        title: he("0,0.[00]", r.limit),
+                        children: he("0,0.[00]", r.limit)
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(ht, { className: "additionalInfoContainer", children: /* @__PURE__ */ t.jsx(
+                  Z,
+                  {
+                    isLoading: x,
+                    customStyle: {
+                      width: s.sp8,
+                      height: s.sp3,
+                      borderRadius: s.sp1
+                    },
+                    children: r.creditLimitFrequency.name
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ t.jsx(
+                So,
+                {
+                  className: "menu-icon",
+                  onMouseEnter: () => {
+                    !g && R && y(!0);
+                  },
+                  onMouseLeave: () => {
+                    R && y(!1);
+                  },
+                  children: (() => {
+                    const F = r.status.code === "locked", we = r.status.code === "closed" || r.status.code === "closed_by_customer", N = H ? l && !x && !we && !(F && r.isLockedByAdmin) : l ? !x && R : r.status.code === "request_on_hold", ne = a.length > 0;
+                    return N && /* @__PURE__ */ t.jsx(
+                      ve,
+                      {
+                        open: w && !g && !ne,
+                        variant: "standard",
+                        title: S.cardList.moreActionsTooltip,
+                        placement: "bottom-end",
+                        children: /* @__PURE__ */ t.jsx(
+                          Ve,
+                          {
+                            isMenuVisible: !0,
+                            menuItems: /* @__PURE__ */ t.jsx(bo, { children: /* @__PURE__ */ t.jsx(
+                              Ht,
+                              {
+                                cardDetail: r,
+                                isCardControlsEnabled: l,
+                                isChargeCardUser: H,
+                                setIsMenuOpen: h,
+                                setCardIdForRowAction: e,
+                                setActionTypeForRowAction: n
+                              }
+                            ) }),
+                            setIsMenuOpen: (qe) => {
+                              ne || h(qe);
+                            },
+                            isMenuOpen: g && !ne,
+                            menuIconStyles: {
+                              height: "auto",
+                              cursor: ne ? "not-allowed" : "pointer",
+                              opacity: ne ? 0.5 : 1,
+                              pointerEvents: ne ? "none" : "auto"
+                            },
+                            styles: {
+                              transform: `translate(${s.sp3},${s.sp2})`
+                            }
+                          }
+                        )
+                      }
+                    );
+                  })()
+                }
+              )
+            ]
+          }
+        ) })
+      ] })
+    }
+  ) });
+}, Ht = ({
+  cardDetail: e,
+  isCardControlsEnabled: n,
+  isChargeCardUser: i,
+  setIsMenuOpen: d,
+  setCardIdForRowAction: c,
+  setActionTypeForRowAction: a
+}) => {
+  const r = oe();
+  return n ? e.status.code === "request_on_hold" ? i ? /* @__PURE__ */ t.jsxs(
+    I,
+    {
+      windowSize: r,
+      onClick: (l) => {
+        l.stopPropagation(), d(!1), c(e.id), a(
+          "rename"
+          /* RENAME */
+        );
+      },
+      children: [
+        /* @__PURE__ */ t.jsx(ie, {}),
+        /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.rename })
+      ]
+    }
+  ) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "rename"
+            /* RENAME */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(ie, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.rename })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(Le, {}),
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        hoverImportant: !0,
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "revoke_invite"
+            /* REVOKE_INVITE */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(no, {}),
+          /* @__PURE__ */ t.jsx(Ce, { children: S.cardDetails.revokeInvite })
+        ]
+      }
+    )
+  ] }) : e.status.code === "inactive" ? i ? /* @__PURE__ */ t.jsxs(
+    I,
+    {
+      windowSize: r,
+      onClick: (l) => {
+        l.stopPropagation(), d(!1), c(e.id), a(
+          "rename"
+          /* RENAME */
+        );
+      },
+      children: [
+        /* @__PURE__ */ t.jsx(ie, {}),
+        /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.rename })
+      ]
+    }
+  ) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "rename"
+            /* RENAME */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(ie, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.rename })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(Le, {}),
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        hoverImportant: !0,
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "close"
+            /* CLOSE */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(Pe, {}),
+          /* @__PURE__ */ t.jsx(Ce, { children: S.cardDetails.moreOptions.close })
+        ]
+      }
+    )
+  ] }) : e.status.code === "locked" ? i ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "unlock"
+            /* UNLOCK */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(ct, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.unlock })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "rename"
+            /* RENAME */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(ie, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.rename })
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "unlock"
+            /* UNLOCK */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(ct, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.unlock })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "rename"
+            /* RENAME */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(ie, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.rename })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "update_spend_limit"
+            /* UPDATE_SPEND_LIMIT */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(at, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.updateSpendLimit })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(Le, {}),
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        hoverImportant: !0,
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "close"
+            /* CLOSE */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(Pe, {}),
+          /* @__PURE__ */ t.jsx(Ce, { children: S.cardDetails.moreOptions.close })
+        ]
+      }
+    )
+  ] }) : i ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "rename"
+            /* RENAME */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(ie, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.rename })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "lock"
+            /* LOCK */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(dt, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.lock })
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "update_spend_limit"
+            /* UPDATE_SPEND_LIMIT */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(at, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.updateSpendLimit })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "rename"
+            /* RENAME */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(ie, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.rename })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "lock"
+            /* LOCK */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(dt, {}),
+          /* @__PURE__ */ t.jsx(E, { children: S.cardDetails.moreOptions.lock })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(Le, {}),
+    /* @__PURE__ */ t.jsxs(
+      I,
+      {
+        windowSize: r,
+        hoverImportant: !0,
+        onClick: (l) => {
+          l.stopPropagation(), d(!1), c(e.id), a(
+            "close"
+            /* CLOSE */
+          );
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(Pe, {}),
+          /* @__PURE__ */ t.jsx(Ce, { children: S.cardDetails.moreOptions.close })
+        ]
+      }
+    )
+  ] }) : e.status.code === "request_on_hold" ? /* @__PURE__ */ t.jsx(
+    I,
+    {
+      hoverImportant: !0,
+      windowSize: r,
+      onClick: (l) => {
+        l.stopPropagation(), d(!1), c(e.id), a(
+          "revoke_invite"
+          /* REVOKE_INVITE */
+        );
+      },
+      children: /* @__PURE__ */ t.jsx(Ce, { children: S.cardDetails.revokeInvite })
+    }
+  ) : null;
+}, Ne = ({
+  status: e,
+  style: n
+}) => {
+  const i = He(), d = to(e, i), c = ce.getLocalizedStrings().spendManagement.chargeCard.cardList.status;
+  return oe() === "small" ? /* @__PURE__ */ t.jsx(
+    Ae,
+    {
+      textColor: d,
+      text: c[e],
+      tagStyles: {
+        maxWidth: s.sp10,
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        padding: "1px 6px",
+        ...n
+      }
+    }
+  ) : /* @__PURE__ */ t.jsx(
+    Ae,
+    {
+      textColor: d,
+      text: c[e],
+      styles: n,
+      tagStyles: { padding: "1px 6px" }
+    }
+  );
+}, to = (e, n) => {
+  switch (e) {
+    case "active":
+      return new Ie(k.success);
+    case "request_on_hold":
+      return new Ie(k.graphColor36);
+    case "inactive":
+      return new Ie(k.alert);
+    default:
+      return new Ie(n.colors.grey1);
+  }
+}, E = o(X)`
+  color: inherit;
+`, Ce = o(X)`
+  color: ${k.important};
+`, so = o.div`
+  display: flex;
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-left: ${(e) => re.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => re.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => re.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => re.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${(e) => e.theme.mode === "dark" ? `${k.dropShadowNormalDark} ${s.sp0} 2px ${s.sp1}` : `${s.sp0} 2px ${s.sp1} ${k.dropShadowNormalLight}`};
+  border-radius: ${s.sp2};
+  width: 100%;
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    border-color: ${(e) => e.theme.colors.primary};
+    .cardHolderName,
+    .additionalInfoContainer,
+    .amountToUtilize,
+    .cardName,
+    .cardNameSubText,
+    .limitAmount,
+    .card-type {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    .physical-card-icon {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    .roles-count-wrapper {
+      border-color: ${(e) => e.theme.colors.primary};
+    }
+  }
+
+  margin-right: ${(e) => re.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${(e) => re.containerMarginRight.valuePx(e.windowSize)};
+  margin-bottom: ${s.sp3};
+  box-sizing: border-box;
+  align-items: center;
+`, oo = o.div`
+  display: block;
+  width: 100%;
+`, no = o(Qs)`
+  width: ${s.sp4};
+  height: ${s.sp4};
+  color: ${k.important};
+`, Pe = o(zt)`
+  width: ${s.sp4};
+  height: ${s.sp4};
+  color: ${k.important};
+`, at = o(Js)`
+  width: ${s.sp4};
+  height: ${s.sp4};
+  color: inherit;
+`, ie = o(ys)`
+  width: ${s.sp4};
+  height: ${s.sp4};
+  color: inherit;
+`, dt = o(Lt)`
+  width: ${s.sp4};
+  height: ${s.sp4};
+  color: inherit;
+`, ct = o(Xs)`
+  width: ${s.sp4};
+  height: ${s.sp4};
+  color: inherit;
+`, io = o.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`, ro = o.div`
+  display: flex;
+  column-gap: ${s.sp2};
+  align-items: flex-start;
+  width: ${(e) => e.responsiveWidth.valuePx(e.windowSize)};
+  min-width: ${(e) => e.responsiveWidth.valuePx(e.windowSize)};
+`, lo = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${s.sp1};
+  flex-grow: 1;
+  margin-bottom: ${(e) => e.isLoading ? 0 : `-${s.sp1}`};
+`, ao = o.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(e) => e.isLoading ? s.sp1 : s.sp0};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, co = o(X)`
+  color: ${(e) => e.theme.colors.hero};
+  flex-grow: 1;
+  -webkit-line-clamp: ${(e) => re.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+`, ho = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: ${(e) => e.responsiveWidth.valuePx(e.windowSize)};
+  min-width: ${(e) => e.responsiveWidth.valuePx(e.windowSize)};
+  position: relative;
+  padding-right: ${s.sp6};
+`, po = o(X)`
+  display: flex;
+  flex-direction: column;
+  color: ${(e) => e.theme.colors.hero};
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: ${(e) => e.isLoading ? s.sp1 : s.sp0};
+`, mo = o(X)`
+  color: ${(e) => e.theme.colors.hero};
+  flex-grow: 1;
+  -webkit-line-clamp: ${(e) => re.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: -${s.sp1};
+`, ht = o(ee)`
+  color: ${(e) => e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, ge = o.div`
+  > div {
+    padding-left: ${s.sp3};
+    box-sizing: border-box;
+  }
+`, go = o.div`
+  width: ${(e) => e.responsiveWidth.valuePx(e.windowSize)};
+  min-width: ${(e) => e.responsiveWidth.valuePx(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+  gap: ${(e) => e.isLoading ? s.sp1 : s.sp0};
+`, xo = o(X)`
+  color: ${(e) => e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: -${s.sp1};
+`, uo = o(X)`
+  color: ${(e) => e.theme.colors.hero};
+  width: ${(e) => e.responsiveWidth.valuePx(e.windowSize)};
+  min-width: ${(e) => e.responsiveWidth.valuePx(e.windowSize)};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`, fo = o(X)`
+  color: ${(e) => e.theme.colors.hero};
+  max-width: 100%;
+  padding-right: ${s.sp2};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, pt = o.div`
+  position: relative;
+  top: 2px;
+  width: ${(e) => e.responsiveWidth.valuePx(e.windowSize)};
+  min-width: ${(e) => e.responsiveWidth.valuePx(e.windowSize)};
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: ${(e) => e.isLoading ? s.sp1 : s.sp0};
+`, $o = o.div`
+  display: flex;
+  align-items: start;
+  flex-direction: column;
+`, wo = o(X)`
+  color: ${(e) => e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, yo = o(ee)`
+  color: ${(e) => e.theme.colors.hero};
+`;
+o(Q)`
+  display: flex;
+  gap: ${s.sp2};
+  align-items: center;
+  color: ${(e) => e.theme.colors.grey1};
+`;
+o.div`
+  display: flex;
+  align-items: center;
+  gap: ${s.sp2};
+`;
+o.div`
+  height: ${s.sp1};
+  width: ${s.sp1};
+  background-color: ${(e) => e.theme.colors.grey1};
+  border-radius: 50%;
+  opacity: 0.4;
+`;
+const Le = o.div`
+  height: 1px;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey3};
+  margin: ${s.sp1} ${s.sp0};
+`;
+o.div`
+  display: flex;
+  align-items: center;
+  white-space: pre-wrap;
+`;
+const jo = o(bt)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  margin-bottom: 0;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Co = o(kt)`
+  color: ${k.link};
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`, vo = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${s.sp1};
+  &:hover {
+    .infoIconTooltip {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, So = o.div`
+  display: flex;
+  min-width: ${s.sp3};
+  margin-left: ${s.sp2};
+  position: absolute;
+  right: ${s.sp2};
+`, bo = o.div`
+  margin: 5px ${s.sp0};
+`, I = o(ee)`
+  ${({ windowSize: e }) => As.moreItemFont.style(e)}
+  height: ${s.sp6};
+  display: flex;
+  align-items: center;
+  padding: ${s.sp0} ${s.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  gap: ${s.sp2};
+  cursor: pointer;
+  :hover {
+    background-color: ${(e) => e.hoverImportant === !0 ? k.importantLight : e.theme.colors.background};
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ko = o(ee)`
+  color: ${(e) => e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: ${s.sp1};
+`, Mt = me.memo(
+  ({
+    allCheckBoxValues: e,
+    checkBox: n,
+    fieldName: i,
+    index: d,
+    containerStyle: c,
+    "data-testid": a,
+    groupLabelCheckBox: r,
+    registerOptions: l,
+    style: p,
+    mode: j,
+    checkBoxContainerStyle: u,
+    checkBoxIconStyle: $,
+    checkBoxStyle: b,
+    labelCheckBoxStyle: C,
+    labelStyle: g,
+    width: h,
+    isDisabled: w,
+    selectionLimit: y,
+    infoIconContainerStyle: M,
+    checkedIconColor: _,
+    draggable: z = !1,
+    onDragStart: O
+  }) => {
+    const { control: x } = hs();
+    return /* @__PURE__ */ t.jsx(
+      ps,
+      {
+        control: x,
+        name: i,
+        rules: l,
+        render: ({ field: { value: v, onChange: q, ref: H } }) => /* @__PURE__ */ t.jsx(
+          Io,
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              width: "100%",
+              ...u,
+              ...c
+            },
+            "data-testid": a ?? J("virtualized-checkbox-field", i),
+            children: /* @__PURE__ */ t.jsx(
+              js,
+              {
+                checkBox: n,
+                index: d,
+                value: v,
+                allCheckBoxValues: e,
+                mode: j,
+                name: i,
+                checkBoxContainerStyle: p,
+                checkBoxIconStyle: $,
+                checkBoxStyle: n.groupLabel ? C : b,
+                labelCheckBoxStyle: C,
+                labelStyle: g,
+                width: h,
+                groupLabelCheckBox: r,
+                infoIconContainerStyle: M,
+                selectionLimit: y,
+                checkedIconColor: _,
+                isDisabled: w,
+                draggable: z,
+                onDragStart: O,
+                ref: H,
+                onChangeHandler: (G) => Cs({
+                  event: G,
+                  value: v,
+                  allCheckBoxValues: e,
+                  groupLabelCheckBox: r,
+                  onChange: q
+                })
+              }
+            )
+          }
+        )
+      }
+    );
+  },
+  (e, n) => e.checkBox === n.checkBox && e.index === n.index && e.mode === n.mode && e.isDisabled === n.isDisabled && e.selectionLimit === n.selectionLimit && e.allCheckBoxValues.length === n.allCheckBoxValues.length && e.groupLabelCheckBox?.value === n.groupLabelCheckBox?.value
+);
+Mt.displayName = "VirtualizedCheckBoxField";
+const Io = o.div`
+  position: relative;
+`, D = {
+  containerPaddingLeft: s.sp2,
+  containerPaddingRight: s.sp3,
+  containerPaddingTop: s.sp3,
+  containerPaddingBottom: s.sp3,
+  headerLastColumnTopPadding: new f(m[0], m[4]),
+  headerLastColumnRightPadding: new f(m[3], m[11]),
+  headerLastColumnBottomPadding: new f(m[0], m[4]),
+  headerLastColumnLeftPadding: new f(m[0], m[11]),
+  headerHeight: new f(Us, Ws)
+};
+function Lo({
+  companyNameSticky: e,
+  sortConfig: n,
+  showViewForCardUser: i,
+  onColumnSortConfigChanged: d
+}) {
+  const c = He(), a = oe(), l = !!Se().loggedInUserRole.includes("charge_card_user") || i, [p, j] = fe(
+    Nt(l)
+  );
+  de(() => {
+    const h = [...p];
+    for (const w of h)
+      w.key === n.sortKey ? w.sortOrder = n.sortOrder : w.sortOrder = "ascending";
+    j(h);
+  }, [n.sortKey, n.sortOrder]);
+  const u = (h, w) => {
+    let y = w;
+    n.sortKey === h && (y = w === "ascending" ? "descending" : "ascending"), d(h, y);
+  }, $ = p.find((h) => h.key === n.sortKey) ?? (l ? p[1] : p[0]), b = (h) => p.find((w) => w.key === h)?.value ?? "", C = (l ? p.filter((h) => h.key !== "owner") : p).map((h) => h.key), g = ce.getLocalizedStrings().spendManagement.chargeCard.cardList;
+  return a === "small" ? /* @__PURE__ */ t.jsxs(No, { windowSize: a, children: [
+    /* @__PURE__ */ t.jsxs(Oo, { children: [
+      /* @__PURE__ */ t.jsx(Ro, { children: /* @__PURE__ */ t.jsx(Po, {}) }),
+      /* @__PURE__ */ t.jsx(
+        vs,
+        {
+          title: g.sortBy,
+          placeholder: g.sortBy,
+          pickerValues: C,
+          valueToLabel: b,
+          selectedValue: n.sortKey,
+          onPickerSelectionChanged: (h) => {
+            u(
+              h,
+              "ascending"
+            );
+          },
+          optionTextStyle: Re.extraSmallRegular,
+          titleTextStyle: Re.extraSmallRegular,
+          titleColor: c.colors.primary,
+          selectedOptionColor: c.colors.hero,
+          optionBackgroundColor: c.colors.grey5,
+          downChevronVisible: !1,
+          backgroundColor: c.colors.grey4
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsxs(
+      Uo,
+      {
+        onClick: () => u(
+          $.key,
+          $.sortOrder
+        ),
+        "data-testid": J(
+          "mobile-cards-list-sort-clicked",
+          n.sortKey
+        ),
+        children: [
+          /* @__PURE__ */ t.jsx(Q, { children: $.value }),
+          /* @__PURE__ */ t.jsx(
+            mt,
+            {
+              windowSize: a,
+              sortDataValue: n.sortKey,
+              headerdata: $,
+              children: /* @__PURE__ */ t.jsx(gt, { windowSize: a, children: /* @__PURE__ */ t.jsx(et, {}) })
+            }
+          )
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ t.jsx(To, { windowSize: a, children: /* @__PURE__ */ t.jsx(zo, { children: p.map(
+    (h) => h.width.value(a) !== 0 && /* @__PURE__ */ t.jsxs(
+      Ho,
+      {
+        companyNameSticky: e,
+        sortDataValue: n.sortKey,
+        actualDataValue: h.key,
+        wrapperWidth: h.width,
+        windowSize: a,
+        children: [
+          /* @__PURE__ */ t.jsxs(
+            Bo,
+            {
+              onClick: () => u(
+                h.key,
+                h.sortOrder
+              ),
+              "data-testid": J(
+                "cards-list-sort-clicked",
+                n.sortKey
+              ),
+              children: [
+                /* @__PURE__ */ t.jsx(Q, { children: h.value }),
+                /* @__PURE__ */ t.jsx(
+                  mt,
+                  {
+                    windowSize: a,
+                    sortDataValue: n.sortKey,
+                    headerdata: h,
+                    children: /* @__PURE__ */ t.jsx(gt, { windowSize: a, children: /* @__PURE__ */ t.jsx(et, {}) })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            Eo,
+            {
+              sortDataValue: n.sortKey,
+              windowSize: a,
+              isVisible: n.sortKey === h.key && (l ? h.key !== "cardName" : h.key !== "owner"),
+              children: /* @__PURE__ */ t.jsx(
+                Mo,
+                {
+                  onClick: () => u(
+                    l ? "cardName" : "owner",
+                    "ascending"
+                  ),
+                  "data-testid": J(
+                    "cards-list-sort-cancel",
+                    n.sortKey
+                  )
+                }
+              )
+            }
+          )
+        ]
+      },
+      h.key
+    )
+  ) }) });
+}
+const _o = me.memo(Lo), To = o.div`
+  top: ${s.sp0};
+  left: ${s.sp0};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+  position: sticky;
+  width: 100%;
+`, zo = o.div`
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${D.containerPaddingTop} ${D.containerPaddingRight}
+    ${D.containerPaddingBottom} ${D.containerPaddingLeft};
+  justify-content: space-between;
+`, No = o(ee)`
+  top: ${s.sp0};
+  left: ${s.sp0};
+  min-height: ${(e) => D.headerHeight.valuePx(e.windowSize)};
+  max-height: ${(e) => D.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${(e) => `${D.headerLastColumnTopPadding.valuePx(
+  e.windowSize
+)} ${D.headerLastColumnRightPadding.valuePx(
+  e.windowSize
+)} ${D.headerLastColumnBottomPadding.valuePx(
+  e.windowSize
+)} ${D.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${(e) => e.theme.colors.grey4};
+  justify-content: space-between;
+  position: sticky;
+  width: 100%;
+`, Ho = o.div`
+  color: ${(e) => e.sortDataValue === e.actualDataValue ? e.theme.colors.primary : e.theme.colors.grey1};
+  width: ${(e) => e.wrapperWidth.valuePx(e.windowSize)};
+  max-width: ${(e) => e.wrapperWidth.valuePx(e.windowSize)};
+  min-width: ${(e) => e.wrapperWidth.valuePx(e.windowSize)};
+  display: flex;
+  align-items: center;
+  left: ${s.sp0};
+  justify-content: ${(e) => e.actualDataValue === "limit" ? "flex-end" : "flex-start"};
+  ${(e) => e.companyNameSticky ? tt`
+          position: sticky;
+          z-index: 1;
+        ` : tt`
+          position: static;
+          z-index: 0;
+        `};
+  box-sizing: border-box;
+  overflow: hidden;
+  padding-left: ${s.sp3};
+  padding-right: ${(e) => e.actualDataValue === "limit" ? s.sp6 : s.sp3};
+`, Mo = o(bs)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+`, mt = o.div`
+  display: flex;
+  align-items: center;
+  transform: ${(e) => e.sortDataValue === e.headerdata.key && e.headerdata.sortOrder === "descending" ? "rotate(180deg)" : "rotate(0deg)"};
+`, gt = o.div`
+  width: ${s.sp2};
+  height: ${s.sp2};
+  cursor: pointer;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, Oo = o.div`
+  gap: ${s.sp1};
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+`, Po = o(Ss)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  color: inherit;
+`, Ro = o.div`
+  margin-right: ${s.sp1};
+  display: flex;
+  align-items: center;
+`, Eo = o.div`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  align-items: center;
+  padding-top: 2px;
+`, Bo = o.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Uo = o.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  color: ${(e) => e.theme.colors.primary};
+`, {
+  spendManagement: {
+    billPay: {
+      paymentDetails: { feePercent: Wo }
+    },
+    chargeCard: pe
+  },
+  common: A
+} = ce.getLocalizedStrings(), Ee = {
+  containerMarginLeft: new f(m[3], m[8]),
+  webkitLineClamp: new f(2, 2, 1, 1, 1)
+}, Vo = ({
+  setCardIdForRowAction: e,
+  setActionTypeForRowAction: n,
+  cardDetail: i,
+  isCardControlsEnabled: d,
+  showViewForCardUser: c,
+  signedInUser: a,
+  resendInviteId: r,
+  index: l,
+  onChargeCardRowClick: p,
+  onChargeCardResendInviteClick: j,
+  rowActionView: u,
+  revokeChargeCardsInviteFetchState: $,
+  unlockChargeCardsFetchState: b,
+  cardsSelectedForBulkAction: C
+}) => {
+  const h = !!Se().loggedInUserRole.includes("charge_card_user") || c, w = xe(() => {
+    p(i.id, l);
+  }, [i.id]);
+  return h ? /* @__PURE__ */ t.jsx(Ko, { cardDetail: i, onRowClick: w }) : /* @__PURE__ */ t.jsx(
+    qo,
+    {
+      setCardIdForRowAction: e,
+      setActionTypeForRowAction: n,
+      cardDetail: i,
+      isCardControlsEnabled: d,
+      signedInUser: a,
+      resendInviteId: r,
+      onRowClick: w,
+      onChargeCardResendInviteClick: j,
+      rowActionView: u,
+      revokeChargeCardsInviteFetchState: $,
+      unlockChargeCardsFetchState: b,
+      cardsSelectedForBulkAction: C,
+      showViewForCardUser: c
+    }
+  );
+}, Ot = ({
+  cardDetail: e
+}) => {
+  const n = e.balance, i = vt(e) / e.limit.amount * 100;
+  return /* @__PURE__ */ t.jsxs(Qo, { children: [
+    /* @__PURE__ */ t.jsx(en, { children: he("0,0.[00]", n) }),
+    i !== 0 ? /* @__PURE__ */ t.jsx(Fo, { children: `${Math.round(i)}${Wo}` }) : null
+  ] });
+}, Ko = ({
+  cardDetail: e,
+  onRowClick: n
+}) => {
+  const i = oe();
+  return /* @__PURE__ */ t.jsx(Pt, { windowSize: i, children: /* @__PURE__ */ t.jsx(
+    Rt,
+    {
+      onClick: n,
+      "data-testid": J("charge-card-user-row", e.id),
+      children: /* @__PURE__ */ t.jsxs(Be, { children: [
+        /* @__PURE__ */ t.jsx(Gt, { children: /* @__PURE__ */ t.jsxs(Jt, { cardUser: !0, children: [
+          /* @__PURE__ */ t.jsxs(Ut, { children: [
+            /* @__PURE__ */ t.jsx(Vt, { children: A.labels.cardName }),
+            /* @__PURE__ */ t.jsxs(Wt, { children: [
+              /* @__PURE__ */ t.jsx(Kt, { title: e.cardName, children: e.cardName }),
+              /* @__PURE__ */ t.jsx(es, { windowSize: i, children: pe.cardDetails.expiryHideOut + A.strings.space + e.accountLast4 })
+            ] })
+          ] }),
+          /* @__PURE__ */ t.jsxs(Et, { children: [
+            /* @__PURE__ */ t.jsx(Bt, { children: `${pe.cardList.header.cardType}${A.strings.colon}` }),
+            /* @__PURE__ */ t.jsx(We, { children: /* @__PURE__ */ t.jsx(
+              Ke,
+              {
+                cardDetail: e,
+                forDetailPage: !1
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ t.jsxs(Qt, { children: [
+            /* @__PURE__ */ t.jsx(Yt, { children: A.labels.limit }),
+            /* @__PURE__ */ t.jsxs(Ft, { children: [
+              /* @__PURE__ */ t.jsx(Xt, { children: he("0,0.[00]", e.limit) }),
+              /* @__PURE__ */ t.jsx(Dt, {}),
+              /* @__PURE__ */ t.jsx(Ue, { children: e.creditLimitFrequency.name })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ t.jsx(Zt, { children: /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          e.status.code !== "request_on_hold" ? /* @__PURE__ */ t.jsx(Ot, { cardDetail: e }) : null,
+          /* @__PURE__ */ t.jsxs(qt, { children: [
+            /* @__PURE__ */ t.jsx(Ne, { status: e.status.code }),
+            e.status.code === "request_on_hold" ? /* @__PURE__ */ t.jsx(
+              ve,
+              {
+                display: "flex",
+                title: pe.cardList.tooltip[e.type.code].self,
+                placement: "top",
+                style: { padding: `${s.sp2} ${s.sp3}` },
+                children: /* @__PURE__ */ t.jsx(At, { className: "infoIconTooltip" })
+              }
+            ) : null
+          ] })
+        ] }) })
+      ] })
+    }
+  ) });
+}, qo = ({
+  setCardIdForRowAction: e,
+  setActionTypeForRowAction: n,
+  cardDetail: i,
+  isCardControlsEnabled: d,
+  signedInUser: c,
+  resendInviteId: a,
+  onRowClick: r,
+  onChargeCardResendInviteClick: l,
+  rowActionView: p,
+  revokeChargeCardsInviteFetchState: j,
+  unlockChargeCardsFetchState: u,
+  cardsSelectedForBulkAction: $,
+  showViewForCardUser: b
+}) => {
+  const [C, g] = fe(!1);
+  de(() => {
+    $.length > 0 && C && g(!1);
+  }, [$.length, C]);
+  const w = !!Se().loggedInUserRole.includes("charge_card_user") || b, y = `${i.cardHolderUser?.firstName ?? ""} ${i.cardHolderUser?.lastName ?? ""}`, M = i?.cardHolderUserId === c.userId, _ = oe(), z = i.type.code, O = pe.cardList.tooltip[z], x = O != null ? M ? O.self : `${y} ${O.cardUser}` : A.strings.empty, v = p.cardId === i.id, q = $.includes(i.id), H = v && p.unlockChargeCardsFetchState.fetchState === "In-Progress" || q && u === "In-Progress", G = v && p.revokeChargeCardFetchState.fetchState === "In-Progress" || q && j === "In-Progress", B = H || G, P = i.status.code !== "closed" && i.status.code !== "closed_by_customer";
+  return /* @__PURE__ */ t.jsx(Pt, { windowSize: _, children: /* @__PURE__ */ t.jsxs(
+    Rt,
+    {
+      onClick: r,
+      "data-testid": J(
+        "charge-card-admin-row",
+        i.id
+      ),
+      children: [
+        /* @__PURE__ */ t.jsxs(Be, { children: [
+          /* @__PURE__ */ t.jsxs(Gt, { children: [
+            /* @__PURE__ */ t.jsx(Xo, { children: /* @__PURE__ */ t.jsx(
+              _t,
+              {
+                personBasic: i.cardHolderUser,
+                styles: { height: s.sp6, width: s.sp6 }
+              }
+            ) }),
+            /* @__PURE__ */ t.jsx(Yo, { children: /* @__PURE__ */ t.jsxs(Ao, { children: [
+              /* @__PURE__ */ t.jsx(Go, { children: /* @__PURE__ */ t.jsx(
+                Zo,
+                {
+                  windowSize: _,
+                  title: y,
+                  children: y
+                }
+              ) }),
+              /* @__PURE__ */ t.jsx(Ue, { style: { marginTop: `-${s.sp1}` }, children: i.cardHolderRoles?.userRoles != null && /* @__PURE__ */ t.jsx(
+                Tt,
+                {
+                  roles: i.cardHolderRoles?.userRoles
+                }
+              ) })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ t.jsx(Zt, { children: /* @__PURE__ */ t.jsx(t.Fragment, { children: a === i.id ? /* @__PURE__ */ t.jsx(St, { size: "Small", start: !0 }) : /* @__PURE__ */ t.jsxs(rn, { children: [
+            /* @__PURE__ */ t.jsxs(Jo, { children: [
+              i.status.code !== "request_on_hold" ? /* @__PURE__ */ t.jsx(Ot, { cardDetail: i }) : null,
+              /* @__PURE__ */ t.jsxs(qt, { children: [
+                /* @__PURE__ */ t.jsx(Ne, { status: i.status.code }),
+                i.status.code === "request_on_hold" ? /* @__PURE__ */ t.jsx(
+                  ve,
+                  {
+                    display: "flex",
+                    title: x,
+                    placement: "top",
+                    style: { padding: `${s.sp2} ${s.sp3}` },
+                    children: /* @__PURE__ */ t.jsx(At, { className: "infoIconTooltip" })
+                  }
+                ) : null
+              ] })
+            ] }),
+            i.status.code === "request_on_hold" && !M ? /* @__PURE__ */ t.jsx(tn, { children: /* @__PURE__ */ t.jsx(
+              sn,
+              {
+                onClick: (R) => {
+                  R.stopPropagation(), l(i.id);
+                },
+                "data-testid": J(
+                  "send-reminder-clicked",
+                  i.id
+                ),
+                children: pe.cardList.sendReminder
+              }
+            ) }) : null
+          ] }) }) })
+        ] }),
+        /* @__PURE__ */ t.jsxs(Be, { children: [
+          /* @__PURE__ */ t.jsxs(Jt, { cardUser: !1, children: [
+            /* @__PURE__ */ t.jsxs(Ut, { children: [
+              /* @__PURE__ */ t.jsx(Vt, { children: `${A.labels.cardName}` }),
+              /* @__PURE__ */ t.jsxs(Wt, { children: [
+                /* @__PURE__ */ t.jsx(Kt, { title: i.cardName, children: i.cardName }),
+                /* @__PURE__ */ t.jsx(es, { windowSize: _, children: i.status.code === "request_on_hold" ? A.strings.hyphen : pe.cardDetails.expiryHideOut + A.strings.space + i.accountLast4 })
+              ] })
+            ] }),
+            /* @__PURE__ */ t.jsxs(Et, { children: [
+              /* @__PURE__ */ t.jsx(Bt, { children: `${pe.cardList.header.cardType}${A.strings.colon}` }),
+              /* @__PURE__ */ t.jsx(We, { children: /* @__PURE__ */ t.jsx(We, { children: /* @__PURE__ */ t.jsx(
+                Ke,
+                {
+                  cardDetail: i,
+                  forDetailPage: !1
+                }
+              ) }) })
+            ] }),
+            /* @__PURE__ */ t.jsxs(Qt, { children: [
+              /* @__PURE__ */ t.jsx(Yt, { children: A.labels.limit }),
+              /* @__PURE__ */ t.jsxs(Ft, { children: [
+                /* @__PURE__ */ t.jsx(Xt, { children: he("0,0.[00]", i.limit) }),
+                /* @__PURE__ */ t.jsx(Dt, {}),
+                /* @__PURE__ */ t.jsx(Ue, { children: i.creditLimitFrequency.name })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ t.jsx(Do, { children: /* @__PURE__ */ t.jsx(on, { showMenu: !0, className: "menu-icon", children: (() => {
+            const R = i.status.code === "locked", U = i.status.code === "closed" || i.status.code === "closed_by_customer", Y = w ? d && !B && !U && !(R && i.isLockedByAdmin) : d ? !B && P : i.status.code === "request_on_hold", L = $.length > 0;
+            return Y && /* @__PURE__ */ t.jsx(
+              Ve,
+              {
+                menuItems: /* @__PURE__ */ t.jsx(nn, { children: /* @__PURE__ */ t.jsx(
+                  Ht,
+                  {
+                    cardDetail: i,
+                    isCardControlsEnabled: d,
+                    isChargeCardUser: w,
+                    setIsMenuOpen: g,
+                    setCardIdForRowAction: e,
+                    setActionTypeForRowAction: n
+                  }
+                ) }),
+                setIsMenuOpen: (K) => {
+                  L || g(K);
+                },
+                isMenuOpen: C && !L,
+                menuIconStyles: {
+                  cursor: L ? "not-allowed" : "pointer",
+                  opacity: L ? 0.5 : 1,
+                  pointerEvents: L ? "none" : "auto"
+                },
+                styles: {
+                  transform: "translate(5px,0px)"
+                }
+              }
+            );
+          })() }) })
+        ] })
+      ]
+    }
+  ) });
+}, Pt = o.div`
+  display: flex;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: ${(e) => ` 1px solid ${e.theme.colors.grey3}`};
+  padding: ${s.sp3};
+  box-shadow: ${(e) => `${s.sp0} 1px 2px ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${s.sp2};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    border-color: ${(e) => e.theme.colors.primary};
+    div {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+  margin-right: ${(e) => Ee.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${(e) => Ee.containerMarginLeft.valuePx(e.windowSize)};
+  margin-bottom: ${s.sp3};
+  width: 100%;
+`, Rt = o.div`
+  display: block;
+  width: 100%;
+`, Be = o.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`, Go = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${s.sp1};
+  flex-grow: 1;
+`, Zo = o(X)`
+  color: ${(e) => e.theme.colors.hero};
+  display: -webkit-box;
+  -webkit-line-clamp: ${(e) => Ee.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 224px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+`, Ue = o(Q)`
+  color: ${(e) => e.theme.colors.hero};
+  min-height: 18px;
+`, Et = o(Q)`
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+`, Bt = o.div``, We = o.div`
+  max-width: 155px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, Ut = o(Q)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  flex-direction: row;
+  gap: ${s.sp2};
+`, Jo = o.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${s.sp1};
+`, Qo = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`, Wt = o.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 155px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, Vt = o.div``, Kt = o.div`
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, qt = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${s.sp1};
+`, Xo = o.div``, Yo = o.div``, Fo = o(Q)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  margin-top: -${s.sp1};
+`, Gt = o.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${s.sp2};
+`, Zt = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`, Jt = o.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: ${(e) => e.cardUser ? s.sp0 : s.sp7};
+`, Do = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  position: relative;
+`, Ao = o.div`
+  margin-bottom: 6px;
+`, Qt = o(Q)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  gap: ${s.sp6};
+  align-items: center;
+`, Xt = o.div``, Yt = o.div``, Ft = o.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`, Dt = o.div`
+  border-radius: 100%;
+  width: ${s.sp1};
+  height: ${s.sp1};
+  background-color: ${(e) => e.theme.colors.hero};
+`, en = o(Q)`
+  color: ${(e) => e.theme.colors.hero};
+`, tn = o.div`
+  padding-right: 20px;
+`, sn = o(kt)`
+  color: ${k.link};
+  cursor: pointer;
+  text-align: right;
+  &:hover {
+    text-decoration: underline;
+  }
+`, At = o(bt)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  margin-bottom: 0;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, on = o.div`
+  position: absolute;
+  right: -${s.sp2};
+  top: ${s.sp2};
+`, nn = o.div`
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+`, rn = o.div`
+  display: flex;
+  align-items: end;
+  flex-direction: column;
+`, es = o(Q)`
+  color: ${(e) => e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: ${s.sp1};
+`, ri = 20, Te = (e, n, i) => !(i != null && e.status.code !== i || e.status.code === "closed" || e.status.code === "closed_by_customer"), ln = (e, n, i) => {
+  const d = ce.getLocalizedStrings(), c = d.spendManagement.chargeCard.cardList.bulkActions.exceptionMessages;
+  if (e.status.code === "closed" || e.status.code === "closed_by_customer")
+    return c.closedCardsCannotBeSelected;
+  if (i != null && e.status.code !== i) {
+    const a = d.spendManagement.chargeCard.cardList.status[i];
+    return c.onlyCardsUnderStatusCanBeSelectedTogether.replace(
+      "__status__",
+      a
+    );
+  }
+  return c.cardCannotBeSelectedForAction;
+}, ae = {
+  lastListItemHeight: new f(200, 158),
+  bannerWrapperMarginLeftRight: new f(m[3], m[8]),
+  styledAIIconContainerSize: new f(m[3], m[3]),
+  checkBoxContainerStyleMarginLeft: new f(m[0], m[4]),
+  checkBoxContainerStyleMarginRight: new f(m[0], m[8]),
+  labelCheckBoxStyleMarginLeft: new f(m[2], m[0])
+}, an = {
+  moreItemFont: new It("extraSmallRegular", "smallRegular")
+}, ue = ce.getLocalizedStrings(), {
+  spendManagement: { chargeCard: T },
+  common: le
+} = ue, xt = 50, dn = 64, cn = 351, hn = 136, ts = me.memo(
+  ({
+    cardList: e,
+    controllerEmails: n,
+    creditAccount: i,
+    creditAccountRepayment: d,
+    setCardIdForRowAction: c,
+    setActionTypeForRowAction: a,
+    rowActionView: r,
+    showViewForCardUser: l,
+    productInformation: p,
+    isChargeCardFeatureEnabled: j,
+    isChargeCardSetupEnabled: u,
+    isDebitCardFeatureEnabled: $,
+    isDebitCardSetupEnabled: b,
+    cashbackInformation: C,
+    creditAccountInformation: g,
+    debitAccountInformation: h,
+    depositAccountListWithDebitCardIssued: w,
+    uiState: y,
+    signedInUser: M,
+    fetchState: _,
+    revokeChargeCardsInviteFetchState: z,
+    unlockChargeCardsFetchState: O,
+    receiptBotEmail: x,
+    searchText: v,
+    resendInviteId: q,
+    isBulkActionAllowed: H,
+    isCardControlsEnabled: G,
+    cardsSelectedForBulkAction: B,
+    firstSelectedCardStatus: P,
+    bulkSubmissionLimit: R,
+    onProceedForBulkActionClick: U,
+    onBulkCloseClick: Y,
+    onBulkLockClick: L,
+    setShowBulkChangeSpendLimitPopup: K,
+    onChargeCardResendInviteClick: W,
+    onChargeCardRowClick: te,
+    onReloadCards: se,
+    onColumnSortConfigChanged: F,
+    handleClearSelection: we
+  }) => {
+    const N = oe(), ne = Se(), Ge = Is().analytics, Ze = !!ne.loggedInUserRole.includes("charge_card_user"), Je = He(), [, Qe] = Ls(), [be, Xe] = fe(!1), [Me, Ye] = fe(!1), rs = xe(() => {
+      x != null && ((!j || i.fetchState === "Completed" && d.fetchState === "Completed") && (!($ && b) || w.fetchState === "Completed") && Ge.trackCardsCopyIconClick(
+        n,
+        p,
+        "Cards List",
+        "Copy",
+        "copied",
+        "Receipt Email",
+        x,
+        C,
+        g,
+        h
+      ), Qe(x), Xe(!0));
+    }, [
+      x,
+      j,
+      i.fetchState,
+      d.fetchState,
+      $,
+      b,
+      w.fetchState,
+      Ge,
+      n,
+      p,
+      C,
+      g,
+      h,
+      Qe
+    ]);
+    de(() => {
+      if (be === !0) {
+        const V = setTimeout(() => {
+          Xe(!1);
+        }, 800);
+        return () => clearTimeout(V);
+      }
+    }, [be]);
+    const ls = xe(
+      (V) => {
+        U(V);
+      },
+      [U]
+    ), Oe = xe(
+      (V) => V === 0 ? xt : N !== "small" ? Vs : Ze ? Ks : qs,
+      [N, Ze]
+    ), as = ze(() => {
+      let V = xt + dn;
+      for (let ye = 1; ye <= e.length; ye++)
+        V += Oe(ye);
+      return V;
+    }, [e.length, Oe]), Fe = ze(
+      () => window.innerHeight - cn,
+      []
+    ), ds = as > Fe, De = fs(null);
+    de(() => {
+      De.current?.resetAfterIndex(0);
+    }, [N]);
+    const cs = () => _ === "Error" ? /* @__PURE__ */ t.jsxs(jn, { children: [
+      /* @__PURE__ */ t.jsx(
+        Cn,
+        {
+          onClick: se,
+          "data-testid": J("charge-card-list-reload"),
+          children: /* @__PURE__ */ t.jsx(vn, {})
+        }
+      ),
+      /* @__PURE__ */ t.jsx(Sn, { children: le.reloadPage.label })
+    ] }) : _ === "Completed" && e.length === 0 ? /* @__PURE__ */ t.jsx(
+      Ts,
+      {
+        sourceView: "charge_cards",
+        style: { height: "calc(100vh - 450px)" },
+        title: T.cardList.getStarted,
+        message: v !== "" ? T.cardList.noDataWithFilterText : T.cardList.noDataText,
+        messageStyle: {
+          maxWidth: 345,
+          color: Je.colors.primary,
+          ...Re.largeRegular.cssObject
+        }
+      }
+    ) : /* @__PURE__ */ t.jsxs(is, { children: [
+      x != null ? /* @__PURE__ */ t.jsxs(Ln, { windowSize: N, children: [
+        /* @__PURE__ */ t.jsx(Mn, { windowSize: N, children: /* @__PURE__ */ t.jsx(On, {}) }),
+        /* @__PURE__ */ t.jsxs(Pn, { windowSize: N, children: [
+          /* @__PURE__ */ t.jsxs(_n, { children: [
+            /* @__PURE__ */ t.jsx(wn, { children: T.aiCardAgentText }),
+            le.strings.space,
+            T.receiptBotMessage,
+            le.strings.space
+          ] }),
+          /* @__PURE__ */ t.jsxs(
+            Hn,
+            {
+              "data-testid": J(
+                "charge-card-list-copy-email"
+              ),
+              onClick: rs,
+              onMouseEnter: () => Ye(!0),
+              onMouseLeave: () => Ye(!1),
+              children: [
+                /* @__PURE__ */ t.jsx(Tn, { children: x }),
+                be === !0 ? /* @__PURE__ */ t.jsxs(ft, { children: [
+                  /* @__PURE__ */ t.jsx(Nn, {}),
+                  /* @__PURE__ */ t.jsx(ut, { children: /* @__PURE__ */ t.jsx(
+                    $t,
+                    {
+                      shouldDisplay: Me || be,
+                      color: k.primaryDark,
+                      children: le.copyToClipBoard.copied
+                    }
+                  ) })
+                ] }) : /* @__PURE__ */ t.jsxs(ft, { children: [
+                  /* @__PURE__ */ t.jsx(
+                    zn,
+                    {
+                      color: Me ? Je.colors.primary : void 0
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(ut, { children: /* @__PURE__ */ t.jsx(
+                    $t,
+                    {
+                      shouldDisplay: Me && N !== "small",
+                      children: le.copyToClipBoard.copy
+                    }
+                  ) })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ t.jsx(
+        bn,
+        {
+          windowSize: N,
+          availableHeight: Fe,
+          isListTooLarge: ds,
+          children: /* @__PURE__ */ t.jsx(xs, { children: ({ height: V, width: ye }) => /* @__PURE__ */ t.jsx(
+            us,
+            {
+              ref: De,
+              height: V,
+              itemCount: e.length + 1,
+              innerElementType: os,
+              itemSize: Oe,
+              estimatedItemSize: Zs,
+              itemKey: (ke) => ke === 0 ? "header" : e[ke - 1].id,
+              width: ye,
+              overscanCount: Gs,
+              initialScrollOffset: 0,
+              children: (ke) => /* @__PURE__ */ t.jsx(
+                un,
+                {
+                  ...ke,
+                  setCardIdForRowAction: c,
+                  setActionTypeForRowAction: a,
+                  rowActionView: r,
+                  resendInviteId: q,
+                  onChargeCardResendInviteClick: W,
+                  onChargeCardRowClick: te,
+                  showViewForCardUser: l,
+                  cardList: e,
+                  signedInUser: M,
+                  uiState: y,
+                  revokeChargeCardsInviteFetchState: z,
+                  unlockChargeCardsFetchState: O,
+                  onColumnSortConfigChanged: F,
+                  isBulkActionAllowed: H,
+                  isCardControlsEnabled: G,
+                  cardsSelectedForBulkAction: B,
+                  firstSelectedCardStatus: P,
+                  bulkSubmissionLimit: R
+                }
+              )
+            }
+          ) })
+        }
+      )
+    ] });
+    return /* @__PURE__ */ t.jsxs(yn, { fetchState: _, children: [
+      cs(),
+      B.length > 0 && O !== "In-Progress" && z !== "In-Progress" ? /* @__PURE__ */ t.jsx(
+        _s,
+        {
+          helperContainerStyle: N === "small" ? {
+            margin: `${s.sp5} ${s.sp7} ${s.sp2} ${s.sp0}`
+          } : {},
+          showPrimaryButton: !0,
+          primaryBtn: {
+            label: mn(P),
+            isLoading: !1,
+            isDisabled: !1,
+            type: "button",
+            onClick: () => {
+              const V = ss(P);
+              V && ls(V);
+            }
+          },
+          cancelBtn: {
+            label: le.texts.goBack,
+            isDisabled: !1,
+            onClick: we,
+            style: N === "small" ? {} : gn(P)
+          },
+          leftSideComponent: En(
+            B.length,
+            R,
+            N
+          ),
+          rightSideComponent: /* @__PURE__ */ t.jsx(
+            Vn,
+            {
+              firstSelectedCardStatus: P,
+              windowSize: N,
+              setShowBulkChangeSpendLimitPopup: K,
+              onBulkCloseClick: Y,
+              onBulkLockClick: L
+            }
+          )
+        }
+      ) : null
+    ] });
+  },
+  (e, n) => e.cardList === n.cardList && e.cardsSelectedForBulkAction.length === n.cardsSelectedForBulkAction.length && e.fetchState === n.fetchState && e.uiState.sortKey === n.uiState.sortKey && e.uiState.sortOrder === n.uiState.sortOrder && e.rowActionView === n.rowActionView && e.unlockChargeCardsFetchState === n.unlockChargeCardsFetchState && e.revokeChargeCardsInviteFetchState === n.revokeChargeCardsInviteFetchState && e.searchText === n.searchText && e.receiptBotEmail === n.receiptBotEmail && e.isCardControlsEnabled === n.isCardControlsEnabled && e.firstSelectedCardStatus === n.firstSelectedCardStatus && e.handleClearSelection === n.handleClearSelection
+);
+ts.displayName = "ChargeCardListContent";
+const pn = ({
+  cardsSelectedForBulkAction: e,
+  cardList: n,
+  firstSelectedCardStatus: i,
+  bulkSubmissionLimit: d,
+  updateBulkActionList: c,
+  removeAllCardsFromBulkActionList: a,
+  isChargeCardSetupEnabled: r,
+  ...l
+}) => {
+  const p = "bulkSelectIds", j = ms({
+    defaultValues: {
+      [p]: e
+    },
+    values: {
+      [p]: e
+    }
+  });
+  de(() => {
+    const $ = j.watch((b, { name: C }) => {
+      if (C === p) {
+        let g = [];
+        const h = b[p] ?? [];
+        if (h.includes(
+          ue.common.all.toLowerCase()
+        ))
+          if (e.length === 0) {
+            g = [];
+            for (const y of n)
+              if (Te(
+                y,
+                void 0,
+                i
+              ) && g.push(y.id), g.length === d)
+                break;
+          } else
+            g = h.filter(
+              (y) => y !== ue.common.all.toLowerCase()
+            );
+        else
+          g = h.filter((y) => y != null);
+        c(g);
+      }
+    });
+    return () => $.unsubscribe();
+  }, [
+    c,
+    e.length,
+    n,
+    i,
+    d
+  ]);
+  const u = xe(() => {
+    j.setValue(p, []), a();
+  }, [j, a]);
+  return /* @__PURE__ */ t.jsx(gs, { ...j, children: /* @__PURE__ */ t.jsx(
+    ts,
+    {
+      ...l,
+      cardsSelectedForBulkAction: e,
+      cardList: n,
+      firstSelectedCardStatus: i,
+      bulkSubmissionLimit: d,
+      isChargeCardSetupEnabled: r,
+      handleClearSelection: u
+    }
+  ) });
+}, ss = (e) => {
+  if (e != null)
+    switch (e) {
+      case "active":
+        return "update_limit";
+      case "locked":
+        return "unlock";
+      case "inactive":
+        return "close";
+      case "request_on_hold":
+        return "revoke_invite";
+      default:
+        return;
+    }
+}, mn = (e) => {
+  if (e == null)
+    return "Proceed";
+  switch (e) {
+    case "active":
+      return T.cardDetails.moreOptions.updateSpendLimit;
+    case "locked":
+      return T.cardDetails.moreOptions.unlock;
+    case "inactive":
+      return T.closeCard.closeCard;
+    case "request_on_hold":
+      return T.cardDetails.revokeInvite;
+    default:
+      return le.proceed;
+  }
+}, gn = (e) => {
+  switch (ss(e)) {
+    case "update_limit":
+      return { minWidth: "173px" };
+    case "unlock":
+      return { minWidth: "119px" };
+    case "close":
+      return { minWidth: "111px" };
+    case "revoke_invite":
+      return { minWidth: "128px" };
+    default:
+      return {};
+  }
+}, os = $s(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e, n) => {
+    const { children: i, style: d, ...c } = e;
+    return /* @__PURE__ */ t.jsx(
+      is,
+      {
+        ref: n,
+        style: {
+          ...d,
+          width: "auto"
+        },
+        ...c,
+        children: /* @__PURE__ */ t.jsx(In, { children: i })
+      }
+    );
+  }
+);
+os.displayName = T.cardList.headerElementDisplayName;
+const xn = ({
+  cardList: e,
+  controllerEmails: n,
+  creditAccount: i,
+  creditAccountRepayment: d,
+  fetchState: c,
+  uiState: a,
+  setCardIdForRowAction: r,
+  setActionTypeForRowAction: l,
+  receiptBotEmail: p,
+  searchText: j,
+  resendInviteId: u,
+  showViewForCardUser: $,
+  signedInUser: b,
+  isChargeCardFeatureEnabled: C,
+  isChargeCardSetupEnabled: g,
+  isDebitCardFeatureEnabled: h,
+  isDebitCardSetupEnabled: w,
+  cashbackInformation: y,
+  creditAccountInformation: M,
+  debitAccountInformation: _,
+  productInformation: z,
+  isBulkActionAllowed: O,
+  isCardControlsEnabled: x,
+  cardsSelectedForBulkAction: v,
+  firstSelectedCardStatus: q,
+  bulkSubmissionLimit: H,
+  updateBulkActionList: G,
+  removeAllCardsFromBulkActionList: B,
+  onProceedForBulkActionClick: P,
+  onBulkCloseClick: R,
+  onBulkLockClick: U,
+  setShowBulkChangeSpendLimitPopup: Y,
+  onChargeCardRowClick: L,
+  onReloadCards: K,
+  onColumnSortConfigChanged: W,
+  onChargeCardResendInviteClick: te,
+  depositAccountListWithDebitCardIssued: se,
+  rowActionView: F,
+  revokeChargeCardsInviteFetchState: we,
+  unlockChargeCardsFetchState: N
+}) => (ks({
+  componentName: "cards.list",
+  enabled: c === "Completed"
+}), /* @__PURE__ */ t.jsx(
+  pn,
+  {
+    cardList: e,
+    controllerEmails: n,
+    creditAccount: i,
+    creditAccountRepayment: d,
+    setCardIdForRowAction: r,
+    setActionTypeForRowAction: l,
+    rowActionView: F,
+    isChargeCardFeatureEnabled: C,
+    isChargeCardSetupEnabled: g,
+    isDebitCardFeatureEnabled: h,
+    isDebitCardSetupEnabled: w,
+    cashbackInformation: y,
+    creditAccountInformation: M,
+    debitAccountInformation: _,
+    productInformation: z,
+    isBulkActionAllowed: O,
+    isCardControlsEnabled: x,
+    cardsSelectedForBulkAction: v,
+    firstSelectedCardStatus: q,
+    bulkSubmissionLimit: H,
+    updateBulkActionList: G,
+    removeAllCardsFromBulkActionList: B,
+    onProceedForBulkActionClick: P,
+    onBulkCloseClick: R,
+    onBulkLockClick: U,
+    setShowBulkChangeSpendLimitPopup: Y,
+    depositAccountListWithDebitCardIssued: se,
+    showViewForCardUser: $,
+    signedInUser: b,
+    fetchState: c,
+    revokeChargeCardsInviteFetchState: we,
+    unlockChargeCardsFetchState: N,
+    receiptBotEmail: p,
+    searchText: j,
+    resendInviteId: u,
+    onReloadCards: K,
+    onChargeCardRowClick: L,
+    uiState: a,
+    onColumnSortConfigChanged: W,
+    onChargeCardResendInviteClick: te
+  }
+)), li = me.memo(xn), un = ({
+  uiState: e,
+  onColumnSortConfigChanged: n,
+  isBulkActionAllowed: i,
+  isCardControlsEnabled: d,
+  cardsSelectedForBulkAction: c,
+  firstSelectedCardStatus: a,
+  bulkSubmissionLimit: r,
+  index: l,
+  setCardIdForRowAction: p,
+  setActionTypeForRowAction: j,
+  rowActionView: u,
+  revokeChargeCardsInviteFetchState: $,
+  unlockChargeCardsFetchState: b,
+  style: C,
+  cardList: g,
+  showViewForCardUser: h,
+  signedInUser: w,
+  resendInviteId: y,
+  onChargeCardResendInviteClick: M,
+  onChargeCardRowClick: _
+}) => {
+  const z = oe(), O = He(), x = u.cardId != null && u.unlockChargeCardsFetchState.fetchState === "In-Progress" || b === "In-Progress" && c.length > 0, v = !i || x || d === !1 || g.length <= 1 ? "off" : c.length > 0 ? "always_on" : "checked_or_hover", q = {
+    gap: s.sp3,
+    width: "auto",
+    marginLeft: ae.checkBoxContainerStyleMarginLeft.valuePx(z),
+    marginRight: ae.checkBoxContainerStyleMarginRight.valuePx(z)
+  }, H = {
+    marginLeft: ae.labelCheckBoxStyleMarginLeft.valuePx(z)
+  }, G = $n(z), B = fn(z), P = { width: "100%" }, R = { backgroundColor: O.colors.grey4 }, U = {
+    ...C,
+    width: "100%"
+  }, Y = ze(() => {
+    const se = [ue.common.all.toLowerCase()];
+    for (const F of g)
+      if (!(d && !Te(F, void 0, a)) && (se.push(F.id), r != null && se.length === r + 1))
+        break;
+    return se;
+  }, [
+    g,
+    d,
+    a,
+    r
+  ]), L = {
+    label: "",
+    defaultChecked: !1,
+    groupLabel: !0,
+    value: ue.common.all.toLowerCase(),
+    isException: !(c.length > 0)
+  }, K = l === 0, W = K ? null : g[l - 1], te = ze(() => K ? {
+    label: /* @__PURE__ */ t.jsx(
+      _o,
+      {
+        companyNameSticky: !1,
+        showViewForCardUser: h,
+        onColumnSortConfigChanged: n,
+        sortConfig: {
+          sortKey: e.sortKey,
+          sortOrder: e.sortOrder
+        }
+      }
+    ),
+    defaultChecked: !1,
+    groupLabel: !0,
+    value: ue.common.all.toLowerCase(),
+    isException: !(c.length > 0 && g.length > 1)
+  } : W == null ? {
+    label: /* @__PURE__ */ t.jsx("div", {}),
+    value: "",
+    groupLabel: !1,
+    defaultChecked: !1,
+    isException: !1
+  } : {
+    label: /* @__PURE__ */ t.jsx(
+      ns,
+      {
+        setCardIdForRowAction: p,
+        setActionTypeForRowAction: j,
+        rowActionView: u,
+        revokeChargeCardsInviteFetchState: $,
+        unlockChargeCardsFetchState: b,
+        cardsSelectedForBulkAction: c,
+        isCardControlsEnabled: d,
+        showViewForCardUser: h,
+        cardDetail: W,
+        signedInUser: w,
+        resendInviteId: y,
+        index: l - 1,
+        onChargeCardResendInviteClick: M,
+        onChargeCardRowClick: _
+      }
+    ),
+    value: W.id,
+    groupLabel: !1,
+    defaultChecked: !1,
+    isException: d && i ? !Te(
+      W,
+      void 0,
+      a
+    ) : !1,
+    exceptionMode: "checked_or_hover",
+    exceptionInfo: ln(
+      W,
+      void 0,
+      a
+    ),
+    exceptionType: Te(
+      W,
+      void 0,
+      a
+    ) ? void 0 : "info"
+  }, [
+    K,
+    W,
+    h,
+    n,
+    e.sortKey,
+    e.sortOrder,
+    c,
+    p,
+    j,
+    u,
+    $,
+    b,
+    d,
+    w,
+    y,
+    l,
+    M,
+    _,
+    a
+  ]);
+  return /* @__PURE__ */ t.jsx(kn, { style: U, className: "spend-management-list-item", children: /* @__PURE__ */ t.jsx(
+    Mt,
+    {
+      checkBox: te,
+      fieldName: "bulkSelectIds",
+      index: l,
+      allCheckBoxValues: Y,
+      groupLabelCheckBox: L,
+      mode: v,
+      checkBoxContainerStyle: q,
+      checkBoxIconStyle: R,
+      checkBoxStyle: K ? H : G,
+      labelCheckBoxStyle: H,
+      labelStyle: P,
+      style: { gap: s.sp3 },
+      infoIconContainerStyle: B,
+      selectionLimit: r
+    }
+  ) });
+}, fn = (e) => {
+  let n = {
+    zIndex: 1,
+    height: s.sp3,
+    display: "flex",
+    alignItems: "center"
+  };
+  return e === "small" && (n = {
+    ...n,
+    position: "absolute",
+    left: s.sp2,
+    marginBottom: s.sp1,
+    width: s.sp4,
+    height: s.sp4
+  }), n;
+}, $n = (e) => {
+  let n = {
+    zIndex: 1,
+    marginBottom: s.sp3,
+    backgroundColor: "inherit"
+  };
+  return e === "small" && (n = {
+    ...n,
+    position: "absolute",
+    left: s.sp1,
+    width: s.sp4,
+    height: s.sp4
+  }), n;
+}, ns = me.memo(
+  ({
+    setCardIdForRowAction: e,
+    setActionTypeForRowAction: n,
+    rowActionView: i,
+    revokeChargeCardsInviteFetchState: d,
+    unlockChargeCardsFetchState: c,
+    cardsSelectedForBulkAction: a,
+    cardDetail: r,
+    isCardControlsEnabled: l,
+    showViewForCardUser: p,
+    signedInUser: j,
+    resendInviteId: u,
+    index: $,
+    onChargeCardResendInviteClick: b,
+    onChargeCardRowClick: C
+  }) => {
+    const h = oe() === "small" ? Vo : eo;
+    return /* @__PURE__ */ t.jsx(
+      h,
+      {
+        cardDetail: r,
+        index: $,
+        isCardControlsEnabled: l,
+        setActionTypeForRowAction: n,
+        setCardIdForRowAction: e,
+        showViewForCardUser: p,
+        signedInUser: j,
+        revokeChargeCardsInviteFetchState: d,
+        unlockChargeCardsFetchState: c,
+        cardsSelectedForBulkAction: a,
+        rowActionView: i,
+        onChargeCardRowClick: C,
+        resendInviteId: u,
+        onChargeCardResendInviteClick: b
+      }
+    );
+  },
+  (e, n) => {
+    const i = e.cardsSelectedForBulkAction.includes(
+      e.cardDetail.id
+    ), d = n.cardsSelectedForBulkAction.includes(
+      n.cardDetail.id
+    ), c = e.rowActionView.cardId === e.cardDetail.id, a = n.rowActionView.cardId === n.cardDetail.id;
+    return i === d && c === a && e.cardDetail === n.cardDetail && e.isCardControlsEnabled === n.isCardControlsEnabled && e.unlockChargeCardsFetchState === n.unlockChargeCardsFetchState && e.revokeChargeCardsInviteFetchState === n.revokeChargeCardsInviteFetchState && e.resendInviteId === n.resendInviteId && e.showViewForCardUser === n.showViewForCardUser && e.signedInUser === n.signedInUser && e.index === n.index;
+  }
+);
+ns.displayName = "ChargeCardRowWrapper";
+const wn = o(Os)`
+  color: ${(e) => e.theme.colors.brandColorSapphire};
+  ${({ theme: e }) => e.mode === "dark" && `color: ${k.brandColorPearl};`}
+`, yn = o.div`
+  margin: ${(e) => e.fetchState === "Error" ? "auto" : "unset"};
+  display: block;
+  height: 100%;
+`, jn = o.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, Cn = o.div`
+  height: 96px;
+  width: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+`, vn = o(zs)`
+  height: ${s.sp5};
+  width: ${s.sp5};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Sn = o(Ns)`
+  margin-top: ${s.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, bn = o.div`
+  position: sticky;
+  height: ${(e) => e.isListTooLarge || e.windowSize === "small" ? (
+  /** Subtract top so list can occupy remaining available height */
+  `calc(100vh - ${hn}px)`
+) : `${e.availableHeight}px`};
+  max-width: 99.9%;
+  ${({ isListTooLarge: e, windowSize: n }) => (e || n === "small") && `
+    .spend-management-list-item:last-of-type {
+      /* NOTE: !important is used to ensure padding is applied to the last item in the virtualized list. */
+      height: ${ae.lastListItemHeight.valuePx(n)} !important;
+      padding-bottom: ${s.sp9};
+    }
+  `}
+`, kn = o.div`
+  top: ${s.sp0};
+  left: ${s.sp0};
+  padding-bottom: ${s.sp3};
+  box-sizing: border-box;
+`, In = o.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`, is = o.div``, Ln = o.div`
+  display: flex;
+  border: 1.25px solid transparent;
+  background: ${(e) => `linear-gradient(${e.theme.colors.grey4}, ${e.theme.colors.grey4}) padding-box,
+    ${k.receiptAgentLinearGradient}
+      border-box`};
+  padding: ${s.sp3} ${s.sp4};
+  border-radius: ${s.sp2};
+  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  gap: ${s.sp1};
+  margin: 0
+    ${(e) => ae.bannerWrapperMarginLeftRight.valuePx(e.windowSize)};
+  margin-bottom: ${s.sp3};
+`, _n = o(Ms)`
+  color: ${(e) => e.theme.colors.primary};
+`, Tn = o(Ps)`
+  color: ${(e) => e.theme.colors.primary};
+`, zn = o(Es)`
+  height: ${s.sp3};
+  width: ${s.sp3};
+  color: ${(e) => e.color ?? e.theme.colors.hero};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Nn = o(Rs)`
+  height: ${s.sp3};
+  width: ${s.sp3};
+  color: ${k.success};
+`, Hn = o.span`
+  cursor: pointer;
+`, ut = o.span`
+  position: absolute;
+  bottom: -${s.sp5};
+  z-index: 1;
+  left: ${s.sp2};
+`, ft = o.span`
+  position: relative;
+  margin-left: ${s.sp1};
+  top: 2px;
+`, $t = o(ee)`
+  position: relative;
+  background: ${(e) => e.theme.colors.black};
+  color: ${(e) => e.color ?? e.theme.colors.grey1};
+  padding: 2px ${s.sp2};
+  z-index: 1;
+  border-radius: ${s.sp1};
+  left: -50%;
+  display: ${(e) => e.shouldDisplay ? "block" : "none"};
+`, Mn = o.div`
+  width: ${(e) => ae.styledAIIconContainerSize.valuePx(e.windowSize)};
+  min-width: ${(e) => ae.styledAIIconContainerSize.valuePx(e.windowSize)};
+  height: ${(e) => ae.styledAIIconContainerSize.valuePx(e.windowSize)};
+  top: ${s.sp1};
+  position: ${(e) => e.windowSize === "small" ? "relative" : "static"};
+`, On = o(Hs)`
+  color: ${(e) => e.theme.colors.brandColorJade};
+  width: 100%;
+  height: 100%;
+`, Pn = o.div`
+  width: 100%;
+  max-width: ${(e) => e.windowSize === "small" ? "calc(100% - 20px)" : "unset"};
+`, Rn = o.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: ${s.sp2};
+  margin-left: ${s.sp8};
+`, En = (e, n, i) => {
+  const d = T.common.card, c = (e > 1 ? d + "s" : d) + T.cardList.bulkActions.selected;
+  return e > 0 ? /* @__PURE__ */ t.jsxs(
+    Rn,
+    {
+      style: i === "small" ? {
+        position: "absolute",
+        top: s.sp2,
+        left: `-${s.sp5}`
+      } : {},
+      children: [
+        /* @__PURE__ */ t.jsx(Bn, { multiDigit: e >= 10, children: e }),
+        /* @__PURE__ */ t.jsx(Un, { children: c }),
+        e === n ? /* @__PURE__ */ t.jsx(Wn, { children: le.texts.maxLimit }) : null
+      ]
+    }
+  ) : null;
+}, Bn = o(Q)`
+  height: 18px;
+  width: ${(e) => e.multiDigit ? "auto" : "18px"};
+  padding: ${s.sp0} 6px;
+  border-radius: ${s.sp12};
+  border: ${(e) => `1px solid ${e.theme.colors.grey1}`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  color: ${(e) => e.theme.colors.primary};
+`, Un = o(X)`
+  color: ${(e) => e.theme.colors.primary};
+`, Wn = o(ee)`
+  color: ${k.important};
+`, Vn = ({
+  firstSelectedCardStatus: e,
+  windowSize: n,
+  setShowBulkChangeSpendLimitPopup: i,
+  onBulkCloseClick: d,
+  onBulkLockClick: c
+}) => {
+  const [a, r] = me.useState(!1), [l, p] = me.useState(!1);
+  if (de(() => {
+    a || p(!1);
+  }, [a]), e == null || e !== "active" && e !== "locked")
+    return null;
+  const j = () => e === "active" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
+      _e,
+      {
+        windowSize: n,
+        onClick: (u) => {
+          u.stopPropagation(), r(!1), c?.();
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(Zn, {}),
+          /* @__PURE__ */ t.jsx(yt, { children: T.cardDetails.moreOptions.lock })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(wt, {}),
+    /* @__PURE__ */ t.jsxs(
+      _e,
+      {
+        windowSize: n,
+        hoverImportant: !0,
+        onClick: (u) => {
+          u.stopPropagation(), r(!1), d?.();
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(Ct, {}),
+          /* @__PURE__ */ t.jsx(jt, { children: T.cardDetails.moreOptions.close })
+        ]
+      }
+    )
+  ] }) : e === "locked" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
+      _e,
+      {
+        windowSize: n,
+        onClick: (u) => {
+          u.stopPropagation(), r(!1), i(!0);
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(Jn, {}),
+          /* @__PURE__ */ t.jsx(yt, { children: T.cardDetails.moreOptions.updateSpendLimit })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(wt, {}),
+    /* @__PURE__ */ t.jsxs(
+      _e,
+      {
+        windowSize: n,
+        hoverImportant: !0,
+        onClick: (u) => {
+          u.stopPropagation(), r(!1), d?.();
+        },
+        children: [
+          /* @__PURE__ */ t.jsx(Ct, {}),
+          /* @__PURE__ */ t.jsx(jt, { children: T.cardDetails.moreOptions.close })
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ t.jsx(
+    Kn,
+    {
+      style: n === "small" ? {
+        position: "absolute",
+        top: s.sp7,
+        right: `-${s.sp5}`
+      } : {},
+      children: /* @__PURE__ */ t.jsx(
+        qn,
+        {
+          onMouseEnter: () => {
+            a || p(!0);
+          },
+          onMouseLeave: () => {
+            p(!1);
+          },
+          children: /* @__PURE__ */ t.jsx(
+            ve,
+            {
+              open: l && !a,
+              variant: "standard",
+              title: T.cardList.moreActionsTooltip,
+              placement: "bottom-end",
+              children: /* @__PURE__ */ t.jsx(
+                Ve,
+                {
+                  isMenuVisible: !0,
+                  menuItems: /* @__PURE__ */ t.jsx(Gn, { children: j() }),
+                  setIsMenuOpen: r,
+                  isMenuOpen: a,
+                  menuIconStyles: { height: "auto" },
+                  styles: {
+                    transform: n === "small" ? `translate(${s.sp4}, -${s.sp7})` : `translate(${s.sp4}, -${s.sp5})`
+                  }
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+}, Kn = o.div`
+  display: flex;
+  justify-content: flex-end;
+`, qn = o.div`
+  min-width: ${s.sp3};
+  margin-right: ${s.sp8};
+  cursor: pointer;
+`, Gn = o.div`
+  margin: 5px ${s.sp0};
+`, _e = o(ee)`
+  ${({ windowSize: e }) => an.moreItemFont.style(e)}
+  height: ${s.sp6};
+  display: flex;
+  align-items: center;
+  padding: ${s.sp0} ${s.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  gap: ${s.sp2};
+  cursor: pointer;
+  :hover {
+    background-color: ${(e) => e.hoverImportant === !0 ? k.importantLight : e.theme.colors.background};
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, wt = o.div`
+  height: 1px;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey3};
+  margin: ${s.sp1} ${s.sp0};
+`, yt = o(ee)`
+  color: inherit;
+`, jt = o(ee)`
+  color: ${k.important};
+`, Zn = o(Lt)`
+  width: ${s.sp4};
+  height: ${s.sp4};
+  color: inherit;
+`, Ct = o(zt)`
+  width: ${s.sp4};
+  height: ${s.sp4};
+  color: ${k.important};
+  &:hover {
+    color: ${k.important};
+  }
+`, Jn = o(Bs)`
+  width: ${s.sp4};
+  height: ${s.sp4};
+  color: inherit;
+`;
+export {
+  Ds as A,
+  li as C,
+  ri as a
+};