@base-framework/ui 1.0.164 → 1.0.166

package/dist/{confirmation-Ddu2P1Ne.js → confirmation-BO_EbQkm.js}

@@ -1,10 +1,10 @@
-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 R, Form as W, 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 H, Jot as x, DateTime as $ } from "@base-framework/base";
+import { Div as n, H5 as _, P as p, I as g, Li as O, Span as a, Ul as V, Button as m, OnState as y, Label as R, Form as W, H2 as A, Header as B, Footer as M, A as Y, H3 as G, Checkbox as J, Nav as K, Input as v, UseParent as Q, Time as X, Dialog as Z } from "@base-framework/atoms";
+import { Atom as c, Component as b, Html as L, Dom as ee, base as te, Data as C, Builder as H, Jot as k, DateTime as $ } from "@base-framework/base";
 import { P as S, b as se } from "./calendar-DQXME-2u.js";
-import { B as h, I as w } from "./buttons-Cm9etaEG.js";
+import { B as h, I as x } from "./buttons-Cm9etaEG.js";
 import { Icons as u } from "./icons.es.js";
-import { a as D } from "./veil-D4dRxILB.js";
-import { Timer as oe, List as ne, DynamicTime as re } from "@base-framework/organisms";
+import { a as D, V as oe } from "./veil-D4dRxILB.js";
+import { Timer as ne, List as re, DynamicTime as le } 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"
   }
-}, le = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+}, ie = (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" }) => {
+]), ae = (e) => _({ class: "font-semibold" }, e), ce = (e) => p({ class: "text-sm text-muted-foreground" }, e), ft = 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 && le(s, i),
+    s && ie(s, i),
     n({ class: "flex flex-col" }, [
-      ie(e),
-      ae(t)
+      ae(e),
+      ce(t)
     ])
   ]);
 });
