@zeniai/web-components 3.16.86 → 3.16.87

package/dist/SpendManagementSection-CqOmKnGT.js

@@ -1,1043 +0,0 @@
-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-CHni923I.js";
-import { M as Oe } from "./MoreMenuButton-DmsHVqAF.js";
-import { b as Le, a as Ie, C as Re, M as Be, S as Fe, F as Ae } from "./MatchingOperatorDropdown-DtZulycR.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
-};