@base-framework/ui 1.0.96 → 1.0.98

package/dist/atoms.es.js

@@ -1,4 +1,4 @@
-import { B as e, C as t, a as n, F as o, L as p, P as r, R as u, S as I, b as i, T as l } from "./tooltip-DE-UvmQt.js";
+import { B as e, C as t, a as n, F as o, L as p, P as r, R as u, S as I, b as i, T as l } from "./tooltip-VG86HlGW.js";
 import { B as m, I as T, L as c } from "./buttons-CVEwmPAi.js";
 import { C as B, d as C, D as S, c as g, E as b, F as f, H as h, I as F, M as L, N as P, P as R, R as k, S as D, T as V, a as E, b as H, U as M, W as N } from "./inputs-nzivW9Dr.js";
 import { V as W, a as w } from "./veil-D4dRxILB.js";

package/dist/{confirmation-Co-ayoR2.js → confirmation-CY6otODd.js}

@@ -1,10 +1,10 @@
-import { Div as n, H5 as _, P as b, I as f, Li as O, Span as a, Ul as V, Button as h, OnState as v, Label as W, Form as R, H2 as A, Header as B, Footer as M, A as Y, H3 as G, Checkbox as J, Nav as K, Input as C, Time as Q, Dialog as X } from "@base-framework/atoms";
-import { Atom as c, Component as p, Html as L, Dom as Z, base as ee, Data as k, Builder as q, Jot as S, DateTime as $ } from "@base-framework/base";
-import { P as D, b as te } from "./calendar-BDqm833e.js";
-import { B as u, I as x } from "./buttons-CVEwmPAi.js";
-import { Icons as d } from "./icons.es.js";
+import { Div as n, H5 as _, P as b, I as g, Li as O, Span as a, Ul as V, Button as m, OnState as v, Label as W, Form as R, H2 as A, Header as B, Footer as M, A as Y, H3 as G, Checkbox as J, Nav as K, Input as C, UseParent as Q, Time as X, Dialog as Z } from "@base-framework/atoms";
+import { Atom as c, Component as p, Html as L, Dom as ee, base as te, Data as k, Builder as U, Jot as S, DateTime as $ } from "@base-framework/base";
+import { P as D, b as se } from "./calendar-BDqm833e.js";
+import { B as h, I as x } from "./buttons-CVEwmPAi.js";
+import { Icons as u } from "./icons.es.js";
 import { a as w } from "./veil-D4dRxILB.js";
-import { Timer as se, List as oe, DynamicTime as ne } from "@base-framework/organisms";
+import { Timer as oe, List as ne, DynamicTime as re } from "@base-framework/organisms";
 const P = {
   info: {
     borderColor: "border-blue-500",
@@ -31,20 +31,20 @@ const P = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, re = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
-  f({ html: e })
-]), le = (e) => _({ class: "font-semibold" }, e), ie = (e) => b({ class: "text-sm text-muted-foreground" }, e), ht = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
+}, le = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+  g({ html: e })
+]), ie = (e) => _({ class: "font-semibold" }, e), ae = (e) => b({ class: "text-sm text-muted-foreground" }, e), mt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
   const { borderColor: r, bgColor: l, iconColor: i } = P[o] || P.default;
   return n({ class: `flex items-start p-4 border rounded-lg ${l} ${r}` }, [
     // Icon and content
-    s && re(s, i),
+    s && le(s, i),
     n({ class: "flex flex-col" }, [
-      le(e),
-      ie(t)
+      ie(e),
+      ae(t)
     ])
   ]);
 });
