@zeniai/web-components 3.17.3 → 3.17.4

package/dist/MatchingOperatorDropdown-C5XrfiPG.js

@@ -1,572 +0,0 @@
-import { j as n, u as f, P as R, c as j, S as C } from "./vendor-.pnpm-B2klaOGU.js";
-import { forwardRef as F, useRef as B, useState as v, useEffect as M } from "react";
-import c from "@emotion/styled";
-import { fF as A, S as o, fG as z, aq as L, t as m, n as D, u as V, a as O, f4 as N, o as E, F as H, p as P } from "./index-BEMjPEfs.js";
-import { S as I } from "./filter-cZIFUNvj.js";
-import { Z as x } from "./ZeniDatePicker-CmjOKEoi.js";
-const W = c.div`
-  display: flex;
-  align-items: center;
-  height: ${o.sp6};
-  background: transparent;
-  position: relative;
-  margin: auto 0;
-`, Y = c.div`
-  border-top-left-radius: ${o.sp1};
-  border-bottom-left-radius: ${o.sp1};
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  padding: ${o.sp0} ${o.sp2};
-  align-items: center;
-  transition: width 0.1s linear;
-  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-  border-right: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-  width: ${(e) => e.stretched ? "197px" : "167px"};
-  background: ${(e) => e.stretched ? e.theme.colors.background : "transparent"};
-  svg {
-    color: ${(e) => e.stretched ? e.theme.colors.primary : e.theme.colors.hero};
-    cursor: pointer;
-    &:hover {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-  &:focus-within {
-    width: 197px;
-    background: ${(e) => e.theme.colors.background};
-    svg {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, G = c(z)`
-  padding: 0 0 0 28px;
-  outline: none;
-  border: none;
-  height: 100%;
-  width: 100%;
-  background: unset;
-  color: ${(e) => `${e.theme.colors.primary}`};
-`, q = c.button`
-  cursor: ${(e) => e.isDisabled ? "auto" : "pointer"};
-  padding: ${o.sp2} 14px;
-  background: ${(e) => e.buttonOnly ? "inherit" : e.isActive ? e.theme.colors.background : "unset"};
-  border: none;
-  outline: none;
-  display: flex;
-  align-items: center;
-  svg {
-    color: ${(e) => e.isDisabled ? e.theme.colors.grey3 : e.isActive ? e.theme.colors.primary : e.theme.colors.hero};
-  }
-  &:hover {
-    background: ${(e) => e.buttonOnly ? "inherit" : e.isDisabled ? "unset" : e.theme.colors.background};
-    svg {
-      color: ${(e) => e.isDisabled ? e.theme.colors.grey3 : e.theme.colors.primary};
-    }
-  }
-`, T = c.button`
-  background: unset;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  padding: 0;
-`, U = c(L)`
-  position: absolute;
-  top: -${o.sp1};
-  right: -${o.sp1};
-  background: ${(e) => e.theme.colors.primary};
-  color: ${(e) => e.theme.colors.grey5};
-  border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`, Z = c.div`
-  height: ${o.sp6};
-  border: ${(e) => e.buttonOnly ? "none" : `1px solid ${e.theme.colors.grey3}`};
-  border-left: none;
-  overflow: hidden;
-  border-top-right-radius: ${o.sp1};
-  border-bottom-right-radius: ${o.sp1};
-  box-sizing: border-box;
-`, _ = F(
-  ({
-    onSearchTextChanged: e,
-    onFilterButtonClick: s,
-    isFilterBtnActive: r,
-    isFilterDisabled: t,
-    filtersCount: a,
-    filterText: i,
-    searchPlaceholder: u,
-    includeSearch: d = !0
-  }, l) => {
-    const p = B(null), y = (g) => {
-      e && e(g.target.value);
-    }, $ = () => {
-      s && s();
-    }, b = () => {
-      p.current?.focus();
-    }, h = a != null && a > 0;
-    return /* @__PURE__ */ n.jsxs(W, { children: [
-      d ? /* @__PURE__ */ n.jsxs(Y, { stretched: i.trim().length > 0, children: [
-        /* @__PURE__ */ n.jsx(T, { onClick: b, children: /* @__PURE__ */ n.jsx(A, { width: o.sp4, height: o.sp4 }) }),
-        /* @__PURE__ */ n.jsx(
-          G,
-          {
-            value: i,
-            ref: p,
-            onChange: y,
-            type: "text",
-            placeholder: u
-          }
-        )
-      ] }) : null,
-      /* @__PURE__ */ n.jsx(Z, { buttonOnly: !d, children: /* @__PURE__ */ n.jsxs(
-        q,
-        {
-          isActive: r,
-          isDisabled: t ?? !1,
-          buttonOnly: !d,
-          ref: l,
-          onClick: $,
-          children: [
-            /* @__PURE__ */ n.jsx(I, { width: o.sp4, height: o.sp4 }),
-            h && /* @__PURE__ */ n.jsx(U, { children: a })
-          ]
-        }
-      ) })
-    ] });
-  }
-);
-_.displayName = "SearchBoxWithFilterButton";
-const ue = ({
-  open: e,
-  anchorEl: s,
-  children: r,
-  paperStyle: t,
-  onClose: a
-}) => {
-  const i = f();
-  return /* @__PURE__ */ n.jsx(
-    R,
-    {
-      transitionDuration: 400,
-      anchorEl: s,
-      open: e,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      PaperProps: {
-        style: {
-          ...t,
-          marginTop: "6px",
-          background: "transparent",
-          boxShadow: `${o.sp0} 2px ${o.sp2} ${i.colors.dropShadowHover}`
-        }
-      },
-      onClose: a,
-      children: r
-    }
-  );
-}, J = {
-  valuesCombinationOperator: "ANY",
-  values: [],
-  matchingOperator: "equal"
-}, ge = ({
-  currentFilters: e,
-  selectedOption: s,
-  categoryIndex: r
-}) => e.categories == null ? {
-  categoryCombinationOperator: "AND",
-  categories: [
-    {
-      ...J,
-      field: s.value
-    }
-  ]
-} : {
-  ...e,
-  categories: e.categories.map((a, i) => i !== r ? a : {
-    ...a,
-    field: s.value,
-    values: []
-  })
-}, pe = ({
-  currentFilters: e,
-  selectedOption: s,
-  categoryIndex: r
-}) => e?.categories == null ? e : {
-  ...e,
-  categories: e.categories.map((a, i) => i !== r ? a : {
-    ...a,
-    matchingOperator: s.value
-  })
-}, he = ({
-  currentFilters: e,
-  selectedOptions: s,
-  categoryIndex: r
-}) => e.categories == null ? e : {
-  ...e,
-  categories: e.categories.map((a, i) => i !== r ? a : {
-    ...a,
-    values: s.map((u) => u.value)
-  })
-}, K = (e) => ({
-  placeholder: (r) => ({
-    ...r,
-    color: e.colors.grey1,
-    ...m.standardRegular.cssObject
-  }),
-  input: (r) => ({
-    ...r,
-    color: e.colors.primary,
-    margin: 0,
-    padding: 0
-  }),
-  control: (r) => ({
-    ...r,
-    backgroundColor: e.colors.background,
-    border: "none",
-    boxShadow: "none",
-    height: o.sp6,
-    cursor: "pointer"
-  }),
-  valueContainer: (r) => ({
-    ...r,
-    height: "100%",
-    padding: `${o.sp2} ${o.sp3}`
-  }),
-  indicatorSeparator: (r) => ({
-    ...r,
-    display: "none"
-  }),
-  indicatorsContainer: (r) => ({
-    ...r,
-    display: "none"
-  }),
-  option: (r, t) => ({
-    ...r,
-    ...m.standardRegular.cssObject,
-    padding: `${o.sp2} ${o.sp3}`,
-    cursor: "pointer",
-    color: t.isSelected || t.isFocused ? e.colors.primary : e.colors.hero,
-    background: t.isSelected || t.isFocused ? e.colors.background : e.colors.grey5,
-    ":hover": {
-      color: e.colors.primary,
-      backgroundColor: e.colors.background
-    }
-  }),
-  singleValue: (r) => ({
-    ...r,
-    color: e.colors.primary,
-    margin: 0
-  }),
-  menuList: (r) => ({
-    ...r,
-    backgroundColor: e.colors.grey5,
-    maxHeight: "320px"
-  }),
-  menu: (r) => ({
-    ...r,
-    boxShadow: `${o.sp0} 2px ${o.sp2} ${e.colors.dropShadowHover}`
-  })
-}), me = (e) => ({
-  placeholder: (r) => ({
-    ...r,
-    color: e.colors.grey1,
-    ...m.standardRegular.cssObject
-  }),
-  input: (r) => ({
-    ...r,
-    color: e.colors.primary,
-    margin: 0,
-    padding: 0
-  }),
-  control: (r) => ({
-    ...r,
-    backgroundColor: e.colors.background,
-    border: "none",
-    boxShadow: "none",
-    minHeight: "unset"
-  }),
-  valueContainer: (r) => ({
-    ...r,
-    height: "100%",
-    padding: 0,
-    rowGap: o.sp2,
-    columnGap: o.sp1
-  }),
-  indicatorSeparator: (r) => ({
-    ...r,
-    display: "none"
-  }),
-  indicatorsContainer: (r) => ({
-    ...r,
-    display: "none"
-  }),
-  option: (r, t) => ({
-    ...r,
-    ...m.standardRegular.cssObject,
-    padding: `${o.sp2} ${o.sp3}`,
-    cursor: "pointer",
-    color: t.isSelected ? e.colors.primary : e.colors.hero,
-    background: t.isSelected ? e.colors.background : e.colors.grey5,
-    ":hover": {
-      color: e.colors.primary,
-      backgroundColor: e.colors.background
-    }
-  }),
-  singleValue: (r) => ({
-    ...r,
-    color: e.colors.primary
-  }),
-  multiValue: (r) => ({
-    ...r,
-    padding: `${o.sp0} ${o.sp2}`,
-    border: `1px solid ${e.colors.primary}`,
-    background: "none",
-    borderRadius: o.sp1,
-    margin: 0,
-    columnGap: o.sp2,
-    alignItems: "center",
-    height: o.sp4
-  }),
-  multiValueLabel: (r) => ({
-    ...r,
-    padding: 0,
-    paddingLeft: 0,
-    color: e.colors.primary,
-    maxWidth: "200px"
-  }),
-  multiValueRemove: (r) => ({
-    ...r,
-    padding: 0,
-    ":hover": {
-      background: "none",
-      cursor: "pointer"
-    },
-    svg: {
-      color: e.colors.primary
-    }
-  }),
-  menuList: (r) => ({
-    ...r,
-    backgroundColor: e.colors.grey5
-  }),
-  menu: (r) => ({
-    ...r,
-    boxShadow: `${o.sp0} 2px ${o.sp2} ${e.colors.dropShadowHover}`,
-    width: "315px",
-    right: `-${o.sp3}`,
-    marginTop: o.sp3
-  }),
-  container: (r) => ({
-    ...r,
-    flex: 1
-  })
-}), be = ({
-  categoryCombinationOperator: e,
-  onChange: s,
-  buttonsDisabled: r
-}) => {
-  const t = c.button`
-    padding: ${o.sp2};
-    outline: none;
-    border: none;
-    border-radius: 0;
-    width: 50%;
-    cursor: pointer;
-    background-color: ${(l) => l.selected ? l.theme.colors.grey3 : l.theme.colors.grey5};
-  `, a = c(D)`
-    color: ${(l) => l.buttonsDisabled ? l.theme.colors.grey2 : l.selected ? l.theme.colors.primary : l.theme.colors.hero};
-  `, i = c.div`
-    border: ${(l) => "1px solid " + l.theme.colors.grey3};
-    border-radius: ${o.sp1};
-    overflow: hidden;
-  `, u = () => {
-    s("AND");
-  }, d = () => {
-    s("OR");
-  };
-  return /* @__PURE__ */ n.jsxs(i, { children: [
-    /* @__PURE__ */ n.jsx(
-      t,
-      {
-        disabled: r,
-        onClick: u,
-        selected: e === "AND",
-        children: /* @__PURE__ */ n.jsx(
-          a,
-          {
-            buttonsDisabled: r,
-            selected: e === "AND",
-            children: "and"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ n.jsx(
-      t,
-      {
-        disabled: r,
-        onClick: d,
-        selected: e === "OR",
-        children: /* @__PURE__ */ n.jsx(
-          a,
-          {
-            buttonsDisabled: r,
-            selected: e === "OR",
-            children: "or"
-          }
-        )
-      }
-    )
-  ] });
-}, ye = ({
-  selectedDates: e,
-  onDateRangeChange: s
-}) => {
-  const r = f(), t = V(), a = e?.[0], i = e?.[1], [u, d] = v(
-    a ? {
-      date: a
-    } : void 0
-  ), [l, p] = v(
-    i ? {
-      date: i
-    } : void 0
-  );
-  M(() => {
-    u != null && l != null && s({ startDate: u?.date, endDate: l?.date });
-  }, [u, l]);
-  const y = (g) => {
-    g.isAfter(l?.date) && p(void 0), d({ date: g });
-  }, $ = (g) => {
-    p({ date: g });
-  }, {
-    dateFormat: {
-      visual: { MMMDCommaYYYYformat: b }
-    },
-    spendManagement: { filters: h }
-  } = O.getLocalizedStrings();
-  return /* @__PURE__ */ n.jsxs(Q, { size: t, children: [
-    /* @__PURE__ */ n.jsx(X, { children: /* @__PURE__ */ n.jsx(N, {}) }),
-    /* @__PURE__ */ n.jsx(k, { children: /* @__PURE__ */ n.jsx(
-      x,
-      {
-        onSelectedDateChanged: y,
-        selectedDate: u,
-        dateFormat: b,
-        placeHolder: /* @__PURE__ */ n.jsx(S, { children: h.from }),
-        style: { backgroundColor: r.colors.background }
-      }
-    ) }),
-    /* @__PURE__ */ n.jsx(S, { children: h.enDash }),
-    /* @__PURE__ */ n.jsx(k, { children: /* @__PURE__ */ n.jsx(
-      x,
-      {
-        onSelectedDateChanged: $,
-        minDate: ee(u?.date),
-        selectedDate: l,
-        dateFormat: b,
-        placeHolder: /* @__PURE__ */ n.jsx(S, { children: h.to }),
-        style: { backgroundColor: r.colors.background }
-      }
-    ) })
-  ] });
-}, Q = c.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: ${o.sp2};
-  justify-content: space-evenly;
-  flex-wrap: ${(e) => e.size === "small" ? "wrap" : "nowrap"};
-`, k = c.div`
-  display: flex;
-  align-items: center;
-  padding-left: ${o.sp3};
-  cursor: pointer;
-`, S = c(E)`
-  color: ${(e) => e.theme.colors.hero};
-  background: ${(e) => e.theme.colors.background};
-`, X = c.div`
-  height: ${o.sp3};
-  width: ${o.sp3};
-  color: ${(e) => e.theme.colors.hero};
-`, ee = (e) => {
-  if (e != null)
-    return e.add(1, "day");
-}, re = c.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`, oe = c(P)`
-  color: ${(e) => e.theme.colors.primary};
-  width: ${o.sp4};
-  height: ${o.sp4};
-`, ne = (e) => {
-  const { isSelected: s } = e;
-  return /* @__PURE__ */ n.jsx(j.Option, { ...e, children: /* @__PURE__ */ n.jsxs(re, { children: [
-    /* @__PURE__ */ n.jsx(H, { children: e.label }),
-    s && /* @__PURE__ */ n.jsx(oe, {})
-  ] }) });
-}, te = (e) => /* @__PURE__ */ n.jsx(j.SingleValue, { ...e, children: /* @__PURE__ */ n.jsx(D, { children: e.children }) }), w = [
-  { value: "equal", label: "is" },
-  { value: "not-equal", label: "is not" }
-], $e = ({
-  onChange: e,
-  value: s,
-  categoryIndex: r
-}) => {
-  const t = f(), i = {
-    ...K(t),
-    menu: (d) => ({
-      ...d,
-      boxShadow: `${o.sp0} 2px ${o.sp2} ${t.colors.dropShadowHover}`,
-      width: `${o.sp12}`
-    }),
-    option: (d) => ({
-      ...d,
-      ...m.standardRegular.cssObject
-    })
-  }, u = w.find(
-    (d) => d.value === s
-  );
-  return /* @__PURE__ */ n.jsx(
-    C,
-    {
-      isSearchable: !1,
-      isMulti: !1,
-      value: u,
-      onChange: (d) => {
-        e(d, r);
-      },
-      placeholder: O.getLocalizedStrings().cockpit.filters.categoryPlaceholder,
-      options: w,
-      styles: i,
-      menuPosition: "fixed",
-      components: { Option: ne, SingleValue: te }
-    }
-  );
-};
-export {
-  be as C,
-  ne as D,
-  ue as F,
-  $e as M,
-  J as N,
-  _ as S,
-  me as a,
-  ye as b,
-  ge as c,
-  pe as d,
-  he as e,
-  K as g
-};

package/dist/MatchingOperatorDropdown-L5HoVQ06.cjs

@@ -1,130 +0,0 @@
-"use strict";const t=require("./vendor-.pnpm-D0ILHvHB.cjs"),x=require("react"),l=require("@emotion/styled"),o=require("./index-gTpRqqAW.cjs"),D=require("./filter-D00CTD87.cjs"),j=require("./ZeniDatePicker-Dq3ELvpx.cjs"),E=l.div`
-  display: flex;
-  align-items: center;
-  height: ${o.Space.sp6};
-  background: transparent;
-  position: relative;
-  margin: auto 0;
-`,O=l.div`
-  border-top-left-radius: ${o.Space.sp1};
-  border-bottom-left-radius: ${o.Space.sp1};
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  padding: ${o.Space.sp0} ${o.Space.sp2};
-  align-items: center;
-  transition: width 0.1s linear;
-  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
-  border-right: ${e=>`1px solid ${e.theme.colors.grey3}`};
-  width: ${e=>e.stretched?"197px":"167px"};
-  background: ${e=>e.stretched?e.theme.colors.background:"transparent"};
-  svg {
-    color: ${e=>e.stretched?e.theme.colors.primary:e.theme.colors.hero};
-    cursor: pointer;
-    &:hover {
-      color: ${e=>e.theme.colors.primary};
-    }
-  }
-  &:focus-within {
-    width: 197px;
-    background: ${e=>e.theme.colors.background};
-    svg {
-      color: ${e=>e.theme.colors.primary};
-    }
-  }
-`,C=l(o.SmallRegularInput)`
-  padding: 0 0 0 28px;
-  outline: none;
-  border: none;
-  height: 100%;
-  width: 100%;
-  background: unset;
-  color: ${e=>`${e.theme.colors.primary}`};
-`,F=l.button`
-  cursor: ${e=>e.isDisabled?"auto":"pointer"};
-  padding: ${o.Space.sp2} 14px;
-  background: ${e=>e.buttonOnly?"inherit":e.isActive?e.theme.colors.background:"unset"};
-  border: none;
-  outline: none;
-  display: flex;
-  align-items: center;
-  svg {
-    color: ${e=>e.isDisabled?e.theme.colors.grey3:e.isActive?e.theme.colors.primary:e.theme.colors.hero};
-  }
-  &:hover {
-    background: ${e=>e.buttonOnly?"inherit":e.isDisabled?"unset":e.theme.colors.background};
-    svg {
-      color: ${e=>e.isDisabled?e.theme.colors.grey3:e.theme.colors.primary};
-    }
-  }
-`,B=l.button`
-  background: unset;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  padding: 0;
-`,M=l(o.ExtraSmallMedium)`
-  position: absolute;
-  top: -${o.Space.sp1};
-  right: -${o.Space.sp1};
-  background: ${e=>e.theme.colors.primary};
-  color: ${e=>e.theme.colors.grey5};
-  border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`,A=l.div`
-  height: ${o.Space.sp6};
-  border: ${e=>e.buttonOnly?"none":`1px solid ${e.theme.colors.grey3}`};
-  border-left: none;
-  overflow: hidden;
-  border-top-right-radius: ${o.Space.sp1};
-  border-bottom-right-radius: ${o.Space.sp1};
-  box-sizing: border-box;
-`,R=x.forwardRef(({onSearchTextChanged:e,onFilterButtonClick:s,isFilterBtnActive:r,isFilterDisabled:n,filtersCount:a,filterText:c,searchPlaceholder:u,includeSearch:d=!0},i)=>{const g=x.useRef(null),S=p=>{e&&e(p.target.value)},b=()=>{s&&s()},m=()=>{g.current?.focus()},h=a!=null&&a>0;return t.jsxRuntimeExports.jsxs(E,{children:[d?t.jsxRuntimeExports.jsxs(O,{stretched:c.trim().length>0,children:[t.jsxRuntimeExports.jsx(B,{onClick:m,children:t.jsxRuntimeExports.jsx(o.SvgSearch,{width:o.Space.sp4,height:o.Space.sp4})}),t.jsxRuntimeExports.jsx(C,{value:c,ref:g,onChange:S,type:"text",placeholder:u})]}):null,t.jsxRuntimeExports.jsx(A,{buttonOnly:!d,children:t.jsxRuntimeExports.jsxs(F,{isActive:r,isDisabled:n??!1,buttonOnly:!d,ref:i,onClick:b,children:[t.jsxRuntimeExports.jsx(D.SvgFilter,{width:o.Space.sp4,height:o.Space.sp4}),h&&t.jsxRuntimeExports.jsx(M,{children:a})]})})]})});R.displayName="SearchBoxWithFilterButton";const L=({open:e,anchorEl:s,children:r,paperStyle:n,onClose:a})=>{const c=t.useTheme();return t.jsxRuntimeExports.jsx(t.Popover,{transitionDuration:400,anchorEl:s,open:e,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{style:{...n,marginTop:"6px",background:"transparent",boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${c.colors.dropShadowHover}`}},onClose:a,children:r})},f={valuesCombinationOperator:"ANY",values:[],matchingOperator:"equal"},V=({currentFilters:e,selectedOption:s,categoryIndex:r})=>e.categories==null?{categoryCombinationOperator:"AND",categories:[{...f,field:s.value}]}:{...e,categories:e.categories.map((a,c)=>c!==r?a:{...a,field:s.value,values:[]})},z=({currentFilters:e,selectedOption:s,categoryIndex:r})=>e?.categories==null?e:{...e,categories:e.categories.map((a,c)=>c!==r?a:{...a,matchingOperator:s.value})},P=({currentFilters:e,selectedOptions:s,categoryIndex:r})=>e.categories==null?e:{...e,categories:e.categories.map((a,c)=>c!==r?a:{...a,values:s.map(u=>u.value)})},k=e=>({placeholder:r=>({...r,color:e.colors.grey1,...o.textStyles.standardRegular.cssObject}),input:r=>({...r,color:e.colors.primary,margin:0,padding:0}),control:r=>({...r,backgroundColor:e.colors.background,border:"none",boxShadow:"none",height:o.Space.sp6,cursor:"pointer"}),valueContainer:r=>({...r,height:"100%",padding:`${o.Space.sp2} ${o.Space.sp3}`}),indicatorSeparator:r=>({...r,display:"none"}),indicatorsContainer:r=>({...r,display:"none"}),option:(r,n)=>({...r,...o.textStyles.standardRegular.cssObject,padding:`${o.Space.sp2} ${o.Space.sp3}`,cursor:"pointer",color:n.isSelected||n.isFocused?e.colors.primary:e.colors.hero,background:n.isSelected||n.isFocused?e.colors.background:e.colors.grey5,":hover":{color:e.colors.primary,backgroundColor:e.colors.background}}),singleValue:r=>({...r,color:e.colors.primary,margin:0}),menuList:r=>({...r,backgroundColor:e.colors.grey5,maxHeight:"320px"}),menu:r=>({...r,boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${e.colors.dropShadowHover}`})}),q=e=>({placeholder:r=>({...r,color:e.colors.grey1,...o.textStyles.standardRegular.cssObject}),input:r=>({...r,color:e.colors.primary,margin:0,padding:0}),control:r=>({...r,backgroundColor:e.colors.background,border:"none",boxShadow:"none",minHeight:"unset"}),valueContainer:r=>({...r,height:"100%",padding:0,rowGap:o.Space.sp2,columnGap:o.Space.sp1}),indicatorSeparator:r=>({...r,display:"none"}),indicatorsContainer:r=>({...r,display:"none"}),option:(r,n)=>({...r,...o.textStyles.standardRegular.cssObject,padding:`${o.Space.sp2} ${o.Space.sp3}`,cursor:"pointer",color:n.isSelected?e.colors.primary:e.colors.hero,background:n.isSelected?e.colors.background:e.colors.grey5,":hover":{color:e.colors.primary,backgroundColor:e.colors.background}}),singleValue:r=>({...r,color:e.colors.primary}),multiValue:r=>({...r,padding:`${o.Space.sp0} ${o.Space.sp2}`,border:`1px solid ${e.colors.primary}`,background:"none",borderRadius:o.Space.sp1,margin:0,columnGap:o.Space.sp2,alignItems:"center",height:o.Space.sp4}),multiValueLabel:r=>({...r,padding:0,paddingLeft:0,color:e.colors.primary,maxWidth:"200px"}),multiValueRemove:r=>({...r,padding:0,":hover":{background:"none",cursor:"pointer"},svg:{color:e.colors.primary}}),menuList:r=>({...r,backgroundColor:e.colors.grey5}),menu:r=>({...r,boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${e.colors.dropShadowHover}`,width:"315px",right:`-${o.Space.sp3}`,marginTop:o.Space.sp3}),container:r=>({...r,flex:1})}),N=({categoryCombinationOperator:e,onChange:s,buttonsDisabled:r})=>{const n=l.button`
-    padding: ${o.Space.sp2};
-    outline: none;
-    border: none;
-    border-radius: 0;
-    width: 50%;
-    cursor: pointer;
-    background-color: ${i=>i.selected?i.theme.colors.grey3:i.theme.colors.grey5};
-  `,a=l(o.StandardRegularSp)`
-    color: ${i=>i.buttonsDisabled?i.theme.colors.grey2:i.selected?i.theme.colors.primary:i.theme.colors.hero};
-  `,c=l.div`
-    border: ${i=>"1px solid "+i.theme.colors.grey3};
-    border-radius: ${o.Space.sp1};
-    overflow: hidden;
-  `,u=()=>{s("AND")},d=()=>{s("OR")};return t.jsxRuntimeExports.jsxs(c,{children:[t.jsxRuntimeExports.jsx(n,{disabled:r,onClick:u,selected:e==="AND",children:t.jsxRuntimeExports.jsx(a,{buttonsDisabled:r,selected:e==="AND",children:"and"})}),t.jsxRuntimeExports.jsx(n,{disabled:r,onClick:d,selected:e==="OR",children:t.jsxRuntimeExports.jsx(a,{buttonsDisabled:r,selected:e==="OR",children:"or"})})]})},W=({selectedDates:e,onDateRangeChange:s})=>{const r=t.useTheme(),n=o.useWindowSizeContext(),a=e?.[0],c=e?.[1],[u,d]=x.useState(a?{date:a}:void 0),[i,g]=x.useState(c?{date:c}:void 0);x.useEffect(()=>{u!=null&&i!=null&&s({startDate:u?.date,endDate:i?.date})},[u,i]);const S=p=>{p.isAfter(i?.date)&&g(void 0),d({date:p})},b=p=>{g({date:p})},{dateFormat:{visual:{MMMDCommaYYYYformat:m}},spendManagement:{filters:h}}=o.appLocale.getLocalizedStrings();return t.jsxRuntimeExports.jsxs(Y,{size:n,children:[t.jsxRuntimeExports.jsx(H,{children:t.jsxRuntimeExports.jsx(o.SvgCalendar,{})}),t.jsxRuntimeExports.jsx($,{children:t.jsxRuntimeExports.jsx(j.ZeniDatePicker,{onSelectedDateChanged:S,selectedDate:u,dateFormat:m,placeHolder:t.jsxRuntimeExports.jsx(y,{children:h.from}),style:{backgroundColor:r.colors.background}})}),t.jsxRuntimeExports.jsx(y,{children:h.enDash}),t.jsxRuntimeExports.jsx($,{children:t.jsxRuntimeExports.jsx(j.ZeniDatePicker,{onSelectedDateChanged:b,minDate:I(u?.date),selectedDate:i,dateFormat:m,placeHolder:t.jsxRuntimeExports.jsx(y,{children:h.to}),style:{backgroundColor:r.colors.background}})})]})},Y=l.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: ${o.Space.sp2};
-  justify-content: space-evenly;
-  flex-wrap: ${e=>e.size==="small"?"wrap":"nowrap"};
-`,$=l.div`
-  display: flex;
-  align-items: center;
-  padding-left: ${o.Space.sp3};
-  cursor: pointer;
-`,y=l(o.StandardRegular)`
-  color: ${e=>e.theme.colors.hero};
-  background: ${e=>e.theme.colors.background};
-`,H=l.div`
-  height: ${o.Space.sp3};
-  width: ${o.Space.sp3};
-  color: ${e=>e.theme.colors.hero};
-`,I=e=>{if(e!=null)return e.add(1,"day")},T=l.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`,U=l(o.SvgTick)`
-  color: ${e=>e.theme.colors.primary};
-  width: ${o.Space.sp4};
-  height: ${o.Space.sp4};
-`,w=e=>{const{isSelected:s}=e;return t.jsxRuntimeExports.jsx(t.components.Option,{...e,children:t.jsxRuntimeExports.jsxs(T,{children:[t.jsxRuntimeExports.jsx(o.SmallRegular,{children:e.label}),s&&t.jsxRuntimeExports.jsx(U,{})]})})},_=e=>t.jsxRuntimeExports.jsx(t.components.SingleValue,{...e,children:t.jsxRuntimeExports.jsx(o.StandardRegularSp,{children:e.children})}),v=[{value:"equal",label:"is"},{value:"not-equal",label:"is not"}],G=({onChange:e,value:s,categoryIndex:r})=>{const n=t.useTheme(),c={...k(n),menu:d=>({...d,boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${n.colors.dropShadowHover}`,width:`${o.Space.sp12}`}),option:d=>({...d,...o.textStyles.standardRegular.cssObject})},u=v.find(d=>d.value===s);return t.jsxRuntimeExports.jsx(t.StateManagedSelect$1,{isSearchable:!1,isMulti:!1,value:u,onChange:d=>{e(d,r)},placeholder:o.appLocale.getLocalizedStrings().cockpit.filters.categoryPlaceholder,options:v,styles:c,menuPosition:"fixed",components:{Option:w,SingleValue:_}})};exports.CombinationOperatorButton=N;exports.DateRangeFilterField=W;exports.DropdownOption=w;exports.FiltersPopover=L;exports.MatchingOperatorDropdown=G;exports.NEW_CATEGORY_BODY=f;exports.SearchBoxWithFilterButton=R;exports.getDropdownStyles=k;exports.getMultiSelectDropdownStyles=q;exports.getUpdatedFiltersOnCategoryChange=V;exports.getUpdatedFiltersOnMatchingOperatorChange=z;exports.getUpdatedFiltersOnValueChange=P;