@zeniai/web-components 3.17.3 → 3.17.4

package/dist/SpendManagementPerTabPage-CRK6zIKn.js

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