@xola/ui-kit 3.4.6 → 3.5.0

package/build/components/Alert.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import s from "clsx";
-import { CloseIcon as n } from "../icons/src/CloseIcon.js";
+import n from "../helpers/classnames.js";
+import { CloseIcon as s } from "../icons/src/CloseIcon.js";
 const o = {
   primary: "bg-primary-lighter text-black",
   secondary: "bg-secondary-lighter text-black",
@@ -11,15 +11,11 @@ const o = {
 }, u = ({ color: r = "primary", children: a, className: l, onClose: e, ...c }) => /* @__PURE__ */ i(
   "div",
   {
-    className: s(
-      "ui-alert flex items-start rounded px-3 py-3 text-base leading-4",
-      o[r],
-      l
-    ),
+    className: n("ui-alert flex items-start rounded px-3 py-3 text-base leading-4", o[r], l),
     ...c,
     children: [
       /* @__PURE__ */ t("span", { className: "ui-alert-content w-full leading-p1", children: a }),
-      e ? /* @__PURE__ */ t("button", { type: "button", className: "ui-alert-close ml-3 cursor-pointer hover:text-gray-dark", children: /* @__PURE__ */ t(n, { onClick: e }) }) : null
+      e ? /* @__PURE__ */ t("button", { type: "button", className: "ui-alert-close ml-3 cursor-pointer hover:text-gray-dark", children: /* @__PURE__ */ t(s, { onClick: e }) }) : null
     ]
   }
 );

package/build/components/Avatar.js

@@ -1,20 +1,20 @@
 import { jsx as a } from "react/jsx-runtime";
-import n from "clsx";
-import { getInitials as m } from "../helpers/avatar.js";
+import { getInitials as n } from "../helpers/avatar.js";
+import m from "../helpers/classnames.js";
 const o = {
   tiny: "h-7 w-7 text-base",
   small: "h-10 w-10 text-base",
   medium: "h-12 w-12 text-md",
   large: "h-15 w-15 text-xl"
 }, f = ({ name: t, color: e = "bg-primary-lighter", size: r = "large", className: i, ...l }) => {
-  const s = n(
+  const s = m(
     "ui-avatar",
     "inline-flex items-center justify-center rounded-full text-black leading-none",
     o[r],
     e,
     i
   );
-  return /* @__PURE__ */ a("div", { title: t, className: s, ...l, children: m(t) });
+  return /* @__PURE__ */ a("div", { title: t, className: s, ...l, children: n(t) });
 };
 export {
   f as Avatar

package/build/components/Badge.d.ts

@@ -10,10 +10,10 @@ declare const colors: {
     readonly critical: "bg-danger text-white";
 };
 declare const sizes: {
-    readonly xs: "px-1 py-0.5 h-3 text-xs";
+    readonly tiny: "px-2 py-0.5 h-4 text-xs";
     readonly small: "px-2 py-0.75 h-5 text-sm leading-sm";
     readonly medium: "px-3 py-1.5 h-7.5 text-base leading-base";
-    readonly large: "px-3.5 py-0.75 h-10 text-lg leading-lg";
+    readonly large: "px-3.5 py-0.75 h-8 text-md leading-md";
 };
 type BadgeColor = keyof typeof colors;
 type BadgeSize = keyof typeof sizes;

package/build/components/Badge.js

@@ -1,7 +1,7 @@
-import { jsxs as n } from "react/jsx-runtime";
-import r from "clsx";
+import { jsxs as l } from "react/jsx-runtime";
 import { cloneElement as g } from "react";
-const c = {
+import r from "../helpers/classnames.js";
+const m = {
   primary: "bg-primary-lighter text-primary-dark",
   secondary: "bg-secondary-lighter text-black",
   success: "bg-success-lightish text-success-darker",
@@ -10,33 +10,33 @@ const c = {
   danger: "bg-danger-lightish text-danger-dark",
   problem: "bg-warning text-white",
   critical: "bg-danger text-white"
-}, m = {
-  xs: "px-1 py-0.5 h-3 text-xs",
+}, c = {
+  tiny: "px-2 py-0.5 h-4 text-xs",
   small: "px-2 py-0.75 h-5 text-sm leading-sm",
   medium: "px-3 py-1.5 h-7.5 text-base leading-base",
-  large: "px-3.5 py-0.75 h-10 text-lg leading-lg"
-}, x = {
-  xs: "w-2.5 h-2.5",
-  small: "w-3 h-3",
-  medium: "w-4 h-4",
-  large: "w-5 h-5 mr-1.5"
-}, p = ({ color: a = "primary", size: e = "small", icon: t, children: s, className: i, ...l }) => /* @__PURE__ */ n(
+  large: "px-3.5 py-0.75 h-8 text-md leading-md"
+}, d = {
+  tiny: "!w-2.5 !h-2.5",
+  small: "!w-3 !h-3",
+  medium: "!w-4 !h-4",
+  large: "!w-4.5 !h-4.5 mr-1"
+}, x = ({ color: a = "primary", size: e = "small", icon: t, children: i, className: n, ...s }) => /* @__PURE__ */ l(
   "span",
   {
     className: r(
       "ui-badge",
       "inline-flex items-center whitespace-nowrap rounded-full",
-      c[a],
-      m[e],
-      i
+      m[a],
+      c[e],
+      n
     ),
-    ...l,
+    ...s,
     children: [
-      t ? g(t, { className: r("mr-1", x[e]) }) : null,
-      s
+      t ? g(t, { className: r("mr-1", d[e]) }) : null,
+      i
     ]
   }
 );
 export {
-  p as Badge
+  x as Badge
 };

package/build/components/Breadcrumb.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as p, Fragment as b } from "react/jsx-runtime";
-import a from "clsx";
 import { Children as s } from "react";
+import a from "../helpers/classnames.js";
 const x = ({ separator: n = "/", children: r, classNames: e = {}, className: o, ...i }) => {
   const d = s.count(r) - 1;
   return /* @__PURE__ */ t("div", { className: a("ui-breadcrumb", "whitespace-nowrap text-2xl font-semibold", o), ...i, children: s.map(r, (u, l) => {

package/build/components/Breakdown.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import r from "clsx";
 import { isNumber as f } from "lodash-es";
 import { useMemo as S, createContext as v, useContext as h } from "react";
+import r from "../helpers/classnames.js";
 import { Currency as b } from "./Utilities/Currency.js";
 const w = {
   default: "text-gray-darker",
@@ -12,22 +12,22 @@ const w = {
   success: "text-success",
   danger: "text-danger",
   caution: "text-caution"
-}, u = v(void 0), B = ({ currency: a, locale: t, children: s, className: l, ...c }) => {
+}, u = v(void 0), B = ({ currency: a, locale: t, children: s, className: c, ...l }) => {
   const i = S(() => ({ currency: a, locale: t }), [a, t]);
-  return /* @__PURE__ */ e(u.Provider, { value: i, children: /* @__PURE__ */ e("table", { className: r("ui-breakdown", "w-full", l), ...c, children: /* @__PURE__ */ e("tbody", { children: s }) }) });
+  return /* @__PURE__ */ e(u.Provider, { value: i, children: /* @__PURE__ */ e("table", { className: r("ui-breakdown", "w-full", c), ...l, children: /* @__PURE__ */ e("tbody", { children: s }) }) });
 }, k = ({
   info: a,
   methodIcon: t,
   secondary: s,
-  value: l,
-  color: c = "default",
+  value: c,
+  color: l = "default",
   children: i,
   classNames: d = {},
   className: o,
   ...p
 }) => {
-  const n = h(u), N = n == null ? void 0 : n.currency, g = n == null ? void 0 : n.locale;
-  return /* @__PURE__ */ m("tr", { className: r("ui-breakdown-item", w[c], o), ...p, children: [
+  const n = h(u), g = n == null ? void 0 : n.currency, x = n == null ? void 0 : n.locale;
+  return /* @__PURE__ */ m("tr", { className: r("ui-breakdown-item", w[l], o), ...p, children: [
     /* @__PURE__ */ m("td", { colSpan: 2, className: r("break-words text-left leading-none", d.key), children: [
       /* @__PURE__ */ e("span", { className: "mr-0.5", children: t }),
       /* @__PURE__ */ e("span", { className: r("mr-1 break-normal md:break-all", d.children), children: i ?? "" }),
@@ -36,17 +36,17 @@ const w = {
         s && /* @__PURE__ */ e("span", { className: "empty:hidden", children: s })
       ] })
     ] }),
-    /* @__PURE__ */ e("td", { className: r("w-[1%] whitespace-nowrap pl-4 text-right", d.value), children: f(l) ? /* @__PURE__ */ e(
+    /* @__PURE__ */ e("td", { className: r("w-[1%] whitespace-nowrap pl-4 text-right", d.value), children: f(c) ? /* @__PURE__ */ e(
       b,
       {
         shouldRemoveTrailingZeroes: !1,
-        currency: N,
-        locale: g,
+        currency: g,
+        locale: x,
         compact: void 0,
         isNarrowSymbolForm: void 0,
-        children: l
+        children: c
       }
-    ) : /* @__PURE__ */ e("span", { children: l }) })
+    ) : /* @__PURE__ */ e("span", { children: c }) })
   ] });
 };
 k.displayName = "Breakdown.Item";
@@ -54,16 +54,16 @@ const y = ({
   info: a,
   value: t,
   color: s = "black",
-  children: l,
-  classNames: c = {},
+  children: c,
+  classNames: l = {},
   className: i,
   ...d
 }) => {
   const o = h(u), p = o == null ? void 0 : o.currency, n = o == null ? void 0 : o.locale;
   return /* @__PURE__ */ m("tr", { className: r("ui-breakdown-subtotal-item", "font-bold", w[s], i), ...d, children: [
-    /* @__PURE__ */ e("td", { className: r("pb-4 pt-1 text-left", c.children), children: l }),
-    /* @__PURE__ */ e("td", { className: r("whitespace-nowrap pb-4 pt-1 text-right", c.info), children: a }),
-    /* @__PURE__ */ e("td", { className: r("w-[1%] whitespace-nowrap pb-4 pl-4 pt-1 text-right", c.value), children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e("td", { className: r("pb-4 pt-1 text-left", l.children), children: c }),
+    /* @__PURE__ */ e("td", { className: r("whitespace-nowrap pb-4 pt-1 text-right", l.info), children: a }),
+    /* @__PURE__ */ e("td", { className: r("w-[1%] whitespace-nowrap pb-4 pl-4 pt-1 text-right", l.value), children: /* @__PURE__ */ e(
       b,
       {
         shouldRemoveTrailingZeroes: !1,
@@ -77,12 +77,12 @@ const y = ({
   ] });
 };
 y.displayName = "Breakdown.SubtotalItem";
-const x = ({ className: a, ...t }) => /* @__PURE__ */ e("tr", { className: r("ui-breakdown-separator", a), ...t, children: /* @__PURE__ */ e("td", { colSpan: 3, className: "border-b border-gray-light pb-1" }) });
-x.displayName = "Breakdown.Separator";
+const N = ({ className: a, ...t }) => /* @__PURE__ */ e("tr", { className: r("ui-breakdown-separator", a), ...t, children: /* @__PURE__ */ e("td", { colSpan: 3, className: "border-b border-gray-light pb-1" }) });
+N.displayName = "Breakdown.Separator";
 const T = Object.assign(B, {
   Item: k,
   SubtotalItem: y,
-  Separator: x
+  Separator: N
 });
 export {
   T as Breakdown

package/build/components/Buttons/Button.js

@@ -1,5 +1,5 @@
 import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import h from "clsx";
+import h from "../../helpers/classnames.js";
 const m = {
   standard: {
     common: "border-transparent text-white",

package/build/components/Buttons/ButtonGroup.js

@@ -1,6 +1,6 @@
 import { jsx as d, jsxs as g } from "react/jsx-runtime";
-import m from "clsx";
 import x, { Children as h, cloneElement as y } from "react";
+import m from "../../helpers/classnames.js";
 const B = {
   small: "px-2 py-1.5 text-sm",
   medium: "py-3 px-2.5 text-base",
@@ -13,11 +13,11 @@ const B = {
   className: u,
   onChange: t,
   ...n
-}) => /* @__PURE__ */ d("span", { className: m("ui-button-group", "inline-flex whitespace-nowrap", u), ...n, children: h.map(p, (r, o) => {
+}) => /* @__PURE__ */ d("span", { className: m("ui-button-group", "inline-flex whitespace-nowrap", u), ...n, children: h.map(p, (r, s) => {
   if (!x.isValidElement(r) || r.props.isHidden)
     return null;
-  const s = { size: i };
-  return e !== void 0 && (s.isActive = e === o), a && e >= 0 && e !== o && (s.shouldShowText = !1), t && (s.onClick = () => t(o)), y(r, s);
+  const o = { size: i };
+  return e !== void 0 && (o.isActive = e === s), a && e >= 0 && e !== s && (o.shouldShowText = !1), t && (o.onClick = () => t(s)), y(r, o);
 }) }), c = ({
   as: i,
   isActive: e,
@@ -28,17 +28,17 @@ const B = {
   icon: t,
   iconPlacement: n = "left",
   children: r,
-  className: o,
-  ...s
+  className: s,
+  ...o
 }) => {
-  const f = i ?? "button", l = { ...s };
+  const f = i ?? "button", l = { ...o };
   delete l.isActive, delete l.shouldShowText, delete l.isHidden;
   const b = m(
     "ui-button-group-button",
     "inline-flex border-t border-l border-b last:border-r first:rounded-l-md last:rounded-r-md transition-colors focus:ring disabled:opacity-60 focus:z-10 leading-none",
     B[u],
     e ? "bg-primary border-primary text-white hover:bg-primary-dark" : "border-gray-light hover:bg-gray-lighter text-gray-darker",
-    o
+    s
   );
   return /* @__PURE__ */ g(f, { className: b, ...l, children: [
     t && n === "left" ? /* @__PURE__ */ d("span", { className: "mr-2 flex-shrink-0", children: t }) : null,

package/build/components/Buttons/SubmitButton.js

@@ -1,10 +1,10 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { Transition as g } from "@headlessui/react";
-import o from "clsx";
 import { useState as y, useEffect as b } from "react";
+import s from "../../helpers/classnames.js";
 import { Spinner as d } from "../Spinner.js";
-import { Button as x } from "./Button.js";
-import { CheckIcon as w } from "../../icons/src/CheckIcon.js";
+import { Button as w } from "./Button.js";
+import { CheckIcon as x } from "../../icons/src/CheckIcon.js";
 const N = {
   primary: "!bg-primary-light",
   secondary: "!bg-secondary-light",
@@ -33,18 +33,18 @@ const N = {
   }, [c, e]);
   const t = !!e || r;
   return /* @__PURE__ */ l(
-    x,
+    w,
     {
       color: i,
       variant: n,
       disabled: t || m,
-      className: o(u, "relative", t && N[i]),
+      className: s(u, "relative", t && N[i]),
       ...f,
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "span",
           {
-            className: o(
+            className: s(
               "absolute inset-0 flex items-center justify-center",
               t ? "opacity-100" : "opacity-0"
             ),
@@ -58,22 +58,22 @@ const N = {
                 enterFrom: "opacity-0",
                 enterTo: "opacity-100",
                 children: [
-                  r && /* @__PURE__ */ s(
-                    w,
+                  r && /* @__PURE__ */ o(
+                    x,
                     {
                       size: "medium",
-                      className: o("relative -top-0.25 text-white", {
+                      className: s("relative -top-0.25 text-white", {
                         "text-black": n === "outline"
                       })
                     }
                   ),
-                  e && !r && /* @__PURE__ */ s(d, { size: "current", color: "current", className: "relative -top-0.25 text-white" })
+                  e && !r && /* @__PURE__ */ o(d, { size: "current", color: "current", className: "relative -top-0.25 text-white" })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ s("span", { className: o(t ? "flex-shrink flex-grow opacity-0" : "opacity-100"), children: p })
+        /* @__PURE__ */ o("span", { className: s(t ? "flex-shrink flex-grow opacity-0" : "opacity-100"), children: p })
       ]
     }
   );

package/build/components/Buttons/ToggleButton.js

@@ -1,5 +1,5 @@
 import { jsx as b } from "react/jsx-runtime";
-import d from "clsx";
+import d from "../../helpers/classnames.js";
 import { Button as t } from "./Button.js";
 const h = {
   outline: {

package/build/components/Counter.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import r from "clsx";
+import r from "../helpers/classnames.js";
 const s = ({ className: e, ...n }) => /* @__PURE__ */ t(
   "span",
   {

package/build/components/DatePicker/DatePicker.js

@@ -1,15 +1,15 @@
 import { jsx as s, jsxs as X, Fragment as kt } from "react/jsx-runtime";
-import Dt from "clsx";
 import Y from "dayjs";
 import { isArray as h, isFunction as M } from "lodash-es";
-import { useContext as yt, useState as N, useEffect as jt, useCallback as V, useMemo as Rt } from "react";
-import { isBefore as C, startOfDay as b, endOfDay as v, isAfter as tt, isSameDay as Nt } from "date-fns";
-import { Tooltip as Vt } from "../Tooltip.js";
-import { RelativeDateRange as Lt } from "./RelativeDateRange.js";
-import { MonthSelector as Ot } from "./MonthSelector.js";
-import { UpcomingDatePicker as St } from "./UpcomingDatePicker.js";
-import { now as f, isSame as L, isValidTimeZoneName as Et, toDate as l } from "../../helpers/date.js";
-import { Context as Ft } from "../Provider.js";
+import { useContext as Dt, useState as N, useEffect as yt, useCallback as V, useMemo as jt } from "react";
+import { isBefore as C, startOfDay as b, endOfDay as v, isAfter as tt, isSameDay as Rt } from "date-fns";
+import { Tooltip as Nt } from "../Tooltip.js";
+import { RelativeDateRange as Vt } from "./RelativeDateRange.js";
+import { MonthSelector as Lt } from "./MonthSelector.js";
+import { UpcomingDatePicker as Ot } from "./UpcomingDatePicker.js";
+import { now as f, isSame as L, isValidTimeZoneName as St, toDate as l } from "../../helpers/date.js";
+import { Context as Et } from "../Provider.js";
+import Ft from "../../helpers/classnames.js";
 import { Day as rt } from "./Day.js";
 import { LocalizedDayPicker as _t } from "./LocalizedDayPicker.js";
 import { MonthYearSelector as Tt } from "./MonthYearSelector.js";
@@ -44,9 +44,9 @@ const P = {
   ...H
 }) => {
   var K, Q;
-  const { locale: j } = yt(Ft), o = u ?? void 0, st = r ? U === P.single ? r : r.from : null, [d, _] = N(it ?? st ?? f(void 0, o).toDate()), [mt, Z] = N(() => !r || typeof r != "object" || !("from" in r) || !r.from ? /* @__PURE__ */ new Date() : r.from), [lt, $] = N(() => !r || typeof r != "object" || !("from" in r) || !("to" in r) || !r.to || !r.from ? f(void 0, o).add(1, "month").toDate() : L(f(r.to, o), f(r.from, o), "month") ? f(r.from, o).add(1, "month").toDate() : r.to), [ct, at] = N(""), p = U === P.range, R = r && typeof r == "object" && "from" in r && "to" in r && r.from && r.to, dt = c && typeof c == "object" && "from" in c && "to" in c && c.from && c.to;
-  jt(() => {
-    u && !Et(u) && (console.log(`${u} is not a valid timezone. Using default timezone now`), Y.tz.setDefault());
+  const { locale: j } = Dt(Et), o = u ?? void 0, st = r ? U === P.single ? r : r.from : null, [d, _] = N(it ?? st ?? f(void 0, o).toDate()), [mt, Z] = N(() => !r || typeof r != "object" || !("from" in r) || !r.from ? /* @__PURE__ */ new Date() : r.from), [lt, $] = N(() => !r || typeof r != "object" || !("from" in r) || !("to" in r) || !r.to || !r.from ? f(void 0, o).add(1, "month").toDate() : L(f(r.to, o), f(r.from, o), "month") ? f(r.from, o).add(1, "month").toDate() : r.to), [ct, at] = N(""), p = U === P.range, R = r && typeof r == "object" && "from" in r && "to" in r && r.from && r.to, dt = c && typeof c == "object" && "from" in c && "to" in c && c.from && c.to;
+  yt(() => {
+    u && !St(u) && (console.log(`${u} is not a valid timezone. Using default timezone now`), Y.tz.setDefault());
   }, [u]);
   const q = (t, e, m) => {
     if (p)
@@ -91,7 +91,7 @@ const P = {
           } else if (n.from && C(b(n.from), b(l(f(t, o))))) {
             const w = n.from, B = v(l(f(t, o), !1));
             a({ from: w, to: B }, e, m);
-          } else if (n.from && (tt(b(n.from), b(l(f(t, o)))) || Nt(n.from, l(f(t, o)))))
+          } else if (n.from && (tt(b(n.from), b(l(f(t, o)))) || Rt(n.from, l(f(t, o)))))
             a(
               {
                 from: l(f(t, o)),
@@ -109,8 +109,8 @@ const P = {
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [p, R, a, o, r]
-  ), I = Rt(() => (O || S) && d ? (t) => S ? /* @__PURE__ */ s(
-    Ot,
+  ), I = jt(() => (O || S) && d ? (t) => S ? /* @__PURE__ */ s(
+    Lt,
     {
       date: t.date || d,
       currentMonth: d,
@@ -127,7 +127,7 @@ const P = {
     }
   ) : void 0, [O, S, d, g, D, j]), xt = (t) => {
     const e = y == null ? void 0 : y(t), m = T(t), n = bt(t);
-    return e ? /* @__PURE__ */ s(Vt, { placement: "top", content: e, children: /* @__PURE__ */ s(
+    return e ? /* @__PURE__ */ s(Nt, { placement: "top", content: e, children: /* @__PURE__ */ s(
       rt,
       {
         disabled: m,
@@ -152,7 +152,7 @@ const P = {
   return /* @__PURE__ */ X(kt, { children: [
     /* @__PURE__ */ X("div", { className: "flex", children: [
       W ? /* @__PURE__ */ s(
-        St,
+        Ot,
         {
           upcomingDates: W,
           value: r,
@@ -184,7 +184,7 @@ const P = {
       ) : /* @__PURE__ */ s(
         _t,
         {
-          className: Dt("pt-6 tracking-tightest rounded-lg ring-0 focus:outline-none focus:ring-0"),
+          className: Ft("pt-6 tracking-tightest rounded-lg ring-0 focus:outline-none focus:ring-0"),
           mode: "single",
           selected: r,
           month: d,
@@ -224,7 +224,7 @@ const P = {
     ] }),
     z.Footer ? /* @__PURE__ */ s(z.Footer, {}) : null,
     et && /* @__PURE__ */ s("div", { className: "max-w-200 ", children: /* @__PURE__ */ s("div", { className: "ml-auto w-5/12", children: /* @__PURE__ */ s(
-      Lt,
+      Vt,
       {
         value: ct,
         ranges: nt,

package/build/components/DatePicker/DatePickerPopover.js

@@ -1,9 +1,9 @@
-import { jsxs as D, jsx as e } from "react/jsx-runtime";
-import y from "clsx";
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
 import { useState as m, useEffect as E, cloneElement as L, forwardRef as A } from "react";
 import { formatDate as M } from "../../helpers/date.js";
+import y from "../../helpers/classnames.js";
 import { Input as W } from "../Forms/Input.js";
-import { Popover as x } from "../Popover/Popover.js";
+import { Popover as D } from "../Popover/Popover.js";
 import { DatePicker as q } from "./DatePicker.js";
 import { MonthPicker as B } from "./MonthPicker.js";
 import { CalendarIcon as F } from "../../icons/src/CalendarIcon.js";
@@ -33,8 +33,8 @@ const $ = ({
   };
   return E(() => {
     f(t);
-  }, [t]), /* @__PURE__ */ D(
-    x,
+  }, [t]), /* @__PURE__ */ x(
+    D,
     {
       visible: c,
       maxWidth: 900,
@@ -55,7 +55,7 @@ const $ = ({
             onClick: s
           }
         ),
-        /* @__PURE__ */ e(x.Content, { className: "pr-1", children: c && (N === "month" ? /* @__PURE__ */ e(B, { value: t, onChange: a, ...p }) : /* @__PURE__ */ e(
+        /* @__PURE__ */ e(D.Content, { className: "pr-1", children: c && (N === "month" ? /* @__PURE__ */ e(B, { value: t, onChange: a, ...p }) : /* @__PURE__ */ e(
           q,
           {
             variant: r,
@@ -70,7 +70,7 @@ const $ = ({
       ]
     }
   );
-}, I = A(({ className: t, ...r }, l) => /* @__PURE__ */ D("div", { ref: l, className: "relative flex bg-gray-lighter", children: [
+}, I = A(({ className: t, ...r }, l) => /* @__PURE__ */ x("div", { ref: l, className: "relative flex bg-gray-lighter", children: [
   /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center pl-3", children: /* @__PURE__ */ e(F, { className: "z-10 inline-block" }) }),
   /* @__PURE__ */ e(W, { className: y("no-translate cursor-pointer px-8", t), ...r }),
   /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: /* @__PURE__ */ e(G, { className: "inline-block" }) })

package/build/components/DatePicker/Day.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as f } from "react/jsx-runtime";
-import m from "clsx";
 import o from "dayjs";
+import m from "../../helpers/classnames.js";
 import { Dot as l } from "../Dot/Dot.js";
 const v = ({
   selectedDate: e,

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,7 +1,7 @@
 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 { 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";
@@ -16,7 +16,7 @@ const v = u(), A = ({
   handleClear: d,
   handleToday: h
 }) => {
-  const { locale: p } = g(C), f = [...Array.from({ length: 12 }).keys()].map(
+  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);
@@ -32,7 +32,7 @@ const v = u(), A = ({
       "button",
       {
         type: "button",
-        className: x(
+        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"
         ),

package/build/components/DatePicker/NavbarElement.js

@@ -1,9 +1,9 @@
 import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import a from "clsx";
 import { useCallback as l } from "react";
 import { useDayPicker as m } from "react-day-picker";
+import a from "../../helpers/classnames.js";
 import { ChevronLeftIcon as p } from "../../icons/src/ChevronLeftIcon.js";
-import { ChevronRightIcon as x } from "../../icons/src/ChevronRightIcon.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);
@@ -22,7 +22,7 @@ const C = ({ className: i, onTodayClick: t }) => {
     ),
     /* @__PURE__ */ s("span", { className: "flex space-x-2", children: [
       /* @__PURE__ */ r(c, { isVisible: !h, onClick: d, children: /* @__PURE__ */ r(p, {}) }),
-      /* @__PURE__ */ r(c, { isVisible: !b, onClick: u, children: /* @__PURE__ */ r(x, {}) })
+      /* @__PURE__ */ r(c, { isVisible: !b, onClick: u, children: /* @__PURE__ */ r(f, {}) })
     ] })
   ] });
 }, c = ({ isVisible: i = !0, children: t, onClick: e }) => /* @__PURE__ */ r(

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,