@base-framework/ui 1.0.321 → 1.0.323

package/dist/{empty-state-CmJE_BQv.js → empty-state-ByQ_GcoM.js}

@@ -1,10 +1,11 @@
-import { Div as l, H5 as se, P as w, I as C, Li as W, Span as c, Ul as G, Button as b, OnState as B, Label as j, H2 as $, Form as oe, Header as L, Footer as N, A as J, H3 as ne, Checkbox as le, Input as f, Img as K, Nav as re, UseParent as Q, OnStateOpen as O, Time as ie, Dialog as ae } from "@base-framework/atoms";
-import { Atom as u, Component as k, Html as z, Dom as ce, base as ue, Data as A, Builder as X, Jot as I, Events as v, DateTime as E } from "@base-framework/base";
+import { Div as l, H5 as se, P as w, I as C, Li as W, Span as c, Ul as G, Button as b, OnState as B, Label as O, H2 as $, Form as oe, Header as L, Footer as z, A as J, H3 as ne, Checkbox as le, Input as f, Img as K, Nav as re, UseParent as Q, OnStateOpen as E, Time as ie, Dialog as ae } from "@base-framework/atoms";
+import { Atom as u, Component as k, Html as N, Dom as ce, base as ue, Data as A, Builder as X, Jot as I, Events as y, DateTime as j } from "@base-framework/base";
 import { P as F, b as de, R as he } from "./range-calendar-BMWSJTE0.js";
-import { C as fe, F as me, a as D } from "./veil-CVCuKSvj.js";
+import { C as fe, F as me } from "./form-group-CJzpq9Us.js";
 import { B as h, I as x } from "./buttons-CHEs54Wl.js";
 import { Icons as d } from "./icons.es.js";
 import { Timer as ge, List as pe, DynamicTime as be } from "@base-framework/organisms";
+import { a as D } from "./veil-CqnAmj-D.js";
 import { F as U } from "./format-DnofNaaz.js";
 const V = {
   info: {
@@ -34,18 +35,18 @@ const V = {
   }
 }, xe = (e, t) => l({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   C({ html: e })
-]), ye = (e) => se({ class: "font-semibold" }, e), ve = (e) => w({ class: "text-sm text-muted-foreground" }, e), Bt = u(({ title: e, description: t, icon: s, type: o = "default" }) => {
+]), ve = (e) => se({ class: "font-semibold" }, e), ye = (e) => w({ class: "text-sm text-muted-foreground" }, e), Lt = u(({ title: e, description: t, icon: s, type: o = "default" }) => {
   const { borderColor: n, bgColor: r, iconColor: i } = V[o] || V.default;
   return l({ class: `flex items-start p-4 border rounded-lg ${r} ${n}` }, [
     // Icon and content
     s && xe(s, i),
     l({ class: "flex flex-col" }, [
-      ye(e),
-      ve(t)
+      ve(e),
+      ye(t)
     ])
   ]);
 });
-class Lt extends k {
+class At extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -63,10 +64,10 @@ class Lt extends k {
     this.prepareDestroy(), this.removeContext();
     const t = this.panel, s = this.removingClass;
     if (!s) {
-      z.removeElement(t);
+      N.removeElement(t);
       return;
     }
-    ce.addClass(t, s), ue.on("animationend", t, (o) => z.removeElement(t));
+    ce.addClass(t, s), ue.on("animationend", t, (o) => N.removeElement(t));
   }
 }
 const we = (e) => c({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), Ce = (e) => c({ class: "flex w-4 h-4", html: e }), Se = (e) => c({ class: "flex-auto" }, e), ke = (e, t) => W({
@@ -104,7 +105,7 @@ const we = (e) => c({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
     ]) : null
   )
 ]);
-class At extends k {
+class Mt extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -167,13 +168,13 @@ class At extends k {
     ]);
   }
 }
