@xola/ui-kit 3.4.5 → 3.5.0

package/build/components/DatePicker/LocalizedDayPicker.js

@@ -1,20 +1,20 @@
-import { jsx as s } from "react/jsx-runtime";
-import m from "clsx";
-import { useContext as l, useState as n, useEffect as p } from "react";
-import { DayPicker as f } from "react-day-picker";
-import { kebabCase as u } from "lodash-es";
+import { jsx as m } from "react/jsx-runtime";
+import { useContext as s, useState as l, useEffect as n } from "react";
+import { DayPicker as p } from "react-day-picker";
+import { kebabCase as f } from "lodash-es";
 import { enUS as r } from "date-fns/locale";
+import u from "../../helpers/classnames.js";
 import { Context as P } from "../Provider.js";
-import { getLocalizationProps as x } from "./DatePicker.helpers.js";
-const z = ({ className: a, ...i }) => {
-  const { locale: o } = l(P), [c, t] = n({ locale: r });
-  return p(() => {
+import { getLocalizationProps as z } from "./DatePicker.helpers.js";
+const C = ({ className: a, ...i }) => {
+  const { locale: o } = s(P), [c, t] = l({ locale: r });
+  return n(() => {
     t({ locale: r });
-    const e = u(o).toLowerCase();
-    !e || e === "en" || e === "en-us" || x(o).then(t);
-  }, [o]), /* @__PURE__ */ s(f, { className: m(a), ...c, ...i });
+    const e = f(o).toLowerCase();
+    !e || e === "en" || e === "en-us" || z(o).then(t);
+  }, [o]), /* @__PURE__ */ m(p, { className: u(a), ...c, ...i });
 };
-z.displayName = "LocalizedDayPicker";
+C.displayName = "LocalizedDayPicker";
 export {
-  z as LocalizedDayPicker
+  C as LocalizedDayPicker
 };

package/build/components/DatePicker/MonthGrid.js

@@ -1,45 +1,45 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import x from "clsx";
 import u from "dayjs";
-import { useContext as g } from "react";
-import { ChevronLeftIcon as C } from "../../icons/build/ChevronLeftIcon.js";
-import { ChevronRightIcon as k } from "../../icons/build/ChevronRightIcon.js";
-import { Context as y } from "../Provider.js";
+import { useContext as x } from "react";
+import g from "../../helpers/classnames.js";
+import { Context as C } from "../Provider.js";
 import { Button as i } from "../Buttons/Button.js";
 import { ChevronButton as s } from "./NavbarElement.js";
+import { ChevronLeftIcon as k } from "../../icons/src/ChevronLeftIcon.js";
+import { ChevronRightIcon as y } from "../../icons/src/ChevronRightIcon.js";
 const v = u(), A = ({
   year: r,
   value: n,
-  locale: a,
-  onChange: m,
+  locale: m,
+  onChange: a,
   handleYearChange: c,
   handleClear: d,
   handleToday: h
 }) => {
-  const { locale: p } = g(y), f = [...Array.from({ length: 12 }).keys()].map(
-    (o) => v.locale(a ?? p).month(o).format("MMM")
-  ), b = (o) => {
-    const e = new Date(r, o);
-    m(e);
+  const { locale: p } = x(C), f = [...Array.from({ length: 12 }).keys()].map(
+    (e) => v.locale(m ?? p).month(e).format("MMM")
+  ), b = (e) => {
+    const o = new Date(r, e);
+    a(o);
   };
   return /* @__PURE__ */ l("span", { className: "min-w-72", children: [
     /* @__PURE__ */ l("div", { className: "mb-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ t(s, { onClick: () => c(-1), children: /* @__PURE__ */ t(C, {}) }),
+      /* @__PURE__ */ t(s, { onClick: () => c(-1), children: /* @__PURE__ */ t(k, {}) }),
       /* @__PURE__ */ t("span", { className: "text-lg font-bold", children: r }),
-      /* @__PURE__ */ t(s, { onClick: () => c(1), children: /* @__PURE__ */ t(k, {}) })
+      /* @__PURE__ */ t(s, { onClick: () => c(1), children: /* @__PURE__ */ t(y, {}) })
     ] }),
-    /* @__PURE__ */ t("div", { className: "grid grid-cols-4 gap-2", children: f.map((o, e) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-4 gap-2", children: f.map((e, o) => /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        className: x(
-          n && n.getMonth() === e && n.getFullYear() === r ? "bg-blue-dark text-white" : "text-black",
+        className: g(
+          n && n.getMonth() === o && n.getFullYear() === r ? "bg-blue-dark text-white" : "text-black",
           "rounded-md p-4 text-center hover:bg-blue-dark hover:text-white"
         ),
-        onClick: () => b(e),
-        children: o
+        onClick: () => b(o),
+        children: e
       },
-      o
+      e
     )) }),
     /* @__PURE__ */ l("div", { className: "mt-2 flex justify-between border-t border-gray-lighter pt-2", children: [
       /* @__PURE__ */ t(i, { size: "small", color: "secondary", variant: "outline", onClick: d, children: "Clear" }),

package/build/components/DatePicker/MonthSelector.js

@@ -1,39 +1,39 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import M from "dayjs";
 import { useState as m } from "react";
-import { ChevronDownIcon as Y } from "../../icons/build/ChevronDownIcon.js";
 import { Popover as d } from "../Popover/Popover.js";
-import { MonthGrid as g } from "./MonthGrid.js";
-const j = ({ date: s, currentMonth: p, locale: o, onChange: i }) => {
-  const [a, t] = m(!1), [l, h] = m(new Date(p).getFullYear()), f = () => {
-    t(!a);
+import { MonthGrid as Y } from "./MonthGrid.js";
+import { ChevronDownIcon as g } from "../../icons/src/ChevronDownIcon.js";
+const j = ({ date: o, currentMonth: p, locale: s, onChange: i }) => {
+  const [l, t] = m(!1), [a, h] = m(new Date(p).getFullYear()), f = () => {
+    t(!l);
   }, b = (n) => {
     i(n), t(!1);
   }, u = (n) => {
-    h(l + n);
+    h(a + n);
   }, r = () => {
     t(!1);
   }, C = () => {
     i(/* @__PURE__ */ new Date()), t(!1);
   };
-  return /* @__PURE__ */ e("span", { className: "DayPicker-Caption", children: /* @__PURE__ */ e("span", { className: "inline-block", children: /* @__PURE__ */ c(d, { visible: a, distance: 5, skidding: 60, placement: "bottom", onClickOutside: r, children: [
+  return /* @__PURE__ */ e("span", { className: "DayPicker-Caption", children: /* @__PURE__ */ e("span", { className: "inline-block", children: /* @__PURE__ */ c(d, { visible: l, distance: 5, skidding: 60, placement: "bottom", onClickOutside: r, children: [
     /* @__PURE__ */ c(
       "div",
       {
         className: "mt-2 min-w-40 cursor-pointer items-center justify-between text-left font-bold",
         onClick: f,
         children: [
-          /* @__PURE__ */ e("span", { className: "pr-1 text-lg", children: M(s).locale(o ?? "en").format("MMMM YYYY") }),
-          /* @__PURE__ */ e(Y, {})
+          /* @__PURE__ */ e("span", { className: "pr-1 text-lg", children: M(o).locale(s ?? "en").format("MMMM YYYY") }),
+          /* @__PURE__ */ e(g, {})
         ]
       }
     ),
     /* @__PURE__ */ e(d.Content, { className: "p-2", children: /* @__PURE__ */ e(
-      g,
+      Y,
       {
-        year: l,
-        value: s,
-        locale: o,
+        year: a,
+        value: o,
+        locale: s,
         handleClear: r,
         handleToday: C,
         handleYearChange: u,

package/build/components/DatePicker/NavbarElement.js

@@ -1,16 +1,16 @@
 import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import c from "clsx";
 import { useCallback as l } from "react";
 import { useDayPicker as m } from "react-day-picker";
-import { ChevronLeftIcon as p } from "../../icons/build/ChevronLeftIcon.js";
-import { ChevronRightIcon as x } from "../../icons/build/ChevronRightIcon.js";
+import a from "../../helpers/classnames.js";
+import { ChevronLeftIcon as p } from "../../icons/src/ChevronLeftIcon.js";
+import { ChevronRightIcon as f } from "../../icons/src/ChevronRightIcon.js";
 const C = ({ className: i, onTodayClick: t }) => {
   const { nextMonth: e, previousMonth: o, goToMonth: n } = m(), b = !e, h = !o, d = l(() => {
     o && n(o);
   }, [o, n]), u = l(() => {
     e && n(e);
   }, [n, e]);
-  return /* @__PURE__ */ s("nav", { className: c("h-8 right-0 absolute items-center flex space-x-4 z-10", i), children: [
+  return /* @__PURE__ */ s("nav", { className: a("h-8 right-0 absolute items-center flex space-x-4 z-10", i), children: [
     t && /* @__PURE__ */ r(
       "button",
       {
@@ -21,15 +21,15 @@ const C = ({ className: i, onTodayClick: t }) => {
       }
     ),
     /* @__PURE__ */ s("span", { className: "flex space-x-2", children: [
-      /* @__PURE__ */ r(a, { isVisible: !h, onClick: d, children: /* @__PURE__ */ r(p, {}) }),
-      /* @__PURE__ */ r(a, { isVisible: !b, onClick: u, children: /* @__PURE__ */ r(x, {}) })
+      /* @__PURE__ */ r(c, { isVisible: !h, onClick: d, children: /* @__PURE__ */ r(p, {}) }),
+      /* @__PURE__ */ r(c, { isVisible: !b, onClick: u, children: /* @__PURE__ */ r(f, {}) })
     ] })
   ] });
-}, a = ({ isVisible: i = !0, children: t, onClick: e }) => /* @__PURE__ */ r(
+}, c = ({ isVisible: i = !0, children: t, onClick: e }) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
-    className: c(
+    className: a(
       i ? "inline-block" : "invisible",
       "inline-flex h-7 w-7 items-center justify-center rounded-full border border-transparent leading-none text-black hover:border-black"
     ),
@@ -38,6 +38,6 @@ const C = ({ className: i, onTodayClick: t }) => {
   }
 );
 export {
-  a as ChevronButton,
+  c as ChevronButton,
   C as NavbarElement
 };

package/build/components/DatePicker/RangeDatePicker.js

@@ -1,7 +1,7 @@
 import { jsxs as K, jsx as n } from "react/jsx-runtime";
-import a from "clsx";
 import { isFunction as Q, isArray as U } from "lodash-es";
 import { now as d } from "../../helpers/date.js";
+import a from "../../helpers/classnames.js";
 import { Tooltip as V } from "../Tooltip.js";
 import { Day as W } from "./Day.js";
 import { LocalizedDayPicker as F } from "./LocalizedDayPicker.js";
@@ -84,9 +84,7 @@ const et = ({
     /* @__PURE__ */ n(
       F,
       {
-        className: a(
-          "pt-6 tracking-tightest max-w-[400px] rounded-lg ring-0 focus:outline-none focus:ring-0"
-        ),
+        className: a("pt-6 tracking-tightest max-w-[400px] rounded-lg ring-0 focus:outline-none focus:ring-0"),
         mode: "single",
         selected: b == null ? void 0 : b.from,
         month: c,
@@ -107,9 +105,7 @@ const et = ({
     /* @__PURE__ */ n(
       F,
       {
-        className: a(
-          "pt-6 tracking-tightest max-w-[400px] rounded-lg ring-0 focus:outline-none focus:ring-0"
-        ),
+        className: a("pt-6 tracking-tightest max-w-[400px] rounded-lg ring-0 focus:outline-none focus:ring-0"),
         mode: "single",
         selected: y || b == null ? void 0 : b.to,
         month: m,

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,11 +1,11 @@
 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 { CloseIcon as b } from "../icons/build/CloseIcon.js";
-import { Button as N } from "./Buttons/Button.js";
+import { Button as b } from "./Buttons/Button.js";
+import { CloseIcon as N } from "../icons/src/CloseIcon.js";
 const T = {
   small: "w-72",
   medium: "w-85",
@@ -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 })
                             ]
                           }
                         ),
@@ -110,7 +110,7 @@ const T = {
 );
 F.displayName = "Drawer";
 const c = ({ onClose: i }) => /* @__PURE__ */ e(
-  N,
+  b,
   {
     size: "small",
     variant: "link",
@@ -118,7 +118,7 @@ const c = ({ onClose: i }) => /* @__PURE__ */ e(
       "m-2.5 inline-flex !h-10 !w-10 items-center justify-center !rounded-full bg-white !px-1.5 !text-black"
     ),
     onClick: () => i(!1),
-    children: /* @__PURE__ */ e(b, { size: "medium" })
+    children: /* @__PURE__ */ e(N, { size: "medium" })
   }
 );
 export {

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 { DownArrowIcon as g } from "../../icons/build/DownArrowIcon.js";
-import { Popover as l } from "../Popover/Popover.js";
-import { ValuePopoverText as j } from "./ValuePopoverText.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(j, { value: f, error: p }) }),
-          b && /* @__PURE__ */ e(g, { 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
     }
   );