-class ce extends p {
+class de extends b {
   /**
    * This will declare the props for the compiler.
    *
@@ -68,19 +68,19 @@ class ce extends p {
     ee.addClass(t, s), te.on("animationend", t, (o) => L.removeElement(t));
   }
 }
-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({
+const ue = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), he = (e) => a({ class: "flex w-4 h-4", html: e }), me = (e) => a({ class: "flex-auto" }, e), fe = (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 && 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" }, [
+  e.icon && he(e.icon),
+  me(e.label),
+  e.shortcut && ue(e.shortcut)
+]), ge = (e, t) => V({ class: "grid gap-2" }, [
+  e.map((s) => fe(s, t))
+]), pe = (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) => fe(t, e)]
+    for: ["groups", (t) => ge(t, e)]
   })
 ]), be = ({ label: e, icon: t, toggleDropdown: s }) => m({
   cache: "button",
@@ -91,19 +91,19 @@ const de = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
 }, [
   e && a(e),
   t && g({ html: t })
-]), pe = ({ onSelect: e }) => n([
-  v(
+]), xe = ({ onSelect: e }) => n([
+  y(
     "open",
     (t, s, o) => t ? new S({
       cache: "dropdown",
       parent: o,
       button: o.button
     }, [
-      ge(e)
+      pe(e)
     ]) : null
   )
 ]);
-class ft extends p {
+class gt extends b {
   /**
    * This will declare the props for the compiler.
    *
@@ -118,7 +118,7 @@ class ft extends p {
    * @returns {Data}
    */
   setData() {
-    return new k({
+    return new C({
       groups: this.groups || []
     });
   }
@@ -162,18 +162,18 @@ class ft extends p {
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      pe({ onSelect: this.handleSelect.bind(this) })
+      xe({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), we = c((e, t) => R({ ...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", U = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = U(o.children, t, s)), o.required && Ce(o) ? {
+const we = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), ye = c((e, t) => R({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ve = c((e, t) => p({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Ce = c((e, t) => p({ ...e, class: "text-sm text-destructive" }, t)), ke = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", U = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = U(o.children, t, s)), o.required && ke(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
   input: t
-} : o)), ke = c((e, t) => {
+} : o)), Se = c((e, t) => {
   const r = U(t, (l) => {
     l.target.checkValidity() && e.setError(null);
   }, (l) => {
@@ -183,7 +183,7 @@ const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
     ...e,
     class: "w-full"
   }, r);
-}), gt = D(
+}), pt = D(
   {
     /**
      * The initial state of the FormField.
@@ -208,34 +208,34 @@ const xe = 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" }, [
-        xe([
-          we({ htmlFor: t }, s),
-          ke({
+        we([
+          ye({ htmlFor: t }, s),
+          Se({
             id: t,
             name: e,
             value: this.state.value,
             setError: r
           }, this.children),
-          o && ye({ id: this.getId("description") }, o),
-          n({ onState: ["error", (l) => l && ve(l)] })
+          o && ve({ id: this.getId("description") }, o),
+          n({ onState: ["error", (l) => l && Ce(l)] })
         ])
       ]);
     }
   }
-), Se = (e, t, s = null) => {
+), De = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
-}, De = c(
-  (e, t) => W({ ...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" }, [
+}, Ie = c(
+  (e, t) => W({ ...e, submit: (s, o) => De(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)), xt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
   e.title && A({ class: "font-semibold" }, e.title),
   ...t
-])), xt = (e, t) => n({ class: "flex justify-between" }, [
+])), wt = (e, t) => n({ class: "flex justify-between" }, [
   a({ class: "text-muted-foreground" }, e),
   a(t)
-]), wt = (e, t) => n({ class: "flex" }, [
+]), yt = (e, t) => n({ class: "flex" }, [
   a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
   a(t)
-]), 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" }, [
+]), Te = ({ 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
    */
@@ -243,7 +243,7 @@ const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   /**
    * Icon
    */
-  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [w(o)]),
+  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [x(o)]),
   /**
    * Title and Description
    */
@@ -254,20 +254,20 @@ const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
     ]),
     ...r
   ])
-]), Te = c((e, t) => n({
+]), $e = 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);
   }
 }, [
-  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),
+  Ie({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
+    Te(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)
   ])
-])), $e = (e) => H.render(e, app.root);
-class yt extends p {
+])), Ae = (e) => H.render(e, app.root);
+class vt extends b {
   /**
    * This will declare the props for the compiler.
    *
@@ -283,7 +283,7 @@ class yt extends p {
    */
   render() {
     const t = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return Te(
+    return $e(
       {
         class: t,
         title: s,
@@ -397,7 +397,7 @@ class yt extends p {
    * @returns {void}
    */
   open() {
-    $e(this), this.showModal();
+    Ae(this), this.showModal();
   }
   /**
    * This will show the modal.
@@ -444,18 +444,18 @@ const F = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Ae = (e) => B({ class: "flex justify-center" }, [
+}, Be = (e) => B({ class: "flex justify-center" }, [
   G({ class: "text-lg font-bold mb-0" }, e)
-]), Be = c(({ href: e, class: t }, s) => Y({
+]), Me = 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)), Me = c(({ close: e, class: t }, s) => n({
+}, s)), Le = 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 Le extends ce {
+class Pe extends de {
   /**
    * This will declare the props for the compiler.
    *
@@ -479,10 +479,10 @@ class Le extends ce {
    */
   render() {
     const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, l = this.getChildren(o);
-    return r ? Be({
+    return r ? Me({
       href: r,
       class: `${t} ${s}`
-    }, l) : Me({
+    }, l) : Le({
       close: this.close.bind(this),
       class: `${t} ${s}`
     }, l);
@@ -494,7 +494,7 @@ class Le extends ce {
    */
   afterSetup() {
     const t = this.duration;
-    t !== "infinite" && (this.timer = new oe(t, this.close.bind(this)), this.timer.start());
+    t !== "infinite" && (this.timer = new ne(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -530,9 +530,9 @@ class Le extends ce {
         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 && Ae(this.title)
+            this.title && Be(this.title)
           ]),
-          b({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
+          p({ 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())
         ])
       ]),
@@ -554,8 +554,8 @@ class Le extends ce {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Pe = 0;
-class vt extends p {
+let Fe = 0;
+class Ct extends b {
   /**
    * This will render the component.
    *
@@ -563,11 +563,11 @@ class vt 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 ne({
+      new re({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new Le(t)
+        rowItem: (t) => new Pe(t)
       })
     ]);
   }
@@ -578,7 +578,7 @@ class vt extends p {
    * @returns {void}
    */
   addNotice(t = {}) {
-    t.id = Pe++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+    t.id = Fe++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -595,12 +595,12 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   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"), Fe(e);
+    r.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ne(e);
   }
 }, [
-  w(s),
+  x(s),
   a(t)
-])), Fe = (e) => {
+])), Ne = (e) => {
   var o;
   const t = document.documentElement;
   if (e === "system" && (e = (o = globalThis.matchMedia) != null && o.call(globalThis, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), N && !N("(prefers-color-scheme: " + e + ")").matches) {
@@ -609,7 +609,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, Ct = x(
+}, kt = k(
   {
     /**
      * This will render the component.
@@ -636,7 +636,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       };
     }
   }
-), kt = D(
+), St = D(
   {
     /**
      * The initial state of the Toggle.
@@ -688,7 +688,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       ]);
     }
   }
-), y = {
+), w = {
   ONLINE: "online",
   OFFLINE: "offline",
   BUSY: "busy",
@@ -698,17 +698,17 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Ne = (e = "") => (e = e.toUpperCase(), f[e] || f.OFFLINE), St = (e) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ne(e)}`
-}), Dt = ({ propName: e = "status" } = {}) => n({
+}, ze = (e = "") => (e = e.toUpperCase(), f[e] || f.OFFLINE), Dt = (e) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${ze(e)}`
+}), It = ({ propName: e = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
-    [f.ONLINE]: y.ONLINE,
-    [f.OFFLINE]: y.OFFLINE,
-    [f.BUSY]: y.BUSY,
-    [f.AWAY]: y.AWAY
+    [f.ONLINE]: w.ONLINE,
+    [f.OFFLINE]: w.OFFLINE,
+    [f.BUSY]: w.BUSY,
+    [f.AWAY]: w.AWAY
   }]
-}), ze = (e, t) => Y(
+}), Ee = (e, t) => Y(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
@@ -716,14 +716,14 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
   [a(t)]
-), Ee = () => w({
+), je = () => x({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), je = (e) => n({ class: "flex items-center" }, [
-  e.href ? ze(e.href, e.label) : a(e.label),
-  e.separator && Ee()
-]), It = x(
+}, u.chevron.single.right), Oe = (e) => n({ class: "flex items-center" }, [
+  e.href ? Ee(e.href, e.label) : a(e.label),
+  e.separator && je()
+]), Tt = k(
   {
     /**
      * Set initial data
@@ -731,7 +731,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new k({
+      return new C({
         // @ts-ignore
         items: this.items || []
       });
@@ -752,7 +752,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
           n({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, s) => je({
+            for: ["items", (t, s) => Oe({
               href: t.href,
               label: t.label,
               separator: s < e
@@ -771,7 +771,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, Oe = (e) => z[e] || z.default, Ve = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+}, Ve = (e) => z[e] || z.default, Ye = ({ 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", {
@@ -782,10 +782,10 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       o.activeIndex = e, r && r(e);
     }
   })
-]), Ye = (e, t) => Array.from({ length: e }, (s, o) => Ve({
+]), He = (e, t) => Array.from({ length: e }, (s, o) => Ye({
   index: o,
   size: t
-})), Tt = x(
+})), $t = k(
   {
     /**
      * Defines component data (props).
@@ -793,7 +793,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new k({
+      return new C({
         // @ts-ignore
         count: this.count || 4,
         // total dots
@@ -807,7 +807,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
      * @returns {object}
      */
     render() {
-      const e = this.gap || "gap-2", t = Oe(this.size || "sm"), s = Ye(this.data.count, t);
+      const e = this.gap || "gap-2", t = Ve(this.size || "sm"), s = He(this.data.count, t);
       return n(
         { class: "flex justify-center items-center py-2" },
         [
@@ -816,7 +816,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       );
     }
   }
-), He = ({ toggleDropdown: e }) => m(
+), 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",
@@ -826,27 +826,27 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
     a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
     g({ html: u.chevron.upDown })
   ]
-), Ue = (e, t, s) => O({
+), qe = (e, t, s) => O({
   class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
   click: () => t(e),
   onState: [s, "selectedValue", { "bg-secondary": e.value }]
 }, [
-  e.icon && a({ class: "mr-2 flex items-baseline" }, [w({ size: "xs" }, e.icon)]),
+  e.icon && a({ class: "mr-2 flex items-baseline" }, [x({ size: "xs" }, e.icon)]),
   a({ class: "text-base font-normal" }, e.label)
-]), qe = (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) => Ue(s, e, t)] })
-]), _e = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
-  v(
+]), _e = (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)] })
+]), Re = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
+  y(
     "open",
     (s, o, r) => s ? new S({
       cache: "dropdown",
       parent: r,
       button: r.button
     }, [
-      qe(e, t)
+      _e(e, t)
     ]) : null
   )
-]), $t = x(
+]), At = k(
   {
     /**
      * This will set up the data.
@@ -854,7 +854,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new k({
+      return new C({
         // @ts-ignore
         items: this.items || []
       });
@@ -927,8 +927,8 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       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
-        He({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        _e({
+        Ue({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        Re({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -936,7 +936,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
         }),
         // Hidden required input for form validation
         // @ts-ignore
-        this.required && C({
+        this.required && v({
           class: "opacity-0 absolute top-0 left-0 z-[1]",
           type: "text",
           // @ts-ignore
@@ -954,15 +954,15 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   click: t,
   icon: e,
   "aria-label": s
-}), Re = ({ click: e }) => q({
+}), We = ({ click: e }) => q({
   icon: u.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), We = ({ click: e }) => q({
+}), Ge = ({ click: e }) => q({
   icon: u.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), Ge = ({ bind: e, min: t, max: s, readonly: o = !1 }) => Q(({ state: r }) => C({
+}), Je = ({ bind: e, min: t, max: s, readonly: o = !1 }) => Q(({ state: r }) => v({
   value: ["[[count]]", r],
   bind: e,
   blur: (l, { state: i }) => {
@@ -975,7 +975,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), At = D(
+})), Bt = D(
   {
     /**
      * Initial state for the counter component.
@@ -998,32 +998,32 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
     render() {
       const e = this.class ?? "";
       return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
-        Re({ click: () => this.state.decrement("count") }),
-        Ge({
+        We({ click: () => this.state.decrement("count") }),
+        Je({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        We({ click: () => this.state.increment("count") })
+        Ge({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), Je = ({ bind: e, required: t }) => C({
+), Ke = ({ bind: e, required: t }) => v({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), Ke = ({ bind: e, required: t, toggleOpen: s }) => m({
+}), Qe = ({ 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
 }, [
-  Je({ bind: e, required: t }),
+  Ke({ bind: e, required: t }),
   a({
     onState: ["selectedDate", (o) => o ? $.format("standard", o) : "Pick a date"]
   }),
   g({ html: u.calendar.days })
-]), Qe = ({ handleDateSelect: e, blockPriorDates: t }) => v(
+]), Xe = ({ handleDateSelect: e, blockPriorDates: t }) => y(
   "open",
   (s, o, r) => s ? new S({
     cache: "dropdown",
@@ -1037,56 +1037,56 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       blockPriorDates: t
     })
   ]) : null
-), Bt = x(
-  {
-    /**
-     * The initial state of the DatePicker.
-     *
-     * @member {object} state
-     */
-    setupStates() {
-      return {
+);
+class Mt extends oe {
+  /**
+   * The initial state of the DatePicker.
+   *
+   * @member {object} state
+   */
+  setupStates() {
+    return {
+      // @ts-ignore
+      selectedDate: this.selectedDate ?? null,
+      open: !1
+    };
+  }
+  /**
+   * This is added to check the input after the component is rendered.
+   * to see if the bind updated the input value.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    this.input.value && (this.state.selectedDate = this.input.value);
+  }
+  /**
+   * Renders the DatePicker component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = (o, { state: r }) => r.toggle("open"), s = (o) => {
+      this.state.selectedDate = o, this.state.open = !1, this.input.value = o, typeof this.onChange == "function" && this.onChange(o);
+    };
+    return n({ class: "relative w-full max-w-[320px]", debug: !0 }, [
+      Qe({
+        toggleOpen: t,
         // @ts-ignore
-        selectedDate: this.selectedDate ?? null,
-        open: !1
-      };
-    },
-    /**
-     * This is added to check the input after the component is rendered.
-     * to see if the bind updated the input value.
-     *
-     * @returns {void}
-     */
-    after() {
-      this.state.selectedDate = this.input.value;
-    },
-    /**
-     * Renders the DatePicker component.
-     *
-     * @returns {object}
-     */
-    render() {
-      const e = (s, { state: o }) => o.toggle("open"), t = (s) => {
-        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]", debug: !0 }, [
-        Ke({
-          toggleOpen: e,
-          // @ts-ignore
-          bind: this.bind,
-          // @ts-ignore
-          required: this.required
-        }),
-        Qe({
-          handleDateSelect: t,
-          // @ts-ignore
-          blockPriorDates: this.blockPriorDates || !1
-        })
-      ]);
-    }
+        bind: this.bind,
+        // @ts-ignore
+        required: this.required
+      }),
+      Xe({
+        handleDateSelect: s,
+        // @ts-ignore
+        blockPriorDates: this.blockPriorDates || !1
+      })
+    ]);
   }
