jcicl 0.0.132 → 0.0.135

package/AppContainer/AppContainer.d.ts

@@ -3,7 +3,7 @@ import { AppHeaderProps, CustomLogoProps } from '../../../../../../../../../src/
 import { NavProps, NavItemProps } from '../../../../../../../../../src/components/supercomposite/Nav/Nav';
 import { IconProps } from '../../../../../../../../../src/components/base/Icon';
 import { TemplateThemeProps } from '../../../../../../../../../src/components/theme';
-type ReducedAppHeaderProps = Omit<AppHeaderProps, 'logoProps' | 'iconColor | loggedIn'>;
+type ReducedAppHeaderProps = Omit<AppHeaderProps, 'logoProps' | 'iconColor' | 'loggedIn' | 'themeProps'>;
 interface UserInfo {
     name: string;
     email: string;

package/AppContainer/AppContainer.js

@@ -1,17 +1,17 @@
 import { jsx as a, jsxs as T, Fragment as fe } from "react/jsx-runtime";
 import * as x from "react";
-import { useState as Y } from "react";
-import { c as ee } from "../.chunks/createSvgIcon.js";
-import { n as v, i as oe } from "../.chunks/emotion-styled.browser.esm.js";
+import { useState as G } from "react";
+import { c as q } from "../.chunks/createSvgIcon.js";
+import { n as v, i as ee } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as R } from "../.chunks/emotion-react.browser.esm.js";
 import Ae from "../AppHeader/AppHeader.js";
 import { Nav as F } from "../Nav/Nav.js";
-import _ from "../ScrollContainer/ScrollContainer.js";
-import { Button as Z } from "../Button/Button.js";
+import Y from "../ScrollContainer/ScrollContainer.js";
+import { Button as K } from "../Button/Button.js";
 import i from "../theme.js";
 import { l as je } from "../.chunks/jocologo.js";
 import { X as Ue } from "../.chunks/Close.js";
-import { P as r, g as Fe, a as Ve, s as ce, r as We, c as q, u as Qe, b as J, d as Xe } from "../.chunks/DefaultPropsProvider.js";
+import { P as r, g as Fe, a as Ve, s as ce, r as We, c as Z, u as Qe, b as _, d as Xe } from "../.chunks/DefaultPropsProvider.js";
 import { u as Ge, e as Ye, H as _e, a as ke, g as Je, T as Ke, r as Ze, b as me, c as qe } from "../.chunks/Portal.js";
 import { m as Ce } from "../.chunks/memoTheme.js";
 import { g as eo, o as Te, d as oo, M as to, P as ro, i as no } from "../.chunks/TextField.js";
