@zeniai/web-components 3.16.86 → 3.16.87

package/dist/SpendManagementSection-CCfxiBa5.js

@@ -0,0 +1,1043 @@
+import { u as V, j as t, S as oe, c as _, aL as he, l as pe } from "./vendor-.pnpm-D5gxGIYo.js";
+import * as k from "react";
+import { useRef as E, useEffect as F, useState as D, forwardRef as ge, useCallback as R, Fragment as re } from "react";
+import l from "@emotion/styled";
+import { n as me, F as ne, S as r, p as le, t as se, a as O, A as xe, J as G, b as fe, s as ve, P as we, dB as ye, u as N, o as Y, w as be, R as ae, C as Ce, x as Se, y as ie, z as $e, D as M, fg as q, B as je, f_ as ke } from "./index-BtWKMiEc.js";
+import { M as Oe } from "./MoreMenuButton-CJhUkqdP.js";
+import { b as Le, a as Ie, C as Re, M as Be, S as Fe, F as Ae } from "./MatchingOperatorDropdown-CVtkL5i_.js";
+import { keyframes as Ee } from "@emotion/react";
+import { S as De } from "./avatar-Dz7aEm3d.js";
+import { TASK_LIST_FILTER_CATEGORIES as _e, REIMBURSEMENT_FILTER_CATEGORIES_RESTRICTED as ze, REIMBURSEMENT_FILTER_CATEGORIES as Te, hideCreatedByFilter as We, BILL_PAY_FILTER_CATEGORIES as Me } from "@zeniai/client-epic-state";
+const Ve = l.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`, Ne = l(le)`
+  color: ${(e) => e.theme.colors.primary};
+  width: ${r.sp3};
+  height: ${r.sp3};
+`, J = ({
+  value: e,
+  defaultMenuIsOpen: n = !1,
+  options: o,
+  placeHolder: a,
+  onChange: i,
+  getOptionLabel: s
+}) => {
+  const v = V(), f = E(null), g = Ge(v), w = o.find((m) => m.value === e);
+  return F(() => {
+    const m = setTimeout(() => {
+      f.current != null && n && f.current.focus();
+    }, 300);
+    return () => {
+      clearTimeout(m);
+    };
+  }, [n]), /* @__PURE__ */ t.jsx(
+    oe,
+    {
+      ref: f,
+      isMulti: !1,
+      value: w,
+      onChange: (m) => {
+        i(m);
+      },
+      placeholder: a,
+      options: o,
+      styles: g,
+      openMenuOnFocus: !0,
+      components: {
+        Option: (m) => Ue(m, s),
+        SingleValue: (m) => He(m, s)
+      }
+    }
+  );
+}, He = (e, n) => {
+  const o = n?.(e.data.value) ?? e.data.label;
+  return /* @__PURE__ */ t.jsx(_.SingleValue, { ...e, children: /* @__PURE__ */ t.jsx(me, { children: o }) });
+}, Ue = (e, n) => {
+  const { isSelected: o } = e, a = n?.(e.data.value) ?? e.data.label;
+  return /* @__PURE__ */ t.jsx(_.Option, { ...e, children: /* @__PURE__ */ t.jsxs(Ve, { children: [
+    /* @__PURE__ */ t.jsx(ne, { children: a }),
+    o ? /* @__PURE__ */ t.jsx(Ne, {}) : null
+  ] }) });
+}, Ge = (e) => ({
+  placeholder: (o) => ({
+    ...o,
+    color: e.colors.grey1,
+    ...se.standardRegular.cssObject
+  }),
+  input: (o) => ({
+    ...o,
+    color: e.colors.primary,
+    margin: 0,
+    padding: 0
+  }),
+  control: (o) => ({
+    ...o,
+    backgroundColor: e.colors.background,
+    border: "none",
+    boxShadow: "none",
+    height: r.sp6,
+    cursor: "pointer"
+  }),
+  valueContainer: (o) => ({
+    ...o,
+    height: "100%",
+    padding: `${r.sp2} ${r.sp3}`
+  }),
+  indicatorSeparator: (o) => ({
+    ...o,
+    display: "none"
+  }),
+  indicatorsContainer: (o) => ({
+    ...o,
+    display: "none"
+  }),
+  option: (o, a) => ({
+    ...o,
+    padding: `${r.sp2} ${r.sp3}`,
+    cursor: "pointer",
+    color: a.isSelected || a.isFocused ? e.colors.primary : e.colors.hero,
+    background: a.isSelected || a.isFocused ? e.colors.background : e.colors.grey5,
+    ":hover": {
+      color: e.colors.primary,
+      backgroundColor: e.colors.background
+    }
+  }),
+  singleValue: (o) => ({
+    ...o,
+    color: e.colors.primary,
+    margin: 0
+  }),
+  menuList: (o) => ({
+    ...o,
+    backgroundColor: e.colors.grey5,
+    maxHeight: "320px"
+  }),
+  menu: (o) => ({
+    ...o,
+    boxShadow: `${r.sp0} 2px ${r.sp2} ${e.colors.dropShadowHover}`
+  })
+}), Ye = "data:image/svg+xml,%3csvg%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M22.8999%205.04416L9.65575%2017.6653C9.48897%2017.8247%209.29152%2017.9484%209.07541%2018.0291C8.85929%2018.1097%208.62902%2018.1456%208.39862%2018.1345C8.17133%2018.1236%207.94853%2018.0673%207.7434%2017.9689C7.53827%2017.8704%207.35499%2017.7318%207.20439%2017.5612L1.17558%2010.7125'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", qe = l.div`
+  display: flex;
+  align-items: flex-start;
+  padding: ${r.sp2} ${r.sp3};
+  column-gap: ${r.sp2};
+`, Je = l.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${r.sp2};
+  width: 100%;
+  min-height: ${r.sp4};
+`, Ke = l.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${r.sp1};
+`, Xe = l.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${r.sp2};
+  word-break: break-all;
+`, Qe = l.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${r.sp3};
+  justify-content: space-between;
+`, Ze = l.img`
+  height: ${r.sp3};
+  width: ${r.sp3};
+  border-radius: 50%;
+  justify-content: center;
+  color: ${(e) => e.theme.colors.hero};
+`, Pe = l(De)`
+  color: ${(e) => e.theme.colors.hero};
+  height: ${r.sp4};
+  width: ${r.sp4};
+`, et = l(le)`
+  color: ${(e) => e.theme.colors.primary};
+  height: ${r.sp3};
+  min-width: ${r.sp3};
+`, tt = l(fe)`
+  color: ${(e) => e.theme.colors.primary};
+  height: 10px;
+  width: 10px;
+`, ot = l(we)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, rt = ({
+  options: e,
+  value: n,
+  placeHolder: o,
+  filterCategoryType: a,
+  searchAutoCompleteData: i,
+  searchAutoCompleteActions: s,
+  onChange: v
+}) => {
+  const f = V(), g = Ie(f), [w, m] = D(e);
+  F(() => {
+    a === "searchAutocomplete" && i?.entityAutoCompleteView.fetchState === "Completed" && m(
+      (d) => he(
+        [
+          ...d,
+          ...i?.entityAutoCompleteView != null ? nt(
+            i?.entityAutoCompleteView
+          ) : []
+        ],
+        "value"
+      )
+    );
+  }, [i?.entityAutoCompleteView.fetchState]);
+  const S = a === "searchAutocomplete" ? n.map((d) => ({ label: d, value: d })) : n.map((d) => w.find(
+    (x) => x.value === d
+  )), y = E(
+    pe(
+      (d) => s?.onAutoCompleteInputChange?.(d),
+      500,
+      {
+        trailing: !0
+      }
+    )
+  ).current, $ = i?.entityAutoCompleteView.fetchState, L = { options: e, filterCategoryType: a, searchAutoCompleteStatus: $ }, b = O.getLocalizedStrings().common.filters;
+  return /* @__PURE__ */ t.jsx(qe, { children: a === "dateRange" ? /* @__PURE__ */ t.jsx(
+    Le,
+    {
+      onDateRangeChange: (d) => {
+        v([
+          {
+            label: b.startDate,
+            value: d.startDate ?? ""
+          },
+          {
+            label: b.endDate,
+            value: d.endDate ?? ""
+          }
+        ]);
+      },
+      selectedDates: n
+    }
+  ) : /* @__PURE__ */ t.jsxs(Je, { children: [
+    S.length === 0 && a === "user" && /* @__PURE__ */ t.jsx(Pe, {}),
+    /* @__PURE__ */ t.jsx(
+      oe,
+      {
+        ...L,
+        isMulti: !0,
+        hideSelectedOptions: !1,
+        value: S,
+        onInputChange: (d) => {
+          a === "searchAutocomplete" && y(d);
+        },
+        onChange: (d) => {
+          v(d);
+        },
+        placeholder: o,
+        options: w,
+        styles: g,
+        menuPosition: "fixed",
+        components: {
+          Option: st,
+          MultiValueLabel: lt,
+          MultiValueRemove: at
+        },
+        filterOption: (d, x) => ct(d, x, a),
+        noOptionsMessage: () => it(a, $)
+      }
+    )
+  ] }) });
+}, nt = (e) => (e?.vendor.map((o) => ({
+  label: o.name,
+  value: o.name
+})) ?? []).sort((o, a) => (o.label ?? "").localeCompare(a.label ?? "")), lt = (e) => {
+  const { selectProps: n } = e, { options: o, filterCategoryType: a } = n, i = o.findIndex((s) => s.value === e.data.value);
+  return /* @__PURE__ */ t.jsx(_.MultiValueLabel, { ...e, children: /* @__PURE__ */ t.jsxs(Ke, { children: [
+    ce(
+      e.data.photo,
+      e.data.label.split(" ")[0],
+      e.data.label.split(" ")[1] != null ? e.data.label.split(" ")[1] : "",
+      i,
+      a
+    ),
+    /* @__PURE__ */ t.jsx(ot, { children: e.children })
+  ] }) });
+}, st = (e) => {
+  const {
+    onMouseMove: n,
+    onMouseOver: o,
+    isSelected: a,
+    ...i
+  } = e.innerProps, { options: s, filterCategoryType: v } = e.selectProps, f = s.findIndex((w) => w.value === e.data.value), g = { ...e, innerProps: i };
+  return /* @__PURE__ */ t.jsx(_.Option, { ...g, children: /* @__PURE__ */ t.jsxs(Qe, { children: [
+    /* @__PURE__ */ t.jsxs(Xe, { children: [
+      ce(
+        e.data.photo,
+        e.data.label.split(" ")[0],
+        e.data.label.split(" ")[1] != null ? e.data.label.split(" ")[1] : "",
+        f,
+        v
+      ),
+      /* @__PURE__ */ t.jsx(ne, { children: e.label })
+    ] }),
+    e.isSelected && /* @__PURE__ */ t.jsx(et, {})
+  ] }) });
+}, at = (e) => /* @__PURE__ */ t.jsx(_.MultiValueRemove, { ...e, children: /* @__PURE__ */ t.jsx(tt, {}) }), it = (e, n) => {
+  const o = O.getLocalizedStrings().common.filters;
+  if (e === "searchAutocomplete") {
+    if (n === "In-Progress")
+      return /* @__PURE__ */ t.jsx(xe, { size: "Small-Compact", start: !0 });
+    if (n === "Not-Started")
+      return null;
+    if (n === "Completed")
+      return /* @__PURE__ */ t.jsx(G, { children: o.noMatchesFound });
+  }
+  return /* @__PURE__ */ t.jsx(G, { children: o.noOptions });
+}, ce = (e, n, o, a, i) => i !== "user" ? null : e == null ? /* @__PURE__ */ t.jsx(
+  ve,
+  {
+    firstName: n,
+    lastName: o,
+    size: `${r.sp3}`,
+    index: a,
+    fontSize: "9px"
+  }
+) : /* @__PURE__ */ t.jsx(
+  Ze,
+  {
+    src: e.href,
+    alt: O.getLocalizedStrings().common.filters.userProfileAltText,
+    onError: ({ currentTarget: s }) => {
+      s.onerror = null, s.src = Ye;
+    },
+    loading: "lazy"
+  }
+), ct = (e, n, o) => o === "user" && e.data.email != null ? e.data.label.toLowerCase().includes(n.toLowerCase()) || e.data.email.toLowerCase().includes(n.toLowerCase()) : e.data.label.toLowerCase().includes(n.toLowerCase()), z = {
+  categoryCombinationOperator: "AND",
+  categories: []
+}, de = {
+  valuesCombinationOperator: "ANY",
+  values: [],
+  matchingOperator: "equal"
+}, T = (e, n) => {
+  switch (e) {
+    case "bill_pay":
+      return Me;
+    case "reimbursement":
+      return We(n) ? ze : Te;
+    case "task_management":
+      return _e;
+  }
+}, W = (e, n) => {
+  if (e === "bill_pay") {
+    const o = n;
+    return O.getLocalizedStrings().spendManagement.filters.filterCategories.bills[o];
+  }
+  if (e === "reimbursement") {
+    const o = n;
+    return O.getLocalizedStrings().spendManagement.filters.filterCategories.reimbursements[o];
+  }
+  if (e === "task_management") {
+    const o = n;
+    return O.getLocalizedStrings().spendManagement.filters.filterCategories.taskManagement[o];
+  }
+  return "";
+}, dt = ({
+  currentFilters: e,
+  selectedOption: n,
+  categoryIndex: o
+}) => e.categories == null || e.categories.length === 0 ? {
+  categoryCombinationOperator: "AND",
+  categories: [
+    {
+      ...de,
+      field: n.value
+    }
+  ]
+} : {
+  ...e,
+  categories: e.categories.map((i, s) => s !== o ? i : {
+    ...i,
+    field: n.value,
+    values: []
+  })
+}, ut = ({
+  currentFilters: e,
+  selectedOption: n,
+  categoryIndex: o
+}) => e.categories == null || e.categories.length === 0 ? e : {
+  ...e,
+  categories: e.categories.map((i, s) => s !== o ? i : {
+    ...i,
+    matchingOperator: n.value
+  })
+}, ht = ({
+  currentFilters: e,
+  selectedOptions: n,
+  categoryIndex: o
+}) => e.categories == null || e.categories.length === 0 ? e : {
+  ...e,
+  categories: e.categories.map((i, s) => s !== o ? i : {
+    ...i,
+    values: n.map((v) => v.value)
+  })
+}, pt = {
+  width: new ae(215, 315)
+}, K = l.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${r.sp4};
+`, X = l.div`
+  display: flex;
+  column-gap: ${r.sp3};
+  align-items: flex-start;
+  flex-wrap: ${(e) => e.windowSize === "small" ? "wrap" : "nowrap"};
+  row-gap: ${(e) => e.windowSize === "small" ? r.sp3 : r.sp0};
+`, Q = l.div`
+  width: 90px;
+  color: ${(e) => e.theme.colors.primary};
+`, Z = l.div`
+  width: 194px;
+`, P = l.button`
+  display: flex;
+  align-items: center;
+  column-gap: ${r.sp1};
+  background: none;
+  outline: none;
+  box-shadow: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, gt = l(ie)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, mt = l($e)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, xt = l.div`
+  width: ${r.sp10};
+`, ft = l.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`, ee = l(be)`
+  color: ${(e) => e.theme.colors.primary};
+`, vt = l.button`
+  display: ${(e) => e.windowSize === "small" ? "none" : "block"};
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  &:hover {
+    svg {
+      color: ${Ce.important};
+    }
+  }
+`, wt = l(Se)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, yt = l.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${r.sp3};
+`, bt = l.div`
+  width: ${(e) => pt.width.valuePx(e.windowSize)};
+  background: ${(e) => e.theme.colors.background};
+  border-radius: ${r.sp1};
+`, te = l.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${r.sp3};
+`, Ct = Ee`
+0% {
+  opacity: 0;
+}
+100% {
+  opacity: 1;
+}
+`, St = l.div`
+  display: flex;
+  align-items: flex-start;
+  column-gap: ${r.sp3};
+  animation: ${Ct} 0.4s;
+`, ue = ge(
+  ({
+    filters: e,
+    filterValues: n,
+    selectedEntity: o,
+    vendorSearchAutoCompleteData: a,
+    vendorSearchAutoCompleteActions: i,
+    onFiltersChange: s
+  }, v) => {
+    const f = ye(), g = N(), w = R(
+      (c, u) => {
+        const h = dt({
+          currentFilters: e,
+          selectedOption: c,
+          categoryIndex: u
+        });
+        s(h);
+      },
+      [e, s]
+    ), m = R(
+      (c, u) => {
+        const h = ut({
+          currentFilters: e,
+          selectedOption: c,
+          categoryIndex: u
+        });
+        s(h);
+      },
+      [e, s]
+    ), S = R(
+      (c) => {
+        if (e != null) {
+          const u = {
+            ...e,
+            categoryCombinationOperator: c
+          };
+          s(u);
+        }
+      },
+      [e, s]
+    ), y = R(
+      (c) => {
+        if (c === 0 && e.categories != null && e.categories.length === 1) {
+          s(z);
+          return;
+        }
+        if (e.categories != null && e.categories.length !== 0) {
+          if ([
+            ...e.categories.slice(0, c),
+            ...e.categories.slice(c + 1)
+          ].filter((h) => h.field != null).length) {
+            const h = {
+              ...e,
+              categories: [
+                ...e.categories.slice(0, c),
+                ...e.categories.slice(c + 1)
+              ]
+            };
+            s(h);
+            return;
+          }
+          s(z);
+        }
+      },
+      [s, e]
+    ), $ = () => {
+      e.categories != null && e.categories.length && s({
+        ...e,
+        categories: [...e.categories, { ...de }]
+      });
+    }, L = () => {
+      s(z);
+    }, b = R(
+      (c, u) => {
+        const h = ht({
+          currentFilters: e,
+          selectedOptions: c,
+          categoryIndex: u
+        });
+        s(h);
+      },
+      [e, s]
+    ), d = O.getLocalizedStrings().spendManagement.filters, x = () => e.categories != null && e.categories.length !== 0 ? /* @__PURE__ */ t.jsxs(ft, { children: [
+      /* @__PURE__ */ t.jsxs(P, { onClick: $, children: [
+        /* @__PURE__ */ t.jsx(gt, {}),
+        /* @__PURE__ */ t.jsx(Y, { children: d.addFilterBtnText })
+      ] }),
+      /* @__PURE__ */ t.jsxs(P, { onClick: L, children: [
+        /* @__PURE__ */ t.jsx(mt, {}),
+        /* @__PURE__ */ t.jsx(Y, { children: d.clearAllBtnText })
+      ] })
+    ] }) : null, I = () => e.categories == null || e.categories.length === 0 ? /* @__PURE__ */ t.jsx(K, { children: /* @__PURE__ */ t.jsx(X, { children: /* @__PURE__ */ t.jsxs(te, { children: [
+      /* @__PURE__ */ t.jsx(Q, { children: /* @__PURE__ */ t.jsx(ee, { children: d.filterByLabel }) }),
+      /* @__PURE__ */ t.jsx(Z, { children: /* @__PURE__ */ t.jsx(
+        J,
+        {
+          defaultMenuIsOpen: !0,
+          onChange: w,
+          placeHolder: d.categoryPlaceholder,
+          getOptionLabel: (c) => W(o, c),
+          options: T(
+            o,
+            f.loggedInUserRole
+          )
+        }
+      ) })
+    ] }) }) }) : /* @__PURE__ */ t.jsx(re, { children: e.categories.map((c, u) => {
+      const C = T(
+        o,
+        f.loggedInUserRole ?? []
+      ).find(
+        (j) => j.value === c.field
+      ), p = C?.type, A = C != null ? W(o, C?.value) : "";
+      return /* @__PURE__ */ t.jsxs(
+        X,
+        {
+          windowSize: g,
+          children: [
+            /* @__PURE__ */ t.jsxs(te, { children: [
+              /* @__PURE__ */ t.jsxs(Q, { children: [
+                u === 0 && /* @__PURE__ */ t.jsx(ee, { children: d.filterByLabel }),
+                u !== 0 ? /* @__PURE__ */ t.jsx(
+                  Re,
+                  {
+                    categoryCombinationOperator: e.categoryCombinationOperator,
+                    onChange: S,
+                    buttonsDisabled: u > 1
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ t.jsx(Z, { children: /* @__PURE__ */ t.jsx(
+                J,
+                {
+                  value: c.field,
+                  placeHolder: d.categoryPlaceholder,
+                  onChange: (j) => w(j, u),
+                  getOptionLabel: (j) => W(o, j),
+                  options: T(
+                    o,
+                    f.loggedInUserRole ?? []
+                  )
+                }
+              ) })
+            ] }),
+            c.field ? /* @__PURE__ */ t.jsxs(St, { children: [
+              /* @__PURE__ */ t.jsx(xt, { children: /* @__PURE__ */ t.jsx(
+                Be,
+                {
+                  categoryIndex: u,
+                  value: c.matchingOperator,
+                  onChange: m
+                }
+              ) }),
+              /* @__PURE__ */ t.jsxs(yt, { children: [
+                /* @__PURE__ */ t.jsx(bt, { windowSize: g, children: /* @__PURE__ */ t.jsx(
+                  rt,
+                  {
+                    options: n[c.field] != null ? n[c.field] : [],
+                    placeHolder: p === "searchAutocomplete" ? d.searchPlaceholder : `${d.select} ${A}`,
+                    value: c.values,
+                    filterCategoryType: p ?? "dropdown",
+                    onChange: (j) => b(j, u),
+                    valuesCombinationOperator: c.valuesCombinationOperator,
+                    searchAutoCompleteData: a,
+                    searchAutoCompleteActions: i
+                  }
+                ) }),
+                /* @__PURE__ */ t.jsx(
+                  vt,
+                  {
+                    onClick: () => y(u),
+                    windowSize: g,
+                    children: /* @__PURE__ */ t.jsx(wt, {})
+                  }
+                )
+              ] })
+            ] }) : null
+          ]
+        },
+        c.field ? c.field + u : u
+      );
+    }) });
+    return /* @__PURE__ */ t.jsxs(K, { ref: v, children: [
+      I(),
+      x()
+    ] });
+  }
+);
+ue.displayName = "FiltersSelection";
+const $t = l.div`
+  padding-top: ${r.sp4};
+  padding-bottom: ${r.sp4};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: ${(e) => `${typeof e.height == "number" ? `${e.height}px` : e.height}`};
+  background: ${(e) => e.theme.colors.grey5};
+  row-gap: ${r.sp4};
+  max-height: 650px;
+  overflow: ${(e) => e.windowSize === "small" ? "visible" : e.height > "650" ? "scroll" : "visible"};
+`, jt = l.div`
+  padding-left: ${r.sp4};
+  padding-right: ${r.sp4};
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+`, kt = l.div`
+  padding-left: ${r.sp4};
+  padding-right: ${r.sp4};
+`, Ot = ({
+  entity: e,
+  filters: n,
+  vendorSearchAutoCompleteData: o,
+  vendorSearchAutoCompleteActions: a,
+  disableFilters: i = !1,
+  transactionsLoaded: s = !0,
+  createdByUserListLoaded: v = !0,
+  analytics: f,
+  groupByFiltersComponent: g,
+  onFiltersChange: w,
+  getCategoryWiseOptions: m
+}) => {
+  const S = E(null), [y, $] = D(!1), L = E(!1), [b, d] = D({
+    bill_pay: {},
+    reimbursement: {},
+    task_management: {}
+  }), [x, I] = D("auto"), c = E(null), u = N(), h = R(() => {
+    $(!1);
+  }, []), C = O.getLocalizedStrings().common.strings.empty, p = R(() => {
+    e !== "task_management" && f?.trackSpendManagmentFilterClick(e), i === !1 && $(!0);
+  }, [i, f, e]);
+  F(() => {
+    m && Object.keys(b[e]).length === 0 && v && s && d((B) => ({
+      ...B,
+      [e]: m()
+    }));
+  }, [
+    e,
+    b,
+    s,
+    v
+  ]);
+  const A = R(() => {
+    if (n?.categories == null || n.categories.length === 0)
+      return g != null ? 88 + g.height : 88;
+    const B = c.current, U = B != null ? B.clientHeight : 0;
+    return u === "small" ? "auto" : M[7] + (U > 0 ? U : 88) + (g != null ? g.height : 0);
+  }, [n, u, g]);
+  F(() => {
+    if (y !== L.current) {
+      I("auto");
+      return;
+    }
+    I(A());
+  }, [A, y]), F(() => {
+    L.current = y;
+  }, [y]), F(() => {
+    x === "auto" && I(A());
+  }, [x, A]);
+  const j = () => /* @__PURE__ */ t.jsx(
+    Ae,
+    {
+      anchorEl: S.current,
+      open: y,
+      onClose: h,
+      paperStyle: { overflow: "visible" },
+      children: /* @__PURE__ */ t.jsxs($t, { height: x, windowSize: u, children: [
+        g != null ? /* @__PURE__ */ t.jsx(jt, { children: g?.component }) : null,
+        /* @__PURE__ */ t.jsx(kt, { children: /* @__PURE__ */ t.jsx(
+          ue,
+          {
+            filters: n,
+            onFiltersChange: w,
+            filterValues: b[e],
+            selectedEntity: e,
+            ref: c,
+            vendorSearchAutoCompleteActions: a,
+            vendorSearchAutoCompleteData: o
+          }
+        ) })
+      ] })
+    },
+    n?.categories == null || n.categories.length === 0 ? "smallBox" : "largeBox"
+  ), H = n?.categories == null || n?.categories.length === 0 ? 0 : n.categories.filter((B) => B.field != null && B.values.length > 0).length;
+  return /* @__PURE__ */ t.jsxs(re, { children: [
+    /* @__PURE__ */ t.jsx(
+      Fe,
+      {
+        searchPlaceholder: C,
+        isFilterBtnActive: y || H > 0,
+        ref: S,
+        isFilterDisabled: i,
+        onFilterButtonClick: p,
+        filtersCount: H,
+        includeSearch: !1,
+        filterText: C
+      }
+    ),
+    i != !0 && j()
+  ] });
+}, Lt = (e) => /* @__PURE__ */ k.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ k.createElement("path", { d: "M18.8447 9.03137L22.4962 11.5418V21.127C22.4962 21.4902 22.3519 21.8385 22.0951 22.0953C21.8383 22.3521 21.4901 22.4963 21.1269 22.4963H2.86932C2.50615 22.4963 2.15786 22.3521 1.90106 22.0953C1.64427 21.8385 1.5 21.4902 1.5 21.127V11.5418L5.15151 9.03137", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M4.24207 19.7577L8.80646 16.1062H15.1966L19.761 19.7577", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M22.5 11.5416L17.0227 15.1931", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M1.50378 11.5416L6.98105 15.1931", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M18.8446 13.9754V2.41288C18.8446 2.17077 18.7484 1.93857 18.5772 1.76738C18.406 1.59618 18.1738 1.5 17.9317 1.5H6.06431C5.8222 1.5 5.59 1.59618 5.4188 1.76738C5.24761 1.93857 5.15143 2.17077 5.15143 2.41288V13.9754", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M9.23108 5.55005H14.7654", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M9.23108 8.83069H13.3818", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M9.23108 12.0398H10.9606", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), { spendManagement: It } = O.getLocalizedStrings(), Rt = {
+  filterIconContainerPaddingRight: new ae(18, 10)
+};
+function Kt({
+  spendManagementSectionProps: e
+}) {
+  const {
+    entity: n,
+    moreIconContainerStyle: o,
+    searchTextBoxStyle: a,
+    disableDownloadButton: i,
+    filters: s,
+    searchText: v,
+    downloadParams: f,
+    downloadState: g,
+    showSettingsIcon: w = !0,
+    showSettingsIconOnNavbar: m,
+    showDownloadButtonOnNavbar: S,
+    showStatementButtonOnNavbar: y,
+    showPayEarlyButtonOnNavbar: $,
+    groupByFiltersComponent: L,
+    updateDownloadStateHandler: b,
+    onMenuOpen: d
+  } = e, x = N(), I = V(), [c, u] = D(
+    void 0
+  );
+  F(() => {
+    g !== "Error" && u(!1);
+  }, [g]);
+  let h = It.moreMenuOptions;
+  m || (h = h.filter(
+    (p) => p.value !== "settings"
+  )), y || (h = h.filter(
+    (p) => p.value !== "statements"
+  )), $ || (h = h.filter(
+    (p) => p.value !== "payEarly"
+  )), S || (h = h.filter(
+    (p) => p.value !== "download"
+  ));
+  const C = {};
+  return e.entity === "charge_cards" ? C.width = "275px" : e.entity === "reimbursement" && (C.width = "208px"), /* @__PURE__ */ t.jsxs(At, { children: [
+    /* @__PURE__ */ t.jsxs(
+      Ft,
+      {
+        isSearchOpen: e.isSearchOpen && x === "small",
+        windowsize: x,
+        children: [
+          x !== "small" && !e.hideSearchBtn ? /* @__PURE__ */ t.jsx(
+            q,
+            {
+              style: {
+                position: "absolute",
+                left: "unset",
+                ...a
+              },
+              placeholder: e.searchPlaceHolder,
+              searchText: e.searchText,
+              onSearchTextChanged: (p) => {
+                e.onSearchTextChanged?.(p);
+              },
+              onSearchOpen: e.onSearchOpen,
+              inputWrapperStyle: C,
+              searchIconMarginRight: e.entity === "charge_cards" ? r.sp4 : "10px"
+            }
+          ) : null,
+          (e.entity === "bill_pay" || e.entity === "reimbursement" || e.entity === "task_management") && e.onFiltersChange != null ? /* @__PURE__ */ t.jsx(_t, { size: x, children: /* @__PURE__ */ t.jsx(
+            Ot,
+            {
+              entity: e.entity,
+              groupByFiltersComponent: L,
+              onFiltersChange: e.onFiltersChange,
+              filters: e.filters,
+              getCategoryWiseOptions: e.getFilterOptions,
+              vendorSearchAutoCompleteData: e.vendorSearchAutoCompleteData,
+              vendorSearchAutoCompleteActions: e.vendorSearchAutoCompleteActions,
+              createdByUserListLoaded: e.createdByUserListLoaded,
+              analytics: e.analytics
+            }
+          ) }) : null,
+          e.showEntityEmailInfoIconOnNavbar === !0 ? /* @__PURE__ */ t.jsx(
+            Dt,
+            {
+              onClick: e.onClickEmailInfoIcon,
+              children: /* @__PURE__ */ t.jsx(Bt, {})
+            }
+          ) : null,
+          w ? /* @__PURE__ */ t.jsx(
+            Et,
+            {
+              onClick: () => u(void 0),
+              style: o,
+              children: n === "bill_pay" || n === "reimbursement" || n === "charge_cards" ? /* @__PURE__ */ t.jsx(
+                Oe,
+                {
+                  entity: n,
+                  isMoreOption: !0,
+                  closeMenuOnSelect: !1,
+                  isMenuOpen: x !== "small" ? c : void 0,
+                  options: h,
+                  onMenuOpen: d,
+                  customStyleConfig: {
+                    control: () => ({
+                      backgroundColor: "inherit",
+                      cursor: "pointer",
+                      border: "none",
+                      ":hover": {
+                        backgroundColor: "inherit"
+                      }
+                    }),
+                    menu: (p) => ({
+                      ...p,
+                      left: "23px",
+                      top: "29px",
+                      transform: "translateX(-100%)",
+                      width: "auto",
+                      backgroundColor: I.colors.grey5,
+                      borderRadius: r.sp1,
+                      boxShadow: `${r.sp0} 2px ${r.sp2} ${I.colors.dropShadowHover}`,
+                      whiteSpace: "nowrap"
+                    }),
+                    container: () => ({ marginLeft: M[0] }),
+                    valueContainer: () => ({
+                      display: "flex",
+                      "#react-select-2-placeholder": {
+                        marginRight: M[0],
+                        marginLeft: -1
+                      }
+                    })
+                  },
+                  onOptionSelection: (p) => {
+                    p === "settings" ? e.onClickSetupIcon?.() : p === "statements" ? e.onClickStatementsIcon?.() : p === "payEarly" && e.onClickPayEarlyIcon?.();
+                  },
+                  downloadProps: (n === "bill_pay" || n === "reimbursement") && f != null ? {
+                    entity: n,
+                    isDisabled: i,
+                    filter: {
+                      filters: s,
+                      searchText: v
+                    },
+                    downloadParams: f,
+                    downloadState: g,
+                    updateDownloadStateHandler: b
+                  } : void 0
+                }
+              ) : /* @__PURE__ */ t.jsx(
+                Tt,
+                {
+                  onClick: e.onClickSetupIcon
+                }
+              )
+            }
+          ) : null,
+          e.showNewButtonOnNavbar === !0 ? /* @__PURE__ */ t.jsx(t.Fragment, { children: x === "small" ? /* @__PURE__ */ t.jsx(
+            zt,
+            {
+              onClick: e.onNewButtonClick,
+              children: /* @__PURE__ */ t.jsx(Wt, {})
+            }
+          ) : /* @__PURE__ */ t.jsx(
+            je,
+            {
+              variant: "primary",
+              onClick: e.onNewButtonClick,
+              label: e.newButtonLabel ?? "",
+              size: "small",
+              style: {
+                height: "29px",
+                paddingLeft: "12px",
+                paddingRight: "12px",
+                ...se.extraSmallRegular.cssObject,
+                whiteSpace: "nowrap",
+                display: "flex",
+                alignItems: "center"
+              }
+            }
+          ) }) : null
+        ]
+      }
+    ),
+    x === "small" && !e.hideSearchBtn ? /* @__PURE__ */ t.jsx(
+      q,
+      {
+        style: {
+          position: "absolute",
+          left: "5px",
+          right: x !== "small" ? "120px" : "unset",
+          top: r.sp6,
+          width: "98%"
+        },
+        placeholder: e.searchPlaceHolder,
+        searchText: e.searchText,
+        onSearchTextChanged: (p) => {
+          e.onSearchTextChanged?.(p);
+        },
+        onSearchOpen: e.onSearchOpen,
+        keepSearchBoxOpen: !0,
+        inputWrapperStyle: e.entity === "charge_cards" ? { width: 270 } : {}
+      }
+    ) : null
+  ] });
+}
+const Bt = l(Lt)`
+  height: ${r.sp4};
+  width: ${r.sp4};
+`, Ft = l.div`
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  align-items: center;
+  width: ${(e) => e.isSearchOpen ? "100%" : "unset"};
+`, At = l.div`
+  display: flex;
+  flex-direction: column;
+`, Et = l.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding-right: ${r.sp4};
+  position: relative;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Dt = l.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding-right: ${r.sp4};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, _t = l.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding-right: ${r.sp4};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+  padding-right: ${(e) => Rt.filterIconContainerPaddingRight.valuePx(e.size)};
+  position: ${(e) => e.size === "small" ? "absolute" : ""};
+  top: ${r.sp5};
+  right: -${r.sp4};
+  z-index: 3;
+`, zt = l.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding-right: ${r.sp2};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Tt = l(ke)`
+  color: ${(e) => e.theme.colors.hero};
+  width: ${r.sp4};
+  height: ${r.sp4};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Wt = l(ie)`
+  height: ${r.sp4};
+  width: ${r.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`;
+export {
+  J as F,
+  Kt as S
+};