@xola/ui-kit 3.4.5 → 3.5.0

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/Forms/ValuePopoverText.js

@@ -1,8 +1,8 @@
-import { jsxs as t, jsx as n } from "react/jsx-runtime";
-import { Tooltip as e } from "../Tooltip.js";
-import { WarningDiamondIcon as a } from "../../icons/build/WarningDiamondIcon.js";
-const l = ({ value: r, error: o }) => /* @__PURE__ */ t("span", { children: [
-  o ? /* @__PURE__ */ n(e, { content: o, className: "", children: /* @__PURE__ */ n("span", { children: /* @__PURE__ */ n(a, { className: "mr-1 text-danger" }) }) }) : null,
+import { jsxs as e, jsx as n } from "react/jsx-runtime";
+import { Tooltip as t } from "../Tooltip.js";
+import { WarningDiamondIcon as a } from "../../icons/src/WarningDiamondIcon.js";
+const l = ({ value: r, error: o }) => /* @__PURE__ */ e("span", { children: [
+  o ? /* @__PURE__ */ n(t, { content: o, className: "", children: /* @__PURE__ */ n("span", { children: /* @__PURE__ */ n(a, { className: "mr-1 text-danger" }) }) }) : null,
   r
 ] });
 export {

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,13 +1,13 @@
-import { jsxs as a, jsx as e, Fragment as B } from "react/jsx-runtime";
-import g from "clsx";
+import { jsxs as c, jsx as e, Fragment as B } from "react/jsx-runtime";
 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";
-import { ImageIcon as G } from "../icons/build/ImageIcon.js";
-import { TrashIcon as K } from "../icons/build/TrashIcon.js";
+import { ImageIcon as G } from "../icons/src/ImageIcon.js";
+import { TrashIcon as K } from "../icons/src/TrashIcon.js";
 const H = ({
-  src: c,
+  src: a,
   size: s = "large",
   isLoading: l = !1,
   maxSize: o = 5,
@@ -35,8 +35,8 @@ const H = ({
   }, P = () => {
     k(m + 1), v();
   }, j = typeof t == "string" ? (t == null ? void 0 : t.trim().length) > 0 : !!t, f = r ? r.trim().length > 0 : !1;
-  return /* @__PURE__ */ a("div", { className: g("flex items-center rounded bg-gray-lighter p-4", d ? "space-x-2" : "space-x-3"), children: [
-    /* @__PURE__ */ e("div", { children: c ? /* @__PURE__ */ e(x, { src: c, size: s }) : /* @__PURE__ */ e(
+  return /* @__PURE__ */ c("div", { className: g("flex items-center rounded bg-gray-lighter p-4", d ? "space-x-2" : "space-x-3"), children: [
+    /* @__PURE__ */ e("div", { children: a ? /* @__PURE__ */ e(x, { src: a, size: s }) : /* @__PURE__ */ e(
       "div",
       {
         className: g(
@@ -46,8 +46,8 @@ const H = ({
         children: /* @__PURE__ */ e(G, { size: "large", className: "text-gray" })
       }
     ) }),
-    /* @__PURE__ */ a("div", { className: "flex flex-col space-y-2", children: [
-      /* @__PURE__ */ e("div", { className: "space-x-2", children: d ? /* @__PURE__ */ a(B, { children: [
+    /* @__PURE__ */ c("div", { className: "flex flex-col space-y-2", children: [
+      /* @__PURE__ */ e("div", { className: "space-x-2", children: d ? /* @__PURE__ */ c(B, { children: [
         /* @__PURE__ */ e(
           w,
           {
@@ -60,7 +60,7 @@ const H = ({
           }
         ),
         /* @__PURE__ */ e(u, { disabled: l, isLoading: l, onClick: p, children: f ? r.trim() : "Upload New Photo" })
-      ] }) : /* @__PURE__ */ e(u, { disabled: l, isLoading: l, onClick: p, children: f ? r.trim() : c ? "Replace Photo" : "Upload New Photo" }) }),
+      ] }) : /* @__PURE__ */ e(u, { disabled: l, isLoading: l, onClick: p, children: f ? r.trim() : a ? "Replace Photo" : "Upload New Photo" }) }),
       /* @__PURE__ */ e(
         "input",
         {
@@ -74,7 +74,7 @@ const H = ({
         },
         m
       ),
-      /* @__PURE__ */ e("div", { className: "text-xs text-gray-darker", children: j ? t : /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ e("div", { className: "text-xs text-gray-darker", children: j ? t : /* @__PURE__ */ c("div", { children: [
         "Check that the image is in PNG or JPG format",
         o ? ` and does not exceed ${o}MB` : ""
       ] }) })

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,8 +1,8 @@
 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 { CloseIcon as v } from "../icons/build/CloseIcon.js";
+import o from "../helpers/classnames.js";
+import { CloseIcon as v } from "../icons/src/CloseIcon.js";
 const y = {
   small: "max-w-100",
   // 400px
@@ -18,7 +18,7 @@ const y = {
   topRight: "absolute m-4 top-0 right-0",
   bottomLeft: "absolute m-4 bottom-0 left-0",
   bottomRight: "absolute m-4 bottom-0 right-0"
-}, l = {
+}, r = {
   center: {
     enterFrom: "translate-y-4 sm:translate-y-0 sm:scale-95",
     enterTo: "translate-y-0 sm:scale-100",
@@ -52,12 +52,12 @@ const y = {
 }, g = ({
   size: a = "medium",
   position: e = "center",
-  isOpen: r = !1,
+  isOpen: l = !1,
   shouldCloseOnOutsideClick: i = !1,
   children: b,
   className: f,
   onClose: n
-}) => /* @__PURE__ */ t(s, { appear: !0, show: r, as: m, children: /* @__PURE__ */ t(d, { as: "div", className: "ui-modal fixed inset-0 z-30 overflow-y-auto", onClose: () => {
+}) => /* @__PURE__ */ t(s, { appear: !0, show: l, as: m, children: /* @__PURE__ */ t(d, { as: "div", className: "ui-modal fixed inset-0 z-30 overflow-y-auto", onClose: () => {
   i && n();
 }, children: /* @__PURE__ */ c("div", { className: "min-h-screen px-4 text-center", children: [
   /* @__PURE__ */ t(
@@ -79,11 +79,11 @@ const y = {
     {
       as: m,
       enter: o("ease-out duration-300"),
-      enterFrom: o("opacity-0", l[e].enterFrom),
-      enterTo: o("opacity-100", l[e].enterTo),
+      enterFrom: o("opacity-0", r[e].enterFrom),
+      enterTo: o("opacity-100", r[e].enterTo),
       leave: o("ease-in duration-300"),
-      leaveFrom: o("opacity-100", l[e].leaveFrom),
-      leaveTo: o("opacity-0", l[e].leaveTo),
+      leaveFrom: o("opacity-100", r[e].leaveFrom),
+      leaveTo: o("opacity-0", r[e].leaveTo),
       children: /* @__PURE__ */ c(
         "div",
         {
@@ -109,7 +109,7 @@ const y = {
       )
     }
   )
-] }) }) }), h = ({ description: a, children: e, className: r, ...i }) => /* @__PURE__ */ c(d.Title, { as: "div", className: o(r, "ui-modal-header text-center"), ...i, children: [
+] }) }) }), h = ({ description: a, children: e, className: l, ...i }) => /* @__PURE__ */ c(d.Title, { as: "div", className: o(l, "ui-modal-header text-center"), ...i, children: [
   /* @__PURE__ */ t("h3", { className: "text-2xl font-semibold leading-6 text-black", children: e }),
   a ? /* @__PURE__ */ t("p", { className: "mt-2 text-base font-normal leading-normal text-gray-darker", children: a }) : null
 ] });

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,38 +1,29 @@
 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, p = e.map((t, a) => t.type === l ? v.cloneElement(t, { position: a, total: m }) : null), c = /* @__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: p
+      children: c
     }
   );
-  return /* @__PURE__ */ d(
-    u,
-    {
-      content: c,
-      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,
   total: e,
   children: r,
   className: m,
-  onClickItem: p,
-  ...c
+  onClickItem: c,
+  ...p
 }) => {
-  const t = (a) => p(a, n, s);
+  const t = (a) => c(a, l, s);
   return /* @__PURE__ */ d(
     "div",
     {
@@ -47,13 +38,13 @@ const y = ({ placement: n = "bottom", children: i, className: s, ...o }) => {
         m
       ),
       onClick: t,
-      ...c,
+      ...p,
       children: r
     }
   );
 };
-l.displayName = "PopoverList.Item";
-y.Item = l;
+n.displayName = "PopoverList.Item";
+y.Item = n;
 export {
   y as PopoverList
 };

package/build/components/Screens/Login.js

@@ -1,13 +1,13 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { useState as C } from "react";
-import { XolaLogoSimple as j } from "../../icons/build/images/XolaLogoSimple.js";
-import { Alert as I } from "../Alert.js";
-import { Button as R } from "../Buttons/Button.js";
-import { Checkbox as F } from "../Forms/Checkbox.js";
+import { Alert as j } from "../Alert.js";
+import { Button as I } from "../Buttons/Button.js";
+import { Checkbox as R } from "../Forms/Checkbox.js";
 import { FormGroup as u } from "../Forms/FormGroup.js";
 import { Input as f } from "../Forms/Input.js";
 import { Label as p } from "../Forms/Label.js";
-import { Spinner as B } from "../Spinner.js";
+import { Spinner as F } from "../Spinner.js";
+import { XolaLogoSimple as B } from "../../icons/src/images/XolaLogoSimple.js";
 const g = {
   default: "https://files.xola.com/x2/images/login/old-photo-1554629947-334ff61d85dc.jpeg",
   x2: "https://files.xola.com/x2/images/login/x2-34fc260271ca80160c61777846784611.jpeg",
@@ -52,7 +52,7 @@ const g = {
       children: [
         /* @__PURE__ */ e("div", { className: "md:full flex h-[88%] w-full flex-col items-center justify-center space-y-8", children: /* @__PURE__ */ a("div", { className: "w-85 rounded-lg px-9 py-0 md:bg-white md:py-10", children: [
           /* @__PURE__ */ a("div", { className: "mb-12 space-y-4 md:mb-20", children: [
-            /* @__PURE__ */ e(j, { className: "mx-auto h-10 w-auto md:h-12" }),
+            /* @__PURE__ */ e(B, { className: "mx-auto h-10 w-auto md:h-12" }),
             m && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: m })
           ] }),
           /* @__PURE__ */ e("form", { onSubmit: k, children: /* @__PURE__ */ a("fieldset", { className: "space-y-6", disabled: c, children: [
@@ -89,7 +89,7 @@ const g = {
               ] })
             ] }),
             /* @__PURE__ */ e(
-              F,
+              R,
               {
                 name: "shouldRemember",
                 label: "Remember me",
@@ -97,9 +97,9 @@ const g = {
                 onChange: v
               }
             ),
-            t ? /* @__PURE__ */ e(I, { color: "danger", children: t }) : null,
-            /* @__PURE__ */ a(R, { type: "submit", className: "w-full", color: "primary", children: [
-              c ? /* @__PURE__ */ e(B, { size: "current", color: "current", className: "mr-2" }) : null,
+            t ? /* @__PURE__ */ e(j, { color: "danger", children: t }) : null,
+            /* @__PURE__ */ a(I, { type: "submit", className: "w-full", color: "primary", children: [
+              c ? /* @__PURE__ */ e(F, { size: "current", color: "current", className: "mr-2" }) : null,
               "Login"
             ] }),
             /* @__PURE__ */ e("div", { className: "mt-5 text-center text-sm", children: /* @__PURE__ */ e(

package/build/components/Search.js

@@ -1,15 +1,15 @@
 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 { SearchIcon as ce } from "../icons/build/SearchIcon.js";
 import { Key as n } from "./Key.js";
-import { Spinner as oe } from "./Spinner.js";
+import { Spinner as ce } from "./Spinner.js";
+import { SearchIcon as oe } from "../icons/src/SearchIcon.js";
 const ie = le((m, h) => m(h), 500), Ie = ({
   className: m,
   items: h = [],
@@ -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,
@@ -80,14 +80,14 @@ const ie = le((m, h) => m(h), 500), Ie = ({
   const N = (b || !A || M) && c.length > 0 && !T, se = N && !C && c.length <= 1 && r.length >= g, y = N || !$;
   return /* @__PURE__ */ l("div", { className: "ui-search relative w-full", children: [
     /* @__PURE__ */ l("div", { ...Y({ className: "w-full relative rounded-md" }), children: [
-      /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-y-0 -top-0.5 left-0 hidden items-center md:flex", children: /* @__PURE__ */ t(ce, { className: "h-4 w-4 text-gray-darker" }) }),
+      /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-y-0 -top-0.5 left-0 hidden items-center md:flex", children: /* @__PURE__ */ t(oe, { className: "h-4 w-4 text-gray-darker" }) }),
       /* @__PURE__ */ t(
         "input",
         {
           ...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 }
@@ -135,10 +135,10 @@ const ie = le((m, h) => m(h), 500), Ie = ({
             "li",
             {
               ...Z({ key: s, item: e, index: s, className: "ui-search-item" }),
-              children: e === i ? C ? /* @__PURE__ */ t("div", { className: "p-3 text-center", children: /* @__PURE__ */ t(oe, { size: "small" }) }) : r.length < g ? /* @__PURE__ */ t(
+              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" : ""
                   ),

package/build/components/Sidebar/Sidebar.Account.js

@@ -1,18 +1,18 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import m from "clsx";
-import { useRef as w, useState as d, useEffect as N } from "react";
-import { ChevronRightIcon as g } from "../../icons/build/ChevronRightIcon.js";
-import { Avatar as S } from "../Avatar.js";
+import { useRef as w, useState as m, useEffect as N } from "react";
+import d from "../../helpers/classnames.js";
+import { Avatar as g } from "../Avatar.js";
+import { ChevronRightIcon as S } from "../../icons/src/ChevronRightIcon.js";
 const j = ({
   name: n,
   description: o,
   image: h,
-  icon: x = /* @__PURE__ */ e(g, {}),
+  icon: x = /* @__PURE__ */ e(S, {}),
   isResponsive: r = !1,
   className: b,
   ...y
 }) => {
-  const t = w(null), [s, a] = d(!r), [p, u] = d(!r), v = h ?? /* @__PURE__ */ e(S, { size: "tiny", name: n });
+  const t = w(null), [s, a] = m(!r), [p, u] = m(!r), v = h ?? /* @__PURE__ */ e(g, { size: "tiny", name: n });
   return N(() => {
     if (!r) {
       a(!0), u(!0);
@@ -31,7 +31,7 @@ const j = ({
     {
       ref: t,
       type: "button",
-      className: m(
+      className: d(
         "ui-sidebar-account",
         "flex h-12 w-full cursor-pointer items-center justify-center rounded px-4 py-3 hover:bg-gray-darker",
         "xl:justify-start",
@@ -40,7 +40,7 @@ const j = ({
       ),
       ...y,
       children: [
-        p && /* @__PURE__ */ e("div", { className: m(r && "m-auto", "flex-shrink-0"), children: v }),
+        p && /* @__PURE__ */ e("div", { className: d(r && "m-auto", "flex-shrink-0"), children: v }),
         s && /* @__PURE__ */ l("div", { className: "ml-2 min-w-0 text-left", children: [
           /* @__PURE__ */ e("div", { className: "truncate text-base", children: n }),
           o && /* @__PURE__ */ e("div", { className: "truncate text-sm text-gray-dark", children: o })

package/build/components/Sidebar/Sidebar.Button.js

@@ -1,10 +1,10 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import n from "clsx";
-const i = ({ icon: r, label: t, className: s, ...a }) => /* @__PURE__ */ o(
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import o from "../../helpers/classnames.js";
+const i = ({ icon: r, label: t, className: s, ...a }) => /* @__PURE__ */ n(
   "button",
   {
     type: "button",
-    className: n(
+    className: o(
       "ui-sidebar-button flex w-full cursor-pointer items-center rounded px-4 py-2 hover:bg-gray-darker",
       s
     ),

package/build/components/Sidebar/Sidebar.Heading.js

@@ -1,8 +1,8 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import i from "clsx";
-const m = ({ icon: s, label: a, className: r }) => /* @__PURE__ */ t("p", { className: i("ml-4 flex items-center text-white", r), children: [
-  /* @__PURE__ */ e(s, { className: "mr-3 h-5 w-5" }),
-  /* @__PURE__ */ e("span", { className: "text-md font-bold", children: a })
+import i from "../../helpers/classnames.js";
+const m = ({ icon: a, label: r, className: s }) => /* @__PURE__ */ t("p", { className: i("ml-4 flex items-center text-white", s), children: [
+  /* @__PURE__ */ e(a, { className: "mr-3 h-5 w-5" }),
+  /* @__PURE__ */ e("span", { className: "text-md font-bold", children: r })
 ] });
 m.displayName = "Sidebar.Heading";
 export {