@@ -95,7 +95,7 @@ function ho(e, o, t) {
 function Pe(e) {
   return typeof e == "function" ? e() : e;
 }
-function K(e, o, t) {
+function J(e, o, t) {
   const n = Pe(t), c = ho(e, o, n);
   c && (o.style.webkitTransform = c, o.style.transform = c);
 }
@@ -128,7 +128,7 @@ const Ee = /* @__PURE__ */ x.forwardRef(function(o, t) {
   } = o, d = x.useRef(null), w = so(Je(p), d, t), k = (s) => (g) => {
     s && (g === void 0 ? s(d.current) : s(d.current, g));
   }, y = k((s, g) => {
-    K(h, s, b), Ze(s), A && A(s, g);
+    J(h, s, b), Ze(s), A && A(s, g);
   }), m = k((s, g) => {
     const W = me({
       timeout: H,
@@ -142,7 +142,7 @@ const Ee = /* @__PURE__ */ x.forwardRef(function(o, t) {
     }), s.style.transition = n.transitions.create("transform", {
       ...W
     }), s.style.webkitTransform = "none", s.style.transform = "none", j && j(s, g);
-  }), S = k(z), U = k(M), X = k((s) => {
+  }), S = k(z), U = k(M), oe = k((s) => {
     const g = me({
       timeout: H,
       style: L,
@@ -150,19 +150,19 @@ const Ee = /* @__PURE__ */ x.forwardRef(function(o, t) {
     }, {
       mode: "exit"
     });
-    s.style.webkitTransition = n.transitions.create("-webkit-transform", g), s.style.transition = n.transitions.create("transform", g), K(h, s, b), E && E(s);
+    s.style.webkitTransition = n.transitions.create("-webkit-transform", g), s.style.transition = n.transitions.create("transform", g), J(h, s, b), E && E(s);
   }), te = k((s) => {
     s.style.webkitTransition = "", s.style.transition = "", N && N(s);
   }), re = (s) => {
     u && u(d.current, s);
   }, D = x.useCallback(() => {
-    d.current && K(h, d.current, b);
+    d.current && J(h, d.current, b);
   }, [h, b]);
   return x.useEffect(() => {
     if (P || h === "down" || h === "right")
       return;
     const s = oo(() => {
-      d.current && K(h, d.current, b);
+      d.current && J(h, d.current, b);
     }), g = Te(d.current);
     return g.addEventListener("resize", s), () => {
       s.clear(), g.removeEventListener("resize", s);
@@ -174,7 +174,7 @@ const Ee = /* @__PURE__ */ x.forwardRef(function(o, t) {
     onEnter: y,
     onEntered: S,
     onEntering: m,
-    onExit: X,
+    onExit: oe,
     onExited: te,
     onExiting: U,
     addEndListener: re,
@@ -313,7 +313,7 @@ const Me = (e, o) => {
     root: ["root"],
     docked: [(n === "permanent" || n === "persistent") && "docked"],
     modal: ["modal"],
-    paper: ["paper", `paperAnchor${q(t)}`, n !== "temporary" && `paperAnchorDocked${q(t)}`]
+    paper: ["paper", `paperAnchor${Z(t)}`, n !== "temporary" && `paperAnchorDocked${Z(t)}`]
   };
   return Xe(c, uo, o);
 }, mo = ce(to, {
@@ -339,7 +339,7 @@ const Me = (e, o) => {
     const {
       ownerState: t
     } = e;
-    return [o.paper, o[`paperAnchor${q(t.anchor)}`], t.variant !== "temporary" && o[`paperAnchorDocked${q(t.anchor)}`]];
+    return [o.paper, o[`paperAnchor${Z(t.anchor)}`], t.variant !== "temporary" && o[`paperAnchorDocked${Z(t.anchor)}`]];
   }
 })(Ce(({
   theme: e
@@ -483,13 +483,13 @@ const V = /* @__PURE__ */ x.forwardRef(function(o, t) {
     elevation: O === "temporary" ? $ : 0,
     square: !0,
     ...N,
-    className: J(m.paper, N.className),
+    className: _(m.paper, N.className),
     ownerState: y,
     children: b
   });
   if (O === "permanent")
     return /* @__PURE__ */ a(be, {
-      className: J(m.root, m.docked, h),
+      className: _(m.root, m.docked, h),
       ownerState: y,
       ref: t,
       ...B,
@@ -504,7 +504,7 @@ const V = /* @__PURE__ */ x.forwardRef(function(o, t) {
     children: S
   });
   return O === "persistent" ? /* @__PURE__ */ a(be, {
-    className: J(m.root, m.docked, h),
+    className: _(m.root, m.docked, h),
     ownerState: y,
     ref: t,
     ...B,
@@ -515,7 +515,7 @@ const V = /* @__PURE__ */ x.forwardRef(function(o, t) {
       ...A,
       transitionDuration: H
     },
-    className: J(m.root, m.modal, h),
+    className: _(m.root, m.modal, h),
     open: E,
     ownerState: y,
     onClose: j,
@@ -612,16 +612,16 @@ process.env.NODE_ENV !== "production" && (V.propTypes = {
    */
   variant: r.oneOf(["permanent", "persistent", "temporary"])
 });
-const xe = ee(/* @__PURE__ */ a("path", {
+const xe = q(/* @__PURE__ */ a("path", {
   d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-}), "ArrowForward"), vo = ee(/* @__PURE__ */ a("path", {
+}), "ArrowForward"), vo = q(/* @__PURE__ */ a("path", {
   d: "m17 7-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z"
-}), "Logout"), ve = ee(/* @__PURE__ */ a("path", {
+}), "Logout"), ve = q(/* @__PURE__ */ a("path", {
   d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"
-}), "Cancel"), wo = ee(/* @__PURE__ */ a("path", {
+}), "Cancel"), wo = q(/* @__PURE__ */ a("path", {
   d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
 }), "MoreHoriz"), yo = v("div", {
-  shouldForwardProp: (e) => oe(e)
+  shouldForwardProp: (e) => ee(e)
 })(({ backgroundColor: e }) => ({
   display: "flex",
   flexDirection: "column",
@@ -644,7 +644,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
     minHeight: `calc(100% - ${i.constants.appHeaderHeight}px)`
   })
 ), Co = v("div", {
-  shouldForwardProp: (e) => oe(e)
+  shouldForwardProp: (e) => ee(e)
 })(({ withActionsPanel: e, tablet: o, borderColor: t, backgroundColor: n }) => ({
   display: "flex",
   flexDirection: "column",
@@ -688,7 +688,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
       }
     `
   })
-), we = v(Z)(({ iconColor: e, highlight1: o, highlight2: t, rightDrawer: n = !1 }) => ({
+), we = v(K)(({ iconColor: e, highlight1: o, highlight2: t, rightDrawer: n = !1 }) => ({
   ...R`
     position: absolute;
     top: -0.5rem;
@@ -713,7 +713,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
     }
   `
 })), $o = v("div", {
-  shouldForwardProp: (e) => oe(e)
+  shouldForwardProp: (e) => ee(e)
 })(({ withActionsPanel: e, borderColor: o, backgroundColor: t, mobileScreen: n }) => ({
   display: "flex",
   overflow: "hidden",
@@ -776,7 +776,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
     }
   `
 })), Mo = v("div", {
-  shouldForwardProp: (e) => oe(e)
+  shouldForwardProp: (e) => ee(e)
 })(({ backgroundColor: e, open: o }) => ({
   ...R`
     position: fixed;
@@ -830,7 +830,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
     justify-content: ${e ? "start" : "space-between"};
     padding: 8px 16px 8px 24px;
   `
-})), Do = v(V)(({ backgroundQuaternary: e }) => ({
+})), Do = v(V)(() => ({
   ...R`
     top: ${i.constants.appHeaderHeight}px;
     font-family: 'Roboto';
@@ -841,7 +841,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
       box-sizing: border-box;
       top: ${i.constants.appHeaderHeight}px;
       height: calc(100vh - ${i.constants.appHeaderHeight}px);
-      background-image: linear-gradient(to bottom right, ${i.colors.oldPaper}, ${e});
+      background-color: ${i.colors.white};
       box-shadow: 0 3px 6px 3px ${i.colors.gray};
       padding: 0;
       overflow: visible;
@@ -867,19 +867,19 @@ const xe = ee(/* @__PURE__ */ a("path", {
   loggedIn: $,
   mobileActionsPanelOpen: P
 }) => {
-  const [A, z] = Y(!1), [j, E] = Y(!1), [N, M] = Y(!1), [L, H] = Y(!1), { mobile: O = i.screenSizes.mobile, tablet: B = i.screenSizes.tablet } = f, d = ge(`(max-width: ${O})`), w = ge(`(max-width: ${B})`) && !d, k = !d && !w, {
+  const [A, z] = G(!1), [j, E] = G(!1), [N, M] = G(!1), [L, H] = G(!1), { mobile: O = i.screenSizes.mobile, tablet: B = i.screenSizes.tablet } = f, d = ge(`(max-width: ${O})`), w = ge(`(max-width: ${B})`) && !d, k = !d && !w, {
     backgroundPrimary: y = i.colors.whiteGreen,
     backgroundSecondary: m = i.colors.whiteGreenA,
     backgroundTertiary: S = i.colors.sage,
     highlightPrimary: U = i.colors.sunlight,
-    backgroundQuaternary: X = i.colors.moss,
+    backgroundQuaternary: oe = i.colors.moss,
     highlightSecondary: te = i.colors.dandelion,
     highlightTertiary: re = `${i.colors.dandelion}99`,
     iconPrimary: D = i.colors.darkGreen,
     shadowPrimary: s = i.colors.darkGreenO99,
     shadowSecondary: g = i.boxShadows.darkGreen,
     shadowTertiary: W = i.boxShadows.darkGreenThick,
-    borderPrimary: G = i.colors.green,
+    borderPrimary: X = i.colors.green,
     scrollColor: I = i.colors.darkGreenO99,
     iconColors: Re
   } = b, { logoSrc: le = je, logoWidth: pe = 36, logoHeight: de = 50 } = h, Se = {
@@ -889,7 +889,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
     highlightPrimary: U,
     highlightSecondary: te,
     highlightTertiary: re,
-    borderPrimary: G,
+    borderPrimary: X,
     iconPrimary: D,
     shadowPrimary: s,
     shadowSecondary: g,
@@ -953,7 +953,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
         logoProps: De,
         iconColor: D,
         isMobile: d,
-        themeProps: { shadowSecondary: g, shadowTertiary: W, iconPrimary: D, borderPrimary: G },
+        themeProps: { shadowSecondary: g, shadowTertiary: W, iconPrimary: D, borderPrimary: X },
         iconColors: Re,
         userName: t == null ? void 0 : t.name,
         userSettingsEnabled: n
@@ -984,7 +984,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
           children: [
             /* @__PURE__ */ T(ye, { children: [
               /* @__PURE__ */ a(So, { src: le, alt: "logo", width: pe, height: de }),
-              /* @__PURE__ */ a(Z, { variant: "icon", size: 36, onClick: () => z(!1), color: D, children: /* @__PURE__ */ a(Ue, {}) })
+              /* @__PURE__ */ a(K, { variant: "icon", size: 36, onClick: () => z(!1), color: D, children: /* @__PURE__ */ a(Ue, {}) })
             ] }),
             /* @__PURE__ */ a(F, { ...ae })
           ]
@@ -1010,7 +1010,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
                 children: /* @__PURE__ */ a(ve, {})
               }
             ),
-            /* @__PURE__ */ a(_, { scrollColor: I, direction: "vertical", children: l && l })
+            /* @__PURE__ */ a(Y, { scrollColor: I, direction: "vertical", children: l && l })
           ]
         }
       ),
@@ -1020,7 +1020,6 @@ const xe = ee(/* @__PURE__ */ a("path", {
           anchor: "right",
           open: N,
           onClose: () => M(!1),
-          backgroundQuaternary: X,
           children: [
             /* @__PURE__ */ a(
               we,
@@ -1029,7 +1028,7 @@ const xe = ee(/* @__PURE__ */ a("path", {
                 size: 24,
                 onClick: () => M(!1),
                 iconColor: i.colors.midnight,
-                highlight1: i.colors.sunlight,
+                highlight1: i.colors.white,
                 highlight2: m,
                 rightDrawer: !0,
                 children: /* @__PURE__ */ a(ve, {})
@@ -1059,12 +1058,12 @@ const xe = ee(/* @__PURE__ */ a("path", {
             anchor: "right",
             open: N,
             onClose: () => M(!1),
-            backgroundQuaternary: X,
+            backgroundQuaternary: oe,
             children: [
               /* @__PURE__ */ T(ye, { children: [
                 /* @__PURE__ */ a(Ho, { color: i.colors.midnight, children: "Settings" }),
                 /* @__PURE__ */ a(
-                  Z,
+                  K,
                   {
                     variant: "icon",
                     size: 36,
@@ -1091,19 +1090,19 @@ const xe = ee(/* @__PURE__ */ a("path", {
             ]
           }
         ),
-        /* @__PURE__ */ a(Mo, { backgroundColor: S, open: P, children: /* @__PURE__ */ a(_, { scrollColor: I, direction: "vertical", children: l }) })
+        /* @__PURE__ */ a(Mo, { backgroundColor: S, open: P, children: /* @__PURE__ */ a(Y, { scrollColor: I, direction: "vertical", children: l }) })
       ] }),
       !d && /* @__PURE__ */ T(
         Co,
         {
           withActionsPanel: ne,
           tablet: w,
-          borderColor: G,
+          borderColor: X,
           backgroundColor: S,
           children: [
-            k && /* @__PURE__ */ a(_, { scrollColor: I, direction: "vertical", children: l && l }),
+            k && /* @__PURE__ */ a(Y, { scrollColor: I, direction: "vertical", children: l && l }),
             w && /* @__PURE__ */ a(
-              Z,
+              K,
               {
                 variant: "icon",
                 size: 36,
@@ -1119,10 +1118,10 @@ const xe = ee(/* @__PURE__ */ a("path", {
         $o,
         {
           withActionsPanel: ne,
-          borderColor: G,
+          borderColor: X,
           backgroundColor: y,
           mobileScreen: d,
-          children: /* @__PURE__ */ a(_, { scrollColor: I, children: p })
+          children: /* @__PURE__ */ a(Y, { scrollColor: I, children: p })
         }
       )
     ] })

package/AppHeader/AppHeader.d.ts

@@ -1,3 +1,4 @@
+import { SearchFilterProps } from '../../../../../../../../../src/components/composite/Search';
 import { IconProps } from '../../../../../../../../../src/components/base/Icon';
 import { TemplateThemeProps } from '../../../../../../../../../src/components/theme';
 export interface CustomLogoProps {
@@ -20,6 +21,7 @@ export interface AppHeaderProps {
     iconColors?: IconProps;
     userName?: string;
     userSettingsEnabled?: boolean;
+    searchFilters?: SearchFilterProps[];
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

package/AppHeader/AppHeader.js

@@ -1,56 +1,56 @@
-import { jsx as t, jsxs as x } from "react/jsx-runtime";
-import * as k from "react";
-import G, { useState as $, useLayoutEffect as J } from "react";
-import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
+import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import * as W from "react";
+import J, { useState as $, useLayoutEffect as K } from "react";
+import { n as f } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as m } from "../.chunks/emotion-react.browser.esm.js";
-import { Search as M } from "../Search/Search.js";
-import { Button as E } from "../Button/Button.js";
-import H from "../Icon/Icon.js";
-import K from "../WithLabel/WithLabel.js";
-import { c as j } from "../.chunks/createSvgIcon.js";
-const N = G[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], Q = (e) => {
-  const n = k.useRef(e);
-  return k.useEffect(() => {
+import { Search as k } from "../Search/Search.js";
+import { Button as M } from "../Button/Button.js";
+import E from "../Icon/Icon.js";
+import N from "../WithLabel/WithLabel.js";
+import { c as A } from "../.chunks/createSvgIcon.js";
+const Q = J[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], X = (e) => {
+  const n = W.useRef(e);
+  return W.useEffect(() => {
     n.current = e;
   }), n;
 };
-function X() {
+function Y() {
 }
-function Y(e, n, l = {}) {
-  const c = ee(l.polyfill), u = Q(n);
-  return N(() => {
+function Z(e, n, l = {}) {
+  const c = te(l.polyfill), a = X(n);
+  return Q(() => {
     let i = !1;
     const d = e && "current" in e ? e.current : e;
-    if (!d) return X;
+    if (!d) return Y;
     function r(o, s) {
-      i || u.current(o, s);
+      i || a.current(o, s);
     }
     return c.subscribe(d, r), () => {
       i = !0, c.unsubscribe(d, r);
     };
-  }, [e, c, u]), c.observer;
+  }, [e, c, a]), c.observer;
 }
-function Z(e) {
+function ee(e) {
   let n = !1, l = [];
-  const c = /* @__PURE__ */ new Map(), u = new (e || window.ResizeObserver)((i, d) => {
+  const c = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((i, d) => {
     l = l.concat(i);
     function r() {
       const o = /* @__PURE__ */ new Set();
       for (let s = 0; s < l.length; s++) {
         if (o.has(l[s].target)) continue;
         o.add(l[s].target);
-        const a = c.get(l[s].target);
-        a == null || a.forEach((w) => w(l[s], d));
+        const h = c.get(l[s].target);
+        h == null || h.forEach((b) => b(l[s], d));
       }
       l = [], n = !1;
     }
     n || window.requestAnimationFrame(r), n = !0;
   });
   return {
-    observer: u,
+    observer: a,
     subscribe(i, d) {
       var r;
-      u.observe(i);
+      a.observe(i);
       const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
       o.push(d), c.set(i, o);
     },
@@ -58,7 +58,7 @@ function Z(e) {
       var r;
       const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
       if (o.length === 1) {
-        u.unobserve(i), c.delete(i);
+        a.unobserve(i), c.delete(i);
         return;
       }
       const s = o.indexOf(d);
@@ -67,11 +67,11 @@ function Z(e) {
   };
 }
 let y;
-const ee = (e) => y || (y = Z(e)), te = j(/* @__PURE__ */ t("path", {
+const te = (e) => y || (y = ee(e)), ne = A(/* @__PURE__ */ t("path", {
   d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
-}), "Menu"), I = j(/* @__PURE__ */ t("path", {
+}), "Menu"), H = A(/* @__PURE__ */ t("path", {
   d: "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4"
-}), "PersonOutlineOutlined"), L = h("div")(
+}), "PersonOutlineOutlined"), I = f("div")(
   ({ mobile: e, shadowSecondary: n }) => ({
     ...m`
       z-index: 1313;
@@ -85,15 +85,15 @@ const ee = (e) => y || (y = Z(e)), te = j(/* @__PURE__ */ t("path", {
       box-shadow: ${e && n};
     `
   })
-), R = h("img")(({ width: e }) => ({
+), L = f("img")(({ width: e }) => ({
   width: `${e}px`
-})), _ = h("div")(({ height: e }) => ({
+})), R = f("div")(({ height: e }) => ({
   ...m`
     display: flex;
     gap: 1rem;
     height: ${e}px;
   `
-})), ne = h("div")(({ width: e, loggedIn: n }) => ({
+})), ie = f("div")(({ width: e, loggedIn: n }) => ({
   ...m`
     width: ${e}px;
     display: flex;
@@ -105,14 +105,14 @@ const ee = (e) => y || (y = Z(e)), te = j(/* @__PURE__ */ t("path", {
       white-space: nowrap;
     }
   `
-})), P = h("div")(({ visible: e }) => ({
+})), _ = f("div")(({ visible: e }) => ({
   ...m`
     z-index: ${e ? 1 : 0};
     opacity: ${e ? 1 : 0};
     pointer-events: ${e ? "auto" : "none"};
     position: ${e ? "relative" : "absolute"};
   `
-})), A = h("div")(() => ({
+})), P = f("div")(() => ({
   ...m`
     display: flex;
     width: 1360px;
@@ -121,66 +121,74 @@ const ee = (e) => y || (y = Z(e)), te = j(/* @__PURE__ */ t("path", {
       width: 100%;
     }
   `
-})), fe = ({
+})), he = ({
   isMobile: e,
   loggedIn: n,
   logoProps: l,
   iconColor: c,
-  themeProps: u,
+  themeProps: a,
   hamburgerMenu: i,
   iconColors: d,
   userName: r = "User",
   userSettingsEnabled: o,
-  onHamburgerMenuClick: s,
-  onUserMenuClick: a,
-  onLogin: w,
-  onSearch: z = () => {
+  searchFilters: s,
+  onHamburgerMenuClick: h,
+  onUserMenuClick: b,
+  onLogin: j,
+  onSearch: V = () => {
   }
 }) => {
-  const [b, C] = $(0), [f, V] = $(null), [v, F] = $(null), { logoSrc: O, logoWidth: S, logoHeight: g } = l, { shadowSecondary: U, shadowTertiary: B, iconPrimary: q, borderPrimary: T } = u, W = { shadowTertiary: B, borderColor: T, borderFocusColor: q };
-  J(() => {
-    f && f.clientWidth > b && C(f.clientWidth), v && v.clientWidth > b && C(v.clientWidth);
-  }, [f, v]);
-  const D = (p) => {
-    p != null && p.clientWidth && p.clientWidth > b && C(p.clientWidth);
+  const [v, C] = $(0), [u, F] = $(null), [g, U] = $(null), { logoSrc: z, logoWidth: O, logoHeight: x } = l, { shadowSecondary: B, shadowTertiary: q, iconPrimary: T, borderPrimary: D } = a, S = {
+    shadowTertiary: q,
+    borderColor: D,
+    borderFocusColor: T,
+    filters: s,
+    onSearch: V,
+    placeholder: "Search..."
   };
-  return Y(f, () => D(f)), e ? /* @__PURE__ */ x(L, { mobile: !0, shadowSecondary: U, children: [
-    /* @__PURE__ */ t(_, { height: g, children: /* @__PURE__ */ t(R, { src: O, height: `${g}px`, width: S }) }),
-    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(M, { onSearch: z, ...W, placeholder: "Search..." }) }),
+  K(() => {
+    u && u.clientWidth > v && C(u.clientWidth), g && g.clientWidth > v && C(g.clientWidth);
+  }, [u, g]);
+  const G = (p) => {
+    p != null && p.clientWidth && p.clientWidth > v && C(p.clientWidth);
+  };
+  return Z(u, () => G(u)), e ? /* @__PURE__ */ w(I, { mobile: !0, shadowSecondary: B, children: [
+    /* @__PURE__ */ t(R, { height: x, children: /* @__PURE__ */ t(L, { src: z, height: `${x}px`, width: O }) }),
+    /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(k, { ...S }) }),
     /* @__PURE__ */ t(
-      H,
+      E,
       {
-        icon: /* @__PURE__ */ t(I, {}),
+        icon: /* @__PURE__ */ t(H, {}),
         ...d,
-        onClick: o ? a : void 0
+        onClick: o ? b : void 0
       }
     )
-  ] }) : /* @__PURE__ */ x(L, { children: [
-    /* @__PURE__ */ x(_, { height: g, children: [
-      /* @__PURE__ */ t(R, { src: O, height: `${g}px`, width: S }),
-      i && /* @__PURE__ */ t(E, { variant: "icon", onClick: s, color: c, children: /* @__PURE__ */ t(te, {}) })
+  ] }) : /* @__PURE__ */ w(I, { children: [
+    /* @__PURE__ */ w(R, { height: x, children: [
+      /* @__PURE__ */ t(L, { src: z, height: `${x}px`, width: O }),
+      i && /* @__PURE__ */ t(M, { variant: "icon", onClick: h, color: c, children: /* @__PURE__ */ t(ne, {}) })
     ] }),
-    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(M, { onSearch: z, ...W, placeholder: "Search..." }) }),
-    /* @__PURE__ */ x(ne, { width: b, loggedIn: !!n, children: [
-      /* @__PURE__ */ t(P, { visible: !!n, ref: V, children: /* @__PURE__ */ t(
-        K,
+    /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(k, { ...S }) }),
+    /* @__PURE__ */ w(ie, { width: v, loggedIn: !!n, children: [
+      /* @__PURE__ */ t(_, { visible: !!n, ref: F, children: /* @__PURE__ */ t(
+        N,
         {
           id: "accountMenuContainer",
           component: /* @__PURE__ */ t(
-            H,
+            E,
             {
-              icon: /* @__PURE__ */ t(I, {}),
+              icon: /* @__PURE__ */ t(H, {}),
               ...d,
-              onClick: o ? a : void 0
+              onClick: o ? b : void 0
             }
           ),
           label: `Hi, ${r}!`
         }
       ) }),
-      /* @__PURE__ */ t(P, { visible: !n, ref: F, children: /* @__PURE__ */ t(E, { id: "loginButtonContainer", onClick: w, children: "Log In" }) })
+      /* @__PURE__ */ t(_, { visible: !n, ref: U, children: /* @__PURE__ */ t(M, { id: "loginButtonContainer", onClick: j, children: "Log In" }) })
     ] })
   ] });
 };
 export {
-  fe as default
+  he as default
 };

package/Button/Button.d.ts

@@ -1,9 +1,10 @@
 import { ButtonProps as MuiButtonProps } from '@mui/material/Button/Button';
 export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size' | 'color'> {
-    variant?: 1 | 2 | 'unstyled' | 'icon' | 'bibi' | 'bibiOutlined' | 'bibiInverse';
+    variant?: 1 | 2 | 'unstyled' | 'icon' | 'bibi' | 'bibiOutlined' | 'bibiInverse' | 'filter';
     size?: number;
     color?: string;
     highlightColor?: string;
+    active?: boolean;
 }
 export declare const Button: React.FC<ButtonProps & {
     children: React.ReactNode;