@base-framework/ui 0.0.10 → 0.0.12

package/dist/{confirmation-BGUg268I.js → confirmation-CYHsLIOn.js}

@@ -1,14 +1,11 @@
-var W = Object.defineProperty;
-var G = (e, t, o) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var i = (e, t, o) => G(e, typeof t != "symbol" ? t + "" : t, o);
-import { Div as n, I as f, H5 as J, P as p, Li as V, Span as c, Ul as Y, Button as h, OnState as v, Label as K, Form as Q, H2 as $, Footer as M, Header as L, A as q, H3 as X, Checkbox as Z, Nav as ee, Input as C, Time as te, Dialog as oe } from "@base-framework/atoms";
-import { Atom as d, Component as x, Html as N, Dom as se, base as ne, Data as k, Builder as H, Jot as S, DateTime as B } from "@base-framework/base";
-import { P as D, b as le } from "./calendar-B5TK6tLi.js";
-import { B as m, I } from "./icon-B9QUT2NY.js";
-import { Icons as u } from "./icons.es.js";
-import { a as w } from "./veil-B9GQfH0d.js";
-import { Timer as re, List as ae, DynamicTime as ie } from "@base-framework/organisms";
-const z = {
+import { Div as n, I as h, H5 as _, P as p, Li as O, Span as a, Ul as V, Button as m, OnState as y, Label as R, Form as W, H2 as B, Footer as $, Header as M, A as Y, H3 as G, Checkbox as J, Nav as K, Input as v, Time as Q, Dialog as X } from "@base-framework/atoms";
+import { Atom as c, Component as b, Html as L, Dom as Z, base as ee, Data as C, Builder as q, Jot as k, DateTime as A } from "@base-framework/base";
+import { P as S, b as te } from "./calendar-B5TK6tLi.js";
+import { B as u, I as D } from "./icon-B9QUT2NY.js";
+import { Icons as d } from "./icons.es.js";
+import { a as x } from "./veil-DSQdR6CM.js";
+import { Timer as se, List as oe, DynamicTime as ne } from "@base-framework/organisms";
+const P = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -34,27 +31,27 @@ const z = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, ce = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
-  f({ html: e })
-]), de = (e) => J({ class: "font-semibold" }, e), ue = (e) => p({ class: "text-sm text-muted-foreground" }, e), pt = d(({ title: e, description: t, icon: o, type: s = "default" }) => {
-  const { borderColor: a, bgColor: l, iconColor: r } = z[s] || z.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${l} ${a}` }, [
+}, re = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+  h({ html: e })
+]), le = (e) => _({ class: "font-semibold" }, e), ie = (e) => p({ class: "text-sm text-muted-foreground" }, e), ht = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
+  const { borderColor: l, bgColor: r, iconColor: i } = P[o] || P.default;
+  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
     // Icon and content
-    o && ce(o, r),
+    s && re(s, i),
     n({ class: "flex flex-col" }, [
-      de(e),
-      ue(t)
+      le(e),
+      ie(t)
     ])
   ]);
 });
-class me extends x {
-  constructor() {
-    super(...arguments);
-    /**
-     * @member {string} removingClass
-     * @default ''
-     */
-    i(this, "removingClass", "");
+class ae extends b {
+  /**
+  * This will declare the props for the compiler.
+  *
+  * @returns {void}
+  */
+  declareProps() {
+    this.removingClass = "";
   }
   /**
    * This will remove the component from the DOM after a delay.
@@ -63,69 +60,57 @@ class me extends x {
    */
   remove() {
     this.prepareDestroy(), this.removeContext();
-    const o = this.panel, s = this.removingClass;
+    const t = this.panel, s = this.removingClass;
     if (!s) {
-      N.removeElement(o);
+      L.removeElement(t);
       return;
     }
-    se.addClass(o, s), ne.on("animationend", o, (a) => N.removeElement(o));
+    Z.addClass(t, s), ee.on("animationend", t, (o) => L.removeElement(t));
   }
 }
-const fe = (e) => c({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), he = (e) => c({ class: "flex w-4 h-4", html: e }), ge = (e) => c({ class: "flex-auto" }, e), be = (e, t) => V({
+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({
   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 && he(e.icon),
-  ge(e.label),
-  e.shortcut && fe(e.shortcut)
-]), pe = (e, t) => Y({ class: "grid gap-2" }, [
-  e.map((o) => be(o, t))
-]), xe = (e) => n({ class: "w-full z-10" }, [
+  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" }, [
   n({
     class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
-    for: ["groups", (t) => pe(t, e)]
+    for: ["groups", (t) => me(t, e)]
   })
-]), we = ({ label: e, icon: t, toggleDropdown: o }) => h({
+]), ge = ({ 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
             focus:outline-none transition duration-150 ease-in-out`,
-  click: o
+  click: s
 }, [
-  e && c(e),
-  t && f({ html: t })
-]), ye = ({ onSelect: e }) => n([
-  v(
+  e && a(e),
+  t && h({ html: t })
+]), pe = ({ onSelect: e }) => n([
+  y(
     "open",
-    (t, o, s) => t ? new D({
+    (t, s, o) => t ? new S({
       cache: "dropdown",
-      parent: s,
-      button: s.button
+      parent: o,
+      button: o.button
     }, [
-      xe(e)
+      fe(e)
     ]) : null
   )
 ]);
-class xt extends x {
-  constructor() {
-    super(...arguments);
-    /**
-     * @member {string} label
-     */
-    i(this, "label", null);
-    /**
-     * @member {string} icon
-     * @default null
-     */
-    i(this, "icon", null);
-    /**
-     * @member {function} onSelect
-     */
-    i(this, "onSelect", null);
-    /**
-     * @member {array} groups
-     */
-    i(this, "groups", []);
+class mt extends b {
+  /**
+  * This will declare the props for the compiler.
+  *
+  * @returns {void}
+  */
+  declareProps() {
+    this.label = null, this.icon = null, this.onSelect = null, this.groups = [];
   }
   /**
    * Initializes component data.
@@ -133,7 +118,7 @@ class xt extends x {
    * @returns {Data}
    */
   setData() {
-    return new k({
+    return new C({
       groups: this.groups || []
     });
   }
@@ -162,8 +147,8 @@ class xt extends x {
    * @param {object} item - The selected item object
    * @returns {void}
    */
-  handleSelect(o) {
-    this.state.selectedItem = o, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(o);
+  handleSelect(t) {
+    this.state.selectedItem = t, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(t);
   }
   /**
    * Renders the Dropdown component.
@@ -172,33 +157,33 @@ class xt extends x {
    */
   render() {
     return n({ class: "relative" }, [
-      we({
+      ge({
         label: this.label,
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      ye({ onSelect: this.handleSelect.bind(this) })
+      pe({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const ve = d((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ce = d((e, t) => K({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ke = d((e, t) => p({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Se = d((e, t) => p({ ...e, class: "text-sm text-destructive" }, t)), De = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", U = (e, t, o) => e.map((s) => (s.children && s.children.length > 0 && (s.children = U(s.children, t, o)), s.required && De(s) ? {
-  ...s,
+const be = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), xe = c((e, t) => R({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), we = c((e, t) => p({ ...e, class: "text-sm text-muted-foreground italic" }, t)), ye = c((e, t) => p({ ...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) ? {
+  ...o,
   aria: {
     invalid: ["hasError"]
   },
-  invalid: o,
+  invalid: s,
   input: t
-} : s)), Ie = d((e, t) => {
-  const a = U(t, (l) => {
-    l.target.checkValidity() && e.setError(null);
-  }, (l) => {
-    e.setError(l.target.validationMessage);
+} : o)), Ce = c((e, t) => {
+  const l = H(t, (r) => {
+    r.target.checkValidity() && e.setError(null);
+  }, (r) => {
+    e.setError(r.target.validationMessage);
   });
   return n({
     ...e,
     class: "w-full"
-  }, a);
-}), wt = w(
+  }, l);
+}), ft = x(
   {
     /**
      * The initial state of the FormField.
@@ -219,113 +204,74 @@ const ve = d((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
      * @returns {object}
      */
     render() {
-      const e = this.name, t = this.getId(`${e}`), { label: o, description: s } = this, a = (l) => {
-        this.state.error = l, this.state.hasError = !!l;
+      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, l = (r) => {
+        this.state.error = r, this.state.hasError = !!r;
       };
       return n({ class: "flex flex-auto space-y-4" }, [
-        ve([
-          Ce({ htmlFor: t }, o),
-          Ie({
+        be([
+          xe({ htmlFor: t }, s),
+          Ce({
             id: t,
             name: e,
             value: this.state.value,
-            setError: a
+            setError: l
           }, this.children),
-          s && ke({ id: this.getId("description") }, s),
-          n({ onState: ["error", (l) => l && Se(l)] })
+          o && we({ id: this.getId("description") }, o),
+          n({ onState: ["error", (r) => r && ye(r)] })
         ])
       ]);
     }
   }
-), Te = (e, t = null) => {
+), ke = (e, t = null) => {
   e.target.checkValidity() && (e.preventDefault(), t && t(e));
-}, Ae = d(
-  (e, t) => Q({ ...e, submit: (o) => Te(o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
-), yt = d((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), vt = d((e, t = []) => n({ class: "space-y-3 py-4" }, [
-  e.title && $({ class: "font-semibold" }, e.title),
+}, Se = c(
+  (e, t) => W({ ...e, submit: (s) => ke(s, 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)), pt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
+  e.title && B({ class: "font-semibold" }, e.title),
   ...t
-])), Ct = (e, t) => n({ class: "flex justify-between" }, [
-  c({ class: "text-muted-foreground" }, e),
-  c(t)
-]), Be = ({ title: e, description: t, back: o, icon: s, options: a = [] }) => L({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+])), bt = (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: l = [] }) => M({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
-  o && m({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (l, r) => r.close() }),
+  s && u({ variant: "icon", icon: d.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, i) => i.close() }),
   /**
    * Icon
    */
-  s && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [I(s)]),
+  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [D(o)]),
   /**
    * Title and Description
    */
   n({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
     n({ class: "flex flex-auto flex-col" }, [
-      $({ class: "text-lg font-semibold m-0" }, e),
+      B({ class: "text-lg font-semibold m-0" }, e),
       t && n({ class: "text-sm text-muted-foreground" }, t)
     ]),
-    ...a
+    ...l
   ])
-]), $e = d((e, t) => n({
+]), Ie = 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: (o, s) => {
-    o.target === s.panel && (o.preventDefault(), o.stopPropagation(), s.state.open = !1);
+  click: (s, o) => {
+    s.target === o.panel && (s.preventDefault(), s.stopPropagation(), o.state.open = !1);
   }
 }, [
-  Ae({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (o) => e.onSubmit && e.onSubmit() }, [
-    Be(e),
+  Se({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s) => e.onSubmit && e.onSubmit() }, [
+    De(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)
+    $({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
   ])
-])), Me = (e) => H.render(e, app.root);
-class kt extends x {
-  constructor() {
-    super(...arguments);
-    /**
-     * @member {string} title
-     */
-    i(this, "title", null);
-    /**
-     * @member {string} description
-     */
-    i(this, "description", null);
-    /**
-     * @member {string} size
-     * @default 'md'
-     * @values 'sm', 'md', 'lg', 'xl'
-     */
-    i(this, "size", "md");
-    /**
-     * @member {string} type
-     * @default ''
-     * @values 'right', 'left'
-     * @description This will set the type of modal.
-     */
-    i(this, "type", "");
-    /**
-     * @member {boolean} hidePrimaryButton
-     * @default false
-     * @description This will hide the primary button.
-     * @values true, false
-     */
-    i(this, "hidePrimaryButton", !1);
-    /**
-     * @member {string} icon
-     */
-    i(this, "icon", null);
-    /**
-     * @member {function|nll} onSubmit
-     */
-    i(this, "onSubmit", null);
-    /**
-     * @member {function|null} onClose
-     */
-    i(this, "onClose", null);
-    /**
-     * @member {boolean} back
-     */
-    i(this, "back", !1);
+])), Te = (e) => q.render(e, app.root);
+class xt extends b {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.title = null, this.description = null, this.size = "md", this.type = "", this.hidePrimaryButton = !1, this.icon = null, this.onSubmit = null, this.onClose = null, this.back = !1;
   }
   /**
    * This will render the modal component.
@@ -333,12 +279,12 @@ class kt extends x {
    * @returns {object}
    */
   render() {
-    const o = this.getMainClass(), s = this.title || "", a = this.description || null;
-    return $e(
+    const t = this.getMainClass(), s = this.title || "", o = this.description || null;
+    return Ie(
       {
-        class: o,
+        class: t,
         title: s,
-        description: a,
+        description: o,
         options: this.headerOptions(),
         buttons: this.getButtons(),
         onSubmit: () => {
@@ -360,8 +306,8 @@ class kt extends x {
     return {
       open: {
         state: !1,
-        callBack: (o) => {
-          o || this.destroy();
+        callBack: (t) => {
+          t || this.destroy();
         }
       }
     };
@@ -381,8 +327,8 @@ class kt extends x {
       */
   getButtons() {
     return [
-      m({ variant: "outline", click: () => this.destroy() }, "Cancel"),
-      this.hidePrimaryButton !== !0 && m({ variant: "primary", type: "submit" }, "Save")
+      u({ variant: "outline", click: () => this.destroy() }, "Cancel"),
+      this.hidePrimaryButton !== !0 && u({ variant: "primary", type: "submit" }, "Save")
     ];
   }
   /**
@@ -391,8 +337,8 @@ class kt extends x {
       * @param {object} element
       * @returns {boolean}
       */
-  isOutsideClick(o) {
-    return !this.panel.contains(o);
+  isOutsideClick(t) {
+    return !this.panel.contains(t);
   }
   /**
    * This will get the size class.
@@ -437,7 +383,7 @@ class kt extends x {
       *
       * @param {object} container
       */
-  setContainer(o) {
+  setContainer(t) {
     this.container = app.root;
   }
   /**
@@ -446,7 +392,7 @@ class kt extends x {
    * @returns {void}
    */
   open() {
-    Me(this), this.showModal();
+    Te(this), this.showModal();
   }
   /**
    * This will show the modal.
@@ -467,7 +413,7 @@ class kt extends x {
     this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(), document.documentElement.style.overflowY = "auto";
   }
 }
-const F = {
+const N = {
   info: {
     bgColor: "bg-muted/10",
     borderColor: "border-blue-500",
@@ -493,56 +439,25 @@ const F = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Le = (e) => L({ class: "flex justify-center" }, [
-  X({ class: "text-lg font-bold mb-0" }, e)
-]), Ne = d(({ href: e, class: t }, o) => q({
+}, Ae = (e) => M({ class: "flex justify-center" }, [
+  G({ class: "text-lg font-bold mb-0" }, e)
+]), 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"
-}, o)), ze = d(({ close: e, class: t }, o) => n({
+}, s)), $e = 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"
-}, o));
-class Fe extends me {
-  constructor() {
-    super(...arguments);
-    /**
-     * @member {stirng} removingClass}
-     */
-    i(this, "removingClass", "pullRight");
-    /**
-     * @member {function|null} secondaryAction
-     */
-    i(this, "secondaryAction", null);
-    /**
-     * @member {function|null} primaryAction
-     */
-    i(this, "primaryAction", null);
-    /**
-     * @member {boolean} primary
-     */
-    i(this, "primary", !1);
-    /**
-     * @member {boolean} secondary
-     */
-    i(this, "secondary", !1);
-    /**
-     * @member {string} title
-     */
-    i(this, "title", null);
-    /**
-     * @member {string} description
-     */
-    i(this, "description", null);
-    /**
-     * @member {string} icon
-     */
-    i(this, "icon", null);
-    /**
-     * @member {function} onClick
-     */
-    i(this, "onClick", null);
+}, s));
+class Me extends ae {
+  /**
+  * This will declare the props for the compiler.
+  *
+  * @returns {void}
+  */
+  declareProps() {
+    this.removingClass = "pullRight", this.secondaryAction = null, this.primaryAction = null, this.primary = !1, this.secondary = !1, this.title = null, this.description = null, this.icon = null, this.onClick = null;
   }
   /**
    * This will be called when the component is created.
@@ -558,13 +473,13 @@ class Fe extends me {
    * @returns {object}
    */
   render() {
-    const { bgColor: o, borderColor: s, iconColor: a } = this.getTypeStyles(), l = this.href || null, r = this.getChildren(a);
-    return l ? Ne({
+    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), l = this.href || null, r = this.getChildren(o);
+    return l ? Be({
       href: l,
-      class: `${o} ${s}`
-    }, r) : ze({
+      class: `${t} ${s}`
+    }, r) : $e({
       close: this.close.bind(this),
-      class: `${o} ${s}`
+      class: `${t} ${s}`
     }, r);
   }
   /**
@@ -573,8 +488,8 @@ class Fe extends me {
    * @returns {void}
    */
   afterSetup() {
-    const o = this.duration;
-    o !== "infinite" && (this.timer = new re(o, this.close.bind(this)), this.timer.start());
+    const t = this.duration;
+    t !== "infinite" && (this.timer = new se(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -582,8 +497,8 @@ class Fe extends me {
    * @returns {object}
    */
   getTypeStyles() {
-    const o = this.type || "default";
-    return F[o] || F.default;
+    const t = this.type || "default";
+    return N[t] || N.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -593,8 +508,8 @@ class Fe extends me {
   getButtons() {
     return [
       n({ class: "flex flex-row mt-6 gap-2" }, [
-        this.secondary && m({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
-        this.primary && m({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
+        this.secondary && u({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
+        this.primary && u({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
       ])
     ];
   }
@@ -604,22 +519,22 @@ class Fe extends me {
    * @param {string} iconColor
    * @returns {array}
    */
-  getChildren(o) {
+  getChildren(t) {
     return [
       n({ class: "flex items-start" }, [
-        this.icon && f({ class: `mr-4 ${o}`, html: this.icon }),
+        this.icon && h({ 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 && Le(this.title)
+            this.title && Ae(this.title)
           ]),
           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())
+          (this.primary || this.secondary) && $({ class: "margin-top-24 flex align-center" }, this.getButtons())
         ])
       ]),
-      m({
+      u({
         class: "absolute top-[12px] right-[12px]",
         variant: "icon",
-        icon: u.x,
+        icon: d.x,
         click: this.close.bind(this)
       })
     ];
@@ -630,12 +545,12 @@ class Fe extends me {
    * @param {object} e The event object.
    * @returns {void}
    */
-  close(o) {
-    o && o.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
+  close(t) {
+    t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Ee = 0;
-class St extends x {
+let Le = 0;
+class wt extends b {
   /**
    * This will render the component.
    *
@@ -643,11 +558,11 @@ class St extends x {
    */
   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 ae({
+      new oe({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new Fe(t)
+        rowItem: (t) => new Me(t)
       })
     ]);
   }
@@ -658,7 +573,7 @@ class St extends x {
    * @returns {void}
    */
   addNotice(t = {}) {
-    t.id = Ee++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+    t.id = Le++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -670,26 +585,26 @@ class St extends x {
     this.list.delete(t.id);
   }
 }
-const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
+const z = 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: (s, { state: a }) => {
-    a.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Pe(e);
+  click: (o, { state: l }) => {
+    l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Pe(e);
   }
 }, [
-  I(o),
-  c(t)
+  D(s),
+  a(t)
 ])), Pe = (e) => {
-  var s;
+  var o;
   const t = document.documentElement;
-  if (e === "system" && (e = (s = window.matchMedia) != null && s.call(window, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), E && !E("(prefers-color-scheme: " + e + ")").matches) {
+  if (e === "system" && (e = (o = window.matchMedia) != null && o.call(window, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), z && !z("(prefers-color-scheme: " + e + ")").matches) {
     t.classList.add(e);
     return;
   }
-  const o = e === "light" ? "dark" : "light";
-  t.classList.remove(o);
-}, Dt = S(
+  const s = e === "light" ? "dark" : "light";
+  t.classList.remove(s);
+}, yt = k(
   {
     /**
      * This will render the component.
@@ -699,9 +614,9 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
     render() {
       return n({ class: "flex flex-auto flex-col" }, [
         n({ class: "grid grid-cols-3 gap-4" }, [
-          T({ label: "System", value: "system", icon: u.adjustments.horizontal }),
-          T({ label: "Light", value: "light", icon: u.sun }),
-          T({ label: "Dark", value: "dark", icon: u.moon })
+          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 })
         ])
       ]);
     },
@@ -716,7 +631,7 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
       };
     }
   }
-), It = w(
+), vt = x(
   {
     /**
      * The initial state of the Toggle.
@@ -735,7 +650,7 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
      * @returns {void}
      */
     after() {
-      console.log(this), this.state.active = this.checkbox.checked;
+      this.state.active = this.checkbox.checked;
     },
     /**
      * Renders the Toggle component.
@@ -743,19 +658,16 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => 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: o }) => {
-          o.toggle("active"), this.checkbox.checked = o.active;
+        click: (t, { state: s }) => {
+          s.toggle("active"), this.checkbox.checked = s.active;
         }
       }, [
-        Z({
+        J({
           cache: "checkbox",
           class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
-          onCreated(t, o) {
-            console.log("created", t, o);
-          },
           /**
            * This will add the default checked before binding.
            * If binding it will override the default checked value.
@@ -764,49 +676,49 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
           bind: this.bind,
           required: this.required
         }),
-        c({
+        a({
           class: "absolute h-5 w-5 bg-background rounded-full shadow-md transform transition-transform",
           onState: ["active", { "translate-x-[22px]": !0, "translate-x-[2px]": !1 }]
         })
       ]);
     }
   }
-), y = {
+), w = {
   ONLINE: "online",
   OFFLINE: "offline",
   BUSY: "busy",
   AWAY: "away"
-}, g = {
+}, f = {
   ONLINE: "bg-green-500",
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, je = (e = "") => (e = e.toUpperCase(), g[e] || g.OFFLINE), Tt = (e) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${je(e)}`
-}), At = ({ propName: e = "status" } = {}) => n({
+}, Ne = (e = "") => (e = e.toUpperCase(), f[e] || f.OFFLINE), Ct = (e) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ne(e)}`
+}), kt = ({ propName: e = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
-    [g.ONLINE]: y.ONLINE,
-    [g.OFFLINE]: y.OFFLINE,
-    [g.BUSY]: y.BUSY,
-    [g.AWAY]: y.AWAY
+    [f.ONLINE]: w.ONLINE,
+    [f.OFFLINE]: w.OFFLINE,
+    [f.BUSY]: w.BUSY,
+    [f.AWAY]: w.AWAY
   }]
-}), Oe = (e, t) => q(
+}), ze = (e, t) => Y(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
     // Only set aria-current on the last item
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
-  [c(t)]
-), Ve = () => I({
+  [a(t)]
+), Fe = () => D({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), Ye = (e) => n({ class: "flex items-center" }, [
-  e.href ? Oe(e.href, e.label) : c(e.label),
-  e.separator && Ve()
-]), Bt = S(
+}, d.chevron.single.right), Ee = (e) => n({ class: "flex items-center" }, [
+  e.href ? ze(e.href, e.label) : a(e.label),
+  e.separator && Fe()
+]), St = k(
   {
     /**
      * Set initial data
@@ -814,7 +726,7 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
      * @returns {Data}
      */
     setData() {
-      return new k({
+      return new C({
         // @ts-ignore
         items: this.items || []
       });
@@ -826,7 +738,7 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
      */
     render() {
       const e = this.data.items.length - 1;
-      return ee(
+      return K(
         {
           "aria-label": "Breadcrumb",
           class: "flex items-center space-x-1 text-sm"
@@ -835,17 +747,17 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
           n({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, o) => Ye({
+            for: ["items", (t, s) => Ee({
               href: t.href,
               label: t.label,
-              separator: o < e
+              separator: s < e
             })]
           })
         ]
       );
     }
   }
-), P = {
+), F = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -854,21 +766,21 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, qe = (e) => P[e] || P.default, He = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
-  c({
+}, je = (e) => F[e] || F.default, Oe = ({ 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", {
       "bg-primary": e,
       "shadow-md": e
     }],
-    click: (o, { data: s, onClick: a }) => {
-      s.activeIndex = e, a && a(e);
+    click: (s, { data: o, onClick: l }) => {
+      o.activeIndex = e, l && l(e);
     }
   })
-]), Ue = (e, t) => Array.from({ length: e }, (o, s) => He({
-  index: s,
+]), Ve = (e, t) => Array.from({ length: e }, (s, o) => Oe({
+  index: o,
   size: t
-})), $t = S(
+})), Dt = k(
   {
     /**
      * Defines component data (props).
@@ -876,7 +788,7 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
      * @returns {Data}
      */
     setData() {
-      return new k({
+      return new C({
         // @ts-ignore
         count: this.count || 4,
         // total dots
@@ -890,46 +802,46 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
      * @returns {object}
      */
     render() {
-      const e = this.gap || "gap-2", t = qe(this.size || "sm"), o = Ue(this.data.count, t);
+      const e = this.gap || "gap-2", t = je(this.size || "sm"), s = Ve(this.data.count, t);
       return n(
         { class: "flex justify-center items-center py-2" },
         [
-          n({ class: `flex ${e}` }, o)
+          n({ class: `flex ${e}` }, s)
         ]
       );
     }
   }
-), _e = ({ toggleDropdown: e }) => h(
+), Ye = ({ 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",
     click: e
   },
   [
-    c({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
-    f({ html: u.chevron.upDown })
+    a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    h({ html: d.chevron.upDown })
   ]
-), Re = (e, t) => V({
+), qe = (e, t) => O({
   class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
   click: () => t(e),
   onState: ["selectedValue", { "bg-secondary": e.value }]
 }, [
-  e.icon && c({ class: "mr-2 flex items-baseline" }, [f({ class: "flex w-4 h-4", html: e.icon })]),
-  c(e.label)
-]), We = (e) => n({ class: "w-full border rounded-md" }, [
-  Y({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (t) => Re(t, e)] })
-]), Ge = ({ onSelect: e }) => n({ class: "flex flex-auto flex-col" }, [
-  v(
+  e.icon && a({ class: "mr-2 flex items-baseline" }, [h({ class: "flex w-4 h-4", html: e.icon })]),
+  a(e.label)
+]), He = (e) => n({ class: "w-full border rounded-md" }, [
+  V({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (t) => qe(t, e)] })
+]), Ue = ({ onSelect: e }) => n({ class: "flex flex-auto flex-col" }, [
+  y(
     "open",
-    (t, o, s) => t ? new D({
+    (t, s, o) => t ? new S({
       cache: "dropdown",
-      parent: s,
-      button: s.button
+      parent: o,
+      button: o.button
     }, [
-      We(e)
+      He(e)
     ]) : null
   )
-]), Mt = S(
+]), It = k(
   {
     /**
      * This will set up the data.
@@ -937,7 +849,7 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
      * @returns {Data}
      */
     setData() {
-      return new k({
+      return new C({
         // @ts-ignore
         items: this.items || []
       });
@@ -977,16 +889,16 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
      */
     render() {
       const e = (t) => {
-        const o = this.state;
-        o.selectedValue = t.value, o.selectedLabel = t.label, o.open = !1;
+        const s = this.state;
+        s.selectedValue = t.value, s.selectedLabel = t.label, s.open = !1;
       };
       return n({ class: "relative w-full flex flex-auto flex-col max-w-[250px]" }, [
         // @ts-ignore
-        _e({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        Ge({ onSelect: e }),
+        Ye({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        Ue({ onSelect: e }),
         // 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
@@ -998,34 +910,34 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
       ]);
     }
   }
-), _ = ({ icon: e, click: t, ariaLabel: o }) => m({
+), U = ({ icon: e, click: t, ariaLabel: s }) => u({
   variant: "icon",
   class: "flex flex-none",
   click: t,
   icon: e,
-  "aria-label": o
-}), Je = ({ click: e }) => _({
-  icon: u.circleMinus,
+  "aria-label": s
+}), _e = ({ click: e }) => U({
+  icon: d.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), Ke = ({ click: e }) => _({
-  icon: u.circlePlus,
+}), Re = ({ click: e }) => U({
+  icon: d.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), Qe = ({ bind: e, min: t, max: o, readonly: s = !1 }) => C({
+}), We = ({ bind: e, min: t, max: s, readonly: o = !1 }) => v({
   value: "[[count]]",
   bind: e,
-  blur: (a, { state: l }) => {
-    let r = parseInt(a.target.value, 10);
-    isNaN(r) && (r = t ?? 0), t !== void 0 && (r = Math.max(r, t)), o !== void 0 && (r = Math.min(r, o)), l.count = r;
+  blur: (l, { state: r }) => {
+    let i = parseInt(l.target.value, 10);
+    isNaN(i) && (i = t ?? 0), t !== void 0 && (i = Math.max(i, t)), s !== void 0 && (i = Math.min(i, s)), r.count = i;
   },
   class: "flex flex-auto text-lg font-medium bg-transparent text-center border min-w-0",
-  readonly: s,
+  readonly: o,
   min: t,
-  max: o,
+  max: s,
   type: "number",
   "aria-label": "Counter"
-}), Lt = w(
+}), Tt = x(
   {
     /**
      * Initial state for the counter component.
@@ -1048,47 +960,47 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
     render() {
       const e = this.class ?? "";
       return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
-        Je({ click: () => this.state.decrement("count") }),
-        Qe({
+        _e({ click: () => this.state.decrement("count") }),
+        We({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        Ke({ click: () => this.state.increment("count") })
+        Re({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), Xe = ({ bind: e, required: t }) => C({
+), Ge = ({ 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
-}), Ze = ({ bind: e, required: t, toggleOpen: o }) => h({
+}), Je = ({ 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: o
+  click: s
 }, [
-  Xe({ bind: e, required: t }),
-  c({
-    onState: ["selectedDate", (s) => s ? B.format("standard", s) : "Pick a date"]
+  Ge({ bind: e, required: t }),
+  a({
+    onState: ["selectedDate", (o) => o ? A.format("standard", o) : "Pick a date"]
   }),
-  f({ html: u.calendar.days })
-]), et = ({ handleDateSelect: e }) => n({ class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" }, [
-  v(
+  h({ html: d.calendar.days })
+]), Ke = ({ handleDateSelect: e }) => n({ class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" }, [
+  y(
     "open",
-    (t, o, s) => t ? new D({
+    (t, s, o) => t ? new S({
       cache: "dropdown",
-      parent: s,
-      button: s.panel,
+      parent: o,
+      button: o.panel,
       size: "fit"
     }, [
-      new le({
-        selectedDate: s.state.selectedDate,
+      new te({
+        selectedDate: o.state.selectedDate,
         selectedCallBack: e
       })
     ]) : null
   )
-]), Nt = w(
+]), At = x(
   {
     /**
      * The initial state of the DatePicker.
@@ -1116,78 +1028,78 @@ const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
      * @returns {object}
      */
     render() {
-      const e = (o, { state: s }) => s.toggle("open"), t = (o) => {
-        this.state.selectedDate = o, this.state.open = !1, this.input.value = o, typeof this.onChange == "function" && this.onChange(o);
+      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]" }, [
-        Ze({
+        Je({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        et({
+        Ke({
           handleDateSelect: t
         })
       ]);
     }
   }
-), zt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: o = null }) => te([
-  new ie({
+), Bt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => Q([
+  new ne({
     dateTime: e,
-    filter: o || ((s) => {
-      const a = B.getLocalTime(s, !0, !1, t);
-      return B.getTimeFrame(a);
+    filter: s || ((o) => {
+      const l = A.getLocalTime(o, !0, !1, t);
+      return A.getTimeFrame(l);
     })
   })
 ]);
-function tt({ bind: e, required: t }) {
-  return C({
+function Qe({ 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 ot({ bind: e, required: t, toggleOpen: o }) {
-  return h(
+function Xe({ 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: o
+      click: s
     },
     [
-      tt({ bind: e, required: t }),
-      c({
-        onState: ["selectedTime", (s) => s || "Pick a time"]
+      Qe({ bind: e, required: t }),
+      a({
+        onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
-      f({ html: u.clock })
+      h({ html: d.clock })
     ]
   );
 }
-function A({ items: e, handleTimeSelect: t, state: o, stateValue: s, pad: a = !1 }) {
+function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1 }) {
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
-    e.map((l) => {
-      let r = a ? l.toString().padStart(2, "0") : l.toString();
-      return h({
-        text: r,
+    e.map((r) => {
+      let i = l ? r.toString().padStart(2, "0") : r.toString();
+      return m({
+        text: i,
         class: "hover:bg-muted/50 rounded-md px-2 py-1",
-        click: () => t({ [s]: r }),
-        onState: [o, s, { "bg-muted": r }]
+        click: () => t({ [o]: i }),
+        onState: [s, o, { "bg-muted": i }]
       });
     })
   );
 }
-function st({ handleTimeSelect: e }) {
+function Ze({ handleTimeSelect: e }) {
   return n(
     { class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" },
     [
-      v(
+      y(
         "open",
-        (t, o, s) => t ? new D(
+        (t, s, o) => t ? new S(
           {
             cache: "dropdown",
-            parent: s,
-            button: s.panel,
+            parent: o,
+            button: o.panel,
             size: "fit"
           },
           [
@@ -1198,26 +1110,26 @@ function st({ handleTimeSelect: e }) {
                   { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
                   [
                     // Hours column
-                    A({
-                      items: Array.from({ length: 12 }, (a, l) => l + 1),
+                    T({
+                      items: Array.from({ length: 12 }, (l, r) => r + 1),
                       handleTimeSelect: e,
-                      state: s.state,
+                      state: o.state,
                       stateValue: "hour",
                       pad: !0
                     }),
                     // Minutes column
-                    A({
-                      items: Array.from({ length: 60 }, (a, l) => l),
+                    T({
+                      items: Array.from({ length: 60 }, (l, r) => r),
                       handleTimeSelect: e,
-                      state: s.state,
+                      state: o.state,
                       stateValue: "minute",
                       pad: !0
                     }),
                     // AM/PM column
-                    A({
+                    T({
                       items: ["AM", "PM"],
                       handleTimeSelect: e,
-                      state: s.state,
+                      state: o.state,
                       stateValue: "meridian"
                     })
                   ]
@@ -1230,20 +1142,20 @@ function st({ handleTimeSelect: e }) {
     ]
   );
 }
-function j(e) {
+function E(e) {
   if (!e)
     return { hour: null, minute: null, meridian: null };
-  const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, o = e.match(t);
-  if (!o)
+  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 [, s, a, , l] = o, r = parseInt(s, 10), b = parseInt(a, 10);
-  return r < 0 || r > 23 || b < 0 || b > 59 ? { hour: null, minute: null, meridian: null } : (l ? (l = l.toUpperCase(), l === "PM" && r < 12 ? r += 12 : l === "AM" && r === 12 && (r = 12)) : r === 0 ? (l = "AM", r = 12) : r < 12 ? l = "AM" : r === 12 ? l = "PM" : (l = "PM", r -= 12), {
-    hour: r.toString().padStart(2, "0"),
-    minute: b.toString().padStart(2, "0"),
-    meridian: l
+  let [, o, l, , r] = s, i = parseInt(o, 10), g = parseInt(l, 10);
+  return i < 0 || i > 23 || g < 0 || g > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && i < 12 ? i += 12 : r === "AM" && i === 12 && (i = 12)) : i === 0 ? (r = "AM", i = 12) : i < 12 ? r = "AM" : i === 12 ? r = "PM" : (r = "PM", i -= 12), {
+    hour: i.toString().padStart(2, "0"),
+    minute: g.toString().padStart(2, "0"),
+    meridian: r
   });
 }
-const Ft = w(
+const $t = x(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1251,13 +1163,13 @@ const Ft = w(
      * @member {object} state
      */
     state() {
-      const e = this.selectedTime ?? null, { hour: t, minute: o, meridian: s } = j(e);
+      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = E(e);
       return {
         selectedTime: e,
         open: !1,
         hour: t,
-        minute: o,
-        meridian: s
+        minute: s,
+        meridian: o
       };
     },
     /**
@@ -1267,11 +1179,11 @@ const Ft = w(
      */
     after() {
       if (this.input.value) {
-        const { hour: e, minute: t, meridian: o } = j(this.input.value);
+        const { hour: e, minute: t, meridian: s } = E(this.input.value);
         this.state.set({
           hour: e,
           minute: t,
-          meridian: o,
+          meridian: s,
           selectedTime: this.input.value
         });
       }
@@ -1282,32 +1194,32 @@ const Ft = w(
      * @returns {object}
      */
     render() {
-      const e = (o, { state: s }) => s.toggle("open"), t = ({ hour: o, minute: s, meridian: a }) => {
-        if (o && (this.state.hour = o), s && (this.state.minute = s), a && (this.state.meridian = a), this.state.hour && this.state.minute && this.state.meridian) {
-          const l = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-          this.state.selectedTime = l, this.state.open = !1, this.input.value = l, typeof this.change == "function" && this.change(l);
+      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: l }) => {
+        if (s && (this.state.hour = s), o && (this.state.minute = o), l && (this.state.meridian = l), this.state.hour && this.state.minute && this.state.meridian) {
+          const r = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
+          this.state.selectedTime = r, this.state.open = !1, this.input.value = r, typeof this.change == "function" && this.change(r);
         }
       };
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          ot({
+          Xe({
             toggleOpen: e,
             bind: this.bind,
             required: this.required
           }),
-          st({
+          Ze({
             handleTimeSelect: t
           })
         ]
       );
     }
   }
-), nt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
-  I({ size: "lg" }, e)
-]), lt = ({ title: e }) => L({ class: "flex flex-auto items-center" }, [
-  $({ class: "text-lg font-semibold" }, e)
-]), rt = d((e, t) => oe(
+), et = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+  D({ size: "lg" }, e)
+]), tt = ({ title: e }) => M({ class: "flex flex-auto items-center" }, [
+  B({ class: "text-lg font-semibold" }, e)
+]), st = c((e, t) => X(
   {
     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
@@ -1318,18 +1230,18 @@ const Ft = w(
   [
     n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && nt(e.icon, e.iconColor),
+      e.icon && et(e.icon, e.iconColor),
       n({ class: "flex flex-auto flex-col gap-4" }, [
         n({ class: "flex flex-auto flex-col space-y-2" }, [
-          lt(e),
+          tt(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)
+        e.buttons && $({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
       ])
     ])
   ]
-)), at = (e) => H.render(e, app.root), O = {
+)), ot = (e) => q.render(e, app.root), j = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1356,39 +1268,14 @@ const Ft = w(
     iconColor: "text-muted-foreground"
   }
 };
-class it extends x {
-  constructor() {
-    super(...arguments);
-    /**
-    * @member {string} title
-    */
-    i(this, "title", null);
-    /**
-     * @member {string} description
-     */
-    i(this, "description", null);
-    /**
-     * @member {string} Type
-        * @default ''
-        * @values 'info', 'warning', 'destructive', 'success', 'default'
-     */
-    i(this, "type", "");
-    /**
-     * @member {string} icon
-     */
-    i(this, "icon", null);
-    /**
-     * @member {function|null} onClose
-     */
-    i(this, "onClose", null);
-    /**
-     * @member {boolean} hideFooter
-     */
-    i(this, "hideFooter", !1);
-    /**
-     * @member {Array|null} buttons
-     */
-    i(this, "buttons", null);
+class nt extends b {
+  /**
+  * This will declare the props for the compiler.
+  *
+  * @returns {void}
+  */
+  declareProps() {
+    this.title = null, this.description = null, this.type = "", this.icon = null, this.onClose = null, this.hideFooter = !1, this.buttons = null;
   }
   /**
    * This will render the modal component.
@@ -1396,13 +1283,13 @@ class it extends x {
    * @returns {object}
    */
   render() {
-    const o = (R) => {
-      R.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: a, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${a} ${s}`, b = this.title || "Dialog Title";
-    return rt({
+    const t = (g) => {
+      g.target === this.panel && this.close();
+    }, { borderColor: s, bgColor: o, iconColor: l } = j[this.type] || j.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
+    return st({
       class: r,
-      title: b,
-      click: o,
+      title: i,
+      click: t,
       icon: this.icon,
       iconColor: l,
       description: this.description,
@@ -1416,7 +1303,7 @@ class it extends x {
    */
   getButtons() {
     return this.hideFooter ? null : this.buttons ? this.buttons : [
-      m({ variant: "outline", click: () => this.close() }, "Close")
+      u({ variant: "outline", click: () => this.close() }, "Close")
     ];
   }
   /**
@@ -1443,7 +1330,7 @@ class it extends x {
    * @returns {void}
    */
   open() {
-    at(this), this.panel.showModal(), this.state.open = !0;
+    ot(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1454,17 +1341,14 @@ class it extends x {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class Et extends it {
-  constructor() {
-    super(...arguments);
-    /**
-     * @member {string} confirmTextLabel
-     */
-    i(this, "confirmTextLabel", null);
-    /**
-     * @member {function} confirmed
-     */
-    i(this, "confirmed", null);
+class Mt extends nt {
+  /**
+  * This will declare the props for the compiler.
+  *
+  * @returns {void}
+  */
+  declareProps() {
+    this.confirmTextLabel = null, this.confirmed = null;
   }
   /**
       * This will get the buttons for the modal.
@@ -1472,10 +1356,10 @@ class Et extends it {
       * @returns {array}
       */
   getButtons() {
-    const o = this.confirmTextLabel || "Confirm";
+    const t = this.confirmTextLabel || "Confirm";
     return [
-      m({ variant: "outline", click: () => this.close() }, "Cancel"),
-      m({ variant: "primary", click: () => this.confirm() }, o)
+      u({ variant: "outline", click: () => this.close() }, "Cancel"),
+      u({ variant: "primary", click: () => this.confirm() }, t)
     ];
   }
   /**
@@ -1488,42 +1372,42 @@ class Et extends it {
   }
 }
 export {
-  pt as A,
-  Bt as B,
-  Mt as C,
-  me as D,
-  rt as E,
-  ve as F,
-  it as G,
-  kt as M,
-  St as N,
-  Ke as P,
-  Ct as S,
-  Dt as T,
-  be as a,
-  xt as b,
-  xe as c,
-  Ce as d,
-  ke as e,
-  Se as f,
-  Ie as g,
-  wt as h,
-  Ae as i,
-  yt as j,
-  vt as k,
-  Fe as l,
-  It as m,
-  Tt as n,
-  At as o,
-  y as p,
-  g as q,
-  je as r,
-  $t as s,
-  Je as t,
-  Qe as u,
-  Lt as v,
-  Nt as w,
-  zt as x,
-  Ft as y,
-  Et as z
+  ht as A,
+  St as B,
+  It as C,
+  ae as D,
+  st as E,
+  be as F,
+  nt as G,
+  xt as M,
+  wt as N,
+  Re as P,
+  bt 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,
+  pt as k,
+  Me as l,
+  vt as m,
+  Ct as n,
+  kt as o,
+  w as p,
+  f as q,
+  Ne as r,
+  Dt as s,
+  _e as t,
+  We as u,
+  Tt as v,
+  At as w,
+  Bt as x,
+  $t as y,
+  Mt as z
 };