-const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Be = u((e, t) => j({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Le = u((e, t) => w({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Ae = u((e, t) => w({ ...e, class: "text-sm text-destructive" }, t)), Mt = u((e, t = []) => fe({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
+const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Be = u((e, t) => O({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Le = u((e, t) => w({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Ae = u((e, t) => w({ ...e, class: "text-sm text-destructive" }, t)), Pt = u((e, t = []) => fe({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
   e.title && $({ class: "text-lg font-semibold py-4 px-6" }, e.title),
   e.description && w({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
   ...t
-])), Pt = u((e, t = []) => me({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
+])), jt = u((e, t = []) => me({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
   l({ class: "flex flex-col gap-y-6" }, t)
-])), jt = u((e, t = []) => {
+])), Ot = u((e, t = []) => {
   const s = e.border ? "border-t" : "";
   return l({ ...e, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${e.class || ""}` }, t);
 }), Me = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", Z = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = Z(o.children, t, s)), !o.required) ? o : Me(o) ? {
@@ -193,7 +194,7 @@ const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     ...e,
     class: "w-full"
   }, n);
-}), Nt = D(
+}), zt = D(
   {
     /**
      * The initial state of the FormField.
@@ -236,16 +237,16 @@ const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
 }, ee = u(
   (e, t) => oe({ ...e, submit: (s, o) => je(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
-), Ot = u((e, t) => l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), zt = u((e, t = []) => l({ class: "flex flex-col gap-y-3 py-4" }, [
+), Et = u((e, t) => l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Nt = u((e, t = []) => l({ class: "flex flex-col gap-y-3 py-4" }, [
   e.title && $({ class: "font-semibold" }, e.title),
   ...t
-])), Et = (e, t) => l({ class: "flex justify-between" }, [
+])), Ut = (e, t) => l({ class: "flex justify-between" }, [
   c({ class: "text-muted-foreground" }, e),
   c(t)
-]), Ut = (e, t) => l({ class: "flex" }, [
+]), Vt = (e, t) => l({ class: "flex" }, [
   c({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
   c(t)
-]), Ne = ({ title: e, description: t, back: s, icon: o, options: n = [] }) => L({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+]), Oe = ({ title: e, description: t, back: s, icon: o, options: n = [] }) => L({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
@@ -264,7 +265,7 @@ const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     ]),
     ...n
   ])
-]), Oe = u((e, t) => l({
+]), ze = u((e, t) => l({
   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) => {
@@ -272,12 +273,12 @@ const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
   }
 }, [
   ee({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
-    Ne(e),
+    Oe(e),
     l({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
-    N({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
+    z({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
   ])
-])), ze = (e) => X.render(e, app.root);
-class Vt extends k {
+])), Ee = (e) => X.render(e, app.root);
+class Rt extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -293,7 +294,7 @@ class Vt extends k {
    */
   render() {
     const t = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return Oe(
+    return ze(
       {
         class: t,
         title: s,
@@ -408,7 +409,7 @@ class Vt extends k {
    * @returns {void}
    */
   open() {
-    ze(this), this.showModal();
+    Ee(this), this.showModal();
   }
   /**
    * This will destroy the modal.
@@ -463,7 +464,7 @@ const R = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Ee = (e) => L({ class: "flex justify-center" }, [
+}, Ne = (e) => L({ class: "flex justify-center" }, [
   ne({ class: "text-lg font-bold mb-0" }, e)
 ]), Ue = u(({ href: e, class: t }, s) => J({
   class: `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}`,
@@ -553,10 +554,10 @@ class Re extends k {
         this.icon && C({ class: `mr-4 ${t}`, html: this.icon }),
         l({ class: "flex flex-auto flex-col" }, [
           l({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
-            this.title && Ee(this.title)
+            this.title && Ne(this.title)
           ]),
           w({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
-          (this.primary || this.secondary) && N({ class: "margin-top-24 flex align-center" }, this.getButtons())
+          (this.primary || this.secondary) && z({ class: "margin-top-24 flex align-center" }, this.getButtons())
         ])
       ]),
       h({
@@ -578,7 +579,7 @@ class Re extends k {
   }
 }
 let He = 0;
-class Rt extends k {
+class Ht extends k {
   /**
    * This will render the component.
    *
@@ -618,12 +619,12 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   onState: ["method", { active: e }],
   dataSet: ["method", ["state", e, "active"]],
   click: (o, { state: n }) => {
-    n.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ye(e);
+    n.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), qe(e);
   }
 }, [
   x(s),
   c(t)
-])), Ye = (e) => {
+])), qe = (e) => {
   const t = document.documentElement;
   if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), H && !H("(prefers-color-scheme: " + e + ")").matches) {
     t.classList.add(e);
@@ -631,7 +632,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, Ht = I(
+}, qt = I(
   {
     /**
      * This will render the component.
@@ -720,9 +721,9 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, qe = (e = "") => (e = e.toUpperCase(), S[e] || S.OFFLINE), qt = (e) => l({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${qe(e)}`
-}), _t = ({ propName: e = "status" } = {}) => l({
+}, Ye = (e = "") => (e = e.toUpperCase(), S[e] || S.OFFLINE), _t = (e) => l({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ye(e)}`
+}), Wt = ({ propName: e = "status" } = {}) => l({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
     [S.ONLINE]: T.ONLINE,
@@ -730,7 +731,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
     [S.BUSY]: T.BUSY,
     [S.AWAY]: T.AWAY
   }]
-}), _e = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1, Wt = I(
+}), _e = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1, Gt = I(
   {
     /**
      * Get the initial state for the component.
@@ -750,7 +751,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", v.trigger("click", e));
+      e && (e.value = "", y.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -786,7 +787,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          B("loaded", (s) => s === !1 || _e(this.src) ? j({
+          B("loaded", (s) => s === !1 || _e(this.src) ? O({
             htmlFor: e,
             class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
           }, [
@@ -801,7 +802,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       ]);
     }
   }
-), Gt = I(
+), Jt = I(
   {
     /**
      * Get the initial state for the component.
@@ -821,7 +822,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", v.trigger("click", e));
+      e && (e.value = "", y.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -863,7 +864,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
               // @ts-ignore
               src: this.src,
               class: "absolute inset-0 w-full h-full object-cover rounded-full"
-            }) : j({
+            }) : O({
               htmlFor: e,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
@@ -890,7 +891,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
 }, d.chevron.single.right), Je = (e) => l({ class: "flex items-center" }, [
   e.href ? We(e.href, e.label) : c(e.label),
   e.separator && Ge()
-]), Jt = I(
+]), Kt = I(
   {
     /**
      * Set initial data
@@ -929,7 +930,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       );
     }
   }
-), Y = {
+), q = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -938,7 +939,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, Ke = (e) => Y[e] || Y.default, Qe = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+}, Ke = (e) => q[e] || q.default, Qe = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
   c({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
@@ -952,7 +953,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
 ]), Xe = (e, t) => Array.from({ length: e }, (s, o) => Qe({
   index: o,
   size: t
-})), Kt = I(
+})), Qt = I(
   {
     /**
      * Defines component data (props).
@@ -1013,7 +1014,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       tt(e, t)
     ]) : null
   )
-]), Qt = I(
+]), Xt = I(
   {
     /**
      * This will set up the data.
@@ -1142,7 +1143,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), Xt = D(
+})), Zt = D(
   {
     /**
      * Initial state for the counter component.
@@ -1187,16 +1188,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   placeholder: e || "mm/dd/yyyy",
   input: t,
   focus: s,
-  onState: ["selectedDate", (o) => {
-    if (o) {
-      const n = new Date(o);
-      if (!isNaN(n.getTime())) {
-        const r = (n.getMonth() + 1).toString().padStart(2, "0"), i = n.getDate().toString().padStart(2, "0"), a = n.getFullYear();
-        return `${r}/${i}/${a}`;
-      }
-    }
-    return "";
-  }]
+  onState: ["selectedDate", (o) => o ? j.format("standard", o) : ""]
 }), at = ({ bind: e, required: t, toggleOpen: s, handleInputChange: o, handleInputFocus: n, placeholder: r }) => l(
   {
     class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 pr-4 py-2"
@@ -1214,7 +1206,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       ]
     )
   ]
-), ct = ({ handleDateSelect: e, blockPriorDates: t }) => O(
+), ct = ({ handleDateSelect: e, blockPriorDates: t }) => E(
   (s, o, n) => new F({
     cache: "dropdown",
     parent: n,
@@ -1227,7 +1219,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       blockPriorDates: t
     })
   ])
-), Zt = D(
+), es = D(
   {
     /**
      * The initial state of the DatePicker.
@@ -1259,16 +1251,16 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
         const i = n.target.value.replace(/\D/g, "");
         let a = "";
         if (i.length > 0 && (a = i.substring(0, 2), i.length > 2 && (a += "/" + i.substring(2, 4), i.length > 4 && (a += "/" + i.substring(4, 8)))), n.target.value = a, i.length === 8) {
-          const m = parseInt(i.substring(0, 2), 10), g = parseInt(i.substring(2, 4), 10), y = parseInt(i.substring(4, 8), 10);
-          if (m >= 1 && m <= 12 && g >= 1 && g <= 31 && y >= 1900) {
-            const p = `${y}-${m.toString().padStart(2, "0")}-${g.toString().padStart(2, "0")}`;
-            this.state.selectedDate = p, this.input.value = p, v.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(p);
+          const m = parseInt(i.substring(0, 2), 10), g = parseInt(i.substring(2, 4), 10), v = parseInt(i.substring(4, 8), 10);
+          if (m >= 1 && m <= 12 && g >= 1 && g <= 31 && v >= 1900) {
+            const p = `${v}-${m.toString().padStart(2, "0")}-${g.toString().padStart(2, "0")}`;
+            this.state.selectedDate = p, this.input.value = p, y.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(p);
           }
         }
       }, s = (n) => {
         n.target.select();
       }, o = (n) => {
-        this.state.selectedDate = n, this.state.open = !1, this.input.value = n, v.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(n);
+        this.state.selectedDate = n, this.state.open = !1, this.input.value = n, y.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(n);
       };
       return l(
         { class: "relative w-full max-w-[320px]" },
@@ -1305,7 +1297,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
     c(U.date(["[[end]]", o], "End Date"))
   ]),
   C({ html: d.calendar.days })
-]), ht = ({ handleDateSelect: e, blockPriorDates: t }) => O((s, o, n) => new F({
+]), ht = ({ handleDateSelect: e, blockPriorDates: t }) => E((s, o, n) => new F({
   cache: "dropdown",
   parent: n,
   button: n.panel,
@@ -1317,7 +1309,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
     onRangeSelect: e,
     blockPriorDates: t
   })
-])), es = D(
+])), ts = D(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1350,7 +1342,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
      */
     render() {
       const e = (s, { state: o }) => o.toggle("open"), t = (s, o) => {
-        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, v.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
+        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, y.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
       };
       return l({ class: "relative w-full max-w-[320px]" }, [
         dt({
@@ -1365,12 +1357,12 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       ]);
     }
   }
-), ts = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => ie([
+), ss = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => ie([
   new be({
     dateTime: e,
     filter: s || ((o) => {
-      const n = E.getLocalTime(o, !0, !1, t);
-      return E.getTimeFrame(n);
+      const n = j.getLocalTime(o, !0, !1, t);
+      return j.getTimeFrame(n);
     })
   })
 ]);
@@ -1427,7 +1419,7 @@ function P({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: n = !1
   );
 }
 function pt({ handleTimeSelect: e }) {
-  return O(
+  return E(
     (t, s, o) => new F(
       {
         cache: "dropdown",
@@ -1473,7 +1465,7 @@ function pt({ handleTimeSelect: e }) {
     )
   );
 }
-function q(e) {
+function Y(e) {
   if (!e)
     return { hour: null, minute: null, meridian: null };
   const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
@@ -1486,7 +1478,7 @@ function q(e) {
     meridian: r
   });
 }
-const ss = D(
+const os = D(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1494,7 +1486,7 @@ const ss = D(
      * @member {object} state
      */
     state() {
-      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = q(e);
+      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = Y(e);
       return {
         selectedTime: e,
         open: !1,
@@ -1510,7 +1502,7 @@ const ss = D(
      */
     after() {
       if (this.input.value) {
-        const { hour: e, minute: t, meridian: s } = q(this.input.value);
+        const { hour: e, minute: t, meridian: s } = Y(this.input.value);
         this.state.set({
           hour: e,
           minute: t,
@@ -1530,15 +1522,15 @@ const ss = D(
         if (r.length > 0 && (i = r.substring(0, 2), r.length > 2 && (i += ":" + r.substring(2, 4))), r.length >= 4) {
           const a = parseInt(r.substring(0, 2), 10), m = parseInt(r.substring(2, 4), 10);
           if (a >= 0 && a <= 23 && m >= 0 && m <= 59) {
-            let g = a, y = "AM";
-            a === 0 ? g = 12 : a > 12 ? (g = a - 12, y = "PM") : a === 12 && (y = "PM");
-            const p = `${g.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")} ${y}`;
+            let g = a, v = "AM";
+            a === 0 ? g = 12 : a > 12 ? (g = a - 12, v = "PM") : a === 12 && (v = "PM");
+            const p = `${g.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")} ${v}`;
             i = p, this.state.set({
               hour: g.toString().padStart(2, "0"),
               minute: m.toString().padStart(2, "0"),
-              meridian: y,
+              meridian: v,
               selectedTime: p
-            }), this.input.value = p, v.trigger("change", this.input), typeof this.change == "function" && this.change(p);
+            }), this.input.value = p, y.trigger("change", this.input), typeof this.change == "function" && this.change(p);
           }
         }
         n.target.value = i;
@@ -1547,7 +1539,7 @@ const ss = D(
       }, o = ({ hour: n, minute: r, meridian: i }) => {
         if (n && (this.state.hour = n), r && (this.state.minute = r), i && (this.state.meridian = i), this.state.hour && this.state.minute && this.state.meridian) {
           const a = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-          this.state.selectedTime = a, this.state.open = !1, this.input.value = a, v.trigger("change", this.input), typeof this.change == "function" && this.change(a);
+          this.state.selectedTime = a, this.state.open = !1, this.input.value = a, y.trigger("change", this.input), typeof this.change == "function" && this.change(a);
         }
       };
       return l(
@@ -1572,7 +1564,7 @@ const ss = D(
   x({ size: "lg" }, e)
 ]), xt = ({ title: e }) => L({ class: "flex flex-auto items-center" }, [
   $({ class: "text-lg font-semibold" }, e)
-]), yt = u((e, t) => ae(
+]), vt = u((e, t) => ae(
   {
     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
@@ -1590,11 +1582,11 @@ const ss = D(
           e.description && w({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
           l({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
         ]),
-        e.buttons && N({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
+        e.buttons && z({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
       ])
     ])
   ]
-)), vt = (e) => X.render(e, app.root), _ = {
+)), yt = (e) => X.render(e, app.root), _ = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1639,7 +1631,7 @@ class wt extends k {
     const t = (a) => {
       a.target === this.panel && this.close();
     }, { borderColor: s, bgColor: o, iconColor: n } = _[this.type] || _.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
-    return yt({
+    return vt({
       class: r,
       title: i,
       click: t,
@@ -1683,7 +1675,7 @@ class wt extends k {
    * @returns {void}
    */
   open() {
-    vt(this), this.panel.showModal(), this.state.open = !0;
+    yt(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1694,7 +1686,7 @@ class wt extends k {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class os extends wt {
+class ns extends wt {
   /**
    * This will declare the props for the compiler.
    *
@@ -1724,7 +1716,7 @@ class os extends wt {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const ns = u((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
+const ls = u((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
   ee({ class: "flex flex-auto flex-col" }, [
     l({ class: "flex flex-auto flex-col gap-y-4" }, [
       l({ class: "flex flex-auto items-center justify-center" }, [
@@ -1741,50 +1733,50 @@ const ns = u((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
   ])
 ]));
 export {
-  Bt as A,
-  Jt as B,
-  Ut as C,
-  Lt as D,
-  Zt as E,
+  Lt as A,
+  Kt as B,
+  Vt as C,
+  At as D,
+  es as E,
   Te as F,
-  es as G,
-  ts as H,
-  Wt as I,
-  ss as J,
-  os as K,
-  Gt as L,
-  Vt as M,
-  Rt as N,
-  yt as O,
+  ts as G,
+  ss as H,
+  Gt as I,
+  os as J,
+  ns as K,
+  Jt as L,
+  Rt as M,
+  Ht as N,
+  vt as O,
   nt as P,
   wt as Q,
-  ns as R,
-  Et as S,
-  Ht as T,
+  ls as R,
+  Ut as S,
+  qt as T,
   ke as a,
-  At as b,
+  Mt as b,
   De as c,
   Be as d,
   Le as e,
   Ae as f,
-  Mt as g,
-  Pt as h,
-  jt as i,
+  Pt as g,
+  jt as h,
+  Ot as i,
   Pe as j,
-  Nt as k,
+  zt as k,
   ee as l,
-  Ot as m,
-  zt as n,
+  Et as m,
+  Nt as n,
   Re as o,
   Yt as p,
-  qt as q,
-  _t as r,
+  _t as q,
+  Wt as r,
   T as s,
   S as t,
-  qe as u,
-  Kt as v,
-  Qt as w,
+  Ye as u,
+  Qt as v,
+  Xt as w,
   ot as x,
   lt as y,
-  Xt as z
+  Zt as z
 };

package/dist/form-group-CJzpq9Us.js

@@ -0,0 +1,29 @@
+import { Div as a, H4 as d, P as c } from "@base-framework/atoms";
+import { Atom as t } from "@base-framework/base";
+const n = t((e, l) => {
+  const r = e.margin ?? "my-5 mx-5", s = e.padding ?? "p-4";
+  return e.hover && (e.class += " hover:shadow-lg hover:bg-muted/50"), a({
+    ...e,
+    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${r} ${s} ${e.class || ""}`
+  }, l);
+}), g = t((e, l) => {
+  const r = e.border === !0 ? "border-t" : "";
+  return a({
+    ...e,
+    class: `grid grid-cols-1 gap-y-4 sm:grid-cols-[1fr_2fr] sm:gap-x-6 pt-8 ${r} ${e.class || ""}`
+  }, [
+    e.label && a({
+      ...e.labelProps,
+      class: `flex flex-auto flex-col gap-y-1 ${e.labelProps?.class || ""}`
+    }, [
+      d({ class: "text-base" }, e.label),
+      e.description && c({ class: "text-sm text-muted-foreground" }, e.description)
+    ]),
+    // Controls container: grows to fill remaining space, spacing between items
+    a({ class: "flex flex-col gap-y-4" }, l)
+  ]);
+});
+export {
+  n as C,
+  g as F
+};