@base-framework/ui 1.2.14 → 1.2.16

package/dist/empty-state-Bpuw_-Rm.js

@@ -1,2151 +0,0 @@
-import { Atom as c, Component as y, Html as A, Dom as Z, base as tt, Data as k, Builder as H, Jot as w, Events as g, DateTime as M } from "@base-framework/base";
-import { Div as n, H5 as et, P as b, Li as q, Span as a, Ul as V, Button as p, I as T, OnState as I, Label as P, H2 as v, Form as st, Header as B, Footer as L, A as G, H3 as ot, Checkbox as nt, Input as f, Img as W, Nav as it, UseParent as _, OnStateOpen as O, Time as rt, Dialog as lt } from "@base-framework/atoms";
-import { P as S, C as at, R as ct } from "./simple-search-input-DBNmoBCn.js";
-import { U as m, B as h, I as dt } from "./buttons-C-_NH7ie.js";
-import { Timer as ut, List as ht, DynamicTime as mt } from "@base-framework/organisms";
-import { C as ft, b as pt } from "./tooltip-BG73cjI2.js";
-import { f as C } from "./image-XjAp5NjV.js";
-import { Icons as u } from "./icons.es.js";
-import { F as z } from "./format-DE4rFWuD.js";
-import "./mobile-nav-wrapper-C7cKTxaV.js";
-import "./aside-template-B9V-0xle.js";
-import "./full-page-CgVI1G7F.js";
-import "./bside-template-oLChzjxQ.js";
-const Y = {
-  info: {
-    borderColor: "border-blue-500",
-    bgColor: "bg-muted/10",
-    iconColor: "text-blue-500"
-  },
-  warning: {
-    bgColor: "bg-muted/10",
-    borderColor: "border-warning",
-    iconColor: "text-warning"
-  },
-  destructive: {
-    bgColor: "bg-muted/10",
-    borderColor: "border-destructive",
-    iconColor: "text-red-500"
-  },
-  success: {
-    bgColor: "bg-muted/10",
-    borderColor: "border-emerald-500",
-    iconColor: "text-emerald-500"
-  },
-  default: {
-    borderColor: "border",
-    bgColor: "bg-muted/10",
-    iconColor: "text-muted-foreground"
-  }
-}, gt = (t, e) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${e}` }, [
-  m({ size: "sm" }, t)
-]), bt = (t) => et({ class: "font-semibold" }, t), xt = (t) => b({ class: "text-sm text-muted-foreground" }, t), je = c(({ title: t, description: e, icon: s, type: o = "default" }) => {
-  const { borderColor: i, bgColor: r, iconColor: l } = Y[o] || Y.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${i}` }, [
-    // Icon and content
-    s && gt(s, l),
-    n({ class: "flex flex-col" }, [
-      bt(t),
-      xt(e)
-    ])
-  ]);
-});
-class Ee extends y {
-  /**
-   * This will declare the props for the compiler.
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    this.removingClass = "";
-  }
-  /**
-   * This will remove the component from the DOM after a delay.
-   *
-   * @returns {void}
-   */
-  remove() {
-    this.prepareDestroy(), this.removeContext();
-    const e = this.panel, s = this.removingClass;
-    if (!s) {
-      A.removeElement(e);
-      return;
-    }
-    Z.addClass(e, s), tt.on("animationend", e, (o) => A.removeElement(e));
-  }
-}
-const yt = (t) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, t), wt = (t) => a({ class: "flex w-4 h-4", html: t }), Ct = (t) => a({ class: "flex-auto" }, t), vt = (t, e) => q({
-  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: () => e(t)
-}, [
-  t.icon && wt(t.icon),
-  Ct(t.label),
-  t.shortcut && yt(t.shortcut)
-]), St = (t, e) => V({ class: "grid gap-2" }, [
-  t.map((s) => vt(s, e))
-]), Dt = (t) => 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", (e) => St(e, t)]
-  })
-]), kt = ({ label: t, icon: e, toggleDropdown: s }) => p({
-  cache: "button",
-  class: `inline-flex items-center justify-between rounded-md border
-			px-2 py-2 text-sm font-medium hover:bg-muted
-			focus:outline-none transition duration-150 ease-in-out`,
-  click: s
-}, [
-  t && a(t),
-  e && T({ html: e })
-]), Tt = ({ onSelect: t }) => n([
-  I(
-    "open",
-    (e, s, o) => e ? new S({
-      cache: "dropdown",
-      parent: o,
-      button: o.button
-    }, [
-      Dt(t)
-    ]) : null
-  )
-]);
-class Ne extends y {
-  /**
-   * 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.
-   *
-   * @returns {Data}
-   */
-  setData() {
-    return new k({
-      groups: this.groups || []
-    });
-  }
-  /**
-   * Initializes the component state.
-   *
-   * @returns {object}
-   */
-  setupStates() {
-    return {
-      open: !1,
-      selectedItem: null
-    };
-  }
-  /**
-   * Toggles the dropdown open state.
-   *
-   * @returns {void}
-   */
-  toggleDropdown() {
-    this.state.toggle("open");
-  }
-  /**
-   * Handles item selection within the dropdown.
-   *
-   * @param {object} item - The selected item object
-   * @returns {void}
-   */
-  handleSelect(e) {
-    this.state.selectedItem = e, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(e);
-  }
-  /**
-   * Renders the Dropdown component.
-   *
-   * @returns {object}
-   */
-  render() {
-    return n({ class: "relative" }, [
-      kt({
-        label: this.label,
-        icon: this.icon,
-        toggleDropdown: this.toggleDropdown.bind(this)
-      }),
-      Tt({ onSelect: this.handleSelect.bind(this) })
-    ]);
-  }
-}
-const It = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e)), Bt = c((t, e) => P({ ...t, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, e)), Ft = c((t, e) => b({ ...t, class: "text-sm text-muted-foreground italic" }, e)), $t = c((t, e) => b({ ...t, class: "text-sm text-destructive" }, e)), Ue = c((t, e = []) => ft({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
-  // @ts-ignore
-  t.title && v({ class: "text-lg font-semibold py-4 px-6" }, t.title),
-  // @ts-ignore
-  t.description && b({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, t.description),
-  ...e
-])), Re = c((t, e = []) => (
-  // @ts-ignore
-  pt({ label: t.label, description: t.description, class: "py-4 px-6", border: t.border }, [
-    n({ class: "flex flex-col gap-y-6" }, e)
-  ])
-)), He = c((t, e = []) => {
-  const s = t.border ? "border-t" : "";
-  return n({ ...t, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${t.class || ""}` }, e);
-}), Mt = (t) => t.tag === "input" || t.tag === "select" || t.tag === "textarea", J = (t, e, s) => t.map((o) => !o || (o.children && o.children.length > 0 && (o.children = J(o.children, e, s)), !o.required) ? o : Mt(o) ? {
-  ...o,
-  aria: {
-    invalid: ["hasError"]
-  },
-  invalid: s,
-  input: e
-} : o), Pt = c((t, e) => {
-  const i = J(e, (r) => {
-    r.target.checkValidity() && t.setError(null);
-  }, (r) => {
-    t.setError(r.target.validationMessage);
-  });
-  return n({
-    ...t,
-    class: "w-full"
-  }, i);
-}), qe = C(
-  {
-    /**
-     * The initial state of the FormField.
-     *
-     * @member {object} state
-     * @returns {object}
-     */
-    state() {
-      return {
-        error: null,
-        hasError: !1,
-        value: this.defaultValue ?? ""
-      };
-    },
-    /**
-     * Renders the FormField component.
-     *
-     * @returns {object}
-     */
-    render() {
-      const t = this.name, e = this.getId(`${t}`), { label: s, description: o } = this, i = (r) => {
-        this.state.error = r, this.state.hasError = !!r;
-      };
-      return n({ class: "flex flex-auto gap-y-4" }, [
-        It([
-          Bt({ htmlFor: e }, s),
-          Pt({
-            id: e,
-            name: t,
-            value: this.state.value,
-            setError: i
-          }, this.children),
-          o && Ft({ id: this.getId("description") }, o),
-          n({ onState: ["error", (r) => r && $t(r)] })
-        ])
-      ]);
-    }
-  }
-), Lt = (t, e, s = null) => {
-  t.target.checkValidity() && (t.preventDefault(), s && s(t, e));
-}, K = c(
-  (t, e) => (
-    // @ts-ignore
-    st({ ...t, submit: (s, o) => Lt(s, o, t.submit), class: `w-full ${t.class ?? ""}` }, e)
-  )
-), Ve = c((t, e) => (
-  // @ts-ignore
-  n({ ...t, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${t.class || ""}` }, e)
-)), Ge = c((t, e = []) => n({ class: "flex flex-col gap-y-3 py-4" }, [
-  // @ts-ignore
-  t.title && v({ class: "font-semibold" }, t.title),
-  ...e
-])), We = (t, e) => n({ class: "flex justify-between" }, [
-  a({ class: "text-muted-foreground" }, t),
-  a(e)
-]), _e = (t, e) => n({ class: "flex" }, [
-  a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, t),
-  a(e)
-]), Ot = c(({ title: t, description: e, back: s, icon: o, options: i = [] }) => B({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10 min-w-0" }, [
-  /**
-   * Back Button (Mobile Only)
-   */
-  s && h({
-    variant: "icon",
-    icon: u.arrows.left,
-    class: "mr-2 p-0 flex sm:hidden",
-    click: (r, l) => l.close()
-  }),
-  /**
-   * Icon Container
-   */
-  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [
-    m({ size: "md" }, o)
-  ]),
-  n({ class: "flex flex-auto flex-row justify-between ml-2 gap-2 min-w-0" }, [
-    n({ class: "flex flex-auto flex-col min-w-0" }, [
-      v({ class: "text-lg font-semibold m-0 truncate" }, t),
-      e && n({ class: "text-sm text-muted-foreground truncate" }, e)
-    ]),
-    n({ class: "flex flex-none items-center gap-2" }, i)
-  ])
-])), Q = c((t, e) => {
-  const s = t.class?.includes("drawer");
-  return n({
-    popover: "manual",
-    // @ts-ignore
-    class: `modal ${s ? "" : "m-auto top-0 right-0 bottom-0 left-0"} ${s ? "" : "h-full max-h-screen"} fixed z-20 grid w-full gap-2 lg:border bg-background text-foreground shadow-xl wrap-break-words p-0 overflow-y-auto ${t.class}`,
-    click: (r, l) => {
-      r.target === l.panel && (r.preventDefault(), r.stopPropagation(), l.state.open = !1);
-    }
-  }, [
-    K({
-      class: "modal-content relative bg-background z-1 flex flex-auto flex-col gap-y-4 min-w-0",
-      // @ts-ignore
-      submit: (r, l) => t.onSubmit && t.onSubmit(l),
-      cache: "modalContent",
-      // @ts-ignore
-      ...t.gestureHandlers
-    }, [
-      Ot(t),
-      n({ class: "modal-body flex grow flex-col py-0 px-6 z-0", cache: "modalBody" }, e),
-      // @ts-ignore
-      !t.hideFooter && L({ class: "modal-footer sticky bottom-0 bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, t.buttons)
-    ])
-  ]);
-}), At = (t) => H.render(t, app.root);
-class zt extends y {
-  /**
-   * This will declare the props for the compiler.
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    this.title = null, this.description = null, this.size = null, this.type = null, this.hidePrimaryButton = !1, this.hideFooter = !1, this.icon = null, this.onSubmit = null, this.onClose = null, this.back = !1;
-  }
-  /**
-   * This will render the modal component.
-   *
-   * @returns {object}
-   */
-  render() {
-    const e = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return Q(
-      {
-        class: e,
-        title: s,
-        description: o,
-        options: this.headerOptions(),
-        buttons: this.getButtons(),
-        hideFooter: this.hideFooter,
-        onSubmit: (i) => {
-          let r = !0;
-          this.onSubmit && (r = this.onSubmit(i)), r !== !1 && this.destroy();
-        },
-        icon: this.icon,
-        back: this.back ?? !1,
-        aria: { expanded: ["open"] }
-      },
-      this.children
-    );
-  }
-  /**
-   * This will setup the states.
-   *
-   * @returns {object}
-   */
-  setupStates() {
-    return {
-      open: {
-        state: !1,
-        callBack: (e) => {
-          e || this.destroy();
-        }
-      }
-    };
-  }
-  /**
-   * This will get the header options.
-   *
-   * @returns {Array<object>}
-   */
-  headerOptions() {
-    return [];
-  }
-  /**
-   * This will get the buttons for the modal.
-   *
-   * @returns {array}
-   */
-  getButtons() {
-    return [
-      h({ variant: "outline", click: () => this.destroy() }, "Cancel"),
-      this.hidePrimaryButton !== !0 && h({ variant: "primary", type: "submit" }, "Save")
-    ];
-  }
-  /**
-   * This will check if the click was outside the component.
-   *
-   * @param {object} element
-   * @returns {boolean}
-   */
-  isOutsideClick(e) {
-    return !this.panel.contains(e);
-  }
-  /**
-   * This will get the size class.
-   *
-   * @returns {string}
-   */
-  getSizeClass() {
-    switch (this.size) {
-      // case 'sm':
-      // 	return 'sm max-w-[646px]';
-      case "lg":
-        return "lg max-w-[900px]";
-      case "xl":
-        return "xl max-w-[1400px]";
-      default:
-        return "md max-w-[760px]";
-    }
-  }
-  /**
-   * This will get the type class.
-   *
-   * @returns {string}
-   */
-  getTypeClass() {
-    switch (this.type) {
-      case "right":
-        return "right right-0";
-      case "left":
-        return "left left-0";
-      case "drawer":
-        return "drawer";
-      default:
-        return "";
-    }
-  }
-  /**
-   * This will get the modal class.
-   *
-   * @returns {string}
-   */
-  getMainClass() {
-    return this.getSizeClass() + " " + this.getTypeClass();
-  }
-  /**
-   * This will override the set up to use the app shell.
-   *
-   * @param {object} container
-   */
-  setContainer(e) {
-    this.container = app.root;
-  }
-  /**
-   * This will open the modal.
-   *
-   * @returns {void}
-   */
-  open() {
-    At(this), this.showModal();
-  }
-  /**
-   * This will destroy the modal.
-   *
-   * @returns {void}
-   */
-  close() {
-    this.destroy();
-  }
-  /**
-   * This will show the modal.
-   *
-   * @protected
-   * @returns {void}
-   */
-  showModal() {
-    globalThis.setTimeout(() => this.panel.showPopover(), 10), this.state.open = !0, document.documentElement.style.overflowY = "hidden";
-  }
-  /**
-   * This will hide the modal.
-   *
-   * @protected
-   * @returns {void}
-   */
-  beforeDestroy() {
-    this?.panel?.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
-  }
-}
-class Yt {
-  /**
-   * Creates an instance of DrawerGesture.
-   *
-   * @param {object} [options={}]
-   * @param {HTMLElement} [options.modal=null] - The modal element (panel) reference
-   * @param {HTMLElement} [options.modalContent=null] - The modal content element reference
-   * @param {HTMLElement} [options.modalBody=null] - The scrollable body element reference
-   * @param {number} [options.closeThreshold=150] - Pixels to drag before closing
-   * @param {number} [options.snapThreshold=50] - Pixels to drag before snapping
-   * @param {Function} [options.onClose=null] - Callback when drawer should close
-   */
-  constructor(e = {}) {
-    const {
-      modal: s = null,
-      modalContent: o = null,
-      modalBody: i = null,
-      closeThreshold: r = 150,
-      snapThreshold: l = 50,
-      onClose: d = null
-    } = e;
-    this.modal = s, this.modalContent = o, this.modalBody = i, this.closeThreshold = r, this.snapThreshold = l, this.onClose = d, this.reset();
-  }
-  /**
-   * Resets the drag state to initial values
-   *
-   * @returns {void}
-   */
-  reset() {
-    this.state = {
-      isDragging: !1,
-      startY: 0,
-      currentY: 0,
-      startScrollTop: 0,
-      canDrag: !1
-    };
-  }
-  /**
-   * Checks if the viewport is mobile size
-   *
-   * @returns {boolean}
-   */
-  isMobile() {
-    return window.innerWidth < 1024;
-  }
-  /**
-   * Handles touch start event
-   *
-   * @param {TouchEvent} e - The touch event
-   * @returns {void}
-   */
-  handleTouchStart(e) {
-    if (!this.modalBody)
-      return;
-    const s = e.touches[0];
-    this.state.startY = s.clientY, this.state.currentY = s.clientY, this.state.startScrollTop = this.modalBody.scrollTop, this.state.canDrag = this.modalBody.scrollTop === 0;
-  }
-  /**
-   * Handles touch move event
-   *
-   * @param {TouchEvent} e - The touch event
-   * @returns {void}
-   */
-  handleTouchMove(e) {
-    if (!this.modalContent || !this.modalBody)
-      return;
-    const s = e.touches[0];
-    this.state.currentY = s.clientY;
-    const o = this.getDeltaY();
-    if (!this.state.isDragging && this.state.canDrag && o > 0 && this.modalBody.scrollTop === 0 && (this.state.isDragging = !0), this.state.isDragging && o > 0) {
-      e.preventDefault();
-      const i = this.calculateTranslateY(o);
-      this.modalContent.style.transform = `translateY(${i}px)`, this.modalContent.style.transition = "none";
-      const r = this.calculateBackdropOpacity(o);
-      this.updateBackdropOpacity(r);
-    } else this.modalBody.scrollTop > 0 && (this.state.canDrag = !1);
-  }
-  /**
-   * Handles touch end event
-   *
-   * @param {TouchEvent} e - The touch event
-   * @returns {void}
-   */
-  handleTouchEnd(e) {
-    if (!this.modalContent)
-      return;
-    const s = this.getDeltaY();
-    this.state.isDragging && (this.modalContent.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out", s > this.closeThreshold ? this.animateClose() : this.snapBack()), this.state.isDragging = !1, this.state.canDrag = !1;
-  }
-  /**
-   * Gets current drag delta Y
-   *
-   * @returns {number} The vertical drag distance in pixels
-   */
-  getDeltaY() {
-    return this.state.currentY - this.state.startY;
-  }
-  /**
-   * Calculates translateY with rubber band damping effect.
-   * The further you drag, the more resistance is applied.
-   *
-   * @param {number} deltaY - The raw drag distance
-   * @returns {number} The damped translation distance
-   */
-  calculateTranslateY(e) {
-    const s = 1 - e / (window.innerHeight * 2);
-    return e * Math.max(s, 0.5);
-  }
-  /**
-   * Calculates backdrop opacity based on drag distance.
-   * Opacity decreases as the drawer is dragged down.
-   *
-   * @param {number} deltaY - The drag distance
-   * @returns {number} Opacity value between 0 and 1
-   */
-  calculateBackdropOpacity(e) {
-    return Math.max(0, 1 - e / this.closeThreshold);
-  }
-  /**
-   * Updates the backdrop opacity via CSS custom property
-   *
-   * @param {number} opacity - The opacity value (0-1)
-   * @returns {void}
-   */
-  updateBackdropOpacity(e) {
-    this.modal && this.modal.style.setProperty("--backdrop-opacity", e.toString());
-  }
-  /**
-   * Animates the drawer closing by translating the entire modal off-screen
-   *
-   * @returns {void}
-   */
-  animateClose() {
-    !this.modal || !this.modalContent || (this.modalContent.style.transform = "translateY(0)", this.modalContent.style.transition = "none", this.modal.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out", this.modal.style.transform = "translateY(100%)", this.updateBackdropOpacity(0), setTimeout(() => {
-      this.onClose && this.onClose();
-    }, 300));
-  }
-  /**
-   * Snaps the drawer back to its original position
-   *
-   * @returns {void}
-   */
-  snapBack() {
-    this.modalContent && (this.modalContent.style.transform = "translateY(0)", this.updateBackdropOpacity(1));
-  }
-  /**
-   * Checks if currently dragging
-   *
-   * @returns {boolean}
-   */
-  isDragging() {
-    return this.state.isDragging;
-  }
-  /**
-   * Cleans up resources and resets state
-   *
-   * @returns {void}
-   */
-  destroy() {
-    this.reset(), this.modal = null, this.onClose = null;
-  }
-}
-class Je extends zt {
-  /**
-   * Declares the component props
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    super.declareProps(), this.type = "drawer", this.swipeToClose = !0, this.closeThreshold = 150, this.snapThreshold = 50, this.gesture = null, this.modalContent = null, this.modalBody = null;
-  }
-  /**
-   * Gets extra props to pass to ModalContainer
-   *
-   * @returns {object}
-   */
-  getContainerProps() {
-    const e = {};
-    return this.swipeToClose && (e.gestureHandlers = this.getGestureHandlers()), e;
-  }
-  /**
-   * Renders the drawer with gesture handlers
-   *
-   * @returns {object}
-   */
-  render() {
-    const e = this.getMainClass(), s = this.title || "", o = this.description || null, i = this.getContainerProps();
-    return Q(
-      {
-        class: e,
-        title: s,
-        description: o,
-        options: this.headerOptions(),
-        buttons: this.getButtons(),
-        hideFooter: this.hideFooter,
-        onSubmit: (r) => {
-          let l = !0;
-          this.onSubmit && (l = this.onSubmit(r)), l !== !1 && this.destroy();
-        },
-        icon: this.icon,
-        back: this.back ?? !1,
-        aria: { expanded: ["open"] },
-        ...i
-      },
-      this.children
-    );
-  }
-  /**
-   * Shows the modal and initializes gesture handling
-   *
-   * @protected
-   * @returns {void}
-   */
-  showModal() {
-    super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new Yt({
-      // @ts-ignore
-      modal: this.panel,
-      // @ts-ignore
-      modalContent: this.modalContent,
-      // @ts-ignore
-      modalBody: this.modalBody,
-      closeThreshold: this.closeThreshold,
-      snapThreshold: this.snapThreshold,
-      onClose: () => this.destroy()
-    }));
-  }
-  /**
-   * Gets gesture event handlers for modal content.
-   * Returns event props to be spread onto the modal-content element.
-   * Handlers are bound methods that will work once gesture is initialized.
-   *
-   * @returns {object}
-   */
-  getGestureHandlers() {
-    return this.swipeToClose ? {
-      touchstart: (e) => this.gesture?.handleTouchStart(e),
-      touchmove: (e) => this.gesture?.handleTouchMove(e),
-      touchend: (e) => this.gesture?.handleTouchEnd(e)
-    } : {};
-  }
-  /**
-   * Cleans up before destroy
-   *
-   * @protected
-   * @returns {void}
-   */
-  beforeDestroy() {
-    this.gesture && (this.gesture.destroy(), this.gesture = null), super.beforeDestroy();
-  }
-}
-const j = {
-  info: {
-    bgColor: "bg-muted/10",
-    borderColor: "border-blue-500",
-    iconColor: "text-blue-500"
-  },
-  warning: {
-    bgColor: "bg-muted/10",
-    borderColor: "border-warning",
-    iconColor: "text-warning"
-  },
-  destructive: {
-    bgColor: "bg-muted/10",
-    borderColor: "border-destructive",
-    iconColor: "text-red-500"
-  },
-  success: {
-    bgColor: "bg-muted/10",
-    borderColor: "border-emerald-500",
-    iconColor: "text-emerald-500"
-  },
-  default: {
-    bgColor: "bg-muted/10",
-    borderColor: "border",
-    iconColor: "text-muted-foreground"
-  }
-}, jt = (t) => B({ class: "flex justify-center" }, [
-  ot({ class: "text-lg font-bold mb-0" }, t)
-]), Et = c(({ href: t, class: e }, s) => G({
-  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 ${e}`,
-  href: t,
-  animateIn: "pullRightIn",
-  animateOut: "pullRight",
-  role: "alert"
-}, s)), Nt = c(({ close: t, class: e }, 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 ${e}`,
-  click: () => t(),
-  animateIn: "pullRightIn",
-  animateOut: "pullRight",
-  role: "alert"
-}, s));
-class Ut extends y {
-  /**
-   * This will declare the props for the compiler.
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    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.
-   *
-   * @returns {void}
-   */
-  onCreated() {
-    this.duration = this.duration || 4e3;
-  }
-  /**
-   * This will render the component.
-   *
-   * @returns {object}
-   */
-  render() {
-    const { bgColor: e, borderColor: s, iconColor: o } = this.getTypeStyles(), i = this.href || null, r = this.getChildren(o);
-    return i ? Et({
-      href: i,
-      class: `${e} ${s}`
-    }, r) : Nt({
-      close: this.close.bind(this),
-      class: `${e} ${s}`
-    }, r);
-  }
-  /**
-   * This will be called after the component is set up.
-   *
-   * @returns {void}
-   */
-  afterSetup() {
-    const e = this.duration;
-    e !== "infinite" && (this.timer = new ut(e, this.close.bind(this)), this.timer.start());
-  }
-  /**
-   * This will get the style properties based on the notification type.
-   *
-   * @returns {object}
-   */
-  getTypeStyles() {
-    const e = this.type || "default";
-    return j[e] || j.default;
-  }
-  /**
-   * This will get the buttons for the notification.
-   *
-   * @returns {array}
-   */
-  getButtons() {
-    return [
-      n({ class: "flex flex-row mt-6 gap-2" }, [
-        this.secondary && h({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
-        this.primary && h({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
-      ])
-    ];
-  }
-  /**
-   * This will get the children for the notification.
-   *
-   * @param {string} iconColor
-   * @returns {array}
-   */
-  getChildren(e) {
-    return [
-      n({ class: "flex items-start" }, [
-        this.icon && n({ class: `mr-4 ${e}` }, [
-          m({ size: "md" }, this.icon)
-        ]),
-        n({ class: "flex flex-auto flex-col" }, [
-          n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
-            this.title && jt(this.title)
-          ]),
-          b({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
-          (this.primary || this.secondary) && L({ class: "margin-top-24 flex align-center" }, this.getButtons())
-        ])
-      ]),
-      h({
-        class: "absolute top-[12px] right-[12px]",
-        variant: "icon",
-        icon: u.x,
-        click: this.close.bind(this)
-      })
-    ];
-  }
-  /**
-   * This will close the notification.
-   *
-   * @param {object} e The event object.
-   * @returns {void}
-   */
-  close(e) {
-    e && e.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
-  }
-}
-let Rt = 0;
-class Ke extends y {
-  /**
-   * This will render the component.
-   *
-   * @returns {object}
-   */
-  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 ht({
-        cache: "list",
-        key: "id",
-        role: "list",
-        rowItem: (e) => new Ut(e)
-      })
-    ]);
-  }
-  /**
-   * This will add a notification.
-   *
-   * @param {object} props
-   * @returns {void}
-   */
-  addNotice(e = {}) {
-    e.id = Rt++, e.callBack = () => this.removeNotice(e), this?.list?.append([e]), this?.panel?.hidePopover(), this?.panel?.showPopover();
-  }
-  /**
-   * This will remove a notification.
-   *
-   * @param {object} notice
-   * @returns {void}
-   */
-  removeNotice(e) {
-    this?.list?.delete(e.id), this?.list?.isEmpty() && this?.panel?.hidePopover();
-  }
-}
-const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => p({
-  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: t }],
-  dataSet: ["method", ["state", t, "active"]],
-  click: (o, { state: i }) => {
-    i.method = t, localStorage.setItem("theme", t), t === "system" && localStorage.removeItem("theme"), Ht(t);
-  }
-}, [
-  m({}, s),
-  a(e)
-])), Ht = (t) => {
-  const e = document.documentElement;
-  if (t === "system" && (t = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), E && !E("(prefers-color-scheme: " + t + ")").matches) {
-    e.classList.add(t);
-    return;
-  }
-  const s = t === "light" ? "dark" : "light";
-  e.classList.remove(s);
-}, Qe = w(
-  {
-    /**
-     * This will render the component.
-     *
-     * @returns {object}
-     */
-    render() {
-      return n({ class: "flex flex-auto flex-col" }, [
-        n({ class: "grid grid-cols-3 gap-4" }, [
-          F({ label: "System", value: "system", icon: u.adjustments.horizontal }),
-          F({ label: "Light", value: "light", icon: u.sun }),
-          F({ label: "Dark", value: "dark", icon: u.moon })
-        ])
-      ]);
-    },
-    /**
-     * This will setup the states.
-     *
-     * @returns {object}
-     */
-    state() {
-      return {
-        method: globalThis.localStorage.getItem("theme") ?? "system"
-      };
-    }
-  }
-), Xe = C(
-  {
-    /**
-     * The initial state of the Toggle.
-     *
-     * @returns {object}
-     */
-    state() {
-      return {
-        active: this.active ?? !1
-      };
-    },
-    /**
-     * This is added to check the checkbox after the component is rendered.
-     * to see if the bind updated the checked value.
-     *
-     * @returns {void}
-     */
-    after() {
-      this.state.active = this.checkbox.checked;
-    },
-    /**
-     * Renders the Toggle component.
-     *
-     * @returns {object}
-     */
-    render() {
-      return p({
-        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: (e, { state: s }) => {
-          s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, e, this);
-        }
-      }, [
-        nt({
-          cache: "checkbox",
-          class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
-          /**
-           * This will add the default checked before binding.
-           * If binding it will override the default checked value.
-           */
-          checked: this.state.active,
-          bind: this.bind,
-          required: this.required
-        }),
-        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 }]
-        })
-      ]);
-    }
-  }
-), D = {
-  ONLINE: "online",
-  OFFLINE: "offline",
-  BUSY: "busy",
-  AWAY: "away"
-}, x = {
-  ONLINE: "bg-green-500",
-  OFFLINE: "bg-gray-500",
-  BUSY: "bg-red-500",
-  AWAY: "bg-yellow-500"
-}, qt = (t = "") => (t = t.toUpperCase(), x[t] || x.OFFLINE), Ze = (t) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${qt(t)}`
-}), ts = ({ propName: t = "status" } = {}) => n({
-  class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
-  onSet: [t, {
-    [x.ONLINE]: D.ONLINE,
-    [x.OFFLINE]: D.OFFLINE,
-    [x.BUSY]: D.BUSY,
-    [x.AWAY]: D.AWAY
-  }]
-}), Vt = (t) => t.indexOf(".") === -1 && t.indexOf("[[") === -1 && t.indexOf("blob:") === -1, es = w(
-  {
-    /**
-     * Get the initial state for the component.
-     *
-     * @returns {object} Initial state for the component
-     */
-    state() {
-      return {
-        // @ts-ignore
-        loaded: !!this.src
-      };
-    },
-    /**
-     * This will open the file browse dialog.
-     *
-     * @returns {void}
-     */
-    openFileBrowse() {
-      const t = this.input;
-      t && (t.value = "", g.trigger("click", t));
-    },
-    /**
-     * Get the URL for the uploaded file.
-     *
-     * @param {File} file - The file to get the URL for.
-     * @returns {string} The object URL for the file.
-     */
-    getFileUrl(t) {
-      return this.url && URL.revokeObjectURL(this.url), this.url = URL.createObjectURL(t);
-    },
-    /**
-     * Render the component.
-     *
-     * @returns {object} Rendered component
-     */
-    render() {
-      const t = "image-upload", e = this.onChange || null;
-      return n({ class: "flex-none items-center" }, [
-        f({
-          id: t,
-          cache: "input",
-          type: "file",
-          accept: "image/*",
-          class: "hidden",
-          change: (s) => {
-            const o = s.target.files?.[0];
-            o && e && (this.state.loaded = !1, e(o, this.parent), this.src = this.getFileUrl(o), this.state.loaded = !0);
-          }
-        }),
-        n({
-          class: "relative w-32 h-32 rounded-full border flex items-center justify-center cursor-pointer hover:bg-muted transition-colors duration-150 overflow-hidden group",
-          click: (s) => {
-            s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
-          }
-        }, [
-          I("loaded", (s) => s === !1 || Vt(this.src) ? P({
-            htmlFor: t,
-            class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
-          }, [
-            dt(u.upload),
-            n("Upload Image")
-          ]) : W({
-            // @ts-ignore
-            src: this.src,
-            class: "absolute inset-0 w-full h-full object-cover rounded-full"
-          }))
-        ])
-      ]);
-    }
-  }
-), ss = w(
-  {
-    /**
-     * Get the initial state for the component.
-     *
-     * @returns {object} Initial state for the component
-     */
-    state() {
-      return {
-        // @ts-ignore
-        loaded: !!this.src
-      };
-    },
-    /**
-     * This will open the file browse dialog.
-     *
-     * @returns {void}
-     */
-    openFileBrowse() {
-      const t = this.input;
-      t && (t.value = "", g.trigger("click", t));
-    },
-    /**
-     * Get the URL for the uploaded file.
-     *
-     * @param {File} file - The file to get the URL for.
-     * @returns {string} The object URL for the file.
-     */
-    getFileUrl(t) {
-      return this.url && URL.revokeObjectURL(this.url), this.url = URL.createObjectURL(t);
-    },
-    /**
-     * Render the component.
-     *
-     * @returns {object} Rendered component
-     */
-    render() {
-      const t = "logo-upload", e = this.onChange || null;
-      return n({ class: "flex-none items-center" }, [
-        f({
-          id: t,
-          cache: "input",
-          type: "file",
-          accept: "image/*",
-          class: "hidden",
-          change: (s) => {
-            const o = s.target.files?.[0];
-            o && e && (this.state.loaded = !1, e(o, this.parent), this.src = this.getFileUrl(o), this.state.loaded = !0);
-          }
-        }),
-        n({
-          class: "relative w-32 h-32 rounded-full border flex items-center justify-center cursor-pointer hover:bg-muted transition-colors duration-150 overflow-hidden group",
-          click: (s) => {
-            s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
-          }
-        }, [
-          I(
-            "loaded",
-            (s) => s ? W({
-              // @ts-ignore
-              src: this.src,
-              class: "absolute inset-0 w-full h-full object-cover rounded-full"
-            }) : P({
-              htmlFor: t,
-              class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
-            }, [
-              m({}, u.upload),
-              n("Upload logo")
-            ])
-          )
-        ])
-      ]);
-    },
-    /**
-     * Cleanup before destroying the component.
-     *
-     * @returns {void}
-     */
-    destroy() {
-      this.input = null;
-    }
-  }
-), Gt = (t, e) => G(
-  {
-    href: t,
-    "aria-current": e === "Breadcrumb" && "page",
-    // Only set aria-current on the last item
-    class: "text-muted-foreground font-medium hover:text-foreground"
-  },
-  [a(e)]
-), Wt = () => m({
-  class: "mx-3 text-muted-foreground",
-  "aria-hidden": !0,
-  size: "xs"
-}, u.chevron.single.right), _t = (t) => n({ class: "flex items-center" }, [
-  t.href ? Gt(t.href, t.label) : a(t.label),
-  t.separator && Wt()
-]), os = w(
-  {
-    /**
-     * Set initial data
-     *
-     * @returns {Data}
-     */
-    setData() {
-      return new k({
-        // @ts-ignore
-        items: this.items || []
-      });
-    },
-    /**
-     * Render Breadcrumb Component
-     *
-     * @returns {object}
-     */
-    render() {
-      const t = this.data.items.length - 1;
-      return it(
-        {
-          "aria-label": "Breadcrumb",
-          class: "flex items-center gap-x-1 text-sm"
-        },
-        [
-          n({
-            role: "list",
-            class: "flex items-center",
-            for: ["items", (e, s) => _t({
-              href: e.href,
-              label: e.label,
-              separator: s < t
-            })]
-          })
-        ]
-      );
-    }
-  }
-), N = {
-  xs: "h-1 w-1",
-  sm: "h-2 w-2",
-  md: "h-4 w-4",
-  lg: "h-8 w-8",
-  xl: "h-12 w-12",
-  "2xl": "h-16 w-16",
-  "3xl": "h-24 w-24",
-  default: "h-4 w-4"
-}, Jt = (t) => N[t] || N.default, Kt = ({ index: t, size: e }) => n({ class: `${e} rounded-full bg-muted cursor-pointer` }, [
-  a({
-    class: "block w-full h-full rounded-full transition-colors",
-    onSet: ["activeIndex", {
-      "bg-primary": t,
-      "shadow-md": t
-    }],
-    click: (s, { data: o, onClick: i }) => {
-      o.activeIndex = t, i && i(t);
-    }
-  })
-]), Qt = (t, e) => Array.from({ length: t }, (s, o) => Kt({
-  index: o,
-  size: e
-})), ns = w(
-  {
-    /**
-     * Defines component data (props).
-     *
-     * @returns {Data}
-     */
-    setData() {
-      return new k({
-        // @ts-ignore
-        count: this.count || 4,
-        // total dots
-        // @ts-ignore
-        activeIndex: this.activeIndex || 0
-      });
-    },
-    /**
-     * Renders the dots.
-     *
-     * @returns {object}
-     */
-    render() {
-      const t = this.gap || "gap-2", e = Jt(this.size || "sm"), s = Qt(this.data.count, e);
-      return n(
-        { class: "flex justify-center items-center py-2" },
-        [
-          n({ class: `flex ${t}` }, s)
-        ]
-      );
-    }
-  }
-), Xt = ({ toggleDropdown: t }) => p(
-  {
-    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 bg-input hover:bg-muted h-10 px-4 py-2 justify-between",
-    click: t
-  },
-  [
-    a({ onState: ["selectedLabel", (e) => e || "Select item..."] }),
-    m({ size: "sm" }, u.chevron.upDown)
-  ]
-), Zt = (t, e, s) => q({
-  class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
-  click: () => e(t),
-  onState: [s, "selectedValue", { "bg-secondary": t.value }]
-}, [
-  t.icon && a({ class: "mr-2 flex items-baseline" }, [m({ size: "xs" }, t.icon)]),
-  a({ class: "text-base font-normal" }, t.label)
-]), te = (t, e) => n({ class: "w-full border rounded-md" }, [
-  V({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Zt(s, t, e)] })
-]), ee = ({ onSelect: t, state: e }) => n({ class: "flex flex-auto flex-col" }, [
-  I(
-    "open",
-    (s, o, i) => s ? new S({
-      cache: "dropdown",
-      parent: i,
-      button: i.button
-    }, [
-      te(t, e)
-    ]) : null
-  )
-]), is = w(
-  {
-    /**
-     * This will set up the data.
-     *
-     * @returns {Data}
-     */
-    setData() {
-      return new k({
-        // @ts-ignore
-        items: this.items || []
-      });
-    },
-    /**
-     * This will set up the states.
-     *
-     * @returns {object}
-     */
-    state() {
-      return {
-        open: !1,
-        selectedLabel: "",
-        selectedValue: ""
-      };
-    },
-    /**
-     * This will set the state item.
-     *
-     * @param {object} item
-     * @returns {void}
-     */
-    setStateItem(t) {
-      const e = this.state;
-      e.selectedValue = t.value, e.selectedLabel = t.label, e.open = !1;
-    },
-    /**
-     * Handles the selection of an item.
-     *
-     * @param {object} item
-     * @returns {void}
-     */
-    select(t) {
-      this.setStateItem(t), typeof this.onSelect == "function" && this.onSelect(t, this.parent);
-    },
-    /**
-     * Selects the first item in the list.
-     *
-     * @returns {void}
-     */
-    selectFirstItem() {
-      const t = this.data.items[0];
-      this.select(t);
-    },
-    /**
-     * Toggles the dropdown open state.
-     *
-     * @returns {void}
-     */
-    toggleDropdown() {
-      this.state.toggle("open");
-    },
-    /**
-     * This will run after the component is set up.
-     *
-     * @returns {void}
-     */
-    after() {
-      if (this.selectFirst === !0 && this.state.selectedValue === "") {
-        const t = this.data.items[0];
-        t && this.setStateItem(t);
-      }
-    },
-    /**
-     * This will render the component.
-     *
-     * @returns {object}
-     */
-    render() {
-      const t = this.class || "", e = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
-      return n({ class: `relative ${s} flex flex-auto flex-col ${e} ${t}` }, [
-        // @ts-ignore
-        Xt({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        ee({
-          // @ts-ignore
-          state: this.state,
-          // @ts-ignore
-          onSelect: this.select.bind(this)
-        }),
-        // Hidden required input for form validation
-        // @ts-ignore
-        this.required && f({
-          class: "opacity-0 absolute top-0 left-0 z-1",
-          type: "text",
-          // @ts-ignore
-          name: this.name,
-          required: !0,
-          // @ts-ignore
-          value: ["[[selectedValue]]", this.state]
-        })
-      ]);
-    }
-  }
-), X = ({ icon: t, click: e, ariaLabel: s }) => h({
-  variant: "icon",
-  class: "flex flex-none",
-  click: e,
-  icon: t,
-  "aria-label": s
-}), se = ({ click: t }) => X({
-  icon: u.circleMinus,
-  click: t,
-  ariaLabel: "Decrement"
-}), oe = ({ click: t }) => X({
-  icon: u.circlePlus,
-  click: t,
-  ariaLabel: "Increment"
-}), ne = ({ bind: t, min: e, max: s, readonly: o = !1 }) => _(({ state: i }) => f({
-  value: ["[[count]]", i],
-  bind: t,
-  blur: (r, { state: l }) => {
-    let d = parseInt(r.target.value, 10);
-    isNaN(d) && (d = e ?? 0), e !== void 0 && (d = Math.max(d, e)), s !== void 0 && (d = Math.min(d, s)), l.count = d;
-  },
-  class: "flex flex-auto text-lg font-medium bg-input text-center border min-w-0",
-  readonly: o,
-  min: e,
-  max: s,
-  type: "number",
-  "aria-label": "Counter"
-})), rs = C(
-  {
-    /**
-     * Initial state for the counter component.
-     *
-     * @member {object} state
-     */
-    state() {
-      return {
-        count: {
-          state: this.initialCount ?? 0,
-          callBack: (t) => this.change && this.change(t)
-        }
-      };
-    },
-    /**
-     * Renders the Counter component.
-     *
-     * @returns {object}
-     */
-    render() {
-      const t = this.class ?? "";
-      return n({ class: `flex flex-auto items-center justify-between gap-x-4 p-4 ${t}` }, [
-        se({ click: () => this.state.decrement("count") }),
-        ne({
-          bind: this.bind,
-          readonly: this.readonly,
-          min: this.min,
-          max: this.max
-        }),
-        oe({ click: () => this.state.increment("count") })
-      ]);
-    }
-  }
-), ie = (t) => {
-  let e = "";
-  return t.length > 0 && (e = t.substring(0, 2), t.length > 2 && (e += "/" + t.substring(2, 4), t.length > 4 && (e += "/" + t.substring(4, 8)))), e;
-}, re = (t) => {
-  if (t.length !== 8)
-    return null;
-  const e = parseInt(t.substring(0, 2), 10), s = parseInt(t.substring(2, 4), 10), o = parseInt(t.substring(4, 8), 10);
-  return e >= 1 && e <= 12 && s >= 1 && s <= 31 && o >= 1900 ? `${o}-${e.toString().padStart(2, "0")}-${s.toString().padStart(2, "0")}` : null;
-}, le = ({ bind: t, required: e }) => f({
-  cache: "input",
-  class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
-  bind: t,
-  required: e
-}), ae = ({ placeholder: t, handleInputChange: e, handleInputFocus: s }) => f({
-  cache: "dateInput",
-  class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
-  placeholder: t || "mm/dd/yyyy",
-  input: e,
-  focus: s,
-  onState: ["selectedDate", (o) => o ? M.format("standard", o) : ""]
-}), ce = ({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: i, placeholder: r }) => n(
-  {
-    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"
-  },
-  [
-    le({ bind: t, required: e }),
-    ae({ placeholder: r, handleInputChange: o, handleInputFocus: i }),
-    p(
-      {
-        class: "shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
-        click: s
-      },
-      [
-        T({ html: u.calendar.days })
-      ]
-    )
-  ]
-), de = ({ handleDateSelect: t, blockPriorDates: e }) => O(
-  (s, o, i) => new S({
-    cache: "dropdown",
-    parent: i,
-    button: i.panel,
-    size: "fit"
-  }, [
-    new at({
-      selectedDate: i.state.selectedDate,
-      selectedCallBack: t,
-      blockPriorDates: e
-    })
-  ])
-), ls = C(
-  {
-    /**
-     * The initial state of the DatePicker.
-     *
-     * @member {object} state
-     */
-    state() {
-      return {
-        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.input.value && (this.state.selectedDate = this.input.value);
-    },
-    /**
-     * Handles direct input changes and formats the date.
-     *
-     * @param {Event} e
-     */
-    handleInputChange(t) {
-      const s = t.target.value.replace(/\D/g, "");
-      t.target.value = ie(s);
-      const o = re(s);
-      o && (this.state.selectedDate = o, this.input.value = o, g.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(o));
-    },
-    /**
-     * Handles input focus - select all text for easy editing.
-     *
-     * @param {Event} e
-     */
-    handleInputFocus(t) {
-      t.target.select();
-    },
-    /**
-     * Handles date selection from calendar.
-     *
-     * @param {string} date
-     */
-    handleDateSelect(t) {
-      this.state.selectedDate = t, this.state.open = !1, this.input.value = t, g.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(t);
-    },
-    /**
-     * Toggles the calendar popover.
-     *
-     * @param {Event} e
-     * @param {object} context
-     */
-    toggleOpen(t, { state: e }) {
-      e.toggle("open");
-    },
-    /**
-     * Renders the DatePicker component.
-     *
-     * @returns {object}
-     */
-    render() {
-      return n(
-        { class: "relative w-full max-w-[320px]" },
-        [
-          ce({
-            toggleOpen: this.toggleOpen.bind(this),
-            bind: this.bind,
-            required: this.required,
-            handleInputChange: this.handleInputChange.bind(this),
-            handleInputFocus: this.handleInputFocus.bind(this),
-            placeholder: this.placeholder
-          }),
-          de({
-            handleDateSelect: this.handleDateSelect.bind(this),
-            blockPriorDates: this.blockPriorDates || !1
-          })
-        ]
-      );
-    }
-  }
-), ue = ({ bind: t, required: e }) => f({
-  cache: "input",
-  class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
-  bind: t,
-  required: e
-}), he = ({ bind: t, required: e, toggleOpen: s }) => p({
-  class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 px-4 py-2",
-  click: s
-}, [
-  ue({ bind: t, required: e }),
-  _(({ state: o }) => [
-    a(z.date(["[[start]]", o], "Start Date")),
-    a(" - "),
-    a(z.date(["[[end]]", o], "End Date"))
-  ]),
-  T({ html: u.calendar.days })
-]), me = ({ handleDateSelect: t, blockPriorDates: e }) => O((s, o, i) => new S({
-  cache: "dropdown",
-  parent: i,
-  button: i.panel,
-  size: "xl"
-}, [
-  new ct({
-    startDate: i.state.start,
-    endDate: i.state.end,
-    onRangeSelect: t,
-    blockPriorDates: e
-  })
-])), as = C(
-  {
-    /**
-     * The initial state of the DateRangePicker.
-     *
-     * @member {object} state
-     */
-    state() {
-      return {
-        start: this.start ?? null,
-        end: this.end ?? 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() {
-      if (this.input.value) {
-        const t = this.input.value.split("-");
-        this.state.start = t[0], this.state.end = t[1];
-      }
-    },
-    /**
-     * Renders the DatePicker component.
-     *
-     * @returns {object}
-     */
-    render() {
-      const t = (s, { state: o }) => o.toggle("open"), e = (s, o) => {
-        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, g.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
-      };
-      return n({ class: "relative w-full max-w-[320px]" }, [
-        he({
-          toggleOpen: t,
-          bind: this.bind,
-          required: this.required
-        }),
-        me({
-          handleDateSelect: e,
-          blockPriorDates: this.blockPriorDates || !1
-        })
-      ]);
-    }
-  }
-), cs = ({ dateTime: t = "", remoteTimeZone: e = "America/Denver", filter: s = null }) => rt([
-  new mt({
-    dateTime: t,
-    filter: s || ((o) => {
-      const i = M.getLocalTime(o, !0, !1, e);
-      return M.getTimeFrame(i);
-    })
-  })
-]);
-function fe(t) {
-  let e = "";
-  return t.length > 0 && (e = t.substring(0, 2), t.length > 2 && (e += ":" + t.substring(2, 4))), e;
-}
-function pe(t) {
-  if (t.length < 4)
-    return { formattedTime: null, hour: null, minute: null, meridian: null };
-  const e = parseInt(t.substring(0, 2), 10), s = parseInt(t.substring(2, 4), 10);
-  if (e < 0 || e > 23 || s < 0 || s > 59)
-    return { formattedTime: null, hour: null, minute: null, meridian: null };
-  let o = e, i = "AM";
-  return e === 0 ? o = 12 : e > 12 ? (o = e - 12, i = "PM") : e === 12 && (i = "PM"), {
-    formattedTime: `${o.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")} ${i}`,
-    hour: o.toString().padStart(2, "0"),
-    minute: s.toString().padStart(2, "0"),
-    meridian: i
-  };
-}
-function ge({ bind: t, required: e }) {
-  return f({
-    cache: "input",
-    class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
-    bind: t,
-    required: e
-  });
-}
-function be({ placeholder: t, handleInputChange: e, handleInputFocus: s }) {
-  return f({
-    cache: "timeInput",
-    class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
-    placeholder: t || "hh:mm AM/PM",
-    input: e,
-    focus: s,
-    onState: ["selectedTime", (o) => o || ""]
-  });
-}
-function xe({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: i, placeholder: r }) {
-  return n(
-    {
-      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"
-    },
-    [
-      ge({ bind: t, required: e }),
-      be({ placeholder: r, handleInputChange: o, handleInputFocus: i }),
-      p(
-        {
-          class: "shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
-          click: s
-        },
-        [
-          T({ html: u.clock })
-        ]
-      )
-    ]
-  );
-}
-function $({ items: t, handleTimeSelect: e, state: s, stateValue: o, pad: i = !1 }) {
-  return n(
-    { class: "flex flex-col max-h-[200px] overflow-y-auto" },
-    t.map((r) => {
-      let l = i ? r.toString().padStart(2, "0") : r.toString();
-      return p({
-        text: l,
-        class: "hover:bg-muted/50 rounded-md pr-2 py-1",
-        click: () => e({ [o]: l }),
-        onState: [s, o, { "bg-muted": l }]
-      });
-    })
-  );
-}
-function ye({ handleTimeSelect: t }) {
-  return O(
-    (e, s, o) => new S(
-      {
-        cache: "dropdown",
-        parent: o,
-        button: o.panel,
-        size: "fit"
-      },
-      [
-        n(
-          { class: "flex flex-auto flex-col border rounded-md shadow-md" },
-          [
-            n(
-              { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
-              [
-                // Hours column
-                $({
-                  items: Array.from({ length: 12 }, (i, r) => r + 1),
-                  handleTimeSelect: t,
-                  state: o.state,
-                  stateValue: "hour",
-                  pad: !0
-                }),
-                // Minutes column
-                $({
-                  items: Array.from({ length: 60 }, (i, r) => r),
-                  handleTimeSelect: t,
-                  state: o.state,
-                  stateValue: "minute",
-                  pad: !0
-                }),
-                // AM/PM column
-                $({
-                  items: ["AM", "PM"],
-                  handleTimeSelect: t,
-                  state: o.state,
-                  stateValue: "meridian"
-                })
-              ]
-            )
-          ]
-        )
-      ]
-    )
-  );
-}
-function U(t) {
-  if (!t)
-    return { hour: null, minute: null, meridian: null };
-  const e = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = t.match(e);
-  if (!s)
-    return { hour: null, minute: null, meridian: null };
-  let [, o, i, , r] = s, l = parseInt(o, 10), d = parseInt(i, 10);
-  return l < 0 || l > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && l < 12 ? l += 12 : r === "AM" && l === 12 && (l = 12)) : l === 0 ? (r = "AM", l = 12) : l < 12 ? r = "AM" : l === 12 ? r = "PM" : (r = "PM", l -= 12), {
-    hour: l.toString().padStart(2, "0"),
-    minute: d.toString().padStart(2, "0"),
-    meridian: r
-  });
-}
-const ds = C(
-  {
-    /**
-     * The initial shallow state of the TimePicker.
-     *
-     * @member {object} state
-     */
-    state() {
-      const t = this.selectedTime ?? null, { hour: e, minute: s, meridian: o } = U(t);
-      return {
-        selectedTime: t,
-        open: !1,
-        hour: e,
-        minute: s,
-        meridian: o
-      };
-    },
-    /**
-     * Updates the state after the input is rendered.
-     *
-     * @returns {void}
-     */
-    after() {
-      if (this.input.value) {
-        const { hour: t, minute: e, meridian: s } = U(this.input.value);
-        this.state.set({
-          hour: t,
-          minute: e,
-          meridian: s,
-          selectedTime: this.input.value
-        });
-      }
-    },
-    /**
-     * Toggles the time picker popover.
-     *
-     * @param {Event} e
-     * @param {object} context
-     */
-    toggleOpen(t, { state: e }) {
-      e.toggle("open");
-    },
-    /**
-     * Handles direct input changes and formats the time.
-     *
-     * @param {Event} e
-     */
-    handleInputChange(t) {
-      let e = t.target.value.replace(/[^\d]/g, ""), s = fe(e);
-      const o = pe(e);
-      o.formattedTime && (s = o.formattedTime, this.state.set({
-        hour: o.hour,
-        minute: o.minute,
-        meridian: o.meridian,
-        selectedTime: o.formattedTime
-      }), this.input.value = o.formattedTime, g.trigger("change", this.input), typeof this.change == "function" && this.change(o.formattedTime)), t.target.value = s;
-    },
-    /**
-     * Handles input focus - select all text for easy editing.
-     *
-     * @param {Event} e
-     */
-    handleInputFocus(t) {
-      t.target.select();
-    },
-    /**
-     * Handles time selection from the picker columns.
-     *
-     * @param {object} params
-     */
-    handleTimeSelect({ hour: t, minute: e, meridian: s }) {
-      if (t && (this.state.hour = t), e && (this.state.minute = e), s && (this.state.meridian = s), this.state.hour && this.state.minute && this.state.meridian) {
-        const o = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-        this.state.selectedTime = o, this.state.open = !1, this.input.value = o, g.trigger("change", this.input), typeof this.change == "function" && this.change(o);
-      }
-    },
-    /**
-     * Renders the TimePicker component.
-     *
-     * @returns {object}
-     */
-    render() {
-      return n(
-        { class: "relative w-full max-w-[320px]" },
-        [
-          xe({
-            toggleOpen: this.toggleOpen.bind(this),
-            bind: this.bind,
-            required: this.required,
-            handleInputChange: this.handleInputChange.bind(this),
-            handleInputFocus: this.handleInputFocus.bind(this),
-            placeholder: this.placeholder
-          }),
-          ye({
-            handleTimeSelect: this.handleTimeSelect.bind(this)
-          })
-        ]
-      );
-    }
-  }
-), we = (t, e) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${e}` }, [
-  m({ size: "lg" }, t)
-]), Ce = ({ title: t }) => B({ class: "flex flex-auto items-center" }, [
-  v({ class: "text-lg font-semibold" }, t)
-]), ve = c((t, e) => lt(
-  {
-    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
-				bottom-4 top-auto inset-auto m-auto md:bottom-0 md:top-0 left-0 right-0 ${t.class}`,
-    // @ts-ignore
-    click: t.click,
-    aria: { expanded: ["open"] }
-  },
-  [
-    n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
-      // Icon and content
-      // @ts-ignore
-      t.icon && we(t.icon, t.iconColor),
-      n({ class: "flex flex-auto flex-col gap-4" }, [
-        n({ class: "flex flex-auto flex-col gap-y-2" }, [
-          Ce(t),
-          // @ts-ignore
-          t.description && b({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t.description),
-          n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e)
-        ]),
-        // @ts-ignore
-        t.buttons && L({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, t.buttons)
-      ])
-    ])
-  ]
-)), Se = (t) => H.render(t, app.root), R = {
-  info: {
-    borderColor: "border-blue-500",
-    bgColor: "bg-muted/10",
-    iconColor: "text-blue-500"
-  },
-  warning: {
-    bgColor: "bg-muted/10",
-    borderColor: "border-warning",
-    iconColor: "text-warning"
-  },
-  destructive: {
-    bgColor: "bg-muted/10",
-    borderColor: "border-destructive",
-    iconColor: "text-red-500"
-  },
-  success: {
-    bgColor: "bg-muted/10",
-    borderColor: "border-emerald-500",
-    iconColor: "text-emerald-500"
-  },
-  default: {
-    borderColor: "border",
-    bgColor: "bg-muted/10",
-    iconColor: "text-muted-foreground"
-  }
-};
-class De extends y {
-  /**
-   * 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.
-   *
-   * @returns {object}
-   */
-  render() {
-    const e = (d) => {
-      d.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: i } = R[this.type] || R.default, r = `${this.getMainClass()} ${o} ${s}`, l = this.title || "Dialog Title";
-    return ve({
-      class: r,
-      title: l,
-      click: e,
-      icon: this.icon,
-      iconColor: i,
-      description: this.description,
-      buttons: this.getButtons()
-    }, this.children);
-  }
-  /**
-   * This will get the buttons for the modal.
-   *
-   * @returns {array|null}
-   */
-  getButtons() {
-    return this.hideFooter ? null : this.buttons ? this.buttons : [
-      h({ variant: "outline", click: () => this.close() }, "Close")
-    ];
-  }
-  /**
-   * This will setup the states.
-   *
-   * @returns {object}
-   */
-  setupStates() {
-    return {
-      open: !1
-    };
-  }
-  /**
-   * This will get the modal class.
-   *
-   * @returns {string}
-   */
-  getMainClass() {
-    return "";
-  }
-  /**
-   * This will open the modal.
-   *
-   * @returns {void}
-   */
-  open() {
-    Se(this), this.panel.showModal(), this.state.open = !0;
-  }
-  /**
-   * This will close the modal.
-   *
-   * @returns {void}
-   */
-  close() {
-    this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
-  }
-}
-class us extends De {
-  /**
-   * 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.
-   *
-   * @returns {array}
-   */
-  getButtons() {
-    const e = this.confirmTextLabel || "Confirm";
-    return [
-      h({ variant: "outline", click: () => this.close() }, "Cancel"),
-      h({ variant: "primary", click: () => this.confirm() }, e)
-    ];
-  }
-  /**
-   * This will confirm the action.
-   *
-   * @returns {void}
-   */
-  confirm() {
-    this.confirmed && this.confirmed(), this.close();
-  }
-}
-const hs = c((t, e = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
-  K({ class: "flex flex-auto flex-col" }, [
-    n({ class: "flex flex-auto flex-col gap-y-4" }, [
-      n({ class: "flex flex-auto items-center justify-center" }, [
-        // @ts-ignore
-        t.icon && n({ class: "w-16 h-16 mb-2 text-primary" }, [
-          // @ts-ignore
-          m({ size: "lg" }, t.icon)
-        ])
-      ]),
-      B({ class: "py-4 text-center" }, [
-        // @ts-ignore
-        v({ class: "text-xl font-bold" }, t.title),
-        // @ts-ignore
-        b({ class: "pb-8 text-muted-foreground" }, t.description || ""),
-        ...e
-      ])
-    ])
-  ])
-]));
-export {
-  je as A,
-  os as B,
-  _e as C,
-  ls as D,
-  hs as E,
-  K as F,
-  x as G,
-  We as H,
-  es as I,
-  Ze as J,
-  ts as K,
-  ss as L,
-  se as M,
-  Ut as N,
-  cs as O,
-  oe as P,
-  ds as Q,
-  Xe as R,
-  D as S,
-  Qe as T,
-  qt as U,
-  is as a,
-  us as b,
-  ne as c,
-  rs as d,
-  as as e,
-  Ee as f,
-  Ve as g,
-  Ge as h,
-  De as i,
-  ve as j,
-  ns as k,
-  Je as l,
-  Dt as m,
-  vt as n,
-  Ne as o,
-  Ue as p,
-  He as q,
-  Re as r,
-  Pt as s,
-  Ft as t,
-  qe as u,
-  It as v,
-  Bt as w,
-  $t as x,
-  zt as y,
-  Ke as z
-};