-), Mt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => X([
-  new re({
+}
+const Lt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => X([
+  new le({
     dateTime: e,
     filter: s || ((o) => {
       const r = $.getLocalTime(o, !0, !1, t);
@@ -1094,22 +1094,22 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
     })
   })
 ]);
-function Xe({ bind: e, required: t }) {
-  return C({
+function Ze({ bind: e, required: t }) {
+  return v({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
     bind: e,
     required: t
   });
 }
-function Ze({ bind: e, required: t, toggleOpen: s }) {
+function et({ 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
     },
     [
-      Xe({ bind: e, required: t }),
+      Ze({ bind: e, required: t }),
       a({
         onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
@@ -1131,11 +1131,11 @@ function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: r = !1
     })
   );
 }
-function et({ handleTimeSelect: e }) {
+function tt({ handleTimeSelect: e }) {
   return n(
     { class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" },
     [
-      v(
+      y(
         "open",
         (t, s, o) => t ? new S(
           {
@@ -1197,7 +1197,7 @@ function E(e) {
     meridian: l
   });
 }
-const Lt = D(
+const Pt = D(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1245,23 +1245,23 @@ const Lt = D(
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          Ze({
+          et({
             toggleOpen: e,
             bind: this.bind,
             required: this.required
           }),
-          et({
+          tt({
             handleTimeSelect: t
           })
         ]
       );
     }
   }
-), tt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
-  w({ size: "lg" }, e)
-]), st = ({ title: e }) => B({ class: "flex flex-auto items-center" }, [
+), st = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+  x({ size: "lg" }, e)
+]), ot = ({ title: e }) => B({ class: "flex flex-auto items-center" }, [
   A({ class: "text-lg font-semibold" }, e)
-]), ot = c((e, t) => Z(
+]), nt = 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
@@ -1272,18 +1272,18 @@ const Lt = D(
   [
     n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && tt(e.icon, e.iconColor),
+      e.icon && st(e.icon, e.iconColor),
       n({ class: "flex flex-auto flex-col gap-4" }, [
         n({ class: "flex flex-auto flex-col space-y-2" }, [
-          st(e),
-          e.description && b({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
+          ot(e),
+          e.description && p({ 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)
         ]),
         e.buttons && M({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
       ])
     ])
   ]
-)), nt = (e) => H.render(e, app.root), j = {
+)), rt = (e) => H.render(e, app.root), j = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1310,7 +1310,7 @@ const Lt = D(
     iconColor: "text-muted-foreground"
   }
 };
-class rt extends p {
+class lt extends b {
   /**
    * This will declare the props for the compiler.
    *
@@ -1328,7 +1328,7 @@ class rt extends p {
     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 ot({
+    return nt({
       class: l,
       title: i,
       click: t,
@@ -1372,7 +1372,7 @@ class rt extends p {
    * @returns {void}
    */
   open() {
-    nt(this), this.panel.showModal(), this.state.open = !0;
+    rt(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1383,7 +1383,7 @@ class rt extends p {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class Pt extends rt {
+class Ft extends lt {
   /**
    * This will declare the props for the compiler.
    *
@@ -1414,43 +1414,43 @@ class Pt extends rt {
   }
 }
 export {
-  mt as A,
-  It as B,
-  wt as C,
-  ce as D,
-  Pt as E,
-  xe as F,
-  ot as G,
-  rt as H,
-  yt as M,
-  vt as N,
-  We as P,
-  xt as S,
-  Ct 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,
+  ft as A,
+  Tt as B,
+  yt as C,
+  de as D,
+  Ft as E,
+  we as F,
+  nt as G,
+  lt as H,
+  vt as M,
+  Ct as N,
+  Ge as P,
+  wt as S,
+  kt as T,
+  fe as a,
+  gt as b,
+  pe as c,
+  ye as d,
+  ve as e,
+  Ce as f,
+  Se as g,
+  pt as h,
+  Ie as i,
   bt as j,
-  pt as k,
-  Le as l,
-  kt as m,
-  St as n,
-  Dt as o,
-  y as p,
+  xt as k,
+  Pe as l,
+  St as m,
+  Dt as n,
+  It as o,
+  w as p,
   f as q,
-  Ne as r,
-  Tt as s,
-  $t as t,
-  Re as u,
-  Ge as v,
-  At as w,
-  Bt as x,
-  Mt as y,
-  Lt as z
+  ze as r,
+  $t as s,
+  At as t,
+  We as u,
+  Je as v,
+  Bt as w,
+  Mt as x,
+  Lt as y,
+  Pt as z
 };

package/dist/index.es.js

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

package/dist/molecules.es.js

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

package/dist/types/components/molecules/date-time/date-picker.d.ts

@@ -3,8 +3,24 @@
  *
  * This will create a date picker component.
  *
- * @type {typeof Veil}
+ * @class
  */
-export const DatePicker: typeof Veil;
+export class DatePicker extends Veil {
+    /**
+     * The initial state of the DatePicker.
+     *
+     * @member {object} state
+     */
+    setupStates(): {
+        selectedDate: any;
+        open: boolean;
+    };
+    /**
+     * Renders the DatePicker component.
+     *
+     * @returns {object}
+     */
+    render(): object;
+}
 export default DatePicker;
 import { Veil } from '../../atoms/veil.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.164",
+	"version": "1.0.166",
 	"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": {