@zeniai/web-components 3.16.52 → 3.16.54

package/dist/SpendManagementPerTabPage-zAut4sVr.js

@@ -0,0 +1,2735 @@
+import { u as Xe, j as t, i as be, d as ft, g as At, h as Ft, F as Gt, A as Zt, V as qt } from "./vendor-.pnpm-BZbZ6JJC.js";
+import wt, { useState as Ce, useEffect as Te, useMemo as Qe, useCallback as ee, useRef as vt, useLayoutEffect as Xt, forwardRef as Qt } from "react";
+import n from "@emotion/styled";
+import { isAwaitingMarkAsPaid as Pt, getBillListUniqueType as je, getRemiListUniqueType as ke, isBulkProcessing as Le } from "@zeniai/client-epic-state";
+import { R as m, a as oe, D as r, u as Y, eV as Ct, t as ze, j as te, G as re, S as o, fI as Tt, ab as St, aa as jt, dz as Ye, ir as Je, dB as et, i as tt, kP as kt, kQ as Be, Z as X, a5 as Ne, kR as ot, C as Q, kS as M, p as W, fM as It, E as D, X as _t, ae as nt, kT as Yt, aN as Jt, aO as eo, aP as to, ap as oo, f8 as no, ff as st, A as io, x as ro, P as lo, fK as so, z as ao, kU as co, hn as mo, kV as po, kW as Rt, kX as zt, kt as ho, kY as go, kZ as uo } from "./index-CBaTiiZy.js";
+import { B as yo } from "./BusyIndication-BjnK3GIb.js";
+import { T as xo, e as bo, t as $o } from "./StatusSwitcher-0FW5MyfZ.js";
+import { H as Lt, a as Bt, I as Nt, R as Mt, O as fo, d as wo, g as vo } from "./common-jBX2-Qhh.js";
+import { css as Z } from "@emotion/react";
+import { u as Ot } from "./useLongPress-GCK2COYQ.js";
+const pe = oe.getLocalizedStrings().spendManagement.billPay.billsByTabs.header, Me = {
+  key: "name",
+  value: pe.name,
+  sortOrder: "ascending",
+  width: new m(r[5], r[5])
+}, Oe = {
+  key: "invoiceDate",
+  value: pe.invoiceDate,
+  sortOrder: "ascending",
+  width: new m(20, 20)
+}, Po = {
+  key: "dueDate",
+  value: pe.dueDate,
+  sortOrder: "ascending",
+  width: new m(20, 20)
+}, it = {
+  key: "dueDate",
+  value: pe.paymentDate,
+  sortOrder: "ascending",
+  width: new m(20, 20)
+}, rt = {
+  key: "status",
+  value: pe.status,
+  sortOrder: "ascending",
+  width: new m(18, 18)
+}, Co = {
+  key: "paymentMethod",
+  value: pe.paymentMethod,
+  sortOrder: "ascending",
+  width: new m(18, 18)
+}, He = {
+  key: "amount",
+  value: pe.amount,
+  sortOrder: "ascending",
+  width: new m(10, 10)
+}, ye = [
+  Me,
+  Oe,
+  Po,
+  rt,
+  He
+], To = [
+  Me,
+  Oe,
+  it,
+  rt,
+  He
+], So = [
+  Me,
+  Oe,
+  it,
+  rt,
+  He
+], jo = [
+  Me,
+  Oe,
+  it,
+  Co,
+  He
+], ue = {
+  headerLastColumnTopPadding: new m(r[0], r[4]),
+  headerLastColumnRightPadding: new m(r[3], r[11]),
+  headerLastColumnBottomPadding: new m(r[0], r[4]),
+  headerLastColumnLeftPadding: new m(r[0], r[4]),
+  containerMarginLeft: new m(r[0], r[8]),
+  containerMarginRight: new m(r[0], r[8]),
+  headerHeight: new m(Lt, Bt)
+};
+function ko({
+  companyNameSticky: e,
+  currentTab: i,
+  onColumnSortConfigChanged: p,
+  sortConfig: l
+}) {
+  const d = Xe(), u = Y(), [x, b] = Ce(
+    Ho(i)
+  );
+  Te(() => {
+    const c = [...x];
+    for (const s of c)
+      s.key === l.sortKey ? s.sortOrder = l.sortOrder : s.sortOrder = "ascending";
+    b(c);
+  }, [l.sortKey, l.sortOrder]);
+  const f = (c, s) => {
+    let P = s;
+    l.sortKey === c && (P = s === "ascending" ? "descending" : "ascending"), p?.(c, P);
+  }, g = x.find((c) => c.key === l.sortKey) ?? x[0], y = (c) => x.find((s) => s.key === c)?.value ?? "", h = x.map((c) => c.key), $ = oe.getLocalizedStrings().spendManagement.billPay.billsByTabs;
+  return u === "small" ? /* @__PURE__ */ t.jsxs(at, { windowSize: u, companyNameSticky: !1, children: [
+    /* @__PURE__ */ t.jsxs(zo, { children: [
+      /* @__PURE__ */ t.jsx(Bo, { children: /* @__PURE__ */ t.jsx(Lo, {}) }),
+      /* @__PURE__ */ t.jsx(
+        Ct,
+        {
+          title: $.sortBy,
+          placeholder: $.sortBy,
+          pickerValues: h,
+          valueToLabel: y,
+          selectedValue: l.sortKey,
+          onPickerSelectionChanged: (c) => {
+            f(
+              c,
+              "ascending"
+            );
+          },
+          optionTextStyle: ze.smallRegular,
+          titleTextStyle: ze.smallRegular,
+          titleColor: d.colors.primary,
+          selectedOptionColor: d.colors.hero,
+          optionBackgroundColor: d.colors.grey5,
+          downChevronVisible: !1,
+          backgroundColor: d.colors.background
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsxs(
+      Oo,
+      {
+        onClick: () => f(
+          g.key,
+          g.sortOrder
+        ),
+        "data-testid": te(
+          "bill-pay-list-header-mobile",
+          l.sortKey
+        ),
+        children: [
+          /* @__PURE__ */ t.jsx(re, { children: g.value }),
+          /* @__PURE__ */ t.jsx(
+            dt,
+            {
+              sortDataValue: l.sortKey,
+              headerdata: g,
+              children: /* @__PURE__ */ t.jsx(ct, {})
+            }
+          )
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ t.jsx(
+    at,
+    {
+      companyNameSticky: e,
+      windowSize: u,
+      children: x.map((c) => /* @__PURE__ */ t.jsxs(
+        _o,
+        {
+          companyNameSticky: e && c.key === "name",
+          sortDataValue: l.sortKey,
+          actualDataValue: c.key,
+          wrapperWidth: c.width,
+          windowSize: u,
+          children: [
+            /* @__PURE__ */ t.jsxs(
+              Mo,
+              {
+                onClick: () => f(c.key, c.sortOrder),
+                "data-testid": te(
+                  "bill-pay-list-header",
+                  l.sortKey
+                ),
+                children: [
+                  /* @__PURE__ */ t.jsx(re, { children: c.value }),
+                  /* @__PURE__ */ t.jsx(
+                    dt,
+                    {
+                      sortDataValue: l.sortKey,
+                      headerdata: c,
+                      children: /* @__PURE__ */ t.jsx(ct, {})
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              No,
+              {
+                sortDataValue: l.sortKey,
+                windowSize: u,
+                isVisible: l.sortKey === c.key && c.key !== "dueDate",
+                children: /* @__PURE__ */ t.jsx(
+                  Ro,
+                  {
+                    onClick: () => f("dueDate", "ascending"),
+                    "data-testid": te(
+                      "bill-pay-list-header-sort-close",
+                      l.sortKey
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        },
+        c.key
+      ))
+    }
+  );
+}
+const Io = wt.memo(ko), at = n(re)`
+  width: 100%;
+  top: ${o.sp0};
+  left: ${o.sp0};
+  min-height: ${(e) => ue.headerHeight.valuePx(e.windowSize)};
+  max-height: ${(e) => ue.headerHeight.valuePx(e.windowSize)};
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${(e) => `${ue.headerLastColumnTopPadding.valuePx(
+  e.windowSize
+)} ${ue.headerLastColumnRightPadding.valuePx(
+  e.windowSize
+)} ${ue.headerLastColumnBottomPadding.valuePx(
+  e.windowSize
+)} ${ue.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${(e) => e.theme.colors.grey4};
+  justify-content: ${(e) => e.windowSize === "small" ? "space-between" : "unset"};
+  position: sticky;
+`, _o = n.div`
+  color: ${(e) => e.sortDataValue === e.actualDataValue ? e.theme.colors.primary : e.theme.colors.grey1};
+  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  padding-left: ${(e) => e.companyNameSticky ? o.sp4 : o.sp0};
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  left: ${o.sp0};
+  justify-content: ${(e) => e.actualDataValue === "amount" ? "flex-end" : "flex-start"};
+  ${(e) => e.companyNameSticky ? "position: sticky; z-index: 1;" : "position: static; z-index: 0;"};
+  ${(e) => e.actualDataValue === "companyName" ? `padding-left: ${o.sp4};flex: 1 1 auto` : `padding-left: ${o.sp0};`};
+  box-sizing: border-box;
+`, Ro = n(jt)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+`, dt = n.div`
+  display: flex;
+  align-items: center;
+  transform: ${(e) => e.sortDataValue === e.headerdata.key && e.headerdata.sortOrder === "descending" ? "rotate(180deg)" : "rotate(0deg)"};
+  ${(e) => e.headerdata.sortOrder === "ascending" ? "padding-top: 2px" : "padding-bottom: 2px"}
+`, ct = n(St)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: inherit;
+`, zo = n.div`
+  gap: ${o.sp1};
+  display: flex;
+`, Lo = n(Tt)`
+  width: 12px;
+  height: 12px;
+  color: inherit;
+`, Bo = n.div`
+  margin-right: ${o.sp1};
+  display: flex;
+  align-items: center;
+`, No = n.div`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  align-items: center;
+  padding-top: 2px;
+`, Mo = n.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Oo = n.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ho = (e) => {
+  switch (e) {
+    case "draft":
+      return be(ye);
+    case "pending_approval":
+      return be(To);
+    case "scheduled":
+      return be(So);
+    case "paid":
+      return be(jo);
+  }
+}, xe = {
+  containerPaddingLeft: new m(r[3], r[4]),
+  containerPaddingRight: new m(r[3], r[4]),
+  containerPaddingTop: new m(r[2], 12),
+  containerPaddingBottom: new m(r[2], 12),
+  containerMarginLeft: new m(r[4], r[8]),
+  containerMarginRight: new m(r[4], r[8]),
+  webkitLineClamp: new m(2, 1, 1, 1, 1)
+}, {
+  spendManagement: {
+    billPay: { billDetails: ne }
+  },
+  common: {
+    strings: { empty: Fe, space: we }
+  }
+} = oe.getLocalizedStrings(), Wo = ({
+  transactionDetail: e,
+  tagStatus: i,
+  reportTitleAdditionalInfo: p,
+  isSelected: l,
+  isBillPayCommentingEnabled: d,
+  isProcessing: u,
+  lowBalanceAlert: x,
+  approvers: b,
+  deletionAdditionalInfo: f,
+  paidAdditionalInfo: g,
+  showLowBalanceTooltip: y,
+  onTransactionRowClick: h
+}) => {
+  const $ = Y(), c = Ye(), s = Je(), a = et().analytics, w = `dashboard_${c.currentTenant?.companyId}`, { threads: k, isLoading: _ } = tt(
+    {
+      application: "dashboard",
+      companyId: c.currentTenant?.companyId,
+      tab: "bill",
+      entityId: e.id,
+      isGlobalComment: !1
+    },
+    "both",
+    !1
+  ), j = Qe(() => k.filter((N) => N.resolved === !1), [k]), v = (N) => {
+    N.stopPropagation(), s?.sharedFunctions?.subtreeFunctions.openAllThreadsDrawer({
+      roomId: w,
+      companyId: c.currentTenant?.companyId ?? Fe,
+      companyName: c.currentTenant?.companyName ?? Fe,
+      entityType: "bill.details",
+      entityId: e.id
+    }), a.trackCommentActivity(
+      "bill",
+      "clicked",
+      c.currentTenant?.companyName ?? Fe,
+      c.controllersList.controllers.map(
+        (z) => nt(z)
+      ),
+      void 0,
+      void 0,
+      "comment on field"
+    );
+  }, B = ee(() => {
+    h(e.id);
+  }, [e.id]), R = Pt(
+    e.billPayInfo.billPaymentStatus.code
+  ) ? kt(e.createdByUser) : Be(b), F = e.vendor?.name != null ? e.vendor.name : e.candidateVendorName != "" ? e.candidateVendorName : ne.newBillTitle, C = () => `${ne.recurringBill.recurring} ${e.recurringBillInstance}/${e.recurringBillConfig?.totalPaymentCycles}`;
+  return /* @__PURE__ */ t.jsxs(
+    Vo,
+    {
+      windowSize: $,
+      statusCode: i?.code ?? "",
+      isSelected: l,
+      isProcessing: u,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          Eo,
+          {
+            onClick: B,
+            "data-testid": te(
+              "bill-pay-transaction-row",
+              e.id
+            ),
+            children: /* @__PURE__ */ t.jsxs(Do, { children: [
+              /* @__PURE__ */ t.jsxs(
+                Uo,
+                {
+                  windowSize: $,
+                  responsiveWidth: ye[0].width,
+                  children: [
+                    /* @__PURE__ */ t.jsxs(Ko, { children: [
+                      /* @__PURE__ */ t.jsx(Ao, { windowSize: $, children: F }),
+                      e.isRecurring ? /* @__PURE__ */ t.jsx(
+                        X,
+                        {
+                          title: C(),
+                          placement: "right",
+                          style: { padding: `2px ${o.sp2}` },
+                          children: /* @__PURE__ */ t.jsx(Yo, { isProcessing: u, children: /* @__PURE__ */ t.jsx(Jo, {}) })
+                        }
+                      ) : null
+                    ] }),
+                    /* @__PURE__ */ t.jsx(Go, { children: `${p[0].label} ${p[0].value}` })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                mt,
+                {
+                  windowSize: $,
+                  responsiveWidth: ye[1].width,
+                  children: p[1].value
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                mt,
+                {
+                  windowSize: $,
+                  responsiveWidth: ye[2].width,
+                  children: p[2].value
+                }
+              ),
+              /* @__PURE__ */ t.jsxs(
+                Qo,
+                {
+                  windowSize: $,
+                  responsiveWidth: ye[3].width,
+                  children: [
+                    /* @__PURE__ */ t.jsxs(Xo, { children: [
+                      i !== void 0 ? /* @__PURE__ */ t.jsx(
+                        Zo,
+                        {
+                          className: "statusTag",
+                          color: i.color,
+                          bgColor: i.bgColor,
+                          borderColor: i.borderColor,
+                          children: i.value ?? ne.hyphenText
+                        }
+                      ) : /* @__PURE__ */ t.jsx(qo, { children: ne.hyphenText }),
+                      y === !0 && x != null && x.length > 0 ? /* @__PURE__ */ t.jsx(
+                        X,
+                        {
+                          title: x,
+                          placement: "bottom",
+                          display: "flex",
+                          style: {
+                            padding: `12px ${o.sp3}`
+                          },
+                          position: "relative",
+                          maxWidth: "311px",
+                          children: /* @__PURE__ */ t.jsx(en, {})
+                        }
+                      ) : null
+                    ] }),
+                    b !== void 0 && R.length > 0 ? R.length > 1 ? /* @__PURE__ */ t.jsx(
+                      X,
+                      {
+                        style: {
+                          padding: "2px 5px"
+                        },
+                        title: `${ne.byText}${we}${R.join(`${we}${ne.orText}${we}`)}`,
+                        placement: "bottom-start",
+                        children: /* @__PURE__ */ t.jsx(Ie, { children: `${ne.byText}${we}${R[0]}${ne.dots}` })
+                      }
+                    ) : /* @__PURE__ */ t.jsx(Ie, { children: `${ne.byText}${we}${R[0]}` }) : null,
+                    f != null ? /* @__PURE__ */ t.jsx(Ie, { children: f }) : null,
+                    g != null ? /* @__PURE__ */ t.jsx(Ie, { children: g }) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                Fo,
+                {
+                  windowSize: $,
+                  responsiveWidth: ye[4].width,
+                  children: Ne("0,0[.]00", e.totalAmountInUSD)
+                }
+              )
+            ] })
+          }
+        ),
+        d && j.length > 0 ? /* @__PURE__ */ t.jsx(
+          ot,
+          {
+            isLoading: _,
+            count: j.length,
+            style: {
+              position: "absolute",
+              float: "right",
+              right: "44px",
+              top: o.sp1
+            },
+            openThread: v
+          }
+        ) : null
+      ]
+    }
+  );
+}, Vo = n.div`
+  display: flex;
+  margin-bottom: ${o.sp3};
+  background-color: ${(e) => e.isProcessing ? "transparent" : e.theme.colors.grey5};
+  padding-left: ${(e) => xe.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => xe.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => xe.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => xe.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${(e) => ` 1px solid ${e.isProcessing ? e.theme.colors.grey2 : e.isSelected ? e.theme.colors.primary : e.theme.colors.grey3}`};
+  box-shadow: ${(e) => e.isProcessing ? "none" : e.theme.mode === "dark" ? `${Q.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${Q.dropShadowNormalLight}`};
+  border-radius: ${o.sp2};
+  cursor: ${(e) => e.isProcessing ? "initial" : "pointer"};
+
+  ${(e) => e.isProcessing ? Z`
+          color: ${e.theme.colors.grey2};
+          border-color: ${e.theme.colors.grey2};
+          div {
+            :not(.statusTag) {
+              color: ${e.theme.colors.grey2};
+            }
+          }
+          .statusTag {
+            color: ${e.theme.colors.grey2};
+            border-color: ${e.theme.colors.grey2};
+          }
+        ` : e.isSelected ? Z`
+            color: ${e.theme.colors.primary};
+            border-color: ${e.theme.colors.primary};
+            div {
+              :not(.statusTag) {
+                color: ${e.theme.colors.primary};
+              }
+            }
+            .statusTag {
+              color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+              border-color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+            }
+          ` : Z`
+            &:hover {
+              color: ${e.theme.colors.primary};
+              border-color: ${e.theme.colors.primary};
+              div {
+                :not(.statusTag) {
+                  color: ${e.theme.colors.primary};
+                }
+              }
+              .statusTag {
+                color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+                border-color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+              }
+            }
+          `}
+  margin-right: ${(e) => xe.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${o.sp0};
+  box-sizing: border-box;
+  align-items: center;
+`, Eo = n.div`
+  display: block;
+  width: 100%;
+`, Do = n.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  height: 42px;
+`, Uo = n.div`
+  display: flex;
+  flex-direction: column;
+  column-gap: 12px;
+  align-items: flex-start;
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+`, Ko = n.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${o.sp1};
+  align-items: center;
+  margin-right: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, Ao = n(W)`
+  flex-grow: 1;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: ${(e) => xe.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${(e) => e.windowSize === "small" ? "200px" : "initial"};
+`, Fo = n(W)`
+  display: flex;
+  align-items: ${(e) => e.windowSize === "small" || e.windowSize === "medium-compact" ? "flex-start" : "center"};
+  color: ${(e) => e.theme.colors.hero};
+  justify-content: flex-end;
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+`, Go = n.div`
+  color: ${(e) => e.theme.colors.grey1};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 90%;
+  white-space: nowrap;
+`, Zo = n(D)`
+  display: flex;
+  color: ${(e) => e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${o.sp0} 6px;
+  max-width: calc(100%);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  border: ${(e) => `1px solid ${e.borderColor}`};
+  border-radius: ${o.sp1};
+`, qo = n(W)``, mt = n(W)`
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`, Xo = n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${o.sp2};
+`, Qo = n.div`
+  position: relative;
+  top: 2px;
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+`, Ie = n(D)`
+  position: relative;
+  top: 1px;
+  color: ${(e) => e.theme.colors.grey1};
+`, Yo = n.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.isProcessing ? e.theme.colors.grey2 : e.theme.colors.primary};
+`, Jo = n(It)`
+  width: 12px;
+  height: 12px;
+  color: inherit;
+`, en = n(_t)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  :hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ae = {
+  containerPaddingLeft: new m(r[3], r[4]),
+  containerPaddingRight: new m(r[3], r[4]),
+  containerPaddingTop: new m(r[2], r[3]),
+  containerPaddingBottom: new m(r[2], r[3]),
+  containerMarginLeft: new m(r[3], r[8]),
+  containerMarginRight: new m(r[3], r[8]),
+  webkitLineClamp: new m(2, 2, 1, 1, 1)
+}, {
+  spendManagement: {
+    billPay: { billDetails: ie }
+  },
+  common: {
+    strings: { empty: Ge, space: ve }
+  }
+} = oe.getLocalizedStrings(), tn = ({
+  transactionDetail: e,
+  tagStatus: i,
+  isProcessing: p,
+  isSelected: l,
+  isBillPayCommentingEnabled: d,
+  bulkSelectFormId: u,
+  isBulkSelectionLimitReached: x,
+  isSelectionMode: b,
+  reportTitleAdditionalInfo: f,
+  lowBalanceAlert: g,
+  approvers: y,
+  deletionAdditionalInfo: h,
+  paidAdditionalInfo: $,
+  showLowBalanceTooltip: c,
+  onTransactionRowClick: s
+}) => {
+  const P = Y(), a = Ye(), w = Je(), _ = et().analytics, j = `dashboard_${a.currentTenant?.companyId}`, { threads: v, isLoading: B } = tt(
+    {
+      application: "dashboard",
+      companyId: a.currentTenant?.companyId,
+      tab: "bill",
+      entityId: e.id,
+      isGlobalComment: !1
+    },
+    "both",
+    !1
+  ), R = Qe(() => v.filter((K) => K.resolved === !1), [v]), F = (K) => {
+    K.stopPropagation(), w?.sharedFunctions?.subtreeFunctions.openAllThreadsDrawer({
+      roomId: j,
+      companyId: a.currentTenant?.companyId ?? Ge,
+      companyName: a.currentTenant?.companyName ?? Ge,
+      entityType: "bill.details",
+      entityId: e.id
+    }), _.trackCommentActivity(
+      "bill",
+      "clicked",
+      a.currentTenant?.companyName ?? Ge,
+      a.controllersList.controllers.map(
+        (Ke) => nt(Ke)
+      ),
+      void 0,
+      void 0,
+      "comment on field"
+    );
+  }, { getValues: C, setValue: N } = ft(), z = Pt(
+    e.billPayInfo.billPaymentStatus.code
+  ) ? kt(e.createdByUser) : Be(y), q = e.vendor?.name != null ? e.vendor.name : e.candidateVendorName != "" ? e.candidateVendorName : ie.newBillTitle, se = () => `${ie.recurringBill.recurring} ${e.recurringBillInstance}/${e.recurringBillConfig?.totalPaymentCycles}`, Se = C(u), he = ee(() => {
+    !x && e.bulkSelectInfo?.isSelectableForBulkAction && !l && N(u, [...Se, e.id]);
+  }, [
+    u,
+    x,
+    l,
+    N,
+    e.bulkSelectInfo?.isSelectableForBulkAction,
+    e.id,
+    Se
+  ]), ge = ee(() => {
+    he();
+  }, [he]), Ue = ee(
+    (K) => {
+      K.stopPropagation(), K.cancelable && K.preventDefault(), b ? he() : s(e.id);
+    },
+    [
+      he,
+      b,
+      s,
+      e.id
+    ]
+  ), U = Ot({ onLongPress: ge }, {
+    shouldPreventDefault: !1,
+    delay: 1e3
+  });
+  return /* @__PURE__ */ t.jsxs(
+    on,
+    {
+      windowSize: P,
+      statusCode: i?.code ?? "",
+      isSelected: l,
+      isProcessing: p,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          nn,
+          {
+            onClick: Ue,
+            ...U,
+            "data-testid": te(
+              "bill-pay-trxn-row-small",
+              e.id
+            ),
+            children: /* @__PURE__ */ t.jsxs(rn, { children: [
+              /* @__PURE__ */ t.jsxs(hn, { children: [
+                /* @__PURE__ */ t.jsxs(ln, { children: [
+                  /* @__PURE__ */ t.jsxs(sn, { children: [
+                    /* @__PURE__ */ t.jsx(an, { windowSize: P, children: q }),
+                    e.isRecurring ? /* @__PURE__ */ t.jsx(
+                      X,
+                      {
+                        title: se(),
+                        placement: "right",
+                        style: { padding: `2px ${o.sp2}` },
+                        children: /* @__PURE__ */ t.jsx(un, { isProcessing: p, children: /* @__PURE__ */ t.jsx(yn, {}) })
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ t.jsx(cn, { children: `${f[0].label} ${f[0].value}` })
+                ] }),
+                /* @__PURE__ */ t.jsx(pt, { children: `${f[1].label} ${f[1].value}` }),
+                /* @__PURE__ */ t.jsx(pt, { children: `${f[2].label} ${f[2].value}` })
+              ] }),
+              /* @__PURE__ */ t.jsxs(gn, { children: [
+                /* @__PURE__ */ t.jsx(dn, { children: Ne("0,0[.]00", e.totalAmountInUSD) }),
+                /* @__PURE__ */ t.jsxs(pn, { hasAlertIcon: g != null, children: [
+                  /* @__PURE__ */ t.jsxs(xn, { children: [
+                    i !== void 0 ? /* @__PURE__ */ t.jsx(
+                      mn,
+                      {
+                        className: "statusTag",
+                        color: i.color,
+                        bgColor: i.bgColor,
+                        borderColor: i.borderColor,
+                        children: i.value ?? ie.hyphenText
+                      }
+                    ) : /* @__PURE__ */ t.jsx(t.Fragment, { children: ie.hyphenText }),
+                    c === !0 && g != null && g.length > 0 ? /* @__PURE__ */ t.jsx($n, { onClick: (K) => K.stopPropagation(), children: /* @__PURE__ */ t.jsx(
+                      X,
+                      {
+                        title: g,
+                        placement: "bottom",
+                        display: "flex",
+                        style: {
+                          padding: `12px ${o.sp3}`
+                        },
+                        position: "relative",
+                        maxWidth: "311px",
+                        enterDelay: 600,
+                        children: /* @__PURE__ */ t.jsx(bn, {})
+                      }
+                    ) }) : null
+                  ] }),
+                  y !== void 0 && z.length > 0 ? z.length > 1 ? /* @__PURE__ */ t.jsx(
+                    X,
+                    {
+                      title: `${ie.byText}${ve}${z.join(`${ve}${ie.orText}${ve}`)}`,
+                      placement: "bottom-start",
+                      children: /* @__PURE__ */ t.jsx(_e, { children: `${ie.byText}${ve}${z[0]}${ie.dots}` })
+                    }
+                  ) : /* @__PURE__ */ t.jsx(_e, { children: `${ie.byText}${ve}${z[0]}` }) : null,
+                  h != null ? /* @__PURE__ */ t.jsx(_e, { children: h }) : null,
+                  $ != null ? /* @__PURE__ */ t.jsx(_e, { children: $ }) : null
+                ] })
+              ] })
+            ] })
+          }
+        ),
+        d && R.length > 0 ? /* @__PURE__ */ t.jsx(
+          ot,
+          {
+            isLoading: B,
+            count: R.length,
+            style: {
+              position: "absolute",
+              float: "right",
+              right: "6px",
+              top: o.sp1
+            },
+            openThread: F
+          }
+        ) : null
+      ]
+    }
+  );
+}, on = n.div`
+  display: flex;
+  margin-bottom: ${o.sp3};
+  background-color: ${(e) => e.isProcessing ? "transparent" : e.theme.colors.grey5};
+  padding-left: ${(e) => ae.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => ae.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => ae.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => ae.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${(e) => ` 1px solid ${e.isProcessing ? e.theme.colors.grey2 : e.isSelected ? e.theme.colors.primary : e.theme.colors.grey3}`};
+  box-shadow: ${(e) => e.isProcessing ? "none" : e.theme.mode === "dark" ? `${Q.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${Q.dropShadowNormalLight}`};
+  border-radius: ${o.sp2};
+  cursor: ${(e) => e.isProcessing ? "initial" : "pointer"};
+  ${(e) => e.isProcessing ? Z`
+          color: ${e.theme.colors.grey2};
+          border-color: ${e.theme.colors.grey2};
+          div {
+            :not(.statusTag) {
+              color: ${e.theme.colors.grey2};
+            }
+          }
+          .statusTag {
+            color: ${e.theme.colors.grey2};
+            border-color: ${e.theme.colors.grey2};
+          }
+        ` : e.isSelected ? Z`
+            color: ${e.theme.colors.primary};
+            border-color: ${e.theme.colors.primary};
+            div {
+              :not(.statusTag) {
+                color: ${e.theme.colors.primary};
+              }
+            }
+            .statusTag {
+              color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+              border-color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+            }
+          ` : Z`
+            &:hover {
+              color: ${e.theme.colors.primary};
+              border-color: ${e.theme.colors.primary};
+              div {
+                :not(.statusTag) {
+                  color: ${e.theme.colors.primary};
+                }
+              }
+              .statusTag {
+                color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+                border-color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+              }
+            }
+          `}
+  margin-right: ${(e) => ae.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${(e) => ae.containerMarginLeft.valuePx(e.windowSize)};
+`, nn = n.div`
+  display: block;
+  width: 100%;
+`, rn = n.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`, ln = n.div`
+  display: flex;
+  flex-direction: column;
+  column-gap: 12px;
+  align-items: flex-start;
+`, sn = n.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${o.sp1};
+  align-items: center;
+  margin-right: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, an = n(W)`
+  color: ${(e) => e.theme.colors.hero};
+  flex-grow: 1;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: ${(e) => ae.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${(e) => e.windowSize === "small" ? `${Nt}px` : "initial"};
+`, dn = n(W)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  justify-content: flex-end;
+`, cn = n(D)`
+  color: ${(e) => e.theme.colors.grey1};
+`, mn = n(D)`
+  color: ${(e) => e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${o.sp0} 6px;
+  max-width: calc(100%);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-flex;
+  border: ${(e) => `1px solid ${e.borderColor}`};
+  border-radius: ${o.sp1};
+`, pt = n(D)`
+  color: ${(e) => e.theme.colors.grey1};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`, pn = n.div`
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: ${(e) => e.hasAlertIcon ? "flex-start" : "flex-end"};
+  justify-content: center;
+`, _e = n(D)`
+  color: ${(e) => e.theme.colors.grey1};
+`, hn = n.div`
+  display: flex;
+  flex-direction: column;
+`, gn = n.div`
+  display: flex;
+  flex-direction: column;
+`, un = n.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.isProcessing ? e.theme.colors.grey2 : e.theme.colors.primary};
+`, yn = n(It)`
+  width: 12px;
+  height: 12px;
+  color: inherit;
+`, xn = n.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${o.sp2};
+`, bn = n(_t)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  :hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, $n = n.div``, le = oe.getLocalizedStrings().spendManagement.reimbursement.reimbursementByTabs.header, We = {
+  key: "reportName",
+  value: le.name,
+  sortOrder: "ascending",
+  width: new m(30, 30)
+}, Ve = {
+  key: "type",
+  value: le.type,
+  sortOrder: "ascending",
+  width: new m(20, 20)
+}, Ee = {
+  key: "status",
+  value: le.status,
+  sortOrder: "ascending",
+  width: new m(20, 20)
+}, De = {
+  key: "amount",
+  value: le.amount,
+  sortOrder: "ascending",
+  width: new m(10, 10)
+}, de = [
+  We,
+  {
+    key: "submittedOn",
+    value: le.created,
+    sortOrder: "ascending",
+    width: new m(20, 20)
+  },
+  Ve,
+  Ee,
+  De
+], fn = [
+  We,
+  {
+    key: "submittedOn",
+    value: le.submitted,
+    sortOrder: "ascending",
+    width: new m(20, 20)
+  },
+  Ve,
+  Ee,
+  De
+], wn = [
+  We,
+  {
+    key: "submittedOn",
+    value: le.paymentDate,
+    sortOrder: "ascending",
+    width: new m(20, 20)
+  },
+  Ve,
+  Ee,
+  De
+], vn = [
+  We,
+  {
+    key: "submittedOn",
+    value: le.paidOn,
+    sortOrder: "ascending",
+    width: new m(20, 20)
+  },
+  Ve,
+  Ee,
+  De
+], Ht = {
+  draft: de,
+  pending_approval: fn,
+  scheduled: wn,
+  paid: vn
+}, Re = {
+  headerLastColumnTopPadding: new m(r[0], r[4]),
+  headerLastColumnRightPadding: new m(r[3], r[11]),
+  headerLastColumnBottomPadding: new m(r[0], r[4]),
+  headerLastColumnLeftPadding: new m(r[3], r[4]),
+  containerMarginLeft: new m(r[0], r[8]),
+  containerMarginRight: new m(r[0], r[8])
+};
+function Pn({
+  companyNameSticky: e,
+  currentTab: i,
+  onColumnSortConfigChanged: p,
+  sortConfig: l,
+  analytics: d
+}) {
+  const u = Y(), x = Xe(), [b, f] = Ce(
+    be(Ht[i])
+  );
+  Te(() => {
+    const s = [...b];
+    for (const P of s)
+      P.key === l.sortKey ? P.sortOrder = l.sortOrder : P.sortOrder = "ascending";
+    f(s);
+  }, [l.sortKey, l.sortOrder]);
+  const g = (s, P) => {
+    let a = P;
+    l.sortKey === s && (a = P === "ascending" ? "descending" : "ascending"), d?.trackReimbursementListSort(s, a), p?.(s, a);
+  }, y = b.find((s) => s.key === l.sortKey) ?? b[0], h = (s) => b.find((P) => P.key === s)?.value ?? "", $ = b.map((s) => s.key), c = oe.getLocalizedStrings().spendManagement.reimbursement.reimbursementByTabs;
+  return u === "small" ? /* @__PURE__ */ t.jsxs(ht, { height: Lt, windowSize: u, children: [
+    /* @__PURE__ */ t.jsx(Sn, { children: /* @__PURE__ */ t.jsx(jn, {}) }),
+    /* @__PURE__ */ t.jsx(
+      Ct,
+      {
+        title: c.sortBy,
+        placeholder: c.sortBy,
+        pickerValues: $,
+        valueToLabel: h,
+        selectedValue: l.sortKey,
+        onPickerSelectionChanged: (s) => {
+          g(
+            s,
+            "ascending"
+          );
+        },
+        optionTextStyle: ze.smallRegular,
+        titleTextStyle: ze.smallRegular,
+        titleColor: x.colors.primary,
+        selectedOptionColor: x.colors.hero,
+        optionBackgroundColor: "inherit",
+        downChevronVisible: !1
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(
+      Rn,
+      {
+        onClick: () => g(
+          y.key,
+          y.sortOrder
+        ),
+        "data-testid": te(
+          "remi-list-header-small",
+          l.sortKey
+        ),
+        children: [
+          /* @__PURE__ */ t.jsx(re, { children: y.value }),
+          /* @__PURE__ */ t.jsx(
+            gt,
+            {
+              sortDataValue: l.sortKey,
+              headerdata: y,
+              children: /* @__PURE__ */ t.jsx(ut, {})
+            }
+          )
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ t.jsx(ht, { height: Bt, windowSize: u, children: b.map((s) => /* @__PURE__ */ t.jsxs(
+    Tn,
+    {
+      companyNameSticky: e,
+      sortDataValue: l.sortKey,
+      actualDataValue: s.key,
+      wrapperWidth: s.width,
+      windowSize: u,
+      children: [
+        /* @__PURE__ */ t.jsxs(
+          _n,
+          {
+            onClick: () => g(s.key, s.sortOrder),
+            "data-testid": te(
+              "remi-list-header",
+              l.sortKey
+            ),
+            children: [
+              /* @__PURE__ */ t.jsx(re, { children: s.value }),
+              /* @__PURE__ */ t.jsx(
+                gt,
+                {
+                  sortDataValue: l.sortKey,
+                  headerdata: s,
+                  children: /* @__PURE__ */ t.jsx(ut, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          In,
+          {
+            sortDataValue: l.sortKey,
+            windowSize: u,
+            isVisible: l.sortKey === s.key && s.key !== "submittedOn",
+            children: /* @__PURE__ */ t.jsx(
+              kn,
+              {
+                onClick: () => g("submittedOn", "ascending"),
+                "data-testid": te(
+                  "remi-list-close-sort",
+                  l.sortKey
+                )
+              }
+            )
+          }
+        )
+      ]
+    },
+    s.key
+  )) });
+}
+const Cn = wt.memo(
+  Pn
+), ht = n(re)`
+  width: 100%;
+  top: 0;
+  left: 0;
+  min-height: ${(e) => e.height}px;
+  max-height: ${(e) => e.height}px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${(e) => `${Re.headerLastColumnTopPadding.valuePx(
+  e.windowSize
+)} ${Re.headerLastColumnRightPadding.valuePx(
+  e.windowSize
+)} ${Re.headerLastColumnBottomPadding.valuePx(
+  e.windowSize
+)} ${Re.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${(e) => e.theme.colors.grey4};
+  position: sticky;
+`, Tn = n.div`
+  color: ${(e) => e.sortDataValue === e.actualDataValue ? e.theme.colors.primary : e.theme.colors.grey1};
+  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  padding-left: ${(e) => e.companyNameSticky ? o.sp4 : o.sp0};
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  left: ${o.sp0};
+  justify-content: ${(e) => e.actualDataValue === "amount" ? "flex-end" : "flex-start"};
+  ${(e) => e.companyNameSticky ? "position: sticky; z-index: 1;" : "position: static; z-index: 0;"};
+  ${(e) => e.actualDataValue === "companyName" ? `padding-left: ${o.sp4};flex: 1 1 auto` : `padding-left: ${o.sp0};`};
+  box-sizing: border-box;
+`, Sn = n.div`
+  margin-right: ${o.sp1};
+  display: flex;
+  align-items: center;
+`, jn = n(Tt)`
+  width: 12px;
+  height: 12px;
+  color: inherit;
+`, kn = n(jt)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+`, gt = n.div`
+  display: flex;
+  align-items: center;
+  transform: ${(e) => e.sortDataValue === e.headerdata.key && e.headerdata.sortOrder === "descending" ? "rotate(180deg)" : "rotate(0deg)"};
+  ${(e) => e.headerdata.sortOrder === "ascending" ? "padding-top: 2px" : "padding-bottom: 2px"}
+`, ut = n(St)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: inherit;
+`, In = n.div`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  align-items: center;
+  padding-top: 2px;
+`, _n = n.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Rn = n.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+  margin-left: auto;
+`, Pe = {
+  containerPaddingLeft: new m(r[3], r[4]),
+  containerPaddingRight: new m(r[3], r[4]),
+  containerPaddingTop: new m(r[2], 12),
+  containerPaddingBottom: new m(r[2], 12),
+  containerMarginLeft: new m(r[4], r[8]),
+  containerMarginRight: new m(r[4], r[8])
+}, G = oe.getLocalizedStrings().spendManagement.reimbursement.reimbursementByTabs, zn = ({
+  reimbursementDetail: e,
+  tagStatus: i,
+  isProcessing: p,
+  isSelected: l,
+  reportTitleAdditionalInfo: d,
+  date: u,
+  approvers: x,
+  deletionAdditionalInfo: b,
+  isReimbursementCommentingEnabled: f,
+  onTransactionRowClick: g
+}) => {
+  const y = Y(), h = Ye(), $ = vt(null), [c, s] = Ce(0);
+  Xt(() => {
+    $.current && s(
+      $.current.offsetWidth * Mt
+    );
+  }, [y]);
+  const a = et().analytics, w = Je(), k = `dashboard_${h.currentTenant?.companyId}`, _ = () => {
+    g(e.id);
+  }, j = e.reimbursementTypesIncluded, v = Be(x), B = oe.getLocalizedStrings().common.strings.empty, { threads: R, isLoading: F } = tt(
+    {
+      application: "dashboard",
+      companyId: h.currentTenant?.companyId,
+      tab: "reimbursement",
+      entityId: e.id,
+      isGlobalComment: !1
+    },
+    "both",
+    !1
+  ), C = Qe(() => R.filter((z) => z.resolved === !1), [R]), N = (z) => {
+    z.stopPropagation(), w?.sharedFunctions?.subtreeFunctions.openAllThreadsDrawer({
+      roomId: k,
+      companyId: h.currentTenant?.companyId ?? B,
+      companyName: h.currentTenant?.companyName ?? B,
+      entityType: "reimbursement.details",
+      entityId: e.id ?? B
+    }), a.trackCommentActivity(
+      "reimbursement",
+      // pageName
+      "clicked",
+      // activityType
+      h.currentTenant?.companyName ?? B,
+      // tenantName
+      h.controllersList.controllers.map(
+        (q) => nt(q)
+      ),
+      // controllerName
+      void 0,
+      // status
+      void 0,
+      // createdBy
+      "comment on field"
+      // source
+    );
+  };
+  return /* @__PURE__ */ t.jsxs(
+    Ln,
+    {
+      windowSize: y,
+      onClick: _,
+      isProcessing: p,
+      isSelected: l,
+      statusCode: i?.code ?? B,
+      "data-testid": te(
+        "remi-row-click",
+        e.id
+      ),
+      children: [
+        /* @__PURE__ */ t.jsx(Bn, { children: /* @__PURE__ */ t.jsxs(Nn, { children: [
+          /* @__PURE__ */ t.jsxs(
+            Mn,
+            {
+              windowSize: y,
+              responsiveWidth: de[0].width,
+              ref: $,
+              children: [
+                /* @__PURE__ */ t.jsx(
+                  On,
+                  {
+                    windowSize: y,
+                    reportNameWidth: c,
+                    children: e.reportTitle ?? G.newReimbursementTitle
+                  }
+                ),
+                d != null && /* @__PURE__ */ t.jsx(Hn, { children: `${G.byText} ${d?.firstName} ${d?.lastName}` })
+              ]
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            Vn,
+            {
+              windowSize: y,
+              responsiveWidth: de[1].width,
+              children: u
+            }
+          ),
+          j.length > 1 ? /* @__PURE__ */ t.jsx(
+            yt,
+            {
+              windowSize: y,
+              responsiveWidth: de[2].width,
+              children: /* @__PURE__ */ t.jsx(
+                X,
+                {
+                  title: G.reimbursementType.both,
+                  placement: "bottom-start",
+                  display: "flex",
+                  children: G.reimbursementType.titleForBoth
+                }
+              )
+            }
+          ) : /* @__PURE__ */ t.jsx(
+            yt,
+            {
+              windowSize: y,
+              responsiveWidth: de[2].width,
+              children: G.reimbursementType[j[0]]
+            }
+          ),
+          /* @__PURE__ */ t.jsxs(
+            Dn,
+            {
+              windowSize: y,
+              responsiveWidth: de[3].width,
+              children: [
+                i !== void 0 ? /* @__PURE__ */ t.jsx(
+                  Un,
+                  {
+                    className: "statusTag",
+                    color: i.color,
+                    bgColor: i.bgColor,
+                    borderColor: i.borderColor,
+                    children: i.value ?? G.hyphenText
+                  }
+                ) : /* @__PURE__ */ t.jsx(En, { children: G.hyphenText }),
+                x !== void 0 && v.length > 0 ? v.length > 1 ? /* @__PURE__ */ t.jsx(
+                  X,
+                  {
+                    title: `${G.byText} ` + v.join(` ${G.orText} `),
+                    placement: "bottom-start",
+                    children: /* @__PURE__ */ t.jsx(Ze, { children: `${G.byText} ` + v[0] + `${G.dots}` })
+                  }
+                ) : /* @__PURE__ */ t.jsx(Ze, { children: `${G.byText} ` + v[0] }) : null,
+                b != null ? /* @__PURE__ */ t.jsx(Ze, { children: b }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            Wn,
+            {
+              windowSize: y,
+              responsiveWidth: de[4].width,
+              children: Ne("0,0[.]00", e.amount)
+            }
+          )
+        ] }) }),
+        f && C.length > 0 ? /* @__PURE__ */ t.jsx(
+          ot,
+          {
+            isLoading: F,
+            count: C.length,
+            style: {
+              position: "absolute",
+              float: "right",
+              right: `calc(${o.sp6} + ${o.sp1})`,
+              top: o.sp1
+            },
+            openThread: N
+          }
+        ) : null
+      ]
+    }
+  );
+}, Ln = n.div`
+  display: flex;
+  margin-bottom: ${o.sp3};
+  background-color: ${(e) => e.isProcessing ? "transparent" : e.theme.colors.grey5};
+  padding-left: ${(e) => Pe.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => Pe.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => Pe.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => Pe.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${(e) => ` 1px solid ${e.isProcessing ? e.theme.colors.grey2 : e.isSelected ? e.theme.colors.primary : e.theme.colors.grey3}`};
+  box-shadow: ${(e) => e.isProcessing ? "none" : e.theme.mode === "dark" ? `${Q.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${Q.boxShadowElevation}`};
+  border-radius: ${o.sp2};
+  cursor: ${(e) => e.isProcessing ? "initial" : "pointer"};
+
+  ${(e) => e.isProcessing ? Z`
+          color: ${e.theme.colors.grey2};
+          border-color: ${e.theme.colors.grey2};
+          div {
+            :not(.statusTag) {
+              color: ${e.theme.colors.grey2};
+            }
+          }
+          .statusTag {
+            color: ${e.theme.colors.grey2};
+            border-color: ${e.theme.colors.grey2};
+          }
+        ` : e.isSelected ? Z`
+            color: ${e.theme.colors.primary};
+            border-color: ${e.theme.colors.primary};
+            div {
+              :not(.statusTag) {
+                color: ${e.theme.colors.primary};
+              }
+            }
+            .statusTag {
+              color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+              border-color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+            }
+          ` : Z`
+            &:hover {
+              color: ${e.theme.colors.primary};
+              border-color: ${e.theme.colors.primary};
+              div {
+                :not(.statusTag) {
+                  color: ${e.theme.colors.primary};
+                }
+              }
+              .statusTag {
+                color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+                border-color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+              }
+            }
+          `}
+
+  margin-right: ${(e) => Pe.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${o.sp0};
+`, Bn = n.div`
+  display: flex;
+  width: 100%;
+`, Nn = n.div`
+  display: flex;
+  width: 100%;
+  height: 42px;
+`, Mn = n.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  column-gap: 12px;
+  align-items: flex-start;
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+`, On = n(W)`
+  color: ${(e) => e.theme.colors.hero};
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: ${(e) => e.reportNameWidth != null && e.reportNameWidth > 0 ? `${e.reportNameWidth}px` : `${Mt * 100}%`};
+`, Hn = n(re)`
+  color: ${(e) => e.theme.colors.grey1};
+`, Wn = n(W)`
+  display: flex;
+  align-items: ${(e) => e.windowSize === "small" || e.windowSize === "medium-compact" ? "flex-start" : "center"};
+  color: ${(e) => e.theme.colors.hero};
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  justify-content: flex-end;
+`, Vn = n(W)`
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`, En = n(W)``, yt = n(W)`
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`, Dn = n(W)`
+  position: relative;
+  top: 2px;
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+`, Ze = n(D)`
+  position: relative;
+  top: 1px;
+  color: ${(e) => e.theme.colors.grey1};
+`, Un = n(D)`
+  display: flex;
+  color: ${(e) => e.color};
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1px 6px 1px 6px;
+  border: ${(e) => `1px solid ${e.borderColor}`};
+  border-radius: ${o.sp1};
+`, ce = {
+  containerPaddingLeft: new m(r[3], r[4]),
+  containerPaddingRight: new m(r[3], r[4]),
+  containerPaddingTop: new m(r[2], r[3]),
+  containerPaddingBottom: new m(r[2], r[3]),
+  containerMarginLeft: new m(r[3], r[8]),
+  containerMarginRight: new m(r[3], r[8]),
+  webkitLineClamp: new m(2, 2, 1, 1, 1)
+}, E = oe.getLocalizedStrings().spendManagement.reimbursement.reimbursementByTabs, Kn = ({
+  reimbursementDetail: e,
+  tagStatus: i,
+  currentTab: p,
+  isProcessing: l,
+  isSelected: d,
+  bulkSelectFormId: u,
+  isBulkSelectionLimitReached: x,
+  isSelectionMode: b,
+  reportTitleAdditionalInfo: f,
+  date: g,
+  approvers: y,
+  deletionAdditionalInfo: h,
+  onTransactionRowClick: $
+}) => {
+  const c = Y(), { getValues: s, setValue: P } = ft(), a = e.reimbursementTypesIncluded, w = Be(y), k = be(Ht[p]), _ = s(u), j = ee(() => {
+    !x && e.bulkSelectInfo?.isSelectableForBulkAction && !d && P(u, [..._, e.id]);
+  }, [
+    u,
+    x,
+    d,
+    P,
+    e.bulkSelectInfo?.isSelectableForBulkAction,
+    e.id,
+    _
+  ]), v = ee(() => {
+    j();
+  }, [j]), B = ee(
+    (C) => {
+      C.stopPropagation(), C.cancelable && C.preventDefault(), b ? j() : $(e.id);
+    },
+    [
+      j,
+      b,
+      $,
+      e.id
+    ]
+  ), F = Ot({ onLongPress: v }, {
+    shouldPreventDefault: !1,
+    delay: 1e3
+  });
+  return /* @__PURE__ */ t.jsx(
+    An,
+    {
+      windowSize: c,
+      statusCode: i?.code ?? "",
+      isProcessing: l,
+      isSelected: d,
+      children: /* @__PURE__ */ t.jsx(
+        Fn,
+        {
+          onClick: B,
+          ...F,
+          "data-testid": te(
+            "remi-row-click-mobile",
+            e.id
+          ),
+          children: /* @__PURE__ */ t.jsxs(Gn, { children: [
+            /* @__PURE__ */ t.jsxs(Zn, { children: [
+              /* @__PURE__ */ t.jsxs(Xn, { children: [
+                /* @__PURE__ */ t.jsx(Qn, { windowSize: c, children: e.reportTitle ?? E.newReimbursementTitle }),
+                f != null && /* @__PURE__ */ t.jsx(Yn, { children: `${E.byText} ${f?.firstName} ${f?.lastName}` })
+              ] }),
+              /* @__PURE__ */ t.jsxs(ei, { children: [
+                k[1].value + ": ",
+                g
+              ] }),
+              a.length > 1 ? /* @__PURE__ */ t.jsx(
+                X,
+                {
+                  title: E.reimbursementType.both,
+                  placement: "bottom-start",
+                  display: "flex",
+                  children: /* @__PURE__ */ t.jsxs(xt, { children: [
+                    E.reimbursementType.type + ": ",
+                    E.reimbursementType.titleForBoth
+                  ] })
+                }
+              ) : /* @__PURE__ */ t.jsxs(xt, { children: [
+                E.reimbursementType.type + ": ",
+                E.reimbursementType[a[0]]
+              ] })
+            ] }),
+            /* @__PURE__ */ t.jsxs(qn, { children: [
+              /* @__PURE__ */ t.jsx(Jn, { children: Ne("0,0[.]00", e.amount) }),
+              /* @__PURE__ */ t.jsxs(ti, { children: [
+                i !== void 0 ? /* @__PURE__ */ t.jsx(
+                  oi,
+                  {
+                    className: "statusTag",
+                    color: i.color,
+                    bgColor: i.bgColor,
+                    borderColor: i.borderColor,
+                    children: i.value ?? E.hyphenText
+                  }
+                ) : /* @__PURE__ */ t.jsx(t.Fragment, { children: E.hyphenText }),
+                y !== void 0 && w.length > 0 ? w.length > 1 ? /* @__PURE__ */ t.jsx(
+                  X,
+                  {
+                    title: `${E.byText} ` + w.join(` ${E.orText} `),
+                    placement: "bottom-start",
+                    children: /* @__PURE__ */ t.jsx(qe, { style: { marginLeft: "auto" }, children: `${E.byText} ` + w[0] + `${E.dots}` })
+                  }
+                ) : /* @__PURE__ */ t.jsx(qe, { style: { marginLeft: "auto" }, children: `${E.byText} ` + w[0] }) : null,
+                h != null ? /* @__PURE__ */ t.jsx(qe, { children: h }) : null
+              ] })
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}, An = n.div`
+  display: flex;
+  margin-bottom: ${o.sp3};
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-left: ${(e) => ce.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => ce.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => ce.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => ce.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${(e) => ` 1px solid ${e.isProcessing ? e.theme.colors.grey2 : e.isSelected ? e.theme.colors.primary : e.theme.colors.grey3}`};
+  box-shadow: ${(e) => e.isProcessing ? "none" : e.theme.mode === "dark" ? `${Q.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${Q.boxShadowElevation}`};
+  border-radius: ${o.sp2};
+  cursor: ${(e) => e.isProcessing ? "initial" : "pointer"};
+  ${(e) => e.isProcessing ? Z`
+          color: ${e.theme.colors.grey2};
+          border-color: ${e.theme.colors.grey2};
+          div {
+            :not(.statusTag) {
+              color: ${e.theme.colors.grey2};
+            }
+          }
+          .statusTag {
+            color: ${e.theme.colors.grey2};
+            border-color: ${e.theme.colors.grey2};
+          }
+        ` : e.isSelected ? Z`
+            color: ${e.theme.colors.primary};
+            border-color: ${e.theme.colors.primary};
+            div {
+              :not(.statusTag) {
+                color: ${e.theme.colors.primary};
+              }
+            }
+            .statusTag {
+              color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+              border-color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+            }
+          ` : Z`
+            &:hover {
+              color: ${e.theme.colors.primary};
+              border-color: ${e.theme.colors.primary};
+              div {
+                :not(.statusTag) {
+                  color: ${e.theme.colors.primary};
+                }
+              }
+              .statusTag {
+                color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+                border-color: ${M.includes(
+  e.statusCode
+) ? e.theme.colors.primary : void 0};
+              }
+            }
+          `}
+
+  margin-right: ${(e) => ce.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${(e) => ce.containerMarginLeft.valuePx(e.windowSize)};
+`, Fn = n.div`
+  display: flex;
+  width: 100%;
+`, Gn = n.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`, Zn = n.div`
+  display: flex;
+  flex-direction: column;
+`, qn = n.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+`, Xn = n.div`
+  display: flex;
+  flex-direction: column;
+  column-gap: 12px;
+  align-items: flex-start;
+`, Qn = n(W)`
+  color: ${(e) => e.theme.colors.hero};
+  flex-grow: 1;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: ${(e) => ce.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${(e) => e.windowSize === "small" ? `${Nt}px` : "initial"};
+`, Yn = n(D)`
+  color: ${(e) => e.theme.colors.grey1};
+`, Jn = n(W)`
+  display: flex;
+  margin-left: auto;
+  color: ${(e) => e.theme.colors.hero};
+`, ei = n(D)`
+  color: ${(e) => e.theme.colors.grey1};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`, xt = n(D)`
+  color: ${(e) => e.theme.colors.grey1};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`, ti = n.div`
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+`, qe = n(D)`
+  color: ${(e) => e.theme.colors.grey1};
+`, oi = n(D)`
+  display: flex;
+  color: ${(e) => e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1px 6px 1px 6px;
+  border: ${(e) => `1px solid ${e.borderColor}`};
+  border-radius: ${o.sp1};
+  margin-left: auto;
+`, ni = {
+  lastListItemHeight: new m(200, 158),
+  checkBoxTop: new m(44, r[4]),
+  checkBoxLeft: new m(r[2], r[4])
+}, T = oe.getLocalizedStrings(), {
+  common: {
+    texts: { maxLimit: ii }
+  },
+  spendManagement: {
+    billPay: Wt,
+    reimbursement: ri
+  }
+} = T, A = Wt.bulkActions, H = ri.bulkActions, O = T.common.strings.empty, me = "bulkSelectIds", li = ({
+  transactionList: e,
+  botEmail: i,
+  selectedTab: p,
+  selectedSubTab: l,
+  isShowDeletedBillsEnabled: d,
+  isShowDeletedReimbursementEnabled: u,
+  isBillPayCommentingEnabled: x,
+  isReimbursementCommentingEnabled: b,
+  searchText: f,
+  isAdmin: g,
+  entity: y,
+  uiState: h,
+  bulkSubmissionLimit: $,
+  isBulkActionAllowed: c,
+  transactionsSelectedForBulkAction: s,
+  isDetectInsufficientFundsEnabled: P,
+  fetchState: a,
+  analytics: w,
+  onTransactionRowClick: k,
+  onReloadTransactions: _,
+  onColumnSortConfigChanged: j
+}) => {
+  const v = Y(), B = (C) => {
+    const N = y === "bill_pay" ? e[C].vendor?.name ?? e[C].candidateVendorName ?? O : e[C].reportTitle ?? O;
+    return vo(N, v);
+  }, R = vt(null);
+  Te(() => {
+    R.current?.resetAfterIndex(0);
+  }, [v, R, p, l]);
+  const F = Qt(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (C, N) => {
+      const { children: z, style: q, ...se } = C;
+      return /* @__PURE__ */ t.jsx(
+        _i,
+        {
+          ref: N,
+          style: {
+            ...q,
+            width: "auto"
+          },
+          ...se,
+          children: /* @__PURE__ */ t.jsx(Ii, { children: z })
+        }
+      );
+    }
+  );
+  return F.displayName = T.spendManagement.billPay.billsByTabs.headerElementDisplayName, no({
+    componentName: `${bo(y)}.${$o(p, y)}`,
+    enabled: a === "Completed"
+  }), /* @__PURE__ */ t.jsx(fi, { children: a === "Error" ? /* @__PURE__ */ t.jsxs(Pi, { children: [
+    /* @__PURE__ */ t.jsx(Ci, { onClick: _, children: /* @__PURE__ */ t.jsx(Ti, {}) }),
+    /* @__PURE__ */ t.jsx(Si, { children: T.peoplePage.reloadPage.label })
+  ] }) : a === "Completed" && e.length === 0 && f != O ? /* @__PURE__ */ t.jsx(
+    st,
+    {
+      message: y === "bill_pay" ? T.spendManagement.billPay.billsByTabs.noDataWithFilterText : T.spendManagement.reimbursement.reimbursementByTabs.noDataWithFilterText
+    }
+  ) : a === "Completed" && e.length === 0 ? /* @__PURE__ */ t.jsx(
+    st,
+    {
+      message: y === "bill_pay" ? T.spendManagement.billPay.billsByTabs.noDataText : T.spendManagement.reimbursement.reimbursementByTabs.noDataText,
+      orMessage: y === "bill_pay" ? T.spendManagement.billPay.billsByTabs.noDataTextViaMail : T.spendManagement.reimbursement.reimbursementByTabs.noDataTextViaMail,
+      emailTextPrefix: y === "bill_pay" ? void 0 : T.spendManagement.reimbursement.reimbursementByTabs.receiptTo,
+      botEmail: i
+    }
+  ) : a === "Not-Started" || a === "In-Progress" ? /* @__PURE__ */ t.jsx(yo, { fetchState: a, styles: { margin: "auto" } }) : /* @__PURE__ */ t.jsx(ji, { windowSize: v, children: /* @__PURE__ */ t.jsx(Zt, { children: ({ height: C, width: N }) => /* @__PURE__ */ t.jsx(
+    qt,
+    {
+      ref: R,
+      height: C,
+      itemCount: y === "bill_pay" || y === "reimbursement" ? 1 : e.length,
+      innerElementType: F,
+      itemSize: B,
+      estimatedItemSize: wo,
+      itemKey: (z) => e[z].id,
+      width: N,
+      overscanCount: fo,
+      itemData: {
+        entity: y,
+        isBulkActionAllowed: c,
+        isShowDeletedBillsEnabled: d,
+        isShowDeletedReimbursementEnabled: u,
+        isBillPayCommentingEnabled: x,
+        isReimbursementCommentingEnabled: b,
+        transactionList: e,
+        isAdmin: g,
+        selectedTab: p,
+        transactionsSelectedForBulkAction: s,
+        bulkSubmissionLimit: $,
+        uiState: h,
+        analytics: w,
+        isDetectInsufficientFundsEnabled: P,
+        onTransactionRowClick: k,
+        onColumnSortConfigChanged: j
+      },
+      initialScrollOffset: 0,
+      children: si
+    }
+  ) }) }) });
+}, Zi = ({
+  transactionList: e,
+  botEmail: i,
+  allSubTabs: p,
+  isAdmin: l,
+  selectedTab: d,
+  isShowDeletedBillsEnabled: u,
+  isShowDeletedReimbursementEnabled: x,
+  isBillPayCommentingEnabled: b,
+  isReimbursementCommentingEnabled: f,
+  selectedSubTab: g,
+  searchText: y,
+  entity: h,
+  uiState: $,
+  bulkSubmissionLimit: c,
+  isBulkActionAllowed: s,
+  isRecurringBillInBulkActionList: P,
+  transactionsSelectedForBulkAction: a,
+  allowedBulkActions: w,
+  bulkSubmissionFetchState: k,
+  isDetectInsufficientFundsEnabled: _,
+  onTransactionRowClick: j,
+  onSubtabChange: v,
+  fetchState: B,
+  onReloadTransactions: R,
+  onColumnSortConfigChanged: F,
+  analytics: C,
+  updateBulkActionList: N,
+  removeAllTransactionsFromBulkActionList: z,
+  onProceedForBulkActionClick: q
+}) => {
+  const se = At({
+    defaultValues: { bulkSelectIds: a },
+    values: { bulkSelectIds: a }
+  });
+  Te(() => {
+    const I = se.watch((L, { name: S }) => {
+      S != null && L != null && Ft(() => Se(S, L));
+    });
+    return () => {
+      I.unsubscribe();
+    };
+  });
+  const Se = async (I, L) => {
+    if (I === me) {
+      let S = [];
+      if (L[me].includes(
+        T.common.all.toLowerCase()
+      )) {
+        if (d === "scheduled" && a.length === 0) {
+          S = [];
+          for (const V of e)
+            if (V.bulkSelectInfo?.isSelectableForBulkActionSelectAll && S.push(V.id), S.length === c)
+              break;
+        } else
+          S = L[me].filter(
+            (V) => V !== T.common.all.toLowerCase()
+          );
+        if (h === "bill_pay") {
+          const V = e.filter((fe) => S.includes(fe.id)), Ae = je(V);
+          C?.trackBillPayBulkSelectAll(
+            d,
+            g,
+            Ae
+          );
+        } else {
+          const V = e.filter((fe) => S.includes(fe.id)), Ae = ke(
+            V.map((fe) => fe.reimbursementTypesIncluded)
+          );
+          C?.trackReimbursementBulkSelectAll(
+            d,
+            g,
+            Ae
+          );
+        }
+      } else
+        S = L[me];
+      N?.(S);
+    }
+  }, he = () => {
+    w.includes("cancel") ? Dt() : Kt();
+  }, ge = Y(), [Ue, $e] = Ce(!1), [U, K] = Ce({
+    type: O,
+    title: O,
+    description: O,
+    primaryButtonText: O,
+    secondaryButtonText: O
+  });
+  Te(() => {
+    const I = Yt(d, g, h);
+    B === "Completed" && I != null && C?.trackPageLoaded(
+      I,
+      h === "bill_pay" ? "Bills" : "Reimbursements"
+    );
+  }, [C, d, g, h, B]);
+  const Ke = (I) => {
+    v(I);
+  }, Et = ee(() => {
+    const { title: I, description: L } = bi(
+      h,
+      a.length,
+      d,
+      P
+    );
+    if (K({
+      type: "delete",
+      title: I,
+      description: L,
+      primaryButtonText: T.common.texts.confirm,
+      secondaryButtonText: T.common.texts.close
+    }), h === "bill_pay") {
+      const S = e.filter((V) => a.includes(V.id)), J = je(S);
+      C?.trackBillPayBulkDeleted(
+        a.length,
+        d,
+        g,
+        J
+      );
+    } else {
+      const S = e.filter((V) => a.includes(V.id)), J = ke(
+        S.map((V) => V.reimbursementTypesIncluded)
+      );
+      C?.trackReimbursementBulkDeleted(
+        a.length,
+        d,
+        g,
+        J
+      );
+    }
+    $e(!0);
+  }, [
+    h,
+    C,
+    P,
+    g,
+    d,
+    e,
+    a
+  ]), Dt = ee(() => {
+    const { title: I, description: L } = xi(
+      h,
+      a.length
+    );
+    K({
+      type: "cancel",
+      title: I,
+      description: L,
+      primaryButtonText: T.common.texts.confirm,
+      secondaryButtonText: T.common.texts.close
+    }), $e(!0);
+  }, [h, a.length]), Ut = {
+    onOkClick: (I) => {
+      if ($e(!1), h === "bill_pay") {
+        const L = e.filter((J) => a.includes(J.id)), S = je(L);
+        C?.trackBillPayBulkPopupConfirm(
+          U.type,
+          d,
+          g,
+          S
+        );
+      } else {
+        const L = e.filter((J) => a.includes(J.id)), S = ke(
+          L.map((J) => J.reimbursementTypesIncluded)
+        );
+        C?.trackReimbursementBulkPopupConfirm(
+          U.type,
+          d,
+          g,
+          S
+        );
+      }
+      U.type === "delete" ? q?.("delete", I) : q?.("cancel", I);
+    },
+    onCancelClick: () => {
+      z?.(), $e(!1), K({
+        type: O,
+        title: O,
+        description: O,
+        primaryButtonText: O,
+        secondaryButtonText: O
+      });
+    }
+  }, Kt = ee(() => {
+    if (h === "bill_pay") {
+      const I = e.filter((S) => a.includes(S.id)), L = je(I);
+      C?.trackBillPayBulkSelection(
+        a.length,
+        d,
+        g,
+        L
+      );
+    } else {
+      const I = e.filter((S) => a.includes(S.id)), L = ke(
+        I.map((S) => S.reimbursementTypesIncluded)
+      );
+      C?.trackReimbursementBulkSelection(
+        a.length,
+        d,
+        g,
+        L
+      );
+    }
+    w.includes("send_for_approval") ? q?.("send_for_approval") : q?.(
+      _ ? "approve" : "review"
+    );
+  }, [
+    h,
+    w,
+    e,
+    C,
+    a,
+    d,
+    g,
+    q,
+    _
+  ]), lt = w.filter((I) => I !== "delete").length > 0;
+  return /* @__PURE__ */ t.jsxs(vi, { children: [
+    /* @__PURE__ */ t.jsx(
+      xo,
+      {
+        tabIds: p,
+        selectedTab: g,
+        hasSubTabs: p.length > 0,
+        entity: h,
+        enablePerformanceTracking: !1,
+        onTabSelectedChange: Ke,
+        isSwitcherLeftAlign: !0
+      }
+    ),
+    /* @__PURE__ */ t.jsx(Gt, { ...se, children: /* @__PURE__ */ t.jsxs(wi, { onSubmit: se.handleSubmit(he), children: [
+      /* @__PURE__ */ t.jsx(
+        li,
+        {
+          botEmail: i,
+          selectedTab: d,
+          selectedSubTab: g,
+          searchText: y,
+          transactionList: e,
+          fetchState: B,
+          onReloadTransactions: R,
+          onTransactionRowClick: j,
+          entity: h,
+          uiState: $,
+          isAdmin: l,
+          onColumnSortConfigChanged: F,
+          analytics: C,
+          isShowDeletedBillsEnabled: u,
+          isShowDeletedReimbursementEnabled: x,
+          isBillPayCommentingEnabled: b,
+          isReimbursementCommentingEnabled: f,
+          bulkSubmissionLimit: c,
+          isBulkActionAllowed: s,
+          transactionsSelectedForBulkAction: a,
+          isDetectInsufficientFundsEnabled: _
+        }
+      ),
+      Ue ? /* @__PURE__ */ t.jsx(
+        Jt,
+        {
+          titleComponent: /* @__PURE__ */ t.jsx(to, { children: U.title }),
+          descriptionComponent: /* @__PURE__ */ t.jsx(eo, { children: U.description }),
+          primaryButtonText: U.primaryButtonText,
+          proceedButtonVariant: U.type === "delete" ? "danger" : "primary",
+          secondaryButtonText: U.secondaryButtonText,
+          action: Ut,
+          isNotesIncluded: d !== "draft",
+          isEditPopup: !0
+        }
+      ) : null,
+      a.length > 0 ? /* @__PURE__ */ t.jsx(
+        oo,
+        {
+          helperContainerStyle: ge === "small" ? {
+            margin: `${o.sp5} ${w.includes("delete") && lt ? o.sp7 : o.sp0} ${o.sp2} ${o.sp0}`
+          } : {},
+          showPrimaryButton: lt,
+          primaryBtn: {
+            label: gi(
+              h,
+              w,
+              a.length
+            ),
+            isLoading: U.type !== "delete" && k === "In-Progress",
+            isDisabled: U.type === "delete" && k === "In-Progress",
+            type: "submit",
+            style: ui(w)
+          },
+          cancelBtn: {
+            label: T.common.texts.goBack,
+            isDisabled: k === "In-Progress",
+            onClick: z,
+            style: yi(
+              w,
+              ge
+            )
+          },
+          leftSideComponent: pi(
+            a.length,
+            c,
+            h,
+            ge
+          ),
+          rightSideComponent: w.includes("delete") ? hi(
+            a.length,
+            U.type === "delete" && k === "In-Progress",
+            Et,
+            ge
+          ) : null
+        }
+      ) : null
+    ] }) })
+  ] });
+}, si = ({ style: e, data: i }) => {
+  const {
+    entity: p,
+    transactionList: l,
+    transactionsSelectedForBulkAction: d,
+    isAdmin: u,
+    isBulkActionAllowed: x,
+    isShowDeletedBillsEnabled: b,
+    isShowDeletedReimbursementEnabled: f,
+    isBillPayCommentingEnabled: g,
+    isReimbursementCommentingEnabled: y,
+    bulkSubmissionLimit: h,
+    selectedTab: $,
+    uiState: c,
+    analytics: s,
+    isDetectInsufficientFundsEnabled: P,
+    onTransactionRowClick: a,
+    onColumnSortConfigChanged: w
+  } = i, k = Y(), _ = Xe(), j = x ? d.length > 0 ? "always_on" : "checked_or_hover" : "off";
+  return /* @__PURE__ */ t.jsx(
+    ki,
+    {
+      style: {
+        ...e,
+        width: "100%"
+      },
+      className: "spend-management-list-item",
+      children: /* @__PURE__ */ t.jsx(
+        so,
+        {
+          style: { width: "100%" },
+          checkBoxContainerStyle: {
+            gap: o.sp3,
+            width: "auto",
+            marginLeft: k === "small" ? o.sp0 : o.sp4
+          },
+          labelStyle: { width: "100%" },
+          checkBoxStyle: ci(k),
+          labelCheckBoxStyle: {
+            marginLeft: k === "small" ? o.sp2 : o.sp0
+          },
+          checkBoxIconStyle: { backgroundColor: _.colors.grey4 },
+          infoIconContainerStyle: mi(k),
+          name: me,
+          mode: j,
+          selectionLimit: h,
+          checkBoxes: p === "bill_pay" ? [
+            {
+              label: /* @__PURE__ */ t.jsx(
+                Io,
+                {
+                  companyNameSticky: !1,
+                  currentTab: $,
+                  onColumnSortConfigChanged: w,
+                  sortConfig: {
+                    sortKey: c.sortKey,
+                    sortOrder: c.sortOrder
+                  }
+                }
+              ),
+              defaultChecked: !1,
+              groupLabel: !0,
+              value: T.common.all.toLowerCase(),
+              isException: !1
+            },
+            ...l.map(
+              (v) => ({
+                label: /* @__PURE__ */ t.jsx(
+                  ai,
+                  {
+                    transactionDetail: v,
+                    selectedTab: $,
+                    isBillPayCommentingEnabled: g,
+                    isShowDeletedBillsEnabled: b,
+                    onTransactionRowClick: a,
+                    billsSelectedForBulkAction: d,
+                    bulkSelectFormId: me,
+                    bulkSelectLimit: h,
+                    isSelectionMode: j === "always_on",
+                    isDetectInsufficientFundsEnabled: P
+                  }
+                ),
+                value: v.id,
+                groupLabel: !1,
+                defaultChecked: !1,
+                isException: v.bulkSelectInfo?.isSelectableForBulkAction === !1,
+                exceptionMode: $i(
+                  v,
+                  d
+                ),
+                exceptionInfo: bt(p, v),
+                exceptionType: $t(v)
+              })
+            )
+          ] : [
+            {
+              label: /* @__PURE__ */ t.jsx(
+                Cn,
+                {
+                  companyNameSticky: !1,
+                  currentTab: $,
+                  onColumnSortConfigChanged: w,
+                  analytics: s,
+                  sortConfig: {
+                    sortKey: c.sortKey,
+                    sortOrder: c.sortOrder
+                  }
+                }
+              ),
+              defaultChecked: !1,
+              groupLabel: !0,
+              value: T.common.all.toLowerCase(),
+              isException: !1
+            },
+            ...l.map(
+              (v) => ({
+                label: /* @__PURE__ */ t.jsx(
+                  di,
+                  {
+                    transactionDetail: v,
+                    isShowDeletedReimbursementEnabled: f,
+                    isReimbursementCommentingEnabled: y,
+                    selectedTab: $,
+                    isAdmin: u,
+                    onTransactionRowClick: a,
+                    remisSelectedForBulkAction: d,
+                    bulkSelectFormId: me,
+                    bulkSelectLimit: h,
+                    isSelectionMode: j === "always_on"
+                  }
+                ),
+                value: v.id,
+                groupLabel: !1,
+                defaultChecked: !1,
+                isException: v.bulkSelectInfo?.isSelectableForBulkAction === !1,
+                exceptionMode: "checked_or_hover",
+                exceptionInfo: bt(p, v),
+                exceptionType: $t(v)
+              })
+            )
+          ]
+        }
+      )
+    }
+  );
+}, ai = ({
+  transactionDetail: e,
+  selectedTab: i,
+  isShowDeletedBillsEnabled: p,
+  billsSelectedForBulkAction: l,
+  bulkSelectFormId: d,
+  bulkSelectLimit: u,
+  isBillPayCommentingEnabled: x,
+  isSelectionMode: b,
+  isDetectInsufficientFundsEnabled: f,
+  onTransactionRowClick: g
+}) => {
+  const h = Y() === "small" ? tn : Wo, $ = co(
+    e,
+    i
+  ), { bulkProcessingDetail: c } = e, s = Le(c?.type), P = () => {
+    const _ = e.billPayInfo.outsideZeniTransactionPaymentMode;
+    if (_ == null || _ === "other")
+      return;
+    const j = Wt.billDetails.paymentOutsideZeni.paymentModeOptions.find(
+      (v) => v.value === _
+    )?.label;
+    return `${T.common.via} ${j}`;
+  }, a = f && e.billPayInfo.stage.code === "scheduled" && !e.isDeleted && e.totalAmountWithFeesInUSD != null ? mo(
+    e.totalAmountWithFeesInUSD,
+    e.withdrawFrom,
+    e.billPayInfo.paymentDate
+  ) : void 0, w = po(
+    e.billPayInfo,
+    i,
+    p,
+    e.isDeleted,
+    e.dueDate
+  ), k = a != null && w?.code !== "failed" && w?.code !== "processing" && w?.code !== "cancelled" && w?.code !== "returned" && w?.code !== "rejected" && w?.code !== "paid";
+  return /* @__PURE__ */ t.jsx(Vt, { children: /* @__PURE__ */ t.jsx(
+    h,
+    {
+      reportTitleAdditionalInfo: $,
+      transactionDetail: e,
+      isBillPayCommentingEnabled: x,
+      isSelected: l.includes(e.id),
+      isProcessing: s,
+      isBulkSelectionLimitReached: l.length === u,
+      isSelectionMode: b,
+      bulkSelectFormId: d,
+      tagStatus: w,
+      approvers: e.isDeleted === !0 ? void 0 : zt(e, i),
+      deletionAdditionalInfo: e.isDeleted === !0 && i !== "draft" ? Rt(e, i) : void 0,
+      onTransactionRowClick: s ? () => null : g,
+      paidAdditionalInfo: i === "paid" && !e.isDeleted ? P() : void 0,
+      lowBalanceAlert: a,
+      showLowBalanceTooltip: k
+    }
+  ) });
+}, di = ({
+  transactionDetail: e,
+  selectedTab: i,
+  isAdmin: p,
+  isShowDeletedReimbursementEnabled: l,
+  isReimbursementCommentingEnabled: d,
+  remisSelectedForBulkAction: u,
+  bulkSelectFormId: x,
+  bulkSelectLimit: b,
+  isSelectionMode: f,
+  onTransactionRowClick: g
+}) => {
+  const h = Y() === "small" ? Kn : zn, $ = ho(
+    p,
+    e.submittedBy
+  ), { bulkProcessingDetail: c } = e, s = Le(c?.type);
+  return /* @__PURE__ */ t.jsx(Vt, { children: /* @__PURE__ */ t.jsx(
+    h,
+    {
+      reportTitleAdditionalInfo: $,
+      reimbursementDetail: e,
+      isReimbursementCommentingEnabled: d,
+      isSelected: u.includes(e.id),
+      isProcessing: s,
+      isBulkSelectionLimitReached: u.length === b,
+      isSelectionMode: f,
+      bulkSelectFormId: x,
+      currentTab: i,
+      date: uo(e, i),
+      approvers: e.isDeleted === !0 ? void 0 : zt(e, i),
+      tagStatus: go(
+        e,
+        i,
+        l
+      ),
+      deletionAdditionalInfo: e.isDeleted === !0 && i !== "draft" ? Rt(e, i) : void 0,
+      onTransactionRowClick: s ? () => null : g
+    }
+  ) });
+}, ci = (e) => {
+  let i = {
+    zIndex: 1,
+    marginBottom: o.sp3,
+    backgroundColor: "inherit"
+  };
+  return e === "small" && (i = {
+    ...i,
+    position: "absolute",
+    left: o.sp1,
+    width: o.sp4,
+    height: o.sp4
+  }), i;
+}, mi = (e) => {
+  let i = {
+    zIndex: 1,
+    marginBottom: o.sp2
+  };
+  return e === "small" && (i = {
+    ...i,
+    position: "absolute",
+    left: o.sp2,
+    marginBottom: o.sp1,
+    width: o.sp4,
+    height: o.sp4
+  }), i;
+}, pi = (e, i, p, l) => {
+  const d = p === "bill_pay" ? A.bill : H.report, u = (e > 1 ? d + "s" : d) + A.selected;
+  return e > 0 ? /* @__PURE__ */ t.jsxs(
+    Bi,
+    {
+      style: l === "small" ? {
+        position: "absolute",
+        top: o.sp2,
+        left: `-${o.sp5}`
+      } : {},
+      children: [
+        /* @__PURE__ */ t.jsx(Ni, { multiDigit: e >= 10, children: e }),
+        /* @__PURE__ */ t.jsx(Mi, { children: u }),
+        e === i ? /* @__PURE__ */ t.jsx(Oi, { children: ii }) : null
+      ]
+    }
+  ) : null;
+}, hi = (e, i, p, l) => e > 0 ? /* @__PURE__ */ t.jsx(
+  Ri,
+  {
+    style: l === "small" ? {
+      position: "absolute",
+      top: o.sp7,
+      right: `-${o.sp5}`
+    } : {},
+    children: /* @__PURE__ */ t.jsx(
+      zi,
+      {
+        isLoading: i,
+        windowSize: l,
+        className: "delete-icon-wrapper",
+        onClick: i ? () => null : p,
+        children: i ? /* @__PURE__ */ t.jsx(io, { size: "Small", start: !0 }) : /* @__PURE__ */ t.jsx(
+          X,
+          {
+            enterDelay: 600,
+            title: T.common.delete,
+            placement: "top",
+            children: /* @__PURE__ */ t.jsx(Li, {})
+          }
+        )
+      }
+    )
+  }
+) : null, bt = (e, i) => {
+  const { bulkProcessingDetail: p, bulkSelectInfo: l } = i, d = Le(p?.type), u = p?.type === "error";
+  let x;
+  if (d)
+    x = p?.inProgressMessage;
+  else if (u)
+    x = p.error?.message;
+  else if (l?.bulkSelectExceptionInfo != null)
+    if (e === "bill_pay") {
+      const { exceptions: b } = T.spendManagement.billPay.bulkActions;
+      x = b[l.bulkSelectExceptionInfo];
+    } else {
+      const { exceptions: b } = T.spendManagement.reimbursement.bulkActions;
+      x = b[l.bulkSelectExceptionInfo];
+    }
+  return x;
+}, gi = (e, i, p) => {
+  const { billPay: l } = T.spendManagement;
+  return i.includes("cancel") ? e === "reimbursement" ? H.popUps.cancel.title.replace(
+    "__report__",
+    p > 1 ? H.reports : H.report
+  ) : l.bulkActions.popUps.cancel.title.replace(
+    "<_bill_>",
+    p > 1 ? l.bulkActions.bills : l.bulkActions.bill
+  ) : i.includes("send_for_approval") ? l.billDetails.sendForApproval : T.common.review;
+}, ui = (e) => {
+  let i;
+  return e.includes("cancel") === !1 && e.includes("send_for_approval") === !1 && (i = { minWidth: "92px" }), i;
+}, yi = (e, i) => {
+  let p;
+  return i !== "small" && (e.includes("cancel") ? p = { minWidth: "116px" } : e.includes("send_for_approval") && (p = { minWidth: "160px" })), p;
+}, xi = (e, i) => {
+  const {
+    this_: p,
+    these: l,
+    payment: d,
+    payments: u,
+    bills: x,
+    bill: b,
+    reports: f,
+    report: g,
+    they: y,
+    it: h
+  } = T.common.texts;
+  return i > 1 ? e === "bill_pay" ? {
+    title: A.popUps.cancel.title.replace(
+      "<_bill_>",
+      T.drawerMenus.bills
+    ),
+    description: A.popUps.cancel.description.replace("<_this_>", l).replace("<_bill_>", x).replace("<_it_>", y).replace("<_payment_>", u)
+  } : {
+    title: H.popUps.cancel.title.replace(
+      "__report__",
+      H.reports
+    ),
+    description: H.popUps.cancel.description.replace("<_this_>", l).replace("__report__", f).replace("<_it_>", y).replace("<_payment_>", u)
+  } : e === "reimbursement" ? {
+    title: H.popUps.cancel.title.replace(
+      "__report__",
+      H.report
+    ),
+    description: H.popUps.cancel.description.replace("<_this_>", p).replace("__report__", g).replace("<_it_>", h).replace("<_payment_>", d)
+  } : {
+    title: A.popUps.cancel.title.replace(
+      "<_bill_>",
+      A.bill
+    ),
+    description: A.popUps.cancel.description.replace("<_this_>", p).replace("<_bill_>", b).replace("<_it_>", h).replace("<_payment_>", d)
+  };
+}, bi = (e, i, p, l) => {
+  const {
+    this_: d,
+    these: u,
+    payment: x,
+    payments: b,
+    bills: f,
+    bill: g,
+    report: y,
+    reports: h,
+    they: $,
+    it: c
+  } = T.common.texts, s = i > 1;
+  let P = O;
+  e === "bill_pay" ? P = A.popUps.delete.title.replace(
+    "<_bill_>",
+    s ? A.bills : A.bill
+  ) : P = H.popUps.delete.title.replace(
+    "__report__",
+    s ? H.reports : H.report
+  );
+  let a = O;
+  return p === "draft" ? e === "bill_pay" ? a = A.popUps.delete.descriptionDraft.replace("<_this_>", s ? u : d).replace("<_bill_>", s ? f : g) : a = H.popUps.delete.descriptionDraft.replace("<_this_>", s ? u : d).replace("__report__", s ? h : y) : l ? a = A.popUps.delete.descriptionRecurring.replace(
+    "<_payment_>",
+    s ? x : b
+  ) : e === "bill_pay" ? a = A.popUps.delete.descriptionOther.replace("<_this_>", s ? u : d).replace("<_bill_>", s ? f : g).replace("<_it_>", s ? $ : c).replace("<_payment_>", s ? b : x) : a = H.popUps.delete.descriptionOther.replace("<_this_>", s ? u : d).replace("__report__", s ? h : y).replace("<_it_>", s ? $ : c).replace("<_payment_>", s ? b : x), {
+    title: P,
+    description: a
+  };
+}, $i = (e, i) => {
+  const p = e.bulkSelectInfo?.bulkSelectExceptionInfo;
+  return i.length === 0 && p != null && (p === "bookCloseDateProcessing" || p === "noActionRecurring") ? "hover_only" : "checked_or_hover";
+}, $t = (e) => Le(e.bulkProcessingDetail?.type) ? "info" : "alert", fi = n.div`
+  display: block;
+  height: 100%;
+`, wi = n.form`
+  height: 100%;
+`, vi = n.div`
+  height: calc(100% - 120px);
+  margin: auto;
+`, Pi = n.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, Ci = n.div`
+  height: 96px;
+  width: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+`, Ti = n(ro)`
+  height: ${o.sp5};
+  width: ${o.sp5};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Si = n(lo)`
+  margin-top: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, ji = n.div`
+  /** Subtract top so list can occupy remaining available height */
+  height: calc(100vh - 243px);
+  max-width: 99.9%;
+  .spend-management-list-item:last-of-type {
+    height: ${(e) => ni.lastListItemHeight.valuePx(e.windowSize)} !important;
+    padding-bottom: ${o.sp9};
+  }
+`, ki = n.div`
+  top: ${o.sp0};
+  left: ${o.sp0};
+  padding-bottom: ${o.sp3};
+  box-sizing: border-box;
+`, Ii = n.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`, _i = n.div``, Vt = n.div`
+  position: relative;
+  width: 100%;
+`, Ri = n.div`
+  display: flex;
+  justify-content: flex-end;
+`, zi = n.div`
+  margin-right: ${o.sp8};
+  cursor: ${(e) => e.isLoading ? "initial" : "pointer"};
+  color: ${(e) => e.windowSize === "small" ? Q.important : e.theme.colors.grey1};
+`, Li = n(ao)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  cursor: pointer;
+  color: inherit;
+  &:hover {
+    color: ${Q.important};
+  }
+`, Bi = n.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: ${o.sp2};
+  margin-left: ${o.sp8};
+`, Ni = n(D)`
+  height: 18px;
+  width: ${(e) => e.multiDigit ? "auto" : "18px"};
+  padding: ${o.sp0} 6px;
+  border-radius: ${o.sp12};
+  border: ${(e) => `1px solid ${e.theme.colors.grey1}`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`, Mi = n(W)`
+  color: ${(e) => e.theme.colors.primary};
+`, Oi = n(re)`
+  color: ${Q.important};
+`;
+export {
+  Zi as default
+};