@xola/ui-kit 3.4.5 → 3.4.6

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 s from "clsx";
+import { CloseIcon as n } from "../icons/src/CloseIcon.js";
 const o = {
   primary: "bg-primary-lighter text-black",
   secondary: "bg-secondary-lighter text-black",
@@ -8,10 +8,10 @@ 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(
+    className: s(
       "ui-alert flex items-start rounded px-3 py-3 text-base leading-4",
       o[r],
       l

package/build/components/Badge.d.ts

@@ -10,6 +10,7 @@ declare const colors: {
     readonly critical: "bg-danger text-white";
 };
 declare const sizes: {
+    readonly xs: "px-1 py-0.5 h-3 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";

package/build/components/Badge.js

@@ -1,5 +1,5 @@
 import { jsxs as n } from "react/jsx-runtime";
-import t from "clsx";
+import r from "clsx";
 import { cloneElement as g } from "react";
 const c = {
   primary: "bg-primary-lighter text-primary-dark",
@@ -11,30 +11,32 @@ const c = {
   problem: "bg-warning text-white",
   critical: "bg-danger text-white"
 }, m = {
+  xs: "px-1 py-0.5 h-3 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 = {
+}, 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"
-}, x = ({ color: a = "primary", size: e = "small", icon: r, children: i, className: s, ...l }) => /* @__PURE__ */ n(
+}, p = ({ color: a = "primary", size: e = "small", icon: t, children: s, className: i, ...l }) => /* @__PURE__ */ n(
   "span",
   {
-    className: t(
+    className: r(
       "ui-badge",
       "inline-flex items-center whitespace-nowrap rounded-full",
       c[a],
       m[e],
-      s
+      i
     ),
     ...l,
     children: [
-      r ? g(r, { className: t("mr-1", o[e]) }) : null,
-      i
+      t ? g(t, { className: r("mr-1", x[e]) }) : null,
+      s
     ]
   }
 );
 export {
-  x as Badge
+  p as Badge
 };

package/build/components/Buttons/ButtonGroup.js

@@ -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, o) => {
   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 = ({
+  return e !== void 0 && (s.isActive = e === o), a && e >= 0 && e !== o && (s.shouldShowText = !1), t && (s.onClick = () => t(o)), y(r, s);
+}) }), 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
 }) => {
-  const c = i ?? "button", l = { ...s };
+  const f = i ?? "button", l = { ...s };
   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
   );
-  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

@@ -2,9 +2,9 @@ import { jsxs as l, jsx as s } 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 { Button as w } from "./Button.js";
+import { Spinner as d } from "../Spinner.js";
+import { Button as x } from "./Button.js";
+import { CheckIcon as w } from "../../icons/src/CheckIcon.js";
 const N = {
   primary: "!bg-primary-light",
   secondary: "!bg-secondary-light",
@@ -33,7 +33,7 @@ const N = {
   }, [c, e]);
   const t = !!e || r;
   return /* @__PURE__ */ l(
-    w,
+    x,
     {
       color: i,
       variant: n,
@@ -59,7 +59,7 @@ const N = {
                 enterTo: "opacity-100",
                 children: [
                   r && /* @__PURE__ */ s(
-                    d,
+                    w,
                     {
                       size: "medium",
                       className: o("relative -top-0.25 text-white", {
@@ -67,7 +67,7 @@ const N = {
                       })
                     }
                   ),
-                  e && !r && /* @__PURE__ */ s(x, { size: "current", color: "current", className: "relative -top-0.25 text-white" })
+                  e && !r && /* @__PURE__ */ s(d, { size: "current", color: "current", className: "relative -top-0.25 text-white" })
                 ]
               }
             )

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 { 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 { formatDate as M } from "../../helpers/date.js";
+import { Input as W } 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 { 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",
@@ -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(x.Content, { className: "pr-1", children: c && (N === "month" ? /* @__PURE__ */ e(B, { value: t, onChange: a, ...p }) : /* @__PURE__ */ e(
+          q,
           {
             variant: r,
             getDayContent: S,
@@ -71,9 +71,9 @@ 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" }) })
+  /* @__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/MonthGrid.js

@@ -2,44 +2,44 @@ 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 { 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 } = g(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",
+          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 a 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 { ChevronLeftIcon as p } from "../../icons/src/ChevronLeftIcon.js";
+import { ChevronRightIcon as x } 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(x, {}) })
     ] })
   ] });
-}, 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/Drawer.js

@@ -4,8 +4,8 @@ import l from "clsx";
 import { forwardRef as v, Fragment as m } from "react";
 import { isIosBrowser as g } from "../helpers/browser.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",
@@ -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/InlineValuePopover.js

@@ -1,9 +1,9 @@
 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 { ValuePopoverText as g } from "./ValuePopoverText.js";
+import { DownArrowIcon as j } from "../../icons/src/DownArrowIcon.js";
 const D = ({
   text: f,
   isOpen: x = !1,
@@ -34,8 +34,8 @@ 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: f, error: p }) }),
+          b && /* @__PURE__ */ e(j, { size: "medium" })
         ]
       }
     ),

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/ImageUpload.js

@@ -1,13 +1,13 @@
-import { jsxs as a, jsx as e, Fragment as B } from "react/jsx-runtime";
+import { jsxs as c, jsx as e, Fragment as B } from "react/jsx-runtime";
 import g from "clsx";
 import { useRef as R, useState as U } from "react";
 import { 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/Modal.js

@@ -2,7 +2,7 @@ import { jsx as t, jsxs as c } from "react/jsx-runtime";
 import { Transition as s, Dialog as d } from "@headlessui/react";
 import o from "clsx";
 import { Fragment as m } from "react";
-import { CloseIcon as v } from "../icons/build/CloseIcon.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
 ] });