@xola/ui-kit 3.4.5 → 3.5.0

package/README.md

@@ -72,13 +72,18 @@ export { default } from "@xola/ui-kit/postcss.config.js";
 
 #### Import Styles and Components
 
-Import main CSS files in your project:
+Import CSS files in your project's entry point (e.g., `main.tsx` or `App.tsx`):
 
 ```js
+// Full Tailwind setup with base styles, fonts, and CSS reset
 import "@xola/ui-kit/index.css";
+
+// Component-specific styles (Popover, Checkbox, RangeSlider, Sidebar, Skeleton, etc.)
 import "@xola/ui-kit/build/ui-kit.css";
 ```
 
+**Both imports are required** for components to render correctly. The first provides Tailwind base styles and fonts, while the second includes all component CSS modules.
+
 UI kit expects you already have a working React 18+ dev environment with PostCSS support.
 
 Import and use the components (with full TypeScript support):
@@ -164,7 +169,27 @@ $ rm -rf node_modules/@xola
 
 ### Troubleshooting
 
-If you encounter some package related issues, try removing the following directories and running the install command again:
+#### Missing Component Styles
+
+If components are rendering without styles (e.g., Popover, Checkbox, RangeSlider), ensure both CSS imports are present:
+
+```js
+import "@xola/ui-kit/index.css";          // Tailwind base + fonts
+import "tippy.js/dist/tippy.css";
+import "@xola/ui-kit/build/ui-kit.css";   // Component CSS modules
+```
+
+All component-specific styles are bundled in `ui-kit.css`, including:
+- Popover (`.main` with arrow styles)
+- PopoverScroll (scrollbar customization)
+- Checkbox (custom checkmark)
+- RangeSlider (noUiSlider styling)
+- Sidebar (menu and scroll styles)
+- Skeleton (shimmer animation)
+
+#### Package Installation Issues
+
+If you encounter package related issues, try removing the following directories and running the install command again:
 
 ```bash
 $ cd workspace

package/build/components/Alert.js

@@ -1,6 +1,6 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import i from "clsx";
-import { CloseIcon as n } from "../icons/build/CloseIcon.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+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",
@@ -8,18 +8,14 @@ const o = {
   warning: "bg-warning-lighter text-black",
   danger: "bg-danger-lighter text-black",
   caution: "bg-caution-lighter text-black"
-}, u = ({ color: r = "primary", children: a, className: l, onClose: e, ...c }) => /* @__PURE__ */ s(
+}, u = ({ color: r = "primary", children: a, className: l, onClose: e, ...c }) => /* @__PURE__ */ i(
   "div",
   {
-    className: i(
-      "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,9 +10,10 @@ declare const colors: {
     readonly critical: "bg-danger text-white";
 };
 declare const sizes: {
+    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 t 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,27 +10,29 @@ const c = {
   danger: "bg-danger-lightish text-danger-dark",
   problem: "bg-warning text-white",
   critical: "bg-danger text-white"
-}, m = {
+}, 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"
-}, o = {
-  small: "w-3 h-3",
-  medium: "w-4 h-4",
-  large: "w-5 h-5 mr-1.5"
-}, x = ({ color: a = "primary", size: e = "small", icon: r, children: i, className: s, ...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: t(
+    className: r(
       "ui-badge",
       "inline-flex items-center whitespace-nowrap rounded-full",
-      c[a],
-      m[e],
-      s
+      m[a],
+      c[e],
+      n
     ),
-    ...l,
+    ...s,
     children: [
-      r ? g(r, { className: t("mr-1", o[e]) }) : null,
+      t ? g(t, { className: r("mr-1", d[e]) }) : null,
       i
     ]
   }

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",
@@ -8,47 +8,47 @@ const B = {
 }, k = ({
   size: i,
   value: e,
-  isCollapsed: u = !1,
+  isCollapsed: a = !1,
   children: p,
-  className: a,
+  className: u,
   onChange: t,
   ...n
-}) => /* @__PURE__ */ d("span", { className: m("ui-button-group", "inline-flex whitespace-nowrap", a), ...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), u && e >= 0 && e !== o && (s.shouldShowText = !1), t && (s.onClick = () => t(o)), y(r, s);
-}) }), f = ({
+  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,
-  shouldShowText: u = !0,
+  shouldShowText: a = !0,
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
   isHidden: p = !1,
-  size: a = "medium",
+  size: u = "medium",
   icon: t,
   iconPlacement: n = "left",
   children: r,
-  className: o,
-  ...s
+  className: s,
+  ...o
 }) => {
-  const c = 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[a],
+    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(c, { className: b, ...l, children: [
+  return /* @__PURE__ */ g(f, { className: b, ...l, children: [
     t && n === "left" ? /* @__PURE__ */ d("span", { className: "mr-2 flex-shrink-0", children: t }) : null,
-    u ? r : t ? null : r,
+    a ? r : t ? null : r,
     t && n === "right" ? /* @__PURE__ */ d("span", { className: "ml-2 flex-shrink-0", children: t }) : null
   ] });
 };
-f.displayName = "ButtonGroup.Button";
+c.displayName = "ButtonGroup.Button";
 const j = Object.assign(k, {
-  Button: f
+  Button: c
 });
 export {
   j as ButtonGroup

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 { CheckIcon as d } from "../../icons/build/CheckIcon.js";
-import { Spinner as x } from "../Spinner.js";
+import s from "../../helpers/classnames.js";
+import { Spinner as d } from "../Spinner.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",
@@ -38,13 +38,13 @@ const N = {
       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(
-                    d,
+                  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(x, { 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,13 +1,13 @@
-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 { CalendarIcon as M } from "../../icons/build/CalendarIcon.js";
-import { DownArrowIcon as W } from "../../icons/build/DownArrowIcon.js";
-import { formatDate as q } from "../../helpers/date.js";
-import { Input as B } from "../Forms/Input.js";
-import { Popover as x } from "../Popover/Popover.js";
-import { DatePicker as F } from "./DatePicker.js";
-import { MonthPicker as G } from "./MonthPicker.js";
+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 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";
+import { DownArrowIcon as G } from "../../icons/src/DownArrowIcon.js";
 const $ = ({
   value: t,
   variant: r = "single",
@@ -33,8 +33,8 @@ const $ = ({
   };
   return E(() => {
     f(t);
-  }, [t]), /* @__PURE__ */ D(
-    x,
+  }, [t]), /* @__PURE__ */ x(
+    D,
     {
       visible: c,
       maxWidth: 900,
@@ -49,14 +49,14 @@ const $ = ({
           {
             readOnly: !0,
             size: "medium",
-            value: t ? q(t, l) : "",
+            value: t ? M(t, l) : "",
             placeholder: V,
             className: o == null ? void 0 : o.input,
             onClick: s
           }
         ),
-        /* @__PURE__ */ e(x.Content, { className: "pr-1", children: c && (N === "month" ? /* @__PURE__ */ e(G, { value: t, onChange: a, ...p }) : /* @__PURE__ */ e(
-          F,
+        /* @__PURE__ */ e(D.Content, { className: "pr-1", children: c && (N === "month" ? /* @__PURE__ */ e(B, { value: t, onChange: a, ...p }) : /* @__PURE__ */ e(
+          q,
           {
             variant: r,
             getDayContent: S,
@@ -70,10 +70,10 @@ const $ = ({
       ]
     }
   );
-}, I = A(({ className: t, ...r }, l) => /* @__PURE__ */ D("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(M, { className: "z-10 inline-block" }) }),
-  /* @__PURE__ */ e(B, { 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(W, { className: "inline-block" }) })
+}, 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" }) })
 ] }));
 I.displayName = "DefaultInput";
 export {

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,