jcicl 0.0.130 → 0.0.133

package/AppHeader/AppHeader.d.ts

@@ -1,4 +1,5 @@
-import { AvatarProps } from '../../../../../../../../../src/components/base/Avatar';
+import { SearchFilterProps } from '../../../../../../../../../src/components/composite/Search';
+import { IconProps } from '../../../../../../../../../src/components/base/Icon';
 import { TemplateThemeProps } from '../../../../../../../../../src/components/theme';
 export interface CustomLogoProps {
     logoSrc: string;
@@ -12,11 +13,15 @@ export interface AppHeaderProps {
     onLogout?: () => void;
     onUserMenuClick?: () => void;
     onHamburgerMenuClick?: () => void;
+    onSearch?: () => void;
     logoProps: CustomLogoProps;
     iconColor: string;
     isMobile?: boolean;
     themeProps: Pick<TemplateThemeProps, 'shadowSecondary' | 'iconPrimary' | 'borderPrimary' | 'shadowTertiary'>;
-    avatarColors?: AvatarProps;
+    iconColors?: IconProps;
+    userName?: string;
+    userSettingsEnabled?: boolean;
+    searchFilters?: SearchFilterProps[];
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

package/AppHeader/AppHeader.js

@@ -1,27 +1,27 @@
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
-import * as S from "react";
-import V, { useState as w, useLayoutEffect as B } from "react";
-import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as b } from "../.chunks/emotion-react.browser.esm.js";
-import { I as W } from "../.chunks/Input.js";
-import { Button as k } from "../Button/Button.js";
-import E from "../Avatar/Avatar.js";
-import q from "../WithLabel/WithLabel.js";
-import { c as T } from "../.chunks/createSvgIcon.js";
-const D = V[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], G = (e) => {
-  const t = S.useRef(e);
-  return S.useEffect(() => {
-    t.current = e;
-  }), t;
+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 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 J() {
+function Y() {
 }
-function K(e, t, l = {}) {
-  const c = Q(l.polyfill), a = G(t);
-  return D(() => {
+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 J;
+    if (!d) return Y;
     function r(o, s) {
       i || a.current(o, s);
     }
@@ -30,8 +30,8 @@ function K(e, t, l = {}) {
     };
   }, [e, c, a]), c.observer;
 }
-function N(e) {
-  let t = !1, l = [];
+function ee(e) {
+  let n = !1, l = [];
   const c = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((i, d) => {
     l = l.concat(i);
     function r() {
@@ -39,12 +39,12 @@ function N(e) {
       for (let s = 0; s < l.length; s++) {
         if (o.has(l[s].target)) continue;
         o.add(l[s].target);
-        const u = c.get(l[s].target);
-        u == null || u.forEach((p) => p(l[s], d));
+        const h = c.get(l[s].target);
+        h == null || h.forEach((b) => b(l[s], d));
       }
-      l = [], t = !1;
+      l = [], n = !1;
     }
-    t || window.requestAnimationFrame(r), t = !0;
+    n || window.requestAnimationFrame(r), n = !0;
   });
   return {
     observer: a,
@@ -66,12 +66,14 @@ function N(e) {
     }
   };
 }
-let C;
-const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
+let y;
+const te = (e) => y || (y = ee(e)), ne = A(/* @__PURE__ */ t("path", {
   d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
-}), "Menu"), M = h("div")(
-  ({ mobile: e, shadowSecondary: t }) => ({
-    ...b`
+}), "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"), I = f("div")(
+  ({ mobile: e, shadowSecondary: n }) => ({
+    ...m`
       z-index: 1313;
       display: flex;
       flex-direction: row;
@@ -80,38 +82,38 @@ const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
       align-items: center;
       justify-content: space-between;
       gap: ${e ? "8px" : "1.5rem"};
-      box-shadow: ${e && t};
+      box-shadow: ${e && n};
     `
   })
-), O = h("img")(({ width: e }) => ({
+), L = f("img")(({ width: e }) => ({
   width: `${e}px`
-})), I = h("div")(({ height: e }) => ({
-  ...b`
+})), R = f("div")(({ height: e }) => ({
+  ...m`
     display: flex;
     gap: 1rem;
     height: ${e}px;
   `
-})), Y = h("div")(({ width: e, loggedIn: t }) => ({
-  ...b`
+})), ie = f("div")(({ width: e, loggedIn: n }) => ({
+  ...m`
     width: ${e}px;
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    flex-direction: ${t ? "column" : "column-reverse"};
+    flex-direction: ${n ? "column" : "column-reverse"};
     flex-shrink: 0;
     * {
       white-space: nowrap;
     }
   `
-})), L = h("div")(({ visible: e }) => ({
-  ...b`
+})), _ = f("div")(({ visible: e }) => ({
+  ...m`
     z-index: ${e ? 1 : 0};
     opacity: ${e ? 1 : 0};
     pointer-events: ${e ? "auto" : "none"};
     position: ${e ? "relative" : "absolute"};
   `
-})), R = h("div")(() => ({
-  ...b`
+})), P = f("div")(() => ({
+  ...m`
     display: flex;
     width: 1360px;
     max-width: 100%;
@@ -119,48 +121,74 @@ const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
       width: 100%;
     }
   `
-})), le = ({
+})), he = ({
   isMobile: e,
-  loggedIn: t,
+  loggedIn: n,
   logoProps: l,
   iconColor: c,
   themeProps: a,
   hamburgerMenu: i,
-  avatarColors: d,
-  onHamburgerMenuClick: r,
-  onUserMenuClick: o,
-  onLogin: s
+  iconColors: d,
+  userName: r = "User",
+  userSettingsEnabled: o,
+  searchFilters: s,
+  onHamburgerMenuClick: h,
+  onUserMenuClick: b,
+  onLogin: j,
+  onSearch: V = () => {
+  }
 }) => {
-  const [u, p] = w(0), [f, _] = w(null), [v, A] = w(null), { logoSrc: $, logoWidth: y, logoHeight: g } = l, { shadowSecondary: H, shadowTertiary: j, iconPrimary: P, borderPrimary: F } = a, z = { shadowTertiary: j, borderColor: F, borderFocusColor: P };
-  B(() => {
-    f && f.clientWidth > u && p(f.clientWidth), v && v.clientWidth > u && p(v.clientWidth);
-  }, [f, v]);
-  const U = (m) => {
-    m != null && m.clientWidth && m.clientWidth > u && p(m.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 K(f, () => U(f)), e ? /* @__PURE__ */ x(M, { mobile: !0, shadowSecondary: H, children: [
-    /* @__PURE__ */ n(I, { height: g, children: /* @__PURE__ */ n(O, { src: $, height: `${g}px`, width: y }) }),
-    /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(W, { ...z, placeholder: "Search..." }) }),
-    /* @__PURE__ */ n(E, { ...d, onClick: o })
-  ] }) : /* @__PURE__ */ x(M, { children: [
-    /* @__PURE__ */ x(I, { height: g, children: [
-      /* @__PURE__ */ n(O, { src: $, height: `${g}px`, width: y }),
-      i && /* @__PURE__ */ n(k, { variant: "icon", onClick: r, color: c, children: /* @__PURE__ */ n(X, {}) })
+  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(
+      E,
+      {
+        icon: /* @__PURE__ */ t(H, {}),
+        ...d,
+        onClick: o ? b : void 0
+      }
+    )
+  ] }) : /* @__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__ */ n(R, { children: /* @__PURE__ */ n(W, { ...z, placeholder: "Search..." }) }),
-    /* @__PURE__ */ x(Y, { width: u, loggedIn: !!t, children: [
-      /* @__PURE__ */ n(L, { visible: !!t, ref: _, children: /* @__PURE__ */ n(
-        q,
+    /* @__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__ */ n(E, { ...d, onClick: o }),
-          label: "Welcome, User"
+          component: /* @__PURE__ */ t(
+            E,
+            {
+              icon: /* @__PURE__ */ t(H, {}),
+              ...d,
+              onClick: o ? b : void 0
+            }
+          ),
+          label: `Hi, ${r}!`
         }
       ) }),
-      /* @__PURE__ */ n(L, { visible: !t, ref: A, children: /* @__PURE__ */ n(k, { id: "loginButtonContainer", onClick: s, children: "Log In" }) })
+      /* @__PURE__ */ t(_, { visible: !n, ref: U, children: /* @__PURE__ */ t(M, { id: "loginButtonContainer", onClick: j, children: "Log In" }) })
     ] })
   ] });
 };
 export {
-  le 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;

package/Button/Button.js

@@ -5,35 +5,35 @@ import { m as X } from "../.chunks/memoTheme.js";
 import { c as Y } from "../.chunks/createSimplePaletteValueFilter.js";
 import { B as S } from "../.chunks/ButtonBase.js";
 import { i as Z } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as f } from "../.chunks/emotion-react.browser.esm.js";
-import n from "../theme.js";
+import { c as x } from "../.chunks/emotion-react.browser.esm.js";
+import r from "../theme.js";
 function oo(o) {
   return _("MuiButton", o);
 }
 const u = A("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), R = /* @__PURE__ */ g.createContext({});
 process.env.NODE_ENV !== "production" && (R.displayName = "ButtonGroupContext");
-const E = /* @__PURE__ */ g.createContext(void 0);
-process.env.NODE_ENV !== "production" && (E.displayName = "ButtonGroupButtonContext");
+const N = /* @__PURE__ */ g.createContext(void 0);
+process.env.NODE_ENV !== "production" && (N.displayName = "ButtonGroupButtonContext");
 const to = (o) => {
   const {
-    color: a,
-    disableElevation: r,
+    color: n,
+    disableElevation: a,
     fullWidth: e,
     size: i,
-    variant: s,
-    classes: p
-  } = o, y = {
-    root: ["root", s, `${s}${d(a)}`, `size${d(i)}`, `${s}Size${d(i)}`, `color${d(a)}`, r && "disableElevation", e && "fullWidth"],
+    variant: p,
+    classes: s
+  } = o, f = {
+    root: ["root", p, `${p}${d(n)}`, `size${d(i)}`, `${p}Size${d(i)}`, `color${d(n)}`, a && "disableElevation", e && "fullWidth"],
     label: ["label"],
     startIcon: ["icon", "startIcon", `iconSize${d(i)}`],
     endIcon: ["icon", "endIcon", `iconSize${d(i)}`]
-  }, B = Q(y, oo, p);
+  }, $ = Q(f, oo, s);
   return {
-    ...p,
+    ...s,
     // forward the focused, disabled, etc. classes to the ButtonBase
-    ...B
+    ...$
   };
-}, N = [{
+}, E = [{
   props: {
     size: "small"
   },
@@ -64,16 +64,16 @@ const to = (o) => {
   shouldForwardProp: (o) => q(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: a
     } = o;
-    return [a.root, a[r.variant], a[`${r.variant}${d(r.color)}`], a[`size${d(r.size)}`], a[`${r.variant}Size${d(r.size)}`], r.color === "inherit" && a.colorInherit, r.disableElevation && a.disableElevation, r.fullWidth && a.fullWidth];
+    return [n.root, n[a.variant], n[`${a.variant}${d(a.color)}`], n[`size${d(a.size)}`], n[`${a.variant}Size${d(a.size)}`], a.color === "inherit" && n.colorInherit, a.disableElevation && n.disableElevation, a.fullWidth && n.fullWidth];
   }
 })(X(({
   theme: o
 }) => {
-  const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], r = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
+  const n = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], a = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
   return {
     ...o.typography.button,
     minWidth: 64,
@@ -165,10 +165,10 @@ const to = (o) => {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
+        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : n,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : r,
+            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
             "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette.text.primary, o.palette.action.hoverOpacity),
             "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette.text.primary, o.palette.action.hoverOpacity)
           }
@@ -259,11 +259,11 @@ const to = (o) => {
 })), ao = c("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: a
     } = o;
-    return [a.startIcon, a[`iconSize${d(r.size)}`]];
+    return [n.startIcon, n[`iconSize${d(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -276,15 +276,15 @@ const to = (o) => {
     style: {
       marginLeft: -2
     }
-  }, ...N]
+  }, ...E]
 }), no = c("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: r
+      ownerState: a
     } = o;
-    return [a.endIcon, a[`iconSize${d(r.size)}`]];
+    return [n.endIcon, n[`iconSize${d(a.size)}`]];
   }
 })({
   display: "inherit",
@@ -297,59 +297,59 @@ const to = (o) => {
     style: {
       marginRight: -2
     }
-  }, ...N]
-}), T = /* @__PURE__ */ g.forwardRef(function(a, r) {
-  const e = g.useContext(R), i = g.useContext(E), s = J(e, a), p = K({
-    props: s,
+  }, ...E]
+}), T = /* @__PURE__ */ g.forwardRef(function(n, a) {
+  const e = g.useContext(R), i = g.useContext(N), p = J(e, n), s = K({
+    props: p,
     name: "MuiButton"
   }), {
-    children: y,
-    color: B = "primary",
+    children: f,
+    color: $ = "primary",
     component: w = "button",
     className: P,
-    disabled: C = !1,
+    disabled: m = !1,
     disableElevation: W = !1,
-    disableFocusRipple: m = !1,
+    disableFocusRipple: C = !1,
     endIcon: h,
     focusVisibleClassName: V,
     fullWidth: M = !1,
     size: j = "medium",
     startIcon: I,
     type: k,
-    variant: G = "text",
-    ...L
-  } = p, x = {
-    ...p,
-    color: B,
+    variant: F = "text",
+    ...G
+  } = s, y = {
+    ...s,
+    color: $,
     component: w,
-    disabled: C,
+    disabled: m,
     disableElevation: W,
-    disableFocusRipple: m,
+    disableFocusRipple: C,
     fullWidth: M,
     size: j,
     type: k,
-    variant: G
-  }, b = to(x), F = I && /* @__PURE__ */ l(ao, {
+    variant: F
+  }, b = to(y), L = I && /* @__PURE__ */ l(ao, {
     className: b.startIcon,
-    ownerState: x,
+    ownerState: y,
     children: I
   }), D = h && /* @__PURE__ */ l(no, {
     className: b.endIcon,
-    ownerState: x,
+    ownerState: y,
     children: h
   }), U = i || "";
   return /* @__PURE__ */ H(ro, {
-    ownerState: x,
+    ownerState: y,
     className: O(e.className, b.root, P, U),
     component: w,
-    disabled: C,
-    focusRipple: !m,
+    disabled: m,
+    focusRipple: !C,
     focusVisibleClassName: O(b.focusVisible, V),
-    ref: r,
+    ref: a,
     type: k,
-    ...L,
+    ...G,
     classes: b,
-    children: [F, y, D]
+    children: [L, f, D]
   });
 });
 process.env.NODE_ENV !== "production" && (T.propTypes = {
@@ -446,84 +446,84 @@ process.env.NODE_ENV !== "production" && (T.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const $ = c(T)`
+const B = c(T)`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
-    color: ${n.colors.black};
+    color: ${r.colors.black};
     display: flex;
     justify-content: center;
     align-items: center;
   }
-`, eo = c($)`
-  background-color: ${n.colors.green};
+`, eo = c(B)`
+  background-color: ${r.colors.green};
   border-radius: 0;
   height: 2.5rem;
   border: 2px solid transparent;
-  color: ${n.colors.white};
+  color: ${r.colors.white};
   transition: 313ms all ease-in;
   border-radius: 32px;
   font-weight: 400;
   padding: 0.75rem 2rem;
   font-size: 1rem;
-  box-shadow: ${n.boxShadows.gray63};
+  box-shadow: ${r.boxShadows.gray63};
   &:hover,
   :focus-visible {
-    background-color: ${n.colors.darkGreen};
-    box-shadow: ${n.boxShadows.black63};
+    background-color: ${r.colors.darkGreen};
+    box-shadow: ${r.boxShadows.black63};
   }
   &:disabled {
-    background-color: ${n.colors.darkGreen};
+    background-color: ${r.colors.darkGreen};
   }
-`, io = c($)`
-  color: ${n.colors.black};
-  border: 3px solid ${n.colors.blue};
+`, io = c(B)`
+  color: ${r.colors.black};
+  border: 3px solid ${r.colors.blue};
   padding: 0.5rem 2rem;
-`, z = c($)(({ width: o = "114px" }) => ({
-  ...f`
+`, z = c(B)(({ width: o = "114px" }) => ({
+  ...x`
     box-sizing: border-box;
-    background-color: ${n.colors.bibiBlue};
+    background-color: ${r.colors.bibiBlue};
     border-radius: 0;
     height: 47px;
     width: ${o};
     border: 2px solid transparent;
-    color: ${n.colors.white};
+    color: ${r.colors.white};
     transition: 108ms all ease-in;
     font-weight: 500;
     padding: 0;
     font-size: 19px;
     &:hover,
     :focus-visible {
-      background-color: ${n.colors.bibiBlueHover};
+      background-color: ${r.colors.bibiBlueHover};
     }
   `
 })), so = c(z)(({ active: o }) => ({
-  ...f`
-    background-color: ${o && n.colors.white};
-    color: ${o && n.colors.bibiBlue};
+  ...x`
+    background-color: ${o && r.colors.white};
+    color: ${o && r.colors.bibiBlue};
     &:hover,
     :focus-visible {
-      background-color: ${n.colors.white};
-      color: ${n.colors.bibiBlue};
+      background-color: ${r.colors.white};
+      color: ${r.colors.bibiBlue};
     }
   `
 })), lo = c(z)(() => ({
-  ...f`
-    background-color: ${n.colors.white};
-    color: ${n.colors.bibiBlue};
+  ...x`
+    background-color: ${r.colors.white};
+    color: ${r.colors.bibiBlue};
     &:hover,
     :focus-visible {
-      background-color: ${n.colors.bibiBlue};
-      border: 2px solid ${n.colors.white};
-      color: ${n.colors.white};
+      background-color: ${r.colors.bibiBlue};
+      border: 2px solid ${r.colors.white};
+      color: ${r.colors.white};
     }
   `
 })), co = c(S)`
   border-radius: 8px;
 `, po = c(S, {
   shouldForwardProp: (o) => typeof o == "string" && Z(o)
-})(({ size: o, color: a, highlightColor: r }) => ({
-  ...f`
+})(({ size: o, color: n, highlightColor: a }) => ({
+  ...x`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -533,26 +533,44 @@ const $ = c(T)`
     &:hover,
     :focus-visible {
       svg {
-        filter: drop-shadow(0 0 6px ${r}) drop-shadow(0 0 6px ${r})
-          drop-shadow(0 0 6px ${r}) drop-shadow(0 0 6px ${r});
+        filter: drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a})
+          drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a});
       }
     }
 
     svg {
       transition: 313ms all ease-in-out;
-      fill: ${a};
+      fill: ${n};
       width: ${o}px;
       height: ${o}px;
     }
   `
+})), uo = c(B)(({ active: o }) => ({
+  ...x`
+    box-sizing: border-box;
+    background-color: ${o ? r.colors.black : r.colors.white};
+    height: 28px;
+    border-radius: 18px;
+    padding: 0 29px;
+    border: 2px solid ${o ? "transparent" : r.colors.black};
+    color: ${o ? r.colors.white : r.colors.black};
+    transition: 108ms all ease-in;
+    font-weight: 500;
+
+    &:hover,
+    :focus-visible {
+      background-color: ${o ? r.colors.charcoal : r.colors.gray2};
+    }
+  `
 })), So = ({
   variant: o = 1,
-  size: a = 50,
-  color: r = n.colors.darkGreen,
-  highlightColor: e = n.colors.dandelion,
+  size: n = 50,
+  color: a = r.colors.darkGreen,
+  highlightColor: e = r.colors.dandelion,
   children: i,
+  active: p,
   ...s
-}) => o === "bibi" ? /* @__PURE__ */ l(z, { ...s, children: i }) : o === "bibiOutlined" ? /* @__PURE__ */ l(so, { ...s, children: i }) : o === "bibiInverse" ? /* @__PURE__ */ l(lo, { ...s, children: i }) : o === "unstyled" ? /* @__PURE__ */ l(co, { ...s, children: i }) : o === 2 ? /* @__PURE__ */ l(io, { ...s, children: /* @__PURE__ */ l("span", { children: i }) }) : o === "icon" ? /* @__PURE__ */ l(po, { ...{ size: a, color: r, highlightColor: e }, ...s, children: i }) : /* @__PURE__ */ l(eo, { ...s, children: /* @__PURE__ */ l("span", { children: i }) });
+}) => o === "bibi" ? /* @__PURE__ */ l(z, { ...s, children: i }) : o === "bibiOutlined" ? /* @__PURE__ */ l(so, { ...s, children: i }) : o === "bibiInverse" ? /* @__PURE__ */ l(lo, { ...s, children: i }) : o === "unstyled" ? /* @__PURE__ */ l(co, { ...s, children: i }) : o === 2 ? /* @__PURE__ */ l(io, { ...s, children: /* @__PURE__ */ l("span", { children: i }) }) : o === "icon" ? /* @__PURE__ */ l(po, { className: "jcIconButton", ...{ size: n, color: a, highlightColor: e }, ...s, children: i }) : o === "filter" ? /* @__PURE__ */ l(uo, { className: "jcFilterButton", active: p, ...s, children: i }) : /* @__PURE__ */ l(eo, { ...s, children: /* @__PURE__ */ l("span", { children: i }) });
 export {
   So as Button,
   So as default