@xola/ui-kit 3.4.6 → 3.5.0

package/build/components/DatePicker/UpcomingDatePicker.js

@@ -1,11 +1,11 @@
-import { jsxs as n, jsx as l } from "react/jsx-runtime";
-import c from "clsx";
-import t from "dayjs";
-const f = ({ value: o, upcomingDates: r, onChange: d, onMonthChange: i }) => /* @__PURE__ */ n("div", { className: "rounded-l-lg border-r border-gray pt-8", children: [
-  /* @__PURE__ */ l("p", { className: "mb-2 px-6 text-lg font-bold", children: "Upcoming" }),
-  (r == null ? void 0 : r.length) > 0 ? /* @__PURE__ */ l("div", { className: "mt-5", children: r == null ? void 0 : r.map((e) => {
-    const m = t(e).isSame(t(o), "day"), s = t(e).format();
-    return /* @__PURE__ */ l(
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import l from "dayjs";
+import c from "../../helpers/classnames.js";
+const x = ({ value: o, upcomingDates: r, onChange: d, onMonthChange: i }) => /* @__PURE__ */ b("div", { className: "rounded-l-lg border-r border-gray pt-8", children: [
+  /* @__PURE__ */ t("p", { className: "mb-2 px-6 text-lg font-bold", children: "Upcoming" }),
+  (r == null ? void 0 : r.length) > 0 ? /* @__PURE__ */ t("div", { className: "mt-5", children: r == null ? void 0 : r.map((e) => {
+    const m = l(e).isSame(l(o), "day"), n = l(e).format();
+    return /* @__PURE__ */ t(
       "div",
       {
         className: c(
@@ -13,15 +13,15 @@ const f = ({ value: o, upcomingDates: r, onChange: d, onMonthChange: i }) => /*
           "rounded border border-gray py-3 hover:border-blue hover:bg-blue hover:text-white",
           { "border-blue bg-blue text-white": m }
         ),
-        onClick: (b) => {
-          d(e, {}, b), i(e);
+        onClick: (s) => {
+          d(e, {}, s), i(e);
         },
-        children: t(e).format("ddd DD MMMM")
+        children: l(e).format("ddd DD MMMM")
       },
-      s
+      n
     );
-  }) }) : /* @__PURE__ */ l("div", { className: "mx-6 mt-7 max-w-40 items-center justify-center rounded bg-yellow-lighter p-3", children: "There is no future availability for this product." })
+  }) }) : /* @__PURE__ */ t("div", { className: "mx-6 mt-7 max-w-40 items-center justify-center rounded bg-yellow-lighter p-3", children: "There is no future availability for this product." })
 ] });
 export {
-  f as UpcomingDatePicker
+  x as UpcomingDatePicker
 };

package/build/components/Dot/Dot.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import a from "clsx";
+import a from "../../helpers/classnames.js";
 const i = {
   primary: "bg-primary",
   secondary: "bg-secondary",
@@ -12,11 +12,11 @@ const i = {
   medium: "h-1.5 w-1.5",
   large: "h-2 w-2",
   xlarge: "h-8 w-8"
-}, g = ({ color: r = "primary", size: s = "medium", className: e, ...n }) => /* @__PURE__ */ o(
+}, g = ({ color: r = "primary", size: n = "medium", className: s, ...e }) => /* @__PURE__ */ o(
   "span",
   {
-    className: a("ui-dot", "inline-block rounded-full text-white", i[r], c[s], e),
-    ...n
+    className: a("ui-dot", "inline-block rounded-full text-white", i[r], c[n], s),
+    ...e
   }
 );
 export {

package/build/components/Drawer.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import { Transition as o, Dialog as s } from "@headlessui/react";
-import l from "clsx";
 import { forwardRef as v, Fragment as m } from "react";
 import { isIosBrowser as g } from "../helpers/browser.js";
+import l from "../helpers/classnames.js";
 import { useViewportHeight as y } from "../hooks/useViewportHeight.js";
 import { Button as b } from "./Buttons/Button.js";
 import { CloseIcon as N } from "../icons/src/CloseIcon.js";
@@ -18,8 +18,8 @@ const T = {
     isOpen: i = !1,
     title: f,
     size: u = "medium",
-    content: x,
-    sideIndent: h = 0,
+    content: h,
+    sideIndent: x = 0,
     position: r = "right",
     classNames: t = {},
     onClose: a
@@ -66,7 +66,7 @@ const T = {
                 "div",
                 {
                   style: {
-                    [r === "right" ? "right" : "left"]: `${h ?? 0}px`
+                    [r === "right" ? "right" : "left"]: `${x ?? 0}px`
                   },
                   className: l("fixed inset-y-0 flex max-w-full", t.dialogContent),
                   children: /* @__PURE__ */ e(
@@ -91,7 +91,7 @@ const T = {
                             ),
                             children: [
                               /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(s.Title, { children: f }) }),
-                              /* @__PURE__ */ e("div", { className: l("relative mt-3 flex-1", t.content), children: x })
+                              /* @__PURE__ */ e("div", { className: l("relative mt-3 flex-1", t.content), children: h })
                             ]
                           }
                         ),

package/build/components/Forms/BaseInput.js

@@ -1,7 +1,7 @@
-import { jsxs as x, jsx as s } from "react/jsx-runtime";
-import y from "clsx";
+import { jsxs as y, jsx as s } from "react/jsx-runtime";
 import { isString as i, isEmpty as l } from "lodash-es";
 import { forwardRef as u } from "react";
+import x from "../../helpers/classnames.js";
 import { Dot as h } from "../Dot/Dot.js";
 const k = {
   small: "px-3 py-1.5 text-sm leading-sm",
@@ -14,12 +14,12 @@ const k = {
       let e = r;
       return a && (e = e.replace(new RegExp(`^${a}`), "")), o && (e = e.replace(new RegExp(`${o}$`), "")), e.replaceAll(/[^.\S]+/g, "").replace(/[\p{Sc}]/u, "");
     }, b = i(r) ? l(f()) : l(r == null ? void 0 : r.toString());
-    return /* @__PURE__ */ x("div", { className: "relative flex w-full items-center", children: [
+    return /* @__PURE__ */ y("div", { className: "relative flex w-full items-center", children: [
       /* @__PURE__ */ s(
         t,
         {
           ref: m,
-          className: y(
+          className: x(
             "w-full rounded text-gray-darker placeholder-gray-dark hover:placeholder-gray-darker disabled:text-gray",
             "border hover:border-black hover:bg-gray-lighter focus:text-black active:text-black disabled:bg-gray-lighter",
             k[d],

package/build/components/Forms/Checkbox.js

@@ -1,10 +1,10 @@
-import { jsxs as s, jsx as c } from "react/jsx-runtime";
-import e from "clsx";
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import e from "../../helpers/classnames.js";
 import { useId as d } from "../../hooks/useId.js";
-import n from "./Checkbox.module.css.js";
+import s from "./Checkbox.module.css.js";
 const m = ({ label: r, classNames: o = {}, className: i, ...l }) => {
   const t = d("checkbox");
-  return /* @__PURE__ */ s("div", { className: e("ui-checkbox", i, "flex items-center"), children: [
+  return /* @__PURE__ */ n("div", { className: e("ui-checkbox", i, "flex items-center"), children: [
     /* @__PURE__ */ c(
       "input",
       {
@@ -12,7 +12,7 @@ const m = ({ label: r, classNames: o = {}, className: i, ...l }) => {
         className: e(
           "ui-checkbox-input",
           o.checkbox,
-          n.checkbox,
+          s.checkbox,
           "h-4 w-4 rounded !border-primary text-white transition-colors disabled:border-none disabled:bg-gray-light disabled:text-gray-light"
         ),
         ...l,

package/build/components/Forms/ComboBox.js

@@ -1,25 +1,25 @@
 import { jsx as o } from "react/jsx-runtime";
-import i from "clsx";
-import { useRef as c, useState as s, useEffect as m } from "react";
-import u, { components as f } from "react-select";
-import d from "react-select/creatable";
+import { useRef as i, useState as c, useEffect as s } from "react";
+import m, { components as u } from "react-select";
+import f from "react-select/creatable";
+import d from "../../helpers/classnames.js";
 import { Tooltip as b } from "../Tooltip.js";
 /* empty css             */
 const R = ({ isCreatable: e = !1, isError: t, className: l, ...n }) => /* @__PURE__ */ o(
-  e ? d : u,
+  e ? f : m,
   {
-    className: i("ui-combo-box", t && "border-danger", l),
+    className: d("ui-combo-box", t && "border-danger", l),
     classNamePrefix: "ui-combo-box",
     components: e ? {
       IndicatorsContainer: () => null,
       Menu: () => null,
-      MultiValueLabel: x
+      MultiValueLabel: h
     } : void 0,
     ...n
   }
-), { MultiValueLabel: p } = f, x = (e) => {
-  const t = c(null), [l, n] = s(!0);
-  return m(() => {
+), { MultiValueLabel: p } = u, h = (e) => {
+  const t = i(null), [l, n] = c(!0);
+  return s(() => {
     var r;
     if ((r = t.current) != null && r.offsetParent) {
       const a = t.current.offsetWidth > t.current.offsetParent.clientWidth;

package/build/components/Forms/FormGroup.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
-import p from "clsx";
-const i = ({ className: r, ...o }) => /* @__PURE__ */ m("div", { className: p("ui-form-group", r, "mb-4"), ...o });
+import p from "../../helpers/classnames.js";
+const s = ({ className: r, ...o }) => /* @__PURE__ */ m("div", { className: p("ui-form-group", r, "mb-4"), ...o });
 export {
-  i as FormGroup
+  s as FormGroup
 };

package/build/components/Forms/InlineValuePopover.js

@@ -1,13 +1,13 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import i from "clsx";
 import { useRef as P } from "react";
-import { Popover as l } from "../Popover/Popover.js";
+import i from "../../helpers/classnames.js";
+import { Popover as f } from "../Popover/Popover.js";
 import { ValuePopoverText as g } from "./ValuePopoverText.js";
 import { DownArrowIcon as j } from "../../icons/src/DownArrowIcon.js";
 const D = ({
-  text: f,
-  isOpen: x = !1,
-  showArrow: b = !0,
+  text: l,
+  isOpen: b = !1,
+  showArrow: x = !0,
   autoSelectOnClick: c = !1,
   children: h,
   error: p = null,
@@ -23,7 +23,7 @@ const D = ({
       n && (n.focus(), c && n.select());
     }, 0), o == null || o(I);
   };
-  return /* @__PURE__ */ d(l, { visible: x, className: "", onClickOutside: v, ...m, children: [
+  return /* @__PURE__ */ d(f, { visible: b, className: "", onClickOutside: v, ...m, children: [
     /* @__PURE__ */ d(
       "span",
       {
@@ -34,12 +34,12 @@ const D = ({
         ),
         onClick: w,
         children: [
-          /* @__PURE__ */ e("span", { className: i("border-b border-b-black font-bold text-black", r == null ? void 0 : r.textField), children: /* @__PURE__ */ e(g, { value: f, error: p }) }),
-          b && /* @__PURE__ */ e(j, { size: "medium" })
+          /* @__PURE__ */ e("span", { className: i("border-b border-b-black font-bold text-black", r == null ? void 0 : r.textField), children: /* @__PURE__ */ e(g, { value: l, error: p }) }),
+          x && /* @__PURE__ */ e(j, { size: "medium" })
         ]
       }
     ),
-    /* @__PURE__ */ e(l.Content, { children: /* @__PURE__ */ e("div", { ref: t, className: i("p-2", r == null ? void 0 : r.children), children: h }) })
+    /* @__PURE__ */ e(f.Content, { children: /* @__PURE__ */ e("div", { ref: t, className: i("p-2", r == null ? void 0 : r.children), children: h }) })
   ] });
 };
 export {

package/build/components/Forms/Input.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
-import s from "clsx";
-import { forwardRef as a } from "react";
+import { forwardRef as n } from "react";
+import a from "../../helpers/classnames.js";
 import { BaseInput as e } from "./BaseInput.js";
-const n = a(({ className: t, type: r = "text", value: o, ...p }, m) => /* @__PURE__ */ i(e, { ref: m, as: "input", className: s("ui-input", t), type: r, value: o, ...p }));
-n.displayName = "Input";
+const s = n(({ className: t, type: r = "text", value: o, ...p }, m) => /* @__PURE__ */ i(e, { ref: m, as: "input", className: a("ui-input", t), type: r, value: o, ...p }));
+s.displayName = "Input";
 export {
-  n as Input
+  s as Input
 };

package/build/components/Forms/Label.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import r from "clsx";
-const m = ({ isDisabled: t = !1, isError: e = !1, className: l, ...a }) => /* @__PURE__ */ o(
+import r from "../../helpers/classnames.js";
+const s = ({ isDisabled: t = !1, isError: e = !1, className: l, ...a }) => /* @__PURE__ */ o(
   "label",
   {
     className: r(
@@ -13,5 +13,5 @@ const m = ({ isDisabled: t = !1, isError: e = !1, className: l, ...a }) => /* @_
   }
 );
 export {
-  m as Label
+  s as Label
 };

package/build/components/Forms/RangeSlider.js

@@ -1,35 +1,35 @@
 import { jsx as d } from "react/jsx-runtime";
-import u from "clsx";
-import g from "nouislider-react";
+import u from "nouislider-react";
 /* empty css                                                      */
+import g from "../../helpers/classnames.js";
 /* empty css                */
 const j = ({
   values: t,
   min: o,
   max: e,
   isDisabled: i = !1,
-  shouldConnectHandles: s = !1,
-  step: a = 1,
-  isTooltipEnabled: l = !0,
-  tooltipCustomFormatter: m = null,
-  tooltipSuffix: n,
+  shouldConnectHandles: a = !1,
+  step: m = 1,
+  isTooltipEnabled: n = !0,
+  tooltipCustomFormatter: s = null,
+  tooltipSuffix: l,
   className: p,
   onChange: f
 }) => {
-  const c = m ?? t.map(() => ({
+  const c = s ?? t.map(() => ({
     from: (r) => r,
-    to: (r) => `${Math.round(r)}${n ?? ""}`
+    to: (r) => `${Math.round(r)}${l ?? ""}`
   }));
   return /* @__PURE__ */ d(
-    g,
+    u,
     {
-      className: u("ui-range-slider", p),
-      connect: s,
+      className: g("ui-range-slider", p),
+      connect: a,
       disabled: i,
       start: t,
       range: { min: o, max: e },
-      step: a,
-      tooltips: l ? c : !1,
+      step: m,
+      tooltips: n ? c : !1,
       onChange: f
     }
   );

package/build/components/Forms/Switch.js

@@ -1,7 +1,7 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { Switch as s } from "@headlessui/react";
-import n from "clsx";
 import { noop as m } from "lodash-es";
+import e from "../../helpers/classnames.js";
 const i = {
   large: {
     parent: "h-6 w-11",
@@ -18,38 +18,38 @@ const i = {
     inner: "h-2 w-2",
     translate: "translate-x-2"
   }
-}, p = ({ isChecked: r = !1, size: t = "medium", disabled: a, className: c, onChange: u }) => /* @__PURE__ */ e(
+}, p = ({ isChecked: n = !1, size: r = "medium", disabled: a, className: c, onChange: u }) => /* @__PURE__ */ t(
   s,
   {
-    checked: r,
+    checked: n,
     disabled: a,
-    className: n(
+    className: e(
       "ui-switch",
-      r ? "bg-primary disabled:bg-gray-light" : "bg-gray disabled:bg-gray-light",
+      n ? "bg-primary disabled:bg-gray-light" : "bg-gray disabled:bg-gray-light",
       "relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
-      i[t].parent,
+      i[r].parent,
       c
     ),
     onChange: u ?? m,
-    children: /* @__PURE__ */ e(
+    children: /* @__PURE__ */ t(
       "span",
       {
-        className: n(
-          r ? i[t].translate : "translate-x-0",
+        className: e(
+          n ? i[r].translate : "translate-x-0",
           "ui-switch-inner pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
-          i[t].inner
+          i[r].inner
         )
       }
     )
   }
-), o = ({ children: r, className: t }) => /* @__PURE__ */ e(s.Group, { as: "div", className: n("ui-switch-group", "inline-flex items-center", t), children: r });
+), o = ({ children: n, className: r }) => /* @__PURE__ */ t(s.Group, { as: "div", className: e("ui-switch-group", "inline-flex items-center", r), children: n });
 o.displayName = "Switch.Group";
-const l = ({ direction: r = "left", children: t, className: a }) => /* @__PURE__ */ e(
+const l = ({ direction: n = "left", children: r, className: a }) => /* @__PURE__ */ t(
   s.Label,
   {
     as: "span",
-    className: n("ui-switch-label", "cursor-pointer", r === "left" ? "mr-2" : "ml-2", a),
-    children: t
+    className: e("ui-switch-label", "cursor-pointer", n === "left" ? "mr-2" : "ml-2", a),
+    children: r
   }
 );
 l.displayName = "Switch.Label";

package/build/components/Forms/Textarea.js

@@ -1,10 +1,10 @@
 import { jsx as m } from "react/jsx-runtime";
-import i from "clsx";
-import { forwardRef as p } from "react";
+import { forwardRef as x } from "react";
 import f from "react-textarea-autosize";
+import i from "../../helpers/classnames.js";
 import { BaseInput as s } from "./BaseInput.js";
-const n = p(
-  ({ className: a, value: r, shouldAutoSize: x = !1, rows: t = 2, ...e }, o) => x ? (
+const n = x(
+  ({ className: a, value: r, shouldAutoSize: p = !1, rows: t = 2, ...e }, o) => p ? (
     // TextareaAutosize has a few special props like minRows and maxRows instead of rows field so using rows field to feed the minRows prop. See full list here https://github.com/Andarist/react-textarea-autosize?tab=readme-ov-file#props
     /* @__PURE__ */ m(
       s,

package/build/components/HeaderToolbar.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import o from "clsx";
+import o from "../helpers/classnames.js";
 import { Search as c } from "./Search.js";
 import { Breadcrumb as d } from "./Breadcrumb.js";
 const l = ({ classNames: r, children: e }) => /* @__PURE__ */ a(

package/build/components/ImageUpload.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as e, Fragment as B } from "react/jsx-runtime";
-import g from "clsx";
 import { useRef as R, useState as U } from "react";
+import g from "../helpers/classnames.js";
 import { Button as w } from "./Buttons/Button.js";
 import { SubmitButton as u } from "./Buttons/SubmitButton.js";
 import { Logo as x } from "./Logo.js";

package/build/components/Key.js

@@ -1,18 +1,18 @@
 import { jsx as i } from "react/jsx-runtime";
-import l from "clsx";
 import { isOSX as t } from "../helpers/browser.js";
-const s = {
+import c from "../helpers/classnames.js";
+const l = {
   cmd: t ? "⌘" : "ctrl",
   option: t ? "⌥" : "win",
   ctrl: "ctrl",
   up: "↑",
   down: "↓"
-}, x = ({ char: e, className: n, ...o }) => {
-  const r = s[e] ?? e;
+}, y = ({ char: e, className: n, ...o }) => {
+  const r = l[e] ?? e;
   return /* @__PURE__ */ i(
     "div",
     {
-      className: l(
+      className: c(
         "ui-key",
         "no-translate inline-flex h-5 items-center justify-center rounded bg-gray-lighter px-2 py-1 text-xs font-semibold text-gray",
         r.length === 1 && "w-5",
@@ -24,5 +24,5 @@ const s = {
   );
 };
 export {
-  x as Key
+  y as Key
 };

package/build/components/Logo.js

@@ -1,10 +1,10 @@
-import { jsx as l } from "react/jsx-runtime";
-import n from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import r from "../helpers/classnames.js";
 const o = {
   small: "w-10 h-10",
   medium: "w-16 h-16",
   large: "w-20 h-20"
-}, r = ({ size: s = "small", className: e, ...m }) => /* @__PURE__ */ l("img", { className: n("ui-logo", e, "inline-block rounded object-cover", o[s]), ...m }), i = Object.assign(r, { sizes: o });
+}, t = ({ size: e = "small", className: s, ...m }) => /* @__PURE__ */ n("img", { className: r("ui-logo", s, "inline-block rounded object-cover", o[e]), ...m }), l = Object.assign(t, { sizes: o });
 export {
-  i as Logo
+  l as Logo
 };

package/build/components/Modal.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
 import { Transition as s, Dialog as d } from "@headlessui/react";
-import o from "clsx";
 import { Fragment as m } from "react";
+import o from "../helpers/classnames.js";
 import { CloseIcon as v } from "../icons/src/CloseIcon.js";
 const y = {
   small: "max-w-100",

package/build/components/Popover/Popover.js

@@ -1,28 +1,22 @@
 import { jsx as m } from "react/jsx-runtime";
 import d from "@tippyjs/react";
-import u from "clsx";
 import { Children as y, forwardRef as g, useState as C } from "react";
+import u from "../../helpers/classnames.js";
 import { followCursor as v } from "tippy.js";
 import "tippy.js/dist/border.css";
 import "tippy.js/dist/tippy.css";
-import { getChildrenByType as x } from "../../helpers/children.js";
-import T from "./Popover.module.css.js";
-import h from "./PopoverScroll.module.css.js";
+import { getChildrenByType as T } from "../../helpers/children.js";
+import h from "./Popover.module.css.js";
+import x from "./PopoverScroll.module.css.js";
 const z = ({ isLazy: t = !0, skidding: o = 0, distance: r = 10, children: n, className: s, ...e }) => {
-  const p = x(n, l), a = y.toArray(n).filter((i) => i.type !== l);
+  const p = T(n, l), a = y.toArray(n).filter((i) => i.type !== l);
   return /* @__PURE__ */ m(
     t ? f : d,
     {
       interactive: !0,
       zIndex: 50,
       content: p,
-      className: u(
-        "ui-popover",
-        h,
-        T.main,
-        "!rounded-lg !border-gray-light shadow-xl",
-        s
-      ),
+      className: u("ui-popover", x, h.main, "!rounded-lg !border-gray-light shadow-xl", s),
       plugins: [v],
       offset: [o ?? 0, r ?? 10],
       ...e,

package/build/components/Popover/PopoverList.js

@@ -1,28 +1,19 @@
 import { jsx as d } from "react/jsx-runtime";
-import g from "clsx";
 import v, { Children as h } from "react";
+import g from "../../helpers/classnames.js";
 import { Popover as u } from "./Popover.js";
 import f from "./PopoverScroll.module.css.js";
-const y = ({ placement: n = "bottom", children: i, className: s, ...o }) => {
-  const e = h.toArray(i), r = e.filter((t) => t.type !== l), m = e.length - r.length, c = e.map((t, a) => t.type === l ? v.cloneElement(t, { position: a, total: m }) : null), p = /* @__PURE__ */ d(
+const y = ({ placement: l = "bottom", children: i, className: s, ...o }) => {
+  const e = h.toArray(i), r = e.filter((t) => t.type !== n), m = e.length - r.length, c = e.map((t, a) => t.type === n ? v.cloneElement(t, { position: a, total: m }) : null), p = /* @__PURE__ */ d(
     u.Content,
     {
       className: g(f, "ui-popover-list-content divide-y divide-solid divide-gray-lighter p-0 "),
       children: c
     }
   );
-  return /* @__PURE__ */ d(
-    u,
-    {
-      content: p,
-      placement: n,
-      className: g("ui-popover-list", "w-40", s),
-      ...o,
-      children: r
-    }
-  );
-}, l = ({
-  name: n,
+  return /* @__PURE__ */ d(u, { content: p, placement: l, className: g("ui-popover-list", "w-40", s), ...o, children: r });
+}, n = ({
+  name: l,
   isActive: i = !1,
   id: s = null,
   position: o,
@@ -32,7 +23,7 @@ const y = ({ placement: n = "bottom", children: i, className: s, ...o }) => {
   onClickItem: c,
   ...p
 }) => {
-  const t = (a) => c(a, n, s);
+  const t = (a) => c(a, l, s);
   return /* @__PURE__ */ d(
     "div",
     {
@@ -52,8 +43,8 @@ const y = ({ placement: n = "bottom", children: i, className: s, ...o }) => {
     }
   );
 };
-l.displayName = "PopoverList.Item";
-y.Item = l;
+n.displayName = "PopoverList.Item";
+y.Item = n;
 export {
   y as PopoverList
 };

package/build/components/Search.js

@@ -1,10 +1,10 @@
 import { jsxs as l, jsx as t, Fragment as re } from "react/jsx-runtime";
-import I from "clsx";
-import { useCombobox as w } from "downshift";
+import { useCombobox as I } from "downshift";
 import { debounce as le } from "lodash-es";
 import { useState as u, useRef as E, useEffect as K } from "react";
 import { useHotkeys as O } from "react-hotkeys-hook";
 import { isOSX as ae } from "../helpers/browser.js";
+import w from "../helpers/classnames.js";
 import { useId as R } from "../hooks/useId.js";
 import { useIsClient as ne } from "../hooks/useIsClient.js";
 import { Key as n } from "./Key.js";
@@ -31,7 +31,7 @@ const ie = le((m, h) => m(h), 500), Ie = ({
   }, [r]);
   const i = { value: r }, c = r ? [i, ...h] : [], G = ({ selectedItem: e, type: s }) => {
     var F, S;
-    s !== w.stateChangeTypes.InputBlur && s !== w.stateChangeTypes.FunctionCloseMenu && (e === i ? (d == null || d(r), (F = a.current) == null || F.blur()) : e && (p == null || p(e), (S = a.current) == null || S.blur()), _());
+    s !== I.stateChangeTypes.InputBlur && s !== I.stateChangeTypes.FunctionCloseMenu && (e === i ? (d == null || d(r), (F = a.current) == null || F.blur()) : e && (p == null || p(e), (S = a.current) == null || S.blur()), _());
   }, J = ({ inputValue: e }) => {
     const s = e ?? "";
     x(s), o && ie(o, s);
@@ -44,7 +44,7 @@ const ie = le((m, h) => m(h), 500), Ie = ({
     highlightedIndex: V,
     getItemProps: Z,
     closeMenu: _
-  } = w({
+  } = I({
     items: c,
     inputValue: r,
     onInputValueChange: J,
@@ -87,7 +87,7 @@ const ie = le((m, h) => m(h), 500), Ie = ({
           ...W({
             id: U,
             type: "text",
-            className: I(
+            className: w(
               "ui-search-input",
               "block w-full border-none pl-0 md:pl-7 text-base md:text-md text-gray-darker leading-p2 focus:ring-0",
               m
@@ -124,7 +124,7 @@ const ie = le((m, h) => m(h), 500), Ie = ({
       {
         ...Q({
           id: H,
-          className: I(
+          className: w(
             "ui-search-menu",
             "absolute top-10 divide-y divide-gray-light w-full xl:w-[590px] max-h-[75vh] border border-secondary-lighter shadow-xl mt-1 rounded overflow-auto z-20 bg-white",
             { hidden: !N }
@@ -138,7 +138,7 @@ const ie = le((m, h) => m(h), 500), Ie = ({
               children: e === i ? C ? /* @__PURE__ */ t("div", { className: "p-3 text-center", children: /* @__PURE__ */ t(ce, { size: "small" }) }) : r.length < g ? /* @__PURE__ */ t(
                 "div",
                 {
-                  className: I(
+                  className: w(
                     "cursor-pointer p-2",
                     V === s ? "bg-blue-light text-white" : ""
                   ),