@zeniai/web-components 3.17.24 → 3.17.25

package/dist/SpendManagementPerTabPage-BlyFIn6o.js

@@ -1,2735 +0,0 @@
-import { u as Qe, j as t, i as be, d as ft, g as Kt, h as Ft, F as Gt, A as Zt, V as qt } from "./vendor-.pnpm-UYinI_7q.js";
-import wt, { useState as Ce, useEffect as Te, useMemo as Xe, useCallback as ee, useRef as vt, useLayoutEffect as Qt, forwardRef as Xt } 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, D as r, a as oe, u as J, eX as Ct, t as ze, F as re, e as te, S as o, fL as Tt, aa as St, ab as jt, ei as Je, iA as Ye, ek as et, d as tt, la as kt, lb as Be, Z as Q, a2 as Ne, lc as ot, C as X, ld as M, o as W, fP as It, E as D, X as _t, ae as nt, le as Jt, aP as Yt, aQ as eo, aR as to, ao as oo, fa as no, fh as st, A as io, z as ro, P as lo, fN as so, x as ao, lf as co, hq as mo, lg as po, lh as Rt, li as zt, kQ as ho, lj as go, lk as uo } from "./index-ymbrtWl5.js";
-import { B as yo } from "./BusyIndication-CEyyG-Ry.js";
-import { T as xo, e as bo, t as $o } from "./StatusSwitcher-CcLiXtx4.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-BBQzJHlv.js";
-import { css as Z } from "@emotion/react";
-import { u as Ht } 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])
-}, He = {
-  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)
-}, Oe = {
-  key: "amount",
-  value: pe.amount,
-  sortOrder: "ascending",
-  width: new m(10, 10)
-}, ye = [
-  Me,
-  He,
-  Po,
-  rt,
-  Oe
-], To = [
-  Me,
-  He,
-  it,
-  rt,
-  Oe
-], So = [
-  Me,
-  He,
-  it,
-  rt,
-  Oe
-], jo = [
-  Me,
-  He,
-  it,
-  Co,
-  Oe
-], 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 = Qe(), u = J(), [x, b] = Ce(
-    Oo(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(
-      Ho,
-      {
-        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};
-  }
-`, Ho = n.div`
-  display: flex;
-  cursor: pointer;
-  gap: 5px;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Oo = (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 $ = J(), c = Je(), s = Ye(), 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 = Xe(() => 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(Ao, { children: [
-                      /* @__PURE__ */ t.jsx(Ko, { windowSize: $, children: F }),
-                      e.isRecurring ? /* @__PURE__ */ t.jsx(
-                        Q,
-                        {
-                          title: C(),
-                          placement: "right",
-                          style: { padding: `2px ${o.sp2}` },
-                          children: /* @__PURE__ */ t.jsx(Jo, { isProcessing: u, children: /* @__PURE__ */ t.jsx(Yo, {}) })
-                        }
-                      ) : 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(
-                Xo,
-                {
-                  windowSize: $,
-                  responsiveWidth: ye[3].width,
-                  children: [
-                    /* @__PURE__ */ t.jsxs(Qo, { 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(
-                        Q,
-                        {
-                          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(
-                      Q,
-                      {
-                        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" ? `${X.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${X.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)};
-`, Ao = n.div`
-  display: flex;
-  flex-direction: row;
-  gap: ${o.sp1};
-  align-items: center;
-  margin-right: ${o.sp3};
-  color: ${(e) => e.theme.colors.hero};
-`, Ko = 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;
-`, Qo = n.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: ${o.sp2};
-`, Xo = 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};
-`, Jo = n.div`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.isProcessing ? e.theme.colors.grey2 : e.theme.colors.primary};
-`, Yo = 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 = J(), a = Je(), w = Ye(), _ = 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 = Xe(() => v.filter((A) => A.resolved === !1), [v]), F = (A) => {
-    A.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(
-        (Ae) => nt(Ae)
-      ),
-      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(
-    (A) => {
-      A.stopPropagation(), A.cancelable && A.preventDefault(), b ? he() : s(e.id);
-    },
-    [
-      he,
-      b,
-      s,
-      e.id
-    ]
-  ), U = Ht({ 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(
-                      Q,
-                      {
-                        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: (A) => A.stopPropagation(), children: /* @__PURE__ */ t.jsx(
-                      Q,
-                      {
-                        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(
-                    Q,
-                    {
-                      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" ? `${X.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${X.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
-], Ot = {
-  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 = J(), x = Qe(), [b, f] = Ce(
-    be(Ot[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 = J(), h = Je(), $ = vt(null), [c, s] = Ce(0);
-  Qt(() => {
-    $.current && s(
-      $.current.offsetWidth * Mt
-    );
-  }, [y]);
-  const a = et().analytics, w = Ye(), 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 = Xe(() => 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(
-                  Hn,
-                  {
-                    windowSize: y,
-                    reportNameWidth: c,
-                    children: e.reportTitle ?? G.newReimbursementTitle
-                  }
-                ),
-                d != null && /* @__PURE__ */ t.jsx(On, { 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(
-                Q,
-                {
-                  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(
-                  Q,
-                  {
-                    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" ? `${X.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${X.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)};
-`, Hn = 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}%`};
-`, On = 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, An = ({
-  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 = J(), { getValues: s, setValue: P } = ft(), a = e.reimbursementTypesIncluded, w = Be(y), k = be(Ot[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 = Ht({ onLongPress: v }, {
-    shouldPreventDefault: !1,
-    delay: 1e3
-  });
-  return /* @__PURE__ */ t.jsx(
-    Kn,
-    {
-      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(Qn, { children: [
-                /* @__PURE__ */ t.jsx(Xn, { windowSize: c, children: e.reportTitle ?? E.newReimbursementTitle }),
-                f != null && /* @__PURE__ */ t.jsx(Jn, { children: `${E.byText} ${f?.firstName} ${f?.lastName}` })
-              ] }),
-              /* @__PURE__ */ t.jsxs(ei, { children: [
-                k[1].value + ": ",
-                g
-              ] }),
-              a.length > 1 ? /* @__PURE__ */ t.jsx(
-                Q,
-                {
-                  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(Yn, { 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(
-                  Q,
-                  {
-                    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
-              ] })
-            ] })
-          ] })
-        }
-      )
-    }
-  );
-}, Kn = 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" ? `${X.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${X.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;
-`, Qn = n.div`
-  display: flex;
-  flex-direction: column;
-  column-gap: 12px;
-  align-items: flex-start;
-`, Xn = 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"};
-`, Jn = n(D)`
-  color: ${(e) => e.theme.colors.grey1};
-`, Yn = 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, K = Wt.bulkActions, O = ri.bulkActions, H = 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 = J(), B = (C) => {
-    const N = y === "bill_pay" ? e[C].vendor?.name ?? e[C].candidateVendorName ?? H : e[C].reportTitle ?? H;
-    return vo(N, v);
-  }, R = vt(null);
-  Te(() => {
-    R.current?.resetAfterIndex(0);
-  }, [v, R, p, l]);
-  const F = Xt(
-    // 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 != H ? /* @__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 = Kt({
-    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)), Ke = je(V);
-          C?.trackBillPayBulkSelectAll(
-            d,
-            g,
-            Ke
-          );
-        } else {
-          const V = e.filter((fe) => S.includes(fe.id)), Ke = ke(
-            V.map((fe) => fe.reimbursementTypesIncluded)
-          );
-          C?.trackReimbursementBulkSelectAll(
-            d,
-            g,
-            Ke
-          );
-        }
-      } else
-        S = L[me];
-      N?.(S);
-    }
-  }, he = () => {
-    w.includes("cancel") ? Dt() : At();
-  }, ge = J(), [Ue, $e] = Ce(!1), [U, A] = Ce({
-    type: H,
-    title: H,
-    description: H,
-    primaryButtonText: H,
-    secondaryButtonText: H
-  });
-  Te(() => {
-    const I = Jt(d, g, h);
-    B === "Completed" && I != null && C?.trackPageLoaded(
-      I,
-      h === "bill_pay" ? "Bills" : "Reimbursements"
-    );
-  }, [C, d, g, h, B]);
-  const Ae = (I) => {
-    v(I);
-  }, Et = ee(() => {
-    const { title: I, description: L } = bi(
-      h,
-      a.length,
-      d,
-      P
-    );
-    if (A({
-      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)), Y = je(S);
-      C?.trackBillPayBulkDeleted(
-        a.length,
-        d,
-        g,
-        Y
-      );
-    } else {
-      const S = e.filter((V) => a.includes(V.id)), Y = ke(
-        S.map((V) => V.reimbursementTypesIncluded)
-      );
-      C?.trackReimbursementBulkDeleted(
-        a.length,
-        d,
-        g,
-        Y
-      );
-    }
-    $e(!0);
-  }, [
-    h,
-    C,
-    P,
-    g,
-    d,
-    e,
-    a
-  ]), Dt = ee(() => {
-    const { title: I, description: L } = xi(
-      h,
-      a.length
-    );
-    A({
-      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((Y) => a.includes(Y.id)), S = je(L);
-        C?.trackBillPayBulkPopupConfirm(
-          U.type,
-          d,
-          g,
-          S
-        );
-      } else {
-        const L = e.filter((Y) => a.includes(Y.id)), S = ke(
-          L.map((Y) => Y.reimbursementTypesIncluded)
-        );
-        C?.trackReimbursementBulkPopupConfirm(
-          U.type,
-          d,
-          g,
-          S
-        );
-      }
-      U.type === "delete" ? q?.("delete", I) : q?.("cancel", I);
-    },
-    onCancelClick: () => {
-      z?.(), $e(!1), A({
-        type: H,
-        title: H,
-        description: H,
-        primaryButtonText: H,
-        secondaryButtonText: H
-      });
-    }
-  }, At = 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: Ae,
-        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(
-        Yt,
-        {
-          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 = J(), _ = Qe(), 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 = J() === "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 = J() === "small" ? An : 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" ? K.bill : O.report, u = (e > 1 ? d + "s" : d) + K.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(Hi, { 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(
-          Q,
-          {
-            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" ? O.popUps.cancel.title.replace(
-    "__report__",
-    p > 1 ? O.reports : O.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: K.popUps.cancel.title.replace(
-      "<_bill_>",
-      T.drawerMenus.bills
-    ),
-    description: K.popUps.cancel.description.replace("<_this_>", l).replace("<_bill_>", x).replace("<_it_>", y).replace("<_payment_>", u)
-  } : {
-    title: O.popUps.cancel.title.replace(
-      "__report__",
-      O.reports
-    ),
-    description: O.popUps.cancel.description.replace("<_this_>", l).replace("__report__", f).replace("<_it_>", y).replace("<_payment_>", u)
-  } : e === "reimbursement" ? {
-    title: O.popUps.cancel.title.replace(
-      "__report__",
-      O.report
-    ),
-    description: O.popUps.cancel.description.replace("<_this_>", p).replace("__report__", g).replace("<_it_>", h).replace("<_payment_>", d)
-  } : {
-    title: K.popUps.cancel.title.replace(
-      "<_bill_>",
-      K.bill
-    ),
-    description: K.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 = H;
-  e === "bill_pay" ? P = K.popUps.delete.title.replace(
-    "<_bill_>",
-    s ? K.bills : K.bill
-  ) : P = O.popUps.delete.title.replace(
-    "__report__",
-    s ? O.reports : O.report
-  );
-  let a = H;
-  return p === "draft" ? e === "bill_pay" ? a = K.popUps.delete.descriptionDraft.replace("<_this_>", s ? u : d).replace("<_bill_>", s ? f : g) : a = O.popUps.delete.descriptionDraft.replace("<_this_>", s ? u : d).replace("__report__", s ? h : y) : l ? a = K.popUps.delete.descriptionRecurring.replace(
-    "<_payment_>",
-    s ? x : b
-  ) : e === "bill_pay" ? a = K.popUps.delete.descriptionOther.replace("<_this_>", s ? u : d).replace("<_bill_>", s ? f : g).replace("<_it_>", s ? $ : c).replace("<_payment_>", s ? b : x) : a = O.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" ? X.important : e.theme.colors.grey1};
-`, Li = n(ao)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  cursor: pointer;
-  color: inherit;
-  &:hover {
-    color: ${X.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};
-`, Hi = n(re)`
-  color: ${X.important};
-`;
-export {
-  Zi as default
-};