-class ae extends p {
+class ce extends p {
   /**
    * This will declare the props for the compiler.
    *
@@ -65,24 +65,24 @@ class ae extends p {
       L.removeElement(t);
       return;
     }
-    Z.addClass(t, s), ee.on("animationend", t, (o) => L.removeElement(t));
+    ee.addClass(t, s), te.on("animationend", t, (o) => L.removeElement(t));
   }
 }
-const ce = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), de = (e) => a({ class: "flex w-4 h-4", html: e }), ue = (e) => a({ class: "flex-auto" }, e), he = (e, t) => O({
+const de = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), ue = (e) => a({ class: "flex w-4 h-4", html: e }), he = (e) => a({ class: "flex-auto" }, e), me = (e, t) => O({
   class: "relative flex cursor-pointer hover:bg-muted/50 select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   click: () => t(e)
 }, [
-  e.icon && de(e.icon),
-  ue(e.label),
-  e.shortcut && ce(e.shortcut)
-]), me = (e, t) => V({ class: "grid gap-2" }, [
-  e.map((s) => he(s, t))
-]), fe = (e) => n({ class: "w-full z-10" }, [
+  e.icon && ue(e.icon),
+  he(e.label),
+  e.shortcut && de(e.shortcut)
+]), fe = (e, t) => V({ class: "grid gap-2" }, [
+  e.map((s) => me(s, t))
+]), ge = (e) => n({ class: "w-full z-10" }, [
   n({
     class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
-    for: ["groups", (t) => me(t, e)]
+    for: ["groups", (t) => fe(t, e)]
   })
-]), ge = ({ label: e, icon: t, toggleDropdown: s }) => h({
+]), be = ({ label: e, icon: t, toggleDropdown: s }) => m({
   cache: "button",
   class: `inline-flex items-center justify-between rounded-md border border-input
 			bg-background px-2 py-2 text-sm font-medium hover:bg-muted
@@ -90,8 +90,8 @@ const ce = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
   click: s
 }, [
   e && a(e),
-  t && f({ html: t })
-]), be = ({ onSelect: e }) => n([
+  t && g({ html: t })
+]), pe = ({ onSelect: e }) => n([
   v(
     "open",
     (t, s, o) => t ? new D({
@@ -99,11 +99,11 @@ const ce = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
       parent: o,
       button: o.button
     }, [
-      fe(e)
+      ge(e)
     ]) : null
   )
 ]);
-class mt extends p {
+class ft extends p {
   /**
    * This will declare the props for the compiler.
    *
@@ -157,24 +157,24 @@ class mt extends p {
    */
   render() {
     return n({ class: "relative" }, [
-      ge({
+      be({
         label: this.label,
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      be({ onSelect: this.handleSelect.bind(this) })
+      pe({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const pe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), xe = c((e, t) => W({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), we = c((e, t) => b({ ...e, class: "text-sm text-muted-foreground italic" }, t)), ye = c((e, t) => b({ ...e, class: "text-sm text-destructive" }, t)), ve = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", H = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = H(o.children, t, s)), o.required && ve(o) ? {
+const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), we = c((e, t) => W({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ye = c((e, t) => b({ ...e, class: "text-sm text-muted-foreground italic" }, t)), ve = c((e, t) => b({ ...e, class: "text-sm text-destructive" }, t)), Ce = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", q = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = q(o.children, t, s)), o.required && Ce(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
   input: t
-} : o)), Ce = c((e, t) => {
-  const r = H(t, (l) => {
+} : o)), ke = c((e, t) => {
+  const r = q(t, (l) => {
     l.target.checkValidity() && e.setError(null);
   }, (l) => {
     e.setError(l.target.validationMessage);
@@ -183,7 +183,7 @@ const pe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
     ...e,
     class: "w-full"
   }, r);
-}), ft = w(
+}), gt = w(
   {
     /**
      * The initial state of the FormField.
@@ -208,35 +208,35 @@ const pe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
         this.state.error = l, this.state.hasError = !!l;
       };
       return n({ class: "flex flex-auto space-y-4" }, [
-        pe([
-          xe({ htmlFor: t }, s),
-          Ce({
+        xe([
+          we({ htmlFor: t }, s),
+          ke({
             id: t,
             name: e,
             value: this.state.value,
             setError: r
           }, this.children),
-          o && we({ id: this.getId("description") }, o),
-          n({ onState: ["error", (l) => l && ye(l)] })
+          o && ye({ id: this.getId("description") }, o),
+          n({ onState: ["error", (l) => l && ve(l)] })
         ])
       ]);
     }
   }
-), ke = (e, t, s = null) => {
+), Se = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
-}, Se = c(
-  (e, t) => R({ ...e, submit: (s, o) => ke(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
-), gt = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), bt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
+}, De = c(
+  (e, t) => R({ ...e, submit: (s, o) => Se(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+), bt = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), pt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
   e.title && A({ class: "font-semibold" }, e.title),
   ...t
-])), pt = (e, t) => n({ class: "flex justify-between" }, [
+])), xt = (e, t) => n({ class: "flex justify-between" }, [
   a({ class: "text-muted-foreground" }, e),
   a(t)
-]), De = ({ title: e, description: t, back: s, icon: o, options: r = [] }) => B({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+]), Ie = ({ title: e, description: t, back: s, icon: o, options: r = [] }) => B({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
-  s && u({ variant: "icon", icon: d.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (l, i) => i.close() }),
+  s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (l, i) => i.close() }),
   /**
    * Icon
    */
@@ -251,20 +251,20 @@ const pe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
     ]),
     ...r
   ])
-]), Ie = c((e, t) => n({
+]), Te = c((e, t) => n({
   popover: "manual",
   class: `modal m-auto top-0 right-0 bottom-0 left-0 fixed z-20 grid w-full h-full max-h-screen gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 ${e.class}`,
   click: (s, o) => {
     s.target === o.panel && (s.preventDefault(), s.stopPropagation(), o.state.open = !1);
   }
 }, [
-  Se({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
-    De(e),
+  De({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
+    Ie(e),
     n({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
     M({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
   ])
-])), Te = (e) => q.render(e, app.root);
-class xt extends p {
+])), $e = (e) => U.render(e, app.root);
+class wt extends p {
   /**
    * This will declare the props for the compiler.
    *
@@ -280,7 +280,7 @@ class xt extends p {
    */
   render() {
     const t = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return Ie(
+    return Te(
       {
         class: t,
         title: s,
@@ -327,8 +327,8 @@ class xt extends p {
    */
   getButtons() {
     return [
-      u({ variant: "outline", click: () => this.destroy() }, "Cancel"),
-      this.hidePrimaryButton !== !0 && u({ variant: "primary", type: "submit" }, "Save")
+      h({ variant: "outline", click: () => this.destroy() }, "Cancel"),
+      this.hidePrimaryButton !== !0 && h({ variant: "primary", type: "submit" }, "Save")
     ];
   }
   /**
@@ -394,7 +394,7 @@ class xt extends p {
    * @returns {void}
    */
   open() {
-    Te(this), this.showModal();
+    $e(this), this.showModal();
   }
   /**
    * This will show the modal.
@@ -441,18 +441,18 @@ const F = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, $e = (e) => B({ class: "flex justify-center" }, [
+}, Ae = (e) => B({ class: "flex justify-center" }, [
   G({ class: "text-lg font-bold mb-0" }, e)
-]), Ae = c(({ href: e, class: t }, s) => Y({
+]), Be = c(({ href: e, class: t }, s) => Y({
   class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
   href: e,
   role: "alert"
-}, s)), Be = c(({ close: e, class: t }, s) => n({
+}, s)), Me = c(({ close: e, class: t }, s) => n({
   class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
   click: () => e(),
   role: "alert"
 }, s));
-class Me extends ae {
+class Le extends ce {
   /**
    * This will declare the props for the compiler.
    *
@@ -476,10 +476,10 @@ class Me extends ae {
    */
   render() {
     const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, l = this.getChildren(o);
-    return r ? Ae({
+    return r ? Be({
       href: r,
       class: `${t} ${s}`
-    }, l) : Be({
+    }, l) : Me({
       close: this.close.bind(this),
       class: `${t} ${s}`
     }, l);
@@ -491,7 +491,7 @@ class Me extends ae {
    */
   afterSetup() {
     const t = this.duration;
-    t !== "infinite" && (this.timer = new se(t, this.close.bind(this)), this.timer.start());
+    t !== "infinite" && (this.timer = new oe(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -510,8 +510,8 @@ class Me extends ae {
   getButtons() {
     return [
       n({ class: "flex flex-row mt-6 gap-2" }, [
-        this.secondary && u({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
-        this.primary && u({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
+        this.secondary && h({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
+        this.primary && h({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
       ])
     ];
   }
@@ -524,19 +524,19 @@ class Me extends ae {
   getChildren(t) {
     return [
       n({ class: "flex items-start" }, [
-        this.icon && f({ class: `mr-4 ${t}`, html: this.icon }),
+        this.icon && g({ class: `mr-4 ${t}`, html: this.icon }),
         n({ class: "flex flex-auto flex-col" }, [
           n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
-            this.title && $e(this.title)
+            this.title && Ae(this.title)
           ]),
           b({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
           (this.primary || this.secondary) && M({ class: "margin-top-24 flex align-center" }, this.getButtons())
         ])
       ]),
-      u({
+      h({
         class: "absolute top-[12px] right-[12px]",
         variant: "icon",
-        icon: d.x,
+        icon: u.x,
         click: this.close.bind(this)
       })
     ];
@@ -551,8 +551,8 @@ class Me extends ae {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Le = 0;
-class wt extends p {
+let Pe = 0;
+class yt extends p {
   /**
    * This will render the component.
    *
@@ -560,11 +560,11 @@ class wt extends p {
    */
   render() {
     return n({ class: "notification-container pointer-events-none inset-auto bg-transparent backdrop:bg-transparent overflow-visible fixed bottom-[80px] right-0 z-50 p-5", popover: "manual" }, [
-      new oe({
+      new ne({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new Me(t)
+        rowItem: (t) => new Le(t)
       })
     ]);
   }
@@ -575,7 +575,7 @@ class wt extends p {
    * @returns {void}
    */
   addNotice(t = {}) {
-    t.id = Le++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+    t.id = Pe++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -587,17 +587,17 @@ class wt extends p {
     this.list.delete(t.id);
   }
 }
-const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
+const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   class: 'text-sm gap-1 font-medium leading-none disabled:cursor-not-allowed disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 bg-popover p-4 hover:bg-accent hover:text-accent-foreground data-[state="active"]:border-primary [&:has([data-state="active"])]:border-primary',
   onState: ["method", { active: e }],
   dataSet: ["method", ["state", e, "active"]],
   click: (o, { state: r }) => {
-    r.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Pe(e);
+    r.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Fe(e);
   }
 }, [
   x(s),
   a(t)
-])), Pe = (e) => {
+])), Fe = (e) => {
   var o;
   const t = document.documentElement;
   if (e === "system" && (e = (o = window.matchMedia) != null && o.call(window, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), N && !N("(prefers-color-scheme: " + e + ")").matches) {
@@ -606,7 +606,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, yt = S(
+}, vt = S(
   {
     /**
      * This will render the component.
@@ -616,9 +616,9 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
     render() {
       return n({ class: "flex flex-auto flex-col" }, [
         n({ class: "grid grid-cols-3 gap-4" }, [
-          I({ label: "System", value: "system", icon: d.adjustments.horizontal }),
-          I({ label: "Light", value: "light", icon: d.sun }),
-          I({ label: "Dark", value: "dark", icon: d.moon })
+          I({ label: "System", value: "system", icon: u.adjustments.horizontal }),
+          I({ label: "Light", value: "light", icon: u.sun }),
+          I({ label: "Dark", value: "dark", icon: u.moon })
         ])
       ]);
     },
@@ -633,7 +633,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
       };
     }
   }
-), vt = w(
+), Ct = w(
   {
     /**
      * The initial state of the Toggle.
@@ -660,7 +660,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
      * @returns {object}
      */
     render() {
-      return h({
+      return m({
         class: "relative inline-flex h-6 w-11 min-w-11 items-center rounded-full bg-muted transition-colors focus:outline-none",
         onState: ["active", { "bg-primary": !0, "bg-muted": !1 }],
         click: (t, { state: s }) => {
@@ -690,22 +690,22 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
   OFFLINE: "offline",
   BUSY: "busy",
   AWAY: "away"
-}, m = {
+}, f = {
   ONLINE: "bg-green-500",
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Fe = (e = "") => (e = e.toUpperCase(), m[e] || m.OFFLINE), Ct = (e) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Fe(e)}`
-}), kt = ({ propName: e = "status" } = {}) => n({
+}, Ne = (e = "") => (e = e.toUpperCase(), f[e] || f.OFFLINE), kt = (e) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ne(e)}`
+}), St = ({ propName: e = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
-    [m.ONLINE]: y.ONLINE,
-    [m.OFFLINE]: y.OFFLINE,
-    [m.BUSY]: y.BUSY,
-    [m.AWAY]: y.AWAY
+    [f.ONLINE]: y.ONLINE,
+    [f.OFFLINE]: y.OFFLINE,
+    [f.BUSY]: y.BUSY,
+    [f.AWAY]: y.AWAY
   }]
-}), Ne = (e, t) => Y(
+}), ze = (e, t) => Y(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
@@ -713,14 +713,14 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
   [a(t)]
-), ze = () => x({
+), Ee = () => x({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, d.chevron.single.right), Ee = (e) => n({ class: "flex items-center" }, [
-  e.href ? Ne(e.href, e.label) : a(e.label),
-  e.separator && ze()
-]), St = S(
+}, u.chevron.single.right), je = (e) => n({ class: "flex items-center" }, [
+  e.href ? ze(e.href, e.label) : a(e.label),
+  e.separator && Ee()
+]), Dt = S(
   {
     /**
      * Set initial data
@@ -749,7 +749,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
           n({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, s) => Ee({
+            for: ["items", (t, s) => je({
               href: t.href,
               label: t.label,
               separator: s < e
@@ -768,7 +768,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, je = (e) => z[e] || z.default, Oe = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+}, Oe = (e) => z[e] || z.default, Ve = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
   a({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
@@ -779,10 +779,10 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
       o.activeIndex = e, r && r(e);
     }
   })
-]), Ve = (e, t) => Array.from({ length: e }, (s, o) => Oe({
+]), Ye = (e, t) => Array.from({ length: e }, (s, o) => Ve({
   index: o,
   size: t
-})), Dt = S(
+})), It = S(
   {
     /**
      * Defines component data (props).
@@ -804,7 +804,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
      * @returns {object}
      */
     render() {
-      const e = this.gap || "gap-2", t = je(this.size || "sm"), s = Ve(this.data.count, t);
+      const e = this.gap || "gap-2", t = Oe(this.size || "sm"), s = Ye(this.data.count, t);
       return n(
         { class: "flex justify-center items-center py-2" },
         [
@@ -813,7 +813,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
       );
     }
   }
-), Ye = ({ toggleDropdown: e }) => h(
+), Ue = ({ toggleDropdown: e }) => m(
   {
     cache: "button",
     class: "relative z-[2] inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-muted h-10 px-4 py-2 justify-between",
@@ -821,7 +821,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
   },
   [
     a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
-    f({ html: d.chevron.upDown })
+    g({ html: u.chevron.upDown })
   ]
 ), qe = (e, t, s) => O({
   class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
@@ -832,7 +832,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
   a({ class: "text-base font-normal" }, e.label)
 ]), He = (e, t) => n({ class: "w-full border rounded-md" }, [
   V({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => qe(s, e, t)] })
-]), Ue = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
+]), _e = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
   v(
     "open",
     (s, o, r) => s ? new D({
@@ -843,7 +843,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
       He(e, t)
     ]) : null
   )
-]), It = S(
+]), Tt = S(
   {
     /**
      * This will set up the data.
@@ -924,8 +924,8 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
       const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
       return n({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
         // @ts-ignore
-        Ye({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        Ue({
+        Ue({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        _e({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -945,26 +945,26 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
       ]);
     }
   }
-), U = ({ icon: e, click: t, ariaLabel: s }) => u({
+), H = ({ icon: e, click: t, ariaLabel: s }) => h({
   variant: "icon",
   class: "flex flex-none",
   click: t,
   icon: e,
   "aria-label": s
-}), _e = ({ click: e }) => U({
-  icon: d.circleMinus,
+}), We = ({ click: e }) => H({
+  icon: u.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), We = ({ click: e }) => U({
-  icon: d.circlePlus,
+}), Re = ({ click: e }) => H({
+  icon: u.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), Re = ({ bind: e, min: t, max: s, readonly: o = !1 }) => C({
-  value: "[[count]]",
+}), Ge = ({ bind: e, min: t, max: s, readonly: o = !1 }) => Q(({ state: r }) => C({
+  value: ["[[count]]", r],
   bind: e,
-  blur: (r, { state: l }) => {
-    let i = parseInt(r.target.value, 10);
-    isNaN(i) && (i = t ?? 0), t !== void 0 && (i = Math.max(i, t)), s !== void 0 && (i = Math.min(i, s)), l.count = i;
+  blur: (l, { state: i }) => {
+    let d = parseInt(l.target.value, 10);
+    isNaN(d) && (d = t ?? 0), t !== void 0 && (d = Math.max(d, t)), s !== void 0 && (d = Math.min(d, s)), i.count = d;
   },
   class: "flex flex-auto text-lg font-medium bg-transparent text-center border min-w-0",
   readonly: o,
@@ -972,7 +972,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
   max: s,
   type: "number",
   "aria-label": "Counter"
-}), Tt = w(
+})), $t = w(
   {
     /**
      * Initial state for the counter component.
@@ -995,32 +995,32 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
     render() {
       const e = this.class ?? "";
       return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
-        _e({ click: () => this.state.decrement("count") }),
-        Re({
+        We({ click: () => this.state.decrement("count") }),
+        Ge({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        We({ click: () => this.state.increment("count") })
+        Re({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), Ge = ({ bind: e, required: t }) => C({
+), Je = ({ bind: e, required: t }) => C({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), Je = ({ bind: e, required: t, toggleOpen: s }) => h({
+}), Ke = ({ bind: e, required: t, toggleOpen: s }) => m({
   class: "relative flex items-center gap-2 w-full justify-between border border-input bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
   click: s
 }, [
-  Ge({ bind: e, required: t }),
+  Je({ bind: e, required: t }),
   a({
     onState: ["selectedDate", (o) => o ? $.format("standard", o) : "Pick a date"]
   }),
-  f({ html: d.calendar.days })
-]), Ke = ({ handleDateSelect: e, blockPriorDates: t }) => n({ class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" }, [
+  g({ html: u.calendar.days })
+]), Qe = ({ handleDateSelect: e, blockPriorDates: t }) => n({ class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" }, [
   v(
     "open",
     (s, o, r) => s ? new D({
@@ -1029,14 +1029,14 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
       button: r.panel,
       size: "fit"
     }, [
-      new te({
+      new se({
         selectedDate: r.state.selectedDate,
         selectedCallBack: e,
         blockPriorDates: t
       })
     ]) : null
   )
-]), $t = w(
+]), At = w(
   {
     /**
      * The initial state of the DatePicker.
@@ -1068,20 +1068,20 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
         this.state.selectedDate = s, this.state.open = !1, this.input.value = s, typeof this.onChange == "function" && this.onChange(s);
       };
       return n({ class: "relative w-full max-w-[320px]" }, [
-        Je({
+        Ke({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        Ke({
+        Qe({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), At = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => Q([
-  new ne({
+), Bt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => X([
+  new re({
     dateTime: e,
     filter: s || ((o) => {
       const r = $.getLocalTime(o, !0, !1, t);
@@ -1089,7 +1089,7 @@ const N = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => h({
     })
   })
 ]);
-function Qe({ bind: e, required: t }) {
+function Xe({ bind: e, required: t }) {
   return C({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
@@ -1097,18 +1097,18 @@ function Qe({ bind: e, required: t }) {
     required: t
   });
 }
-function Xe({ bind: e, required: t, toggleOpen: s }) {
-  return h(
+function Ze({ bind: e, required: t, toggleOpen: s }) {
+  return m(
     {
       class: "relative flex items-center gap-2 w-full justify-between border border-input bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
       click: s
     },
     [
-      Qe({ bind: e, required: t }),
+      Xe({ bind: e, required: t }),
       a({
         onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
-      f({ html: d.clock })
+      g({ html: u.clock })
     ]
   );
 }
@@ -1117,7 +1117,7 @@ function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: r = !1
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
     e.map((l) => {
       let i = r ? l.toString().padStart(2, "0") : l.toString();
-      return h({
+      return m({
         text: i,
         class: "hover:bg-muted/50 rounded-md px-2 py-1",
         click: () => t({ [o]: i }),
@@ -1126,7 +1126,7 @@ function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: r = !1
     })
   );
 }
-function Ze({ handleTimeSelect: e }) {
+function et({ handleTimeSelect: e }) {
   return n(
     { class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" },
     [
@@ -1185,14 +1185,14 @@ function E(e) {
   const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
   if (!s)
     return { hour: null, minute: null, meridian: null };
-  let [, o, r, , l] = s, i = parseInt(o, 10), g = parseInt(r, 10);
-  return i < 0 || i > 23 || g < 0 || g > 59 ? { hour: null, minute: null, meridian: null } : (l ? (l = l.toUpperCase(), l === "PM" && i < 12 ? i += 12 : l === "AM" && i === 12 && (i = 12)) : i === 0 ? (l = "AM", i = 12) : i < 12 ? l = "AM" : i === 12 ? l = "PM" : (l = "PM", i -= 12), {
+  let [, o, r, , l] = s, i = parseInt(o, 10), d = parseInt(r, 10);
+  return i < 0 || i > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (l ? (l = l.toUpperCase(), l === "PM" && i < 12 ? i += 12 : l === "AM" && i === 12 && (i = 12)) : i === 0 ? (l = "AM", i = 12) : i < 12 ? l = "AM" : i === 12 ? l = "PM" : (l = "PM", i -= 12), {
     hour: i.toString().padStart(2, "0"),
-    minute: g.toString().padStart(2, "0"),
+    minute: d.toString().padStart(2, "0"),
     meridian: l
   });
 }
-const Bt = w(
+const Mt = w(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1240,23 +1240,23 @@ const Bt = w(
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          Xe({
+          Ze({
             toggleOpen: e,
             bind: this.bind,
             required: this.required
           }),
-          Ze({
+          et({
             handleTimeSelect: t
           })
         ]
       );
     }
   }
-), et = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+), tt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
   x({ size: "lg" }, e)
-]), tt = ({ title: e }) => B({ class: "flex flex-auto items-center" }, [
+]), st = ({ title: e }) => B({ class: "flex flex-auto items-center" }, [
   A({ class: "text-lg font-semibold" }, e)
-]), st = c((e, t) => X(
+]), ot = c((e, t) => Z(
   {
     class: `fixed pullUpIn z-30 w-[98%] border md:w-full max-w-lg bg-popover text-foreground shadow-lg duration-200
 				rounded-lg flex flex-auto flex-col
@@ -1267,10 +1267,10 @@ const Bt = w(
   [
     n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && et(e.icon, e.iconColor),
+      e.icon && tt(e.icon, e.iconColor),
       n({ class: "flex flex-auto flex-col gap-4" }, [
         n({ class: "flex flex-auto flex-col space-y-2" }, [
-          tt(e),
+          st(e),
           e.description && b({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
           n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
         ]),
@@ -1278,7 +1278,7 @@ const Bt = w(
       ])
     ])
   ]
-)), ot = (e) => q.render(e, app.root), j = {
+)), nt = (e) => U.render(e, app.root), j = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1305,7 +1305,7 @@ const Bt = w(
     iconColor: "text-muted-foreground"
   }
 };
-class nt extends p {
+class rt extends p {
   /**
    * This will declare the props for the compiler.
    *
@@ -1320,10 +1320,10 @@ class nt extends p {
    * @returns {object}
    */
   render() {
-    const t = (g) => {
-      g.target === this.panel && this.close();
+    const t = (d) => {
+      d.target === this.panel && this.close();
     }, { borderColor: s, bgColor: o, iconColor: r } = j[this.type] || j.default, l = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
-    return st({
+    return ot({
       class: l,
       title: i,
       click: t,
@@ -1340,7 +1340,7 @@ class nt extends p {
    */
   getButtons() {
     return this.hideFooter ? null : this.buttons ? this.buttons : [
-      u({ variant: "outline", click: () => this.close() }, "Close")
+      h({ variant: "outline", click: () => this.close() }, "Close")
     ];
   }
   /**
@@ -1367,7 +1367,7 @@ class nt extends p {
    * @returns {void}
    */
   open() {
-    ot(this), this.panel.showModal(), this.state.open = !0;
+    nt(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1378,7 +1378,7 @@ class nt extends p {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class Mt extends nt {
+class Lt extends rt {
   /**
    * This will declare the props for the compiler.
    *
@@ -1395,8 +1395,8 @@ class Mt extends nt {
   getButtons() {
     const t = this.confirmTextLabel || "Confirm";
     return [
-      u({ variant: "outline", click: () => this.close() }, "Cancel"),
-      u({ variant: "primary", click: () => this.confirm() }, t)
+      h({ variant: "outline", click: () => this.close() }, "Cancel"),
+      h({ variant: "primary", click: () => this.confirm() }, t)
     ];
   }
   /**
@@ -1409,42 +1409,42 @@ class Mt extends nt {
   }
 }
 export {
-  ht as A,
-  St as B,
-  It as C,
-  ae as D,
-  st as E,
-  pe as F,
-  nt as G,
-  xt as M,
-  wt as N,
-  We as P,
-  pt as S,
-  yt as T,
-  he as a,
-  mt as b,
-  fe as c,
-  xe as d,
-  we as e,
-  ye as f,
-  Ce as g,
-  ft as h,
-  Se as i,
-  gt as j,
-  bt as k,
-  Me as l,
-  vt as m,
-  Ct as n,
-  kt as o,
+  mt as A,
+  Dt as B,
+  Tt as C,
+  ce as D,
+  ot as E,
+  xe as F,
+  rt as G,
+  wt as M,
+  yt as N,
+  Re as P,
+  xt as S,
+  vt as T,
+  me as a,
+  ft as b,
+  ge as c,
+  we as d,
+  ye as e,
+  ve as f,
+  ke as g,
+  gt as h,
+  De as i,
+  bt as j,
+  pt as k,
+  Le as l,
+  Ct as m,
+  kt as n,
+  St as o,
   y as p,
-  m as q,
-  Fe as r,
-  Dt as s,
-  _e as t,
-  Re as u,
-  Tt as v,
-  $t as w,
-  At as x,
-  Bt as y,
-  Mt as z
+  f as q,
+  Ne as r,
+  It as s,
+  We as t,
+  Ge as u,
+  $t as v,
+  At as w,
+  Bt as x,
+  Mt as y,
+  Lt as z
 };

package/dist/index.es.js

@@ -1,9 +1,9 @@
-import { B as e, C as o, a as t, F as r, L as n, P as i, R as l, S as p, b as u, T as m } from "./tooltip-DE-UvmQt.js";
+import { B as e, C as o, a as t, F as r, L as n, P as i, R as l, S as p, b as u, T as m } from "./tooltip-VG86HlGW.js";
 import { B as g, I as T, L as c } from "./buttons-CVEwmPAi.js";
 import { C as b, d as D, D as S, c as I, E as B, F as P, H as F, I as M, M as k, N, P as v, R as f, S as x, T as h, a as y, b as W, U as L, W as A } from "./inputs-nzivW9Dr.js";
 import { V as w, a as U } from "./veil-D4dRxILB.js";
 import { Icons as R } from "./icons.es.js";
-import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ta, p as ca, q as Ca, S as ba, n as Da, o as Sa, T as Ia, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-Co-ayoR2.js";
+import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ta, p as ca, q as Ca, S as ba, n as Da, o as Sa, T as Ia, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-CY6otODd.js";
 import { A as Na, b as va, C as fa, D as xa, a as ha, F as ya, M as Wa, P as La, c as Aa, g as Ha, p as wa } from "./calendar-BDqm833e.js";
 import { B as Oa, n as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, m as Xa, r as Ya, q as Za, o as $a, p as as, T as ss, k as es, U as os, W as ts, f as rs, h as ns, i as is, c as ls, d as ps, b as us, e as ms, a as ds, g as gs } from "./signature-panel-BFels99c.js";
 import { B as cs, I as Cs, M as bs, d as Ds, e as Ss, g as Is, N as Bs, b as Ps, a as Fs, f as Ms, P as ks, c as Ns, S as vs, T as fs } from "./mobile-nav-wrapper-BE_hr65B.js";

package/dist/molecules.es.js

@@ -1,4 +1,4 @@
-import { A as o, B as t, C as e, z as i, u as r, v as n, w as m, D as l, j as S, k as D, G as c, E as u, s as d, c as g, a as p, b as C, i as F, g as T, e as A, h as P, F as f, d as b, f as w, t as B, M as I, l as M, N as x, P as y, p as k, q as v, S as N, n as h, o as E, T as L, x as U, y as j, m as q, r as z } from "./confirmation-Co-ayoR2.js";
+import { A as o, B as t, C as e, z as i, u as r, v as n, w as m, D as l, j as S, k as D, G as c, E as u, s as d, c as g, a as p, b as C, i as F, g as T, e as A, h as P, F as f, d as b, f as w, t as B, M as I, l as M, N as x, P as y, p as k, q as v, S as N, n as h, o as E, T as L, x as U, y as j, m as q, r as z } from "./confirmation-CY6otODd.js";
 import { A as O, P as R, g as _ } from "./calendar-BDqm833e.js";
 export {
   o as Alert,

package/dist/{tooltip-DE-UvmQt.js → tooltip-VG86HlGW.js}

@@ -1,7 +1,7 @@
-import { Span as c, Div as l, Legend as b, Fieldset as f, Input as x } from "@base-framework/atoms";
-import { Atom as s, Html as C } from "@base-framework/base";
+import { Span as c, Div as l, Legend as b, Fieldset as f, UseParent as x, Input as C } from "@base-framework/atoms";
+import { Atom as s, Html as p } from "@base-framework/base";
 import { a as u } from "./veil-D4dRxILB.js";
-import { f as p, e as h, g as y } from "./inputs-nzivW9Dr.js";
+import { f as h, e as y, g as k } from "./inputs-nzivW9Dr.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",
@@ -78,31 +78,31 @@ const a = {
     textColor: "text-primary",
     ringColor: "ring-background"
   }
-}, k = (t) => a[t] || a.gray, w = (t) => {
-  const { backgroundColor: r, textColor: e, ringColor: o } = k(t);
-  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${r} ${e} ${o}`;
-}, F = s((t, r) => {
-  const e = w(t == null ? void 0 : t.type);
-  return c({ ...t, class: e }, r);
-}), T = s((t, r) => {
-  const e = t.margin ?? "my-5 mx-5", o = t.padding ?? "p-4";
+}, w = (t) => a[t] || a.gray, $ = (t) => {
+  const { backgroundColor: e, textColor: r, ringColor: o } = w(t);
+  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${e} ${r} ${o}`;
+}, T = s((t, e) => {
+  const r = $(t == null ? void 0 : t.type);
+  return c({ ...t, class: r }, e);
+}), L = s((t, e) => {
+  const r = t.margin ?? "my-5 mx-5", o = t.padding ?? "p-4";
   return l({
     ...t,
-    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${e} ${o} ${t.class || ""}`
-  }, r);
-}), $ = s((t, r) => b({
+    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${r} ${o} ${t.class || ""}`
+  }, e);
+}), v = s((t, e) => b({
   ...t,
   class: ` font-medium bg-background -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
-}, r)), L = s((t, r) => {
-  const e = t.border === "full" ? "border rounded-md" : "border-t";
+}, e)), I = s((t, e) => {
+  const r = t.border === "full" ? "border rounded-md" : "border-t";
   return f({
     ...t,
-    class: `p-6 ${e} ${t.class || ""}`
+    class: `p-6 ${r} ${t.class || ""}`
   }, [
-    t.legend && $(t.legend),
-    l({ class: "flex flex-auto flex-col space-y-6" }, r)
+    t.legend && v(t.legend),
+    l({ class: "flex flex-auto flex-col space-y-6" }, e)
   ]);
-}), I = u(
+}), G = u(
   {
     /**
      * This will create the initial state of the RangeSlider.
@@ -135,52 +135,52 @@ const a = {
       return l({ class: "relative w-full h-4 flex items-center" }, [
         // Track
         l({ class: "absolute h-2 w-full rounded-full bg-muted" }),
-        // Filled Track
-        l({
-          class: "absolute h-2 bg-primary rounded-full",
-          style: "width: [[filledPercentage]]%"
-        }),
-        // Thumb
-        l({
-          class: `
-					absolute block h-5 w-5 rounded-full border-2 border-primary bg-background
-					ring-offset-background transition-colors focus-visible:outline-none
-					focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-					disabled:pointer-events-none disabled:opacity-50 transform -translate-x-1/2
-				`.trim(),
-          style: "left: [[filledPercentage]]%"
-        }),
-        // Hidden Range Input
-        x({
-          type: "range",
-          min: "[[min]]",
-          max: "[[max]]",
-          value: "[[value]]",
-          // Incorporate your new classes here
-          class: `
-					absolute w-full h-full opacity-0 cursor-pointer
-					${p}
-					${h}
-					${this.class || ""}
-				`.trim(),
-          bind: this.bind,
-          input: (t) => {
-            const r = Number(t.target.value);
-            this.state.value = r, this.state.filledPercentage = this.getFillPercentage(r), typeof this.change == "function" && this.change(r);
-          }
-        })
+        x(({ state: t }) => (
+          // Filled Track
+          (l({
+            class: "absolute h-2 bg-primary rounded-full",
+            style: ["width: [[filledPercentage]]%", t]
+          }), // Thumb
+          l({
+            class: `
+						absolute block h-5 w-5 rounded-full border-2 border-primary bg-background
+						ring-offset-background transition-colors focus-visible:outline-none
+						focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+						disabled:pointer-events-none disabled:opacity-50 transform -translate-x-1/2
+					`.trim(),
+            style: ["left: [[filledPercentage]]%", t]
+          }), // Hidden Range Input
+          C({
+            type: "range",
+            min: ["[[min]]", t],
+            max: ["[[max]]", t],
+            value: ["[[value]]", t],
+            // Incorporate your new classes here
+            class: `
+						absolute w-full h-full opacity-0 cursor-pointer
+						${h}
+						${y}
+						${this.class || ""}
+					`.trim(),
+            bind: this.bind,
+            input: (e) => {
+              const r = Number(e.target.value);
+              this.state.value = r, this.state.filledPercentage = this.getFillPercentage(r), typeof this.change == "function" && this.change(r);
+            }
+          }))
+        ))
       ]);
     }
   }
-), G = s((t) => ({
+), R = s((t) => ({
   tag: "select",
   ...t,
-  class: `${y} ${t.class || ""}`.trim(),
-  onCreated(r) {
-    t.options && C.setupSelectOptions(r, t.options);
+  class: `${k} ${t.class || ""}`.trim(),
+  onCreated(e) {
+    t.options && p.setupSelectOptions(e, t.options);
   }
-})), v = (t) => !t || isNaN(t) ? null : t, i = (t, r) => {
-  const e = t, o = 16, n = 2 * Math.PI * o, d = e / 100 * n, m = `
+})), P = (t) => !t || isNaN(t) ? null : t, i = (t, e) => {
+  const r = t, o = 16, n = 2 * Math.PI * o, d = r / 100 * n, m = `
 	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 		<!-- Background Circle -->
 		<circle
@@ -205,7 +205,7 @@ const a = {
 			stroke-dasharray="${n}"
 			stroke-dashoffset="${n - d}"
 			stroke-linecap="round"
-			class="${r}"
+			class="${e}"
 		/>
 		<!-- Percentage Text -->
 		<text
@@ -214,7 +214,7 @@ const a = {
 			class="text-[0.25em] font-medium fill-primary"
 			text-anchor="middle"
 			dominant-baseline="middle">
-			${e}%
+			${r}%
 		</text>
 	</svg>
 	`;
@@ -222,19 +222,19 @@ const a = {
     class: "circle-graph text-inherit",
     html: m
   });
-}, R = s((t) => {
-  const r = t.progress || 0, e = t.class || "", o = i(r, e);
+}, O = s((t) => {
+  const e = t.progress || 0, r = t.class || "", o = i(e, r);
   return l({
     class: "circle-graph-wrap",
     onSet: [
       t.prop,
-      (n) => (n = v(n), n ? i(n, e) : o)
+      (n) => (n = P(n), n ? i(n, r) : o)
     ]
   }, [o]);
-}), P = () => l({
+}), S = () => l({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
   style: "width: [[progress]]%;"
-}), O = u(
+}), V = u(
   {
     /**
      * This will render the progress bar component.
@@ -243,7 +243,7 @@ const a = {
      */
     render() {
       return l({ class: "relative w-full h-4 rounded-full bg-muted" }, [
-        P()
+        S()
       ]);
     },
     /**
@@ -272,8 +272,8 @@ const a = {
      */
     uploadProgress(t) {
       if (t.lengthComputable) {
-        const e = Math.round(t.loaded * 100 / t.total);
-        this.set(e);
+        const r = Math.round(t.loaded * 100 / t.total);
+        this.set(r);
       }
     },
     /**
@@ -286,8 +286,8 @@ const a = {
       t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
     }
   }
-), V = ({ class: t, shape: r = "rectangle", width: e = "w-full", height: o = "h-4" }) => l({
-  class: `bg-muted animate-pulse ${e} ${o} ${r === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
+), D = ({ class: t, shape: e = "rectangle", width: r = "w-full", height: o = "h-4" }) => l({
+  class: `bg-muted animate-pulse ${r} ${o} ${e === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
 }), g = {
   top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
   "top-right": "bottom-full left-full transform -translate-x-1 mb-2",
@@ -297,28 +297,28 @@ const a = {
   "bottom-left": "top-full right-full transform translate-x-1 mt-2",
   left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
   right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
-}, S = (t) => g[t] || g.top, D = s(({ position: t = "top", content: r }, e) => {
-  const o = S(t);
-  return Array.isArray(e) === !1 && (e = [e]), l({ class: "relative group inline-block" }, [
-    ...e,
+}, E = (t) => g[t] || g.top, M = s(({ position: t = "top", content: e }, r) => {
+  const o = E(t);
+  return Array.isArray(r) === !1 && (r = [r]), l({ class: "relative group inline-block" }, [
+    ...r,
     // Tooltip box
     c({
       class: `
 				absolute z-20 px-2 py-1 border text-sm bg-background rounded shadow-md opacity-0 whitespace-nowrap
 				group-hover:opacity-100 transition-opacity duration-200 ${o} pointer-events-none
 			`
-    }, r)
+    }, e)
   ]);
 });
 export {
-  F as B,
-  T as C,
-  L as F,
-  $ as L,
-  O as P,
-  I as R,
-  G as S,
-  D as T,
-  R as a,
-  V as b
+  T as B,
+  L as C,
+  I as F,
+  v as L,
+  V as P,
+  G as R,
+  R as S,
+  M as T,
+  O as a,
+  D as b
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.96",
+	"version": "1.0.98",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {