@base-framework/ui 1.2.15 → 1.2.16

package/dist/full-page-B0EJ6uzY.js

@@ -0,0 +1,4573 @@
+import { I as Y, Span as f, Button as w, OnState as T, Div as o, Legend as nt, Fieldset as at, H4 as Ae, P as k, Label as V, Checkbox as ce, Input as p, Textarea as ot, UseParent as W, Img as de, H5 as lt, H2 as J, Form as rt, Header as Z, Footer as ue, A as Ee, H3 as he, Nav as fe, Ul as X, Li as ge, OnStateOpen as me, On as Q, Dialog as it, Th as Ue, Thead as ct, Tr as dt, Table as xe, Time as ut, H1 as ht } from "@base-framework/atoms";
+import { Atom as r, Jot as M, Component as C, Html as ft, Data as z, Events as L, DateTime as ee, NavLink as gt, router as we, DataTracker as Ye } from "@base-framework/base";
+import { Icons as g } from "./icons.es.js";
+import { Timer as mt, TableBody as xt, DataTableBody as bt, ScrollableTableBody as pt, List as yt } from "@base-framework/organisms";
+import { F as U } from "./format-DE4rFWuD.js";
+import { F as wt } from "./bside-template-C7AQgQ6H.js";
+const vt = {
+  xs: "w-4 h-4",
+  sm: "w-6 h-6",
+  md: "w-8 h-8",
+  lg: "w-10 h-10",
+  xl: "w-12 h-12",
+  "2xl": "w-14 h-14",
+  "3xl": "w-16 h-16"
+}, ie = r((e, t) => {
+  const s = vt[e.size || "sm"];
+  return Y({
+    ...e,
+    // @ts-ignore
+    class: `stroke-current icon-size ${s} ${e.class || ""}`,
+    html: t[0]?.textContent
+  });
+}), ve = {
+  xs: "w-4 h-4",
+  // 16px - matches Icon
+  sm: "w-6 h-6",
+  // 24px - matches Icon
+  md: "w-8 h-8",
+  // 32px - matches Icon
+  lg: "w-10 h-10",
+  // 40px - matches Icon
+  xl: "w-12 h-12",
+  // 48px - matches Icon
+  "2xl": "w-14 h-14",
+  // 56px - matches Icon
+  "3xl": "w-16 h-16"
+  // 64px - matches Icon
+}, ke = {
+  xs: "16px",
+  sm: "24px",
+  md: "32px",
+  lg: "40px",
+  xl: "48px",
+  "2xl": "56px",
+  "3xl": "64px"
+}, Ce = {
+  outlined: "material-symbols-outlined",
+  filled: "material-symbols-filled",
+  rounded: "material-symbols-rounded",
+  sharp: "material-symbols-sharp"
+}, Se = r((e) => {
+  const t = e.size || "sm", s = e.variant || "outlined", n = ve[t] || ve.sm, a = ke[t] || ke.sm, l = Ce[s] || Ce.outlined;
+  return f({
+    ...e,
+    // @ts-ignore
+    class: `inline-flex items-center justify-center ${l} ${n} ${e.class || ""}`,
+    // @ts-ignore
+    style: `font-size: ${a}; ${e.style || ""}`,
+    // Remove props that shouldn't be passed to the DOM element
+    size: void 0,
+    variant: void 0,
+    name: void 0
+    // @ts-ignore
+  }, e.name);
+}), b = (e = {}, t) => t ? typeof t == "string" && t.includes("<svg") ? ie(e, t) : typeof t == "object" && t.name ? Se({
+  ...e,
+  name: t.name,
+  variant: t.variant || e.variant || "outlined"
+}) : typeof t == "string" ? Se({
+  ...e,
+  name: t
+}) : ie(e, t) : null, oa = (e) => e ? !!(typeof e == "object" && e.name || typeof e == "string" && !e.includes("<svg")) : !1, la = (e) => typeof e == "string" && e.includes("<svg"), $e = {
+  gray: {
+    backgroundColor: "bg-gray-50",
+    textColor: "text-gray-600",
+    ringColor: "ring-gray-500/10"
+  },
+  red: {
+    backgroundColor: "bg-red-50",
+    textColor: "text-red-700",
+    ringColor: "ring-red-600/10"
+  },
+  yellow: {
+    backgroundColor: "bg-yellow-50",
+    textColor: "text-yellow-800",
+    ringColor: "ring-yellow-600/20"
+  },
+  green: {
+    backgroundColor: "bg-green-50",
+    textColor: "text-green-700",
+    ringColor: "ring-green-600/20"
+  },
+  blue: {
+    backgroundColor: "bg-blue-50",
+    textColor: "text-blue-700",
+    ringColor: "ring-blue-700/10"
+  },
+  indigo: {
+    backgroundColor: "bg-indigo-50",
+    textColor: "text-indigo-700",
+    ringColor: "ring-indigo-700/10"
+  },
+  purple: {
+    backgroundColor: "bg-purple-50",
+    textColor: "text-purple-700",
+    ringColor: "ring-purple-700/10"
+  },
+  pink: {
+    backgroundColor: "bg-pink-50",
+    textColor: "text-pink-700",
+    ringColor: "ring-pink-700/10"
+  },
+  primary: {
+    backgroundColor: "bg-primary",
+    textColor: "text-primary-foreground",
+    ringColor: "ring-primary/10"
+  },
+  secondary: {
+    backgroundColor: "bg-secondary",
+    textColor: "text-secondary-foreground",
+    ringColor: "ring-secondary/10"
+  },
+  destructive: {
+    backgroundColor: "bg-destructive",
+    textColor: "text-destructive-foreground",
+    ringColor: "ring-destructive/10"
+  },
+  warning: {
+    backgroundColor: "bg-warning",
+    textColor: "text-warning-foreground",
+    ringColor: "ring-warning/10"
+  },
+  outline: {
+    backgroundColor: "bg-background",
+    textColor: "text-primary",
+    ringColor: "ring-input"
+  },
+  ghost: {
+    backgroundColor: "bg-background",
+    textColor: "text-primary",
+    ringColor: "ring-background"
+  },
+  link: {
+    backgroundColor: "bg-background",
+    textColor: "text-primary",
+    ringColor: "ring-background"
+  },
+  blur: {
+    backgroundColor: "bg-background/40 backdrop-blur-sm",
+    textColor: "text-foreground",
+    ringColor: "ring-white/10"
+  }
+}, kt = (e) => $e[e] || $e.gray, Ct = (e, t = {}) => {
+  const s = kt(e), n = t.backgroundColor ?? s.backgroundColor, a = t.textColor ?? s.textColor, l = t.ringColor ?? s.ringColor;
+  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${n} ${a} ${l}`;
+}, ra = r((e, t) => {
+  const { type: s, icon: n, size: a = "xs", backgroundColor: l, textColor: i, ringColor: c, ...u } = e, m = Ct(s, { backgroundColor: l, textColor: i, ringColor: c });
+  return f({ ...u, class: m }, [
+    n ? b({ size: a, class: "mr-1" }, n) : null,
+    ...t || []
+  ]);
+});
+class Ve extends C {
+  /**
+   * This will set the component context.
+   *
+   * @param {object|null} context
+   * @returns {object|null}
+   */
+  setContext(t) {
+    if (this.data)
+      return null;
+    const s = this?.parent?.data ?? this?.parent?.context?.data ?? this?.parent?.state ?? null;
+    return s ? { data: s } : null;
+  }
+}
+const O = (e) => (
+  /** @type {VeilComponentConstructor} */
+  M(e, Ve)
+);
+class ia extends Ve {
+  /**
+   * Declare public props and their defaults.
+   */
+  declareProps() {
+    this.icon = null, this.activeIcon = null, this.value = null, this.dataKey = null, this.active = !1, this.toggle = null, this.size = "sm", this.formatType = "number";
+  }
+  /**
+   * Set up internal states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      active: this.active ?? !1
+    };
+  }
+  /**
+   * Toggle the active state and fire the callback.
+   *
+   * @returns {void}
+   */
+  handleToggle() {
+    this.state.active = !this.state.active, typeof this.toggle == "function" && this.toggle(this.state.active);
+  }
+  /**
+   * Render the toggle button.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.size, s = this.icon, n = this.activeIcon || this.icon, a = (() => {
+      if (this.dataKey) {
+        let l = `[[${this.dataKey}]]`;
+        return this.formatType === "number" ? l = U.number(l, "0") : this.formatType === "money" ? l = U.roundMoney(l) : this.formatType === "date" ? l = U.date(l) : this.formatType === "percent" && (l = U.percentage(l)), f({ class: "toggle-btn-value text-sm tabular-nums capitalize" }, l);
+      }
+      return this.value !== null && this.value !== void 0 ? f({ class: "toggle-btn-value text-sm tabular-nums" }, String(this.value)) : null;
+    })();
+    return w({
+      click: () => this.handleToggle(),
+      // @ts-ignore
+      class: `toggle-btn inline-flex items-center gap-1.5 bg-transparent border-0 p-0 cursor-pointer text-foreground/70 hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${this.class || ""}`
+    }, [
+      T(
+        "active",
+        (l) => b({ size: t }, l ? n : s)
+      ),
+      a
+    ]);
+  }
+}
+const ne = {
+  xs: "w-6 h-6",
+  sm: "w-8 h-8",
+  md: "w-10 h-10",
+  lg: "w-12 h-12",
+  xl: "w-14 h-14",
+  "2xl": "w-16 h-16"
+};
+class ca extends C {
+  /**
+   * Declare public props.
+   */
+  declareProps() {
+    this.icon = null, this.activeIcon = null, this.active = !1, this.size = "md", this.activeClass = "", this.toggle = null;
+  }
+  /**
+   * Set up internal states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      active: this.active ?? !1
+    };
+  }
+  /**
+   * Toggle active state and fire callback.
+   *
+   * @returns {void}
+   */
+  handleToggle() {
+    this.state.active = !this.state.active, typeof this.toggle == "function" && this.toggle(this.state.active);
+  }
+  /**
+   * Render the circular toggle button.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.icon, s = this.activeIcon || this.icon, n = ne[this.size] || ne.md, a = ["xs", "sm"].includes(this.size) ? "xs" : "sm", l = this.class ?? "bg-background/40 backdrop-blur-sm", i = "text-foreground", c = this.activeClass || i, u = this.circle ?? !1;
+    return w({
+      click: () => this.handleToggle(),
+      // @ts-ignore
+      class: `circle-toggle-btn inline-flex items-center justify-center rounded-full border-0 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 ${n} ${l}${u ? " rounded-full w-[40px] h-[40px] max-w-[40px]" : ""}`
+    }, [
+      T("active", (m) => [
+        b({
+          size: a,
+          class: `transition-colors ${m ? c : i}`
+        }, m ? s : t)
+      ])
+    ]);
+  }
+}
+const da = r((e, t) => {
+  const s = e.size || "md", n = ne[s] || ne.md, a = ["xs", "sm"].includes(s) ? "xs" : "sm";
+  return w({
+    ...e,
+    // @ts-ignore
+    class: `circle-btn inline-flex items-center justify-center rounded-full border-0 bg-background/40 backdrop-blur-sm text-foreground cursor-pointer transition-colors hover:bg-background/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 ${n} ${e.class || ""}`
+  }, [
+    // @ts-ignore
+    e.icon ? b({ size: a }, e.icon) : null,
+    ...t || []
+  ]);
+}), F = (e) => r((t, s) => w({
+  ...e,
+  ...t,
+  // @ts-ignore
+  class: `bttn ${e.class} ${t.class || ""}`
+}, s)), We = r(
+  (e, t) => w({
+    ...e,
+    // @ts-ignore
+    class: e.class
+  }, [
+    // @ts-ignore
+    e.icon && e.position !== "right" ? b({ size: e.size || "sm", class: e.animation ?? null }, e.icon) : null,
+    ...t || [],
+    // @ts-ignore
+    e.icon && e.position === "right" ? b({ size: e.size || "sm", class: e.animation ?? null }, e.icon) : null
+  ])
+), De = (e) => r((t, s) => We({
+  ...e,
+  ...t,
+  // @ts-ignore
+  class: `bttn ${e.class} ${t.class || ""}`
+}, s)), St = (e) => () => {
+  if (e.allowHistory === !0 && globalThis.history.length > 2) {
+    globalThis.history.back();
+    return;
+  }
+  e.backUrl && app.navigate(e.backUrl);
+}, $t = (e) => r((t, s) => (t.icon = t.icon || g.arrows.left, t.click = t.click || St(t), We({
+  ...e,
+  ...t
+}, s))), Dt = r((e, t) => {
+  const s = e.size || "md", n = {
+    xs: "w-6 h-6",
+    sm: "w-8 h-8",
+    md: "w-10 h-10",
+    lg: "w-12 h-12",
+    xl: "w-14 h-14"
+  }, a = e.backgroundClass || "bg-background/30 hover:bg-background/50";
+  return w({
+    ...e,
+    // @ts-ignore
+    class: `circle-icon-btn inline-flex items-center justify-center rounded-full ${a} text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50 cursor-pointer ${n[s] || n.md} ${e.class || ""}`
+  }, [
+    // @ts-ignore
+    e.icon ? b({ size: s === "xs" ? "xs" : "sm" }, e.icon) : null,
+    ...t || []
+  ]);
+}), Ie = {
+  primary: F({ class: "primary" }),
+  secondary: F({ class: "secondary" }),
+  destructive: F({ class: "destructive" }),
+  warning: F({ class: "warning" }),
+  outline: F({ class: "outline" }),
+  ghost: F({ class: "ghost" }),
+  link: F({ class: "link" }),
+  icon: De({ class: "icon" }),
+  withIcon: De({ class: "with-icon" }),
+  back: $t({ class: "with-icon back-button" }),
+  circleIcon: Dt
+}, x = r((e, t) => (Ie[e.variant] || Ie.primary)(e, t)), ua = r((e, t) => x({ ...e, variant: "withIcon", icon: g.loading, animation: "animate-spin" }, t)), It = r((e, t) => {
+  const s = e.margin ?? "my-5 mx-5", n = e.padding ?? "p-4", a = e.border ?? "border-border";
+  return e.hover && (e.class += " hover:shadow-lg hover:bg-muted/50"), o({
+    ...e,
+    // @ts-ignore
+    class: `rounded-lg ${a} bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${s} ${n} ${e.class || ""}`
+  }, t);
+}), Tt = r((e, t) => nt({
+  ...e,
+  // @ts-ignore
+  class: ` font-medium -mt-4 -mx-1 px-2 py-2 ${e.class || ""}`
+}, t)), ha = r((e, t) => {
+  const s = e.border === "full" ? "border rounded-md" : "border-t";
+  return at({
+    ...e,
+    // @ts-ignore
+    class: `p-6 ${s} ${e.class || ""}`
+  }, [
+    // @ts-ignore
+    e.legend && Tt(e.legend),
+    o({ class: "flex flex-auto flex-col gap-y-6" }, t)
+  ]);
+}), Mt = r((e, t) => {
+  const s = e.border === !0 ? "border-t" : "";
+  return o({
+    ...e,
+    // @ts-ignore
+    class: `grid grid-cols-1 gap-y-4 sm:grid-cols-[1fr_2fr] sm:gap-x-6 pt-8 ${s} ${e.class || ""}`
+  }, [
+    // @ts-ignore
+    e.label && o({
+      // @ts-ignore
+      ...e.labelProps,
+      // @ts-ignore
+      class: `flex flex-auto flex-col gap-y-1 ${e.labelProps?.class || ""}`
+    }, [
+      // @ts-ignore
+      Ae({ class: "text-base" }, e.label),
+      // @ts-ignore
+      e.description && k({ class: "text-sm text-muted-foreground" }, e.description)
+    ]),
+    // Controls container: grows to fill remaining space, spacing between items
+    o({ class: "flex flex-col gap-y-4" }, t)
+  ]);
+}), Bt = "flex h-10 w-full px-3 py-2 text-sm", B = "rounded-md border border-border bg-input", I = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", D = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", H = "placeholder:text-muted-foreground", be = `${Bt} ${B} ${I} ${H} ${D}`, Pt = ({ id: e, checked: t, bind: s, required: n }) => ce({
+  id: e,
+  cache: "checkbox",
+  class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
+  aria: {
+    checked: ["checked"]
+  },
+  required: n,
+  checked: t,
+  bind: s
+}), zt = () => f({ class: "absolute text-xs pointer-events-none" }, [
+  T(
+    "checked",
+    (e) => e ? Y({
+      class: "w-2 h-2 pointer-events-none",
+      html: g.check
+    }) : null
+  )
+]), Ot = ({ id: e, bind: t, checked: s, required: n, clickHandler: a }) => o({
+  class: `relative flex items-center justify-center w-5 h-5 transition-colors duration-200 hover:border-accent-foreground
+			rounded-md border
+			${I}
+			${D}`.trim(),
+  onState: [
+    "checked",
+    {
+      "bg-primary": !0,
+      "text-primary-foreground": !0,
+      "border-primary": !0
+    }
+  ],
+  role: "checkbox",
+  aria: {
+    checked: ["checked"]
+  },
+  tabIndex: 0,
+  click: a
+}, [
+  Pt({ bind: t, checked: s, id: e, required: n }),
+  zt()
+]), Nt = ({ id: e, label: t, clickHandler: s }) => V({
+  class: "text-base cursor-pointer",
+  htmlFor: e,
+  click: s
+}, t), Rt = M(
+  {
+    /**
+     * This will initialize the state of the checkbox.
+     *
+     * @returns {object}
+     */
+    state() {
+      return {
+        // @ts-ignore
+        checked: this.checked ?? !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.checked = this.checkbox.checked;
+    },
+    /**
+     * This will handle the click event for the checkbox.
+     *
+     * @param {object} e
+     * @returns {void}
+     */
+    clickHandler(e) {
+      e.preventDefault(), e.stopPropagation(), this.state.toggle("checked"), this.checkbox.checked = this.state.checked, typeof this.onChange == "function" && this.onChange(this.state.checked, this);
+    },
+    /**
+     * This will render the checkbox component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.getId(), t = (s) => this.clickHandler(s);
+      return o({ class: `flex items-center gap-x-2 cursor-pointer ${this.class || ""}` }, [
+        Ot({
+          id: e,
+          // @ts-ignore
+          bind: this.bind,
+          // @ts-ignore
+          checked: this.state.checked,
+          // @ts-ignore
+          required: this.required,
+          // @ts-ignore
+          clickHandler: t
+        }),
+        // @ts-ignore
+        this.label && Nt({ id: e, label: this.label, clickHandler: t })
+      ]);
+    }
+  }
+), Ft = (e) => {
+  if (!e || e.length === 0) return "";
+  const s = e.replace(/\D/g, "").match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
+  return s ? s[2] ? `(${s[1]}) ${s[2]}${s[3] ? "-" + s[3] : ""}` : s[1] || "" : e;
+}, jt = (e) => {
+  const t = e.target, s = Ft(t.value);
+  s && (t.value = s);
+}, N = r((e) => p({
+  ...e,
+  // @ts-ignore
+  class: `${be} ${e.class || ""}`.trim()
+})), fa = r((e) => N({
+  ...e,
+  type: "tel",
+  // @ts-ignore
+  name: e.name || "Phone",
+  // @ts-ignore
+  label: e.label || "Phone",
+  placeholder: "(555) 555-5555",
+  // @ts-ignore
+  pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
+  keyup: jt
+})), ga = r((e) => N({
+  ...e,
+  type: "email",
+  // @ts-ignore
+  name: e.name || "Email",
+  // @ts-ignore
+  label: e.label || "Email",
+  placeholder: "Email address"
+})), ma = r((e) => ot({
+  ...e,
+  as: "textarea",
+  // @ts-ignore
+  class: `flex w-full h-24 px-3 py-2 text-sm ${B} ${I} ${H} ${D} ${e.class || ""}`.trim()
+})), xa = (e = {}) => o({ class: "flex items-center gap-x-2" }, [
+  p({
+    ...e,
+    type: "radio",
+    class: "cursor-pointer appearance-none h-4 w-4 border rounded-full checked:border-primary checked:bg-primary focus:ring focus:ring-primary".trim()
+  }),
+  e.label && V({ forHTML: e.value, class: "cursor-pointer" }, e.label)
+]), ba = r((e) => p({
+  ...e,
+  type: "date",
+  // @ts-ignore
+  class: `${B} ${I} ${H} ${D} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), pa = r((e) => p({
+  ...e,
+  type: "time",
+  // @ts-ignore
+  class: `${B} ${I} ${H} ${D} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), ya = r((e) => p({
+  ...e,
+  type: "datetime-local",
+  // @ts-ignore
+  class: `${B} ${I} ${H} ${D} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), wa = r((e) => p({
+  ...e,
+  type: "month",
+  // @ts-ignore
+  class: `${B} ${I} ${H} ${D} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), va = r((e) => p({
+  ...e,
+  type: "week",
+  // @ts-ignore
+  class: `${B} ${I} ${H} ${D} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), ka = r((e) => N({
+  ...e,
+  type: "number"
+})), Ca = r((e) => N({
+  ...e,
+  type: "password"
+}));
+r((e) => N({
+  ...e,
+  type: "search"
+}));
+const Sa = r((e) => N({
+  ...e,
+  type: "url"
+})), $a = r((e) => N({
+  ...e,
+  type: "hidden"
+})), Da = r((e) => p({
+  ...e,
+  type: "color",
+  // @ts-ignore
+  class: `${B} text-foreground p-0 ${D} ${e.class || ""}`.trim()
+}));
+r((e) => ce({
+  ...e,
+  // @ts-ignore
+  class: `flex h-4 w-4 text-foreground ${B} ${I} ${D} ${e.class || ""}`.trim()
+}));
+const Lt = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", Ia = r((e) => p({
+  ...e,
+  type: "file",
+  // @ts-ignore
+  class: `${be} ${Lt} ${e.class || ""}`.trim()
+})), Ta = O(
+  {
+    /**
+     * This will create the initial state of the RangeSlider.
+     *
+     * @returns {object}
+     */
+    state() {
+      return {
+        value: this.value ?? 0,
+        min: this.min ?? 0,
+        max: this.max ?? 100,
+        filledPercentage: this.getFillPercentage(this.value)
+      };
+    },
+    /**
+     * This will get the fill percentage of the range slider.
+     *
+     * @param {number} value
+     * @returns {number}
+     */
+    getFillPercentage(e) {
+      return (e - this.min) / (this.max - this.min) * 100;
+    },
+    /**
+     * This will render the RangeSlider component.
+     *
+     * @returns {object}
+     */
+    render() {
+      return o({ class: "relative w-full h-4 flex items-center" }, [
+        // Track
+        o({ class: "absolute h-2 w-full rounded-full bg-muted" }),
+        W(({ state: e }) => [
+          // Filled Track
+          o({
+            class: "absolute h-2 bg-primary rounded-full",
+            style: ["width: [[filledPercentage]]%", e]
+          }),
+          // Thumb
+          o({
+            class: `
+						absolute block h-5 w-5 rounded-full border-2 border-primary bg-background
+						ring-offset-background transition-colors focus-visible:outline-none
+						focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+						disabled:pointer-events-none disabled:opacity-50 transform -translate-x-1/2
+					`.trim(),
+            style: ["left: [[filledPercentage]]%", e]
+          }),
+          // Hidden Range Input
+          p({
+            type: "range",
+            min: ["[[min]]", e],
+            max: ["[[max]]", e],
+            value: ["[[value]]", e],
+            // Incorporate your new classes here
+            class: `
+						absolute w-full h-full opacity-0 cursor-pointer
+						${I}
+						${D}
+						${this.class || ""}
+					`.trim(),
+            bind: this.bind,
+            input: (t) => {
+              const s = Number(t.target.value);
+              this.state.value = s, this.state.filledPercentage = this.getFillPercentage(s), typeof this.change == "function" && this.change(s);
+            }
+          })
+        ])
+      ]);
+    }
+  }
+), Ma = r((e) => ({
+  tag: "select",
+  onCreated(t) {
+    e.options && ft.setupSelectOptions(t, e.options);
+  },
+  ...e,
+  // @ts-ignore
+  class: `${be} ${e.class || ""}`.trim()
+})), Ht = r(({ src: e, alt: t, class: s, checkPath: n = !0 }) => !e || (s = s || "", n && e.indexOf(".") === -1 && e.indexOf("[[") === -1) ? null : de({
+  class: `absolute w-full h-full object-cover fadeIn ${s}`,
+  src: e,
+  alt: t,
+  load: (a) => a.target.style.visibility = "visible",
+  /**
+   * If there's an error loading the image, hide it.
+   */
+  error: (a) => a.target.style.visibility = "hidden"
+})), At = (e) => !e || isNaN(e) ? null : e, Te = (e, t) => {
+  const s = e, n = 16, a = 2 * Math.PI * n, l = s / 100 * a, i = `
+	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+		<!-- Background Circle -->
+		<circle
+			cx="18"
+			cy="18"
+			r="${n}"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="4"
+			class="bg-muted"
+			stroke-opacity="0.2"
+		/>
+		<!-- Progress Circle -->
+		<circle
+			cx="18"
+			cy="18"
+			r="${n}"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="4"
+			class="stroke-primary"
+			stroke-dasharray="${a}"
+			stroke-dashoffset="${a - l}"
+			stroke-linecap="round"
+			class="${t}"
+		/>
+		<!-- Percentage Text -->
+		<text
+			x="18"
+			y="20"
+			class="text-[0.25em] font-medium fill-primary"
+			text-anchor="middle"
+			dominant-baseline="middle">
+			${s}%
+		</text>
+	</svg>
+	`;
+  return o({
+    class: "circle-graph text-inherit",
+    html: i
+  });
+}, Ba = r((e) => {
+  const t = e.progress || 0, s = e.class || "", n = Te(t, s);
+  return o({
+    class: "circle-graph-wrap",
+    onSet: [
+      // @ts-ignore
+      e.prop,
+      (a) => (a = At(a), a ? Te(a, s) : n)
+    ]
+  }, [n]);
+}), Et = () => W(({ state: e }) => o({
+  class: "absolute h-full rounded-full bg-primary transition-all duration-300",
+  style: ["width: [[progress]]%;", e]
+})), Pa = O(
+  {
+    /**
+     * This will render the progress bar component.
+     *
+     * @returns {object}
+     */
+    render() {
+      return o({ class: "relative w-full h-4 rounded-full bg-muted" }, [
+        Et()
+      ]);
+    },
+    /**
+     * This will initialize the state.
+     *
+     * @returns {object}
+     */
+    state() {
+      return {
+        progress: this.progress ?? 0
+      };
+    },
+    /**
+     * This will reset the progress bar.
+     *
+     * @returns {void}
+     */
+    reset() {
+      this.state.progress = 0;
+    },
+    /**
+     * This will update the progress bar from a file upload.
+     *
+     * @param {object} evt
+     * @returns {void}
+     */
+    uploadProgress(e) {
+      if (e.lengthComputable) {
+        const s = Math.round(e.loaded * 100 / e.total);
+        this.set(s);
+      }
+    },
+    /**
+     * This will set the progress of the progress bar.
+     *
+     * @param {number} progress
+     * @returns {void}
+     */
+    set(e) {
+      e < 0 && (e = 0), e > 100 && (e = 100), this.state.progress = e;
+    }
+  }
+), za = r((e = {}) => {
+  const {
+    class: t = "",
+    background: s = !0,
+    blur: n = !0,
+    backgroundClass: a = "bg-background/95",
+    blurClass: l = "backdrop-blur",
+    zIndexClass: i = "z-9999",
+    style: c = ""
+  } = e, u = [
+    "sticky bottom-0 left-0 right-0 w-full",
+    i,
+    s ? a : "",
+    n ? l : "",
+    t
+  ].filter(Boolean).join(" "), m = `height: env(safe-area-inset-bottom, 0px);${c ? ` ${c}` : ""}`;
+  return o({
+    class: u,
+    style: m,
+    "aria-hidden": "true"
+  });
+}), Oa = r((e = {}) => {
+  const {
+    class: t = "",
+    background: s = !0,
+    blur: n = !0,
+    backgroundClass: a = "bg-background/95",
+    blurClass: l = "backdrop-blur",
+    zIndexClass: i = "z-9999",
+    style: c = ""
+  } = e, u = [
+    "fixed top-0 left-0 right-0 w-full",
+    i,
+    s ? a : "",
+    n ? l : "",
+    t
+  ].filter(Boolean).join(" "), m = `height: env(safe-area-inset-top, 0px);${c ? ` ${c}` : ""}`;
+  return o({
+    class: u,
+    style: m,
+    "aria-hidden": "true"
+  });
+}), Me = {
+  top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
+  "top-right": "bottom-full left-full transform -translate-x-1 mb-2",
+  "top-left": "bottom-full right-full transform translate-x-1 mb-2",
+  bottom: "top-full left-1/2 transform -translate-x-1/2 mt-2",
+  "bottom-right": "top-full left-full transform -translate-x-1 mt-2",
+  "bottom-left": "top-full right-full transform translate-x-1 mt-2",
+  left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
+  right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
+}, Ut = (e) => Me[String(e)] || Me.top, Na = r(({ position: e = "top", content: t }, s) => {
+  const n = Ut(e);
+  return Array.isArray(s) === !1 && (s = [s]), o({ class: "relative group inline-block" }, [
+    ...s,
+    // Tooltip box
+    f({
+      class: `
+				absolute z-20 px-2 py-1 border text-sm bg-background rounded shadow-md opacity-0 whitespace-nowrap
+				group-hover:opacity-100 transition-opacity duration-200 ${n} pointer-events-none
+			`
+    }, t)
+  ]);
+}), Be = {
+  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"
+  }
+}, Yt = (e, t) => o({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+  b({ size: "sm" }, e)
+]), Vt = (e) => lt({ class: "font-semibold" }, e), Wt = (e) => k({ class: "text-sm text-muted-foreground" }, e), Ra = r(({ title: e, description: t, icon: s, type: n = "default" }) => {
+  const { borderColor: a, bgColor: l, iconColor: i } = Be[n] || Be.default;
+  return o({ class: `flex items-start p-4 border rounded-lg ${l} ${a}` }, [
+    // Icon and content
+    s && Yt(s, i),
+    o({ class: "flex flex-col" }, [
+      Vt(e),
+      Wt(t)
+    ])
+  ]);
+}), qt = (e, t) => {
+  const s = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, n = t.getBoundingClientRect(), a = 10, l = globalThis.scrollX, i = globalThis.scrollY;
+  let c = s.left + l, u = s.bottom + i;
+  const m = globalThis.innerHeight - s.bottom, v = s.top;
+  return c + n.width > globalThis.innerWidth && (c = globalThis.innerWidth - n.width - a), m < n.height && v > m ? u = s.top + i - n.height - a : m < n.height && (u = s.bottom + i - (n.height - m) - a), { x: c, y: u };
+};
+class te extends C {
+  /**
+   * This will set up the data.
+   *
+   * @returns {object}
+   */
+  setData() {
+    const t = this.parent.data || new z();
+    return t.set({
+      position: { x: 0, y: 0 }
+    }), t;
+  }
+  /**
+   * This will get the class size.
+   *
+   * @returns {string}
+   */
+  getSize() {
+    switch (this.size || "lg") {
+      // @ts-ignore
+      case "sm":
+        return "w-48";
+      // @ts-ignore
+      case "md":
+        return "w-64";
+      case "lg":
+        return "w-[250px]";
+      // @ts-ignore
+      case "xl":
+        return "w-96";
+      // @ts-ignore
+      case "2xl":
+        return "w-[400px]";
+      // @ts-ignore
+      case "fit":
+        return "w-fit";
+      // @ts-ignore
+      case "full":
+        return "w-full";
+    }
+  }
+  /**
+   * This will render the modal component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.getSize();
+    return o({
+      class: `absolute inset-auto fadeIn mt-2 rounded-md p-0 shadow-lg bg-popover min-h-12 backdrop:bg-transparent text-inherit r z-30 ${t}`,
+      popover: "manual",
+      toggle: (s, { state: n }) => s.newState === "closed" ? n.open = !1 : null,
+      style: "top: [[position.y]]px; left: [[position.x]]px"
+      // @ts-ignore
+    }, this.children);
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: {
+        id: this.parent.getId(),
+        callBack: (n) => {
+          this.state.open === !1 && this.destroy();
+        }
+      }
+    };
+  }
+  /**
+   * Updates the dropdown position.
+   *
+   * @returns {void}
+   */
+  updatePosition() {
+    const t = this.button ?? null, s = this.panel, n = qt(t, s);
+    this.data.position = n;
+  }
+  /**
+   * This will run after the setup.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    this.panel.showPopover(), this.updatePosition();
+  }
+  /**
+   * This will check if the element clicked was in the
+   * component of the button.
+   *
+   * @param {object} element
+   * @returns {boolean}
+   */
+  isOutsideClick(t) {
+    return !this.panel.contains(t) && this.button && !this.button.contains(t);
+  }
+  /**
+   * This will set up the events.
+   *
+   * @returns {array}
+   */
+  setupEvents() {
+    return [
+      ["click", document, (t) => {
+        this.isOutsideClick(t.target) && (this.state.open = !1);
+      }],
+      ["resize", globalThis, (t) => this.updatePosition()],
+      ["scroll", document, (t) => this.updatePosition()]
+    ];
+  }
+  /**
+   * This will override the set up to use the app shell.
+   *
+   * @param {object} container
+   */
+  setContainer(t) {
+    this.container = app.root;
+  }
+  /**
+   * This will hide the popover before destroying.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this?.panel?.hidePopover();
+  }
+}
+const Gt = r((e, t) => o({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), _t = r((e, t) => V({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Kt = r((e, t) => k({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Qt = r((e, t) => k({ ...e, class: "text-sm text-destructive" }, t)), Fa = r((e, t = []) => It({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
+  // @ts-ignore
+  e.title && J({ class: "text-lg font-semibold py-4 px-6" }, e.title),
+  // @ts-ignore
+  e.description && k({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
+  ...t
+])), ja = r((e, t = []) => (
+  // @ts-ignore
+  Mt({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
+    o({ class: "flex flex-col gap-y-6" }, t)
+  ])
+)), La = r((e, t = []) => {
+  const s = e.border ? "border-t" : "";
+  return o({ ...e, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${e.class || ""}` }, t);
+}), Jt = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", qe = (e, t, s) => e.map((n) => !n || (n.children && n.children.length > 0 && (n.children = qe(n.children, t, s)), !n.required) ? n : Jt(n) ? {
+  ...n,
+  aria: {
+    invalid: ["hasError"]
+  },
+  invalid: s,
+  input: t
+} : n), Zt = r((e, t) => {
+  const a = qe(t, (l) => {
+    l.target.checkValidity() && e.setError(null);
+  }, (l) => {
+    e.setError(l.target.validationMessage);
+  });
+  return o({
+    ...e,
+    class: "w-full"
+  }, a);
+}), Ha = O(
+  {
+    /**
+     * 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 e = this.name, t = this.getId(`${e}`), { label: s, description: n } = this, a = (l) => {
+        this.state.error = l, this.state.hasError = !!l;
+      };
+      return o({ class: "flex flex-auto gap-y-4" }, [
+        Gt([
+          _t({ htmlFor: t }, s),
+          Zt({
+            id: t,
+            name: e,
+            value: this.state.value,
+            setError: a
+          }, this.children),
+          n && Kt({ id: this.getId("description") }, n),
+          o({ onState: ["error", (l) => l && Qt(l)] })
+        ])
+      ]);
+    }
+  }
+), Xt = (e, t, s = null) => {
+  e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
+}, Ge = r(
+  (e, t) => (
+    // @ts-ignore
+    rt({ ...e, submit: (s, n) => Xt(s, n, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+  )
+), Aa = r((e, t) => (
+  // @ts-ignore
+  o({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)
+)), Ea = r((e, t = []) => o({ class: "flex flex-col gap-y-3 py-4" }, [
+  // @ts-ignore
+  e.title && J({ class: "font-semibold" }, e.title),
+  ...t
+])), Ua = (e, t) => o({ class: "flex justify-between" }, [
+  f({ class: "text-muted-foreground" }, e),
+  f(t)
+]), Ya = (e, t) => o({ class: "flex" }, [
+  f({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
+  f(t)
+]), es = r(({ title: e, description: t, back: s, icon: n, options: a = [] }) => Z({ 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 && x({
+    variant: "icon",
+    icon: g.arrows.left,
+    class: "mr-2 p-0 flex sm:hidden",
+    click: (l, i) => i.close()
+  }),
+  /**
+   * Icon Container
+   */
+  n && o({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [
+    b({ size: "md" }, n)
+  ]),
+  o({ class: "flex flex-auto flex-row justify-between ml-2 gap-2 min-w-0" }, [
+    o({ class: "flex flex-auto flex-col min-w-0" }, [
+      J({ class: "text-lg font-semibold m-0 truncate" }, e),
+      t && o({ class: "text-sm text-muted-foreground truncate" }, t)
+    ]),
+    o({ class: "flex flex-none items-center gap-2" }, a)
+  ])
+])), Va = r((e, t) => {
+  const s = e.class?.includes("drawer");
+  return o({
+    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 ${e.class}`,
+    click: (l, i) => {
+      l.target === i.panel && (l.preventDefault(), l.stopPropagation(), i.state.open = !1);
+    }
+  }, [
+    Ge({
+      class: "modal-content relative bg-background z-1 flex flex-auto flex-col gap-y-4 min-w-0",
+      // @ts-ignore
+      submit: (l, i) => e.onSubmit && e.onSubmit(i),
+      cache: "modalContent",
+      // @ts-ignore
+      ...e.gestureHandlers
+    }, [
+      es(e),
+      o({ class: "modal-body flex grow flex-col py-0 px-6 z-0", cache: "modalBody" }, t),
+      // @ts-ignore
+      !e.hideFooter && ue({ class: "modal-footer sticky bottom-0 bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
+    ])
+  ]);
+}), Pe = {
+  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"
+  }
+}, ts = (e) => Z({ class: "flex justify-center" }, [
+  he({ class: "text-lg font-bold mb-0" }, e)
+]), ss = r(({ href: e, class: t }, s) => Ee({
+  class: `bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
+  href: e,
+  animateIn: "pullRightIn",
+  animateOut: "pullRight",
+  role: "alert"
+}, s)), ns = r(({ close: e, class: t }, s) => o({
+  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(),
+  animateIn: "pullRightIn",
+  animateOut: "pullRight",
+  role: "alert"
+}, s));
+class Wa extends C {
+  /**
+   * 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: t, borderColor: s, iconColor: n } = this.getTypeStyles(), a = this.href || null, l = this.getChildren(n);
+    return a ? ss({
+      href: a,
+      class: `${t} ${s}`
+    }, l) : ns({
+      close: this.close.bind(this),
+      class: `${t} ${s}`
+    }, l);
+  }
+  /**
+   * This will be called after the component is set up.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const t = this.duration;
+    t !== "infinite" && (this.timer = new mt(t, this.close.bind(this)), this.timer.start());
+  }
+  /**
+   * This will get the style properties based on the notification type.
+   *
+   * @returns {object}
+   */
+  getTypeStyles() {
+    const t = this.type || "default";
+    return Pe[t] || Pe.default;
+  }
+  /**
+   * This will get the buttons for the notification.
+   *
+   * @returns {array}
+   */
+  getButtons() {
+    return [
+      o({ class: "flex flex-row mt-6 gap-2" }, [
+        this.secondary && x({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
+        this.primary && x({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
+      ])
+    ];
+  }
+  /**
+   * This will get the children for the notification.
+   *
+   * @param {string} iconColor
+   * @returns {array}
+   */
+  getChildren(t) {
+    return [
+      o({ class: "flex items-start" }, [
+        this.icon && o({ class: `mr-4 ${t}` }, [
+          b({ size: "md" }, this.icon)
+        ]),
+        o({ class: "flex flex-auto flex-col" }, [
+          o({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
+            this.title && ts(this.title)
+          ]),
+          k({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
+          (this.primary || this.secondary) && ue({ class: "margin-top-24 flex align-center" }, this.getButtons())
+        ])
+      ]),
+      x({
+        class: "absolute top-[12px] right-[12px]",
+        variant: "icon",
+        icon: g.x,
+        click: this.close.bind(this)
+      })
+    ];
+  }
+  /**
+   * This will close the notification.
+   *
+   * @param {object} e The event object.
+   * @returns {void}
+   */
+  close(t) {
+    t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
+  }
+}
+const ze = globalThis.matchMedia, ae = r(({ value: e, label: t, icon: s }) => w({
+  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: (n, { state: a }) => {
+    a.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), as(e);
+  }
+}, [
+  b({}, s),
+  f(t)
+])), as = (e) => {
+  const t = document.documentElement;
+  if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), ze && !ze("(prefers-color-scheme: " + e + ")").matches) {
+    t.classList.add(e);
+    return;
+  }
+  const s = e === "light" ? "dark" : "light";
+  t.classList.remove(s);
+}, qa = M(
+  {
+    /**
+     * This will render the component.
+     *
+     * @returns {object}
+     */
+    render() {
+      return o({ class: "flex flex-auto flex-col" }, [
+        o({ class: "grid grid-cols-3 gap-4" }, [
+          ae({ label: "System", value: "system", icon: g.adjustments.horizontal }),
+          ae({ label: "Light", value: "light", icon: g.sun }),
+          ae({ label: "Dark", value: "dark", icon: g.moon })
+        ])
+      ]);
+    },
+    /**
+     * This will setup the states.
+     *
+     * @returns {object}
+     */
+    state() {
+      return {
+        method: globalThis.localStorage.getItem("theme") ?? "system"
+      };
+    }
+  }
+), Ga = O(
+  {
+    /**
+     * 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 w({
+        class: "relative inline-flex h-6 w-11 min-w-11 items-center rounded-full bg-muted transition-colors focus:outline-none",
+        onState: ["active", { "bg-primary": !0, "bg-muted": !1 }],
+        click: (t, { state: s }) => {
+          s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, t, this);
+        }
+      }, [
+        ce({
+          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
+        }),
+        f({
+          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 }]
+        })
+      ]);
+    }
+  }
+), os = r(({ src: e, alt: t }) => !e || e.indexOf(".") === -1 && e.indexOf("[[") === -1 ? null : Ht({
+  src: e,
+  alt: t,
+  class: "rounded-full"
+})), ls = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), _e = (e) => !e || e.length < 2 ? e : ls(e), rs = (e) => f([e, (t, s) => {
+  s.textContent = _e(t);
+}]), Oe = {
+  xs: "h-6 w-6",
+  sm: "h-8 w-8",
+  md: "h-12 w-12",
+  lg: "h-16 w-16",
+  xl: "h-24 w-24",
+  "2xl": "h-32 w-32",
+  "3xl": "h-48 w-48",
+  "4xl": "h-64 w-64",
+  default: "h-12 w-12"
+}, Ne = {
+  xs: "text-[7px]",
+  sm: "text-xs",
+  md: "text-base",
+  lg: "text-xl",
+  xl: "text-2xl",
+  "2xl": "text-3xl",
+  "3xl": "text-4xl",
+  "4xl": "text-5xl",
+  default: "text-base"
+}, is = (e) => Oe[e] || Oe.default, cs = (e) => Ne[e] || Ne.default, ds = (e, t = null, s = "md") => {
+  const n = _e(String(e)), a = cs(s);
+  return o(
+    {
+      class: `
+			flex items-center justify-center w-full h-full rounded-full
+			bg-muted text-muted-foreground font-medium
+			${a}
+		`
+    },
+    [
+      t ? rs(t) : f({ class: "uppercase" }, n)
+    ]
+  );
+}, us = r(({ src: e, alt: t, fallbackText: s, watcherFallback: n, size: a }) => {
+  const l = is(a);
+  return o(
+    {
+      class: `relative flex items-center justify-center ${l}`
+    },
+    [
+      os({ src: e, alt: t }),
+      ds(s, n, a)
+    ]
+  );
+}), hs = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1 && e.indexOf("blob:") === -1, _a = M(
+  {
+    /**
+     * 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 e = this.input;
+      e && (e.value = "", L.trigger("click", e));
+    },
+    /**
+     * 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(e) {
+      return this.url && URL.revokeObjectURL(this.url), this.url = URL.createObjectURL(e);
+    },
+    /**
+     * Render the component.
+     *
+     * @returns {object} Rendered component
+     */
+    render() {
+      const e = "image-upload", t = this.onChange || null;
+      return o({ class: "flex-none items-center" }, [
+        p({
+          id: e,
+          cache: "input",
+          type: "file",
+          accept: "image/*",
+          class: "hidden",
+          change: (s) => {
+            const n = s.target.files?.[0];
+            n && t && (this.state.loaded = !1, t(n, this.parent), this.src = this.getFileUrl(n), this.state.loaded = !0);
+          }
+        }),
+        o({
+          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();
+          }
+        }, [
+          T("loaded", (s) => s === !1 || hs(this.src) ? V({
+            htmlFor: e,
+            class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
+          }, [
+            ie(g.upload),
+            o("Upload Image")
+          ]) : de({
+            // @ts-ignore
+            src: this.src,
+            class: "absolute inset-0 w-full h-full object-cover rounded-full"
+          }))
+        ])
+      ]);
+    }
+  }
+), Ka = M(
+  {
+    /**
+     * 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 e = this.input;
+      e && (e.value = "", L.trigger("click", e));
+    },
+    /**
+     * 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(e) {
+      return this.url && URL.revokeObjectURL(this.url), this.url = URL.createObjectURL(e);
+    },
+    /**
+     * Render the component.
+     *
+     * @returns {object} Rendered component
+     */
+    render() {
+      const e = "logo-upload", t = this.onChange || null;
+      return o({ class: "flex-none items-center" }, [
+        p({
+          id: e,
+          cache: "input",
+          type: "file",
+          accept: "image/*",
+          class: "hidden",
+          change: (s) => {
+            const n = s.target.files?.[0];
+            n && t && (this.state.loaded = !1, t(n, this.parent), this.src = this.getFileUrl(n), this.state.loaded = !0);
+          }
+        }),
+        o({
+          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();
+          }
+        }, [
+          T(
+            "loaded",
+            (s) => s ? de({
+              // @ts-ignore
+              src: this.src,
+              class: "absolute inset-0 w-full h-full object-cover rounded-full"
+            }) : V({
+              htmlFor: e,
+              class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
+            }, [
+              b({}, g.upload),
+              o("Upload logo")
+            ])
+          )
+        ])
+      ]);
+    },
+    /**
+     * Cleanup before destroying the component.
+     *
+     * @returns {void}
+     */
+    destroy() {
+      this.input = null;
+    }
+  }
+), fs = (e, t) => Ee(
+  {
+    href: e,
+    "aria-current": t === "Breadcrumb" && "page",
+    // Only set aria-current on the last item
+    class: "text-muted-foreground font-medium hover:text-foreground"
+  },
+  [f(t)]
+), gs = () => b({
+  class: "mx-3 text-muted-foreground",
+  "aria-hidden": !0,
+  size: "xs"
+}, g.chevron.single.right), ms = (e) => o({ class: "flex items-center" }, [
+  e.href ? fs(e.href, e.label) : f(e.label),
+  e.separator && gs()
+]), Qa = M(
+  {
+    /**
+     * Set initial data
+     *
+     * @returns {Data}
+     */
+    setData() {
+      return new z({
+        // @ts-ignore
+        items: this.items || []
+      });
+    },
+    /**
+     * Render Breadcrumb Component
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.data.items.length - 1;
+      return fe(
+        {
+          "aria-label": "Breadcrumb",
+          class: "flex items-center gap-x-1 text-sm"
+        },
+        [
+          o({
+            role: "list",
+            class: "flex items-center",
+            for: ["items", (t, s) => ms({
+              href: t.href,
+              label: t.label,
+              separator: s < e
+            })]
+          })
+        ]
+      );
+    }
+  }
+), Re = {
+  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"
+}, xs = (e) => Re[e] || Re.default, bs = ({ index: e, size: t }) => o({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+  f({
+    class: "block w-full h-full rounded-full transition-colors",
+    onSet: ["activeIndex", {
+      "bg-primary": e,
+      "shadow-md": e
+    }],
+    click: (s, { data: n, onClick: a }) => {
+      n.activeIndex = e, a && a(e);
+    }
+  })
+]), ps = (e, t) => Array.from({ length: e }, (s, n) => bs({
+  index: n,
+  size: t
+})), Ja = M(
+  {
+    /**
+     * Defines component data (props).
+     *
+     * @returns {Data}
+     */
+    setData() {
+      return new z({
+        // @ts-ignore
+        count: this.count || 4,
+        // total dots
+        // @ts-ignore
+        activeIndex: this.activeIndex || 0
+      });
+    },
+    /**
+     * Renders the dots.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.gap || "gap-2", t = xs(this.size || "sm"), s = ps(this.data.count, t);
+      return o(
+        { class: "flex justify-center items-center py-2" },
+        [
+          o({ class: `flex ${e}` }, s)
+        ]
+      );
+    }
+  }
+), ys = ({ toggleDropdown: e }) => w(
+  {
+    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: e
+  },
+  [
+    f({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    b({ size: "sm" }, g.chevron.upDown)
+  ]
+), ws = (e, t, s) => ge({
+  class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
+  click: () => t(e),
+  onState: [s, "selectedValue", { "bg-secondary": e.value }]
+}, [
+  e.icon && f({ class: "mr-2 flex items-baseline" }, [b({ size: "xs" }, e.icon)]),
+  f({ class: "text-base font-normal" }, e.label)
+]), vs = (e, t) => o({ class: "w-full border rounded-md" }, [
+  X({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => ws(s, e, t)] })
+]), ks = ({ onSelect: e, state: t }) => o({ class: "flex flex-auto flex-col" }, [
+  T(
+    "open",
+    (s, n, a) => s ? new te({
+      cache: "dropdown",
+      parent: a,
+      button: a.button
+    }, [
+      vs(e, t)
+    ]) : null
+  )
+]), Za = M(
+  {
+    /**
+     * This will set up the data.
+     *
+     * @returns {Data}
+     */
+    setData() {
+      return new z({
+        // @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(e) {
+      const t = this.state;
+      t.selectedValue = e.value, t.selectedLabel = e.label, t.open = !1;
+    },
+    /**
+     * Handles the selection of an item.
+     *
+     * @param {object} item
+     * @returns {void}
+     */
+    select(e) {
+      this.setStateItem(e), typeof this.onSelect == "function" && this.onSelect(e, this.parent);
+    },
+    /**
+     * Selects the first item in the list.
+     *
+     * @returns {void}
+     */
+    selectFirstItem() {
+      const e = this.data.items[0];
+      this.select(e);
+    },
+    /**
+     * 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 e = this.data.items[0];
+        e && this.setStateItem(e);
+      }
+    },
+    /**
+     * This will render the component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
+      return o({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
+        // @ts-ignore
+        ys({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        ks({
+          // @ts-ignore
+          state: this.state,
+          // @ts-ignore
+          onSelect: this.select.bind(this)
+        }),
+        // Hidden required input for form validation
+        // @ts-ignore
+        this.required && p({
+          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]
+        })
+      ]);
+    }
+  }
+), Ke = ({ icon: e, click: t, ariaLabel: s }) => x({
+  variant: "icon",
+  class: "flex flex-none",
+  click: t,
+  icon: e,
+  "aria-label": s
+}), Cs = ({ click: e }) => Ke({
+  icon: g.circleMinus,
+  click: e,
+  ariaLabel: "Decrement"
+}), Ss = ({ click: e }) => Ke({
+  icon: g.circlePlus,
+  click: e,
+  ariaLabel: "Increment"
+}), $s = ({ bind: e, min: t, max: s, readonly: n = !1 }) => W(({ state: a }) => p({
+  value: ["[[count]]", a],
+  bind: e,
+  blur: (l, { state: i }) => {
+    let c = parseInt(l.target.value, 10);
+    isNaN(c) && (c = t ?? 0), t !== void 0 && (c = Math.max(c, t)), s !== void 0 && (c = Math.min(c, s)), i.count = c;
+  },
+  class: "flex flex-auto text-lg font-medium bg-input text-center border min-w-0",
+  readonly: n,
+  min: t,
+  max: s,
+  type: "number",
+  "aria-label": "Counter"
+})), Xa = O(
+  {
+    /**
+     * Initial state for the counter component.
+     *
+     * @member {object} state
+     */
+    state() {
+      return {
+        count: {
+          state: this.initialCount ?? 0,
+          callBack: (e) => this.change && this.change(e)
+        }
+      };
+    },
+    /**
+     * Renders the Counter component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.class ?? "";
+      return o({ class: `flex flex-auto items-center justify-between gap-x-4 p-4 ${e}` }, [
+        Cs({ click: () => this.state.decrement("count") }),
+        $s({
+          bind: this.bind,
+          readonly: this.readonly,
+          min: this.min,
+          max: this.max
+        }),
+        Ss({ click: () => this.state.increment("count") })
+      ]);
+    }
+  }
+), Ds = ({ currentMonth: e, currentYear: t, onSelect: s }) => o(
+  { class: "grid grid-cols-3 gap-2" },
+  ee.monthNames.map(
+    (n, a) => x(
+      {
+        click: (l) => {
+          l.preventDefault(), l.stopPropagation(), s(a);
+        },
+        variant: e === a ? "primary" : "ghost",
+        "aria-label": `Select ${n} ${t}`
+      },
+      n.substring(0, 3)
+    )
+  )
+), P = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), Is = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), j = (e, t, s) => `${e}-${P(t + 1)}-${P(s)}`, Ts = (e) => e ? "bg-accent text-primary" : "", Ms = (e) => e ? "text-muted-foreground opacity-50" : "", Bs = (e, t) => e === t, Ps = (e, t) => Bs(e, t) ? "bg-primary text-primary-foreground" : "", zs = (e, t, s, n) => {
+  const a = Ps(t, n);
+  return a || (e ? Ts(e) : s ? Ms(s) : "text-foreground");
+}, oe = (e) => {
+  const {
+    day: t,
+    currentDate: s,
+    date: n,
+    isToday: a,
+    isOutsideMonth: l,
+    select: i,
+    disabled: c
+  } = e;
+  return w(
+    {
+      class: `
+				flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md cursor-pointer
+				${zs(a, s, l, n)}
+				hover:bg-muted/50 hover:text-muted-foreground focus:z-10
+                disabled:pointer-events-none disabled:opacity-50
+			`,
+      disabled: c || t === null,
+      "aria-label": t ? `Day ${t}` : null,
+      // Only call select if it's not disabled.
+      click: () => !c && i(n)
+    },
+    t.toString()
+  );
+}, le = (e, t, s, n) => e === n.date && t === n.month && s === n.year, Os = (e, t, s, n = !1) => {
+  const { year: a, month: l } = e, i = j(a, l, e.date), c = new Date(a, l, 1).getDay(), u = new Date(a, l + 1, 0).getDate(), m = new Date(a, l, 0).getDate(), v = [], q = l === 0 ? 11 : l - 1, A = l === 0 ? a - 1 : a;
+  for (let d = c - 1; d >= 0; d--) {
+    const y = m - d, S = le(y, q, A, t), $ = new Date(A, q, y) < new Date(t.year, t.month, t.date), R = n && $;
+    v.push(
+      oe({
+        day: y,
+        currentDate: i,
+        date: j(A, q, y),
+        isToday: S,
+        isOutsideMonth: !0,
+        select: s,
+        disabled: R
+      })
+    );
+  }
+  for (let d = 1; d <= u; d++) {
+    const y = le(d, l, a, t), S = new Date(a, l, d) < new Date(t.year, t.month, t.date), $ = n && S;
+    v.push(
+      oe({
+        day: d,
+        currentDate: i,
+        date: j(a, l, d),
+        isToday: y,
+        isOutsideMonth: !1,
+        select: s,
+        disabled: $
+      })
+    );
+  }
+  const E = l === 11 ? 0 : l + 1, se = l === 11 ? a + 1 : a, h = (7 - v.length % 7) % 7;
+  for (let d = 1; d <= h; d++) {
+    const y = le(d, E, se, t), S = new Date(se, E, d) < new Date(t.year, t.month, t.date), $ = n && S;
+    v.push(
+      oe({
+        day: d,
+        currentDate: i,
+        date: j(se, E, d),
+        isToday: y,
+        isOutsideMonth: !0,
+        select: s,
+        disabled: $
+      })
+    );
+  }
+  return v;
+}, Fe = ({ label: e, click: t }) => x(
+  {
+    class: `
+			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
+			opacity-50 hover:opacity-100 text-muted-foreground absolute
+			${e === "Previous" ? "left-1" : "right-1"}
+			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+		  `,
+    click: t,
+    "aria-label": `${e} month`,
+    variant: "icon",
+    icon: e === "Previous" ? g.chevron.single.left : g.chevron.single.right
+  }
+), Ns = ({ onMonthClick: e, onYearClick: t, next: s, previous: n }) => o({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
+  x({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
+  x({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
+  Fe({ label: "Previous", click: n }),
+  Fe({ label: "Next", click: s })
+]), Rs = (e) => o(
+  { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
+  e
+), Fs = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(Rs), js = (e) => o({ class: "rdp flex flex-auto flex-col w-full gap-y-1" }, [
+  Ns({
+    onMonthClick: e.onMonthClick,
+    onYearClick: e.onYearClick,
+    next: e.next,
+    previous: e.previous
+  }),
+  o({
+    class: "flex flex-auto flex-col w-full",
+    onSet: [
+      "currentDate",
+      () => [
+        o({ class: "grid grid-cols-7" }, Fs()),
+        o(
+          { class: "grid grid-cols-7" },
+          Os(
+            e.current,
+            e.today,
+            e.select,
+            e.blockPriorDates
+          )
+        )
+      ]
+    ]
+  })
+]), Ls = ({ currentMonth: e, currentYear: t, onSelect: s }) => {
+  const n = t - 50, a = Array.from({ length: 101 }, (l, i) => n + i);
+  return o(
+    { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
+    a.map(
+      (l) => x(
+        {
+          click: (i) => {
+            i.preventDefault(), i.stopPropagation(), s(l);
+          },
+          variant: l === t ? "primary" : "ghost",
+          "aria-label": `Select ${l}`
+        },
+        l.toString()
+      )
+    )
+  );
+};
+class Hs extends C {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.selectedDate = null, this.selectedCallBack = null, this.blockPriorDates = !1;
+  }
+  /**
+   * This will get the selected data.
+   *
+   * @param {object} today
+   * @returns {Date}
+   */
+  getSelectedDate(t) {
+    const s = this.selectedDate ? new Date(Is(this.selectedDate)) : t;
+    return new Date(s.getFullYear(), s.getMonth(), s.getDate());
+  }
+  /**
+   * This will set up the data for the calendar.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    const t = /* @__PURE__ */ new Date(), s = this.getSelectedDate(t), n = s.getMonth();
+    return new z({
+      monthName: this.getMonthName(n),
+      currentDate: `${s.getFullYear()}-${n + 1}-${s.getDate()}`,
+      current: {
+        date: s.getDate(),
+        year: s.getFullYear(),
+        month: n
+      },
+      today: {
+        date: t.getDate(),
+        month: t.getMonth(),
+        year: t.getFullYear()
+      }
+    });
+  }
+  /**
+   * This will set up the states for the calendar.
+   *
+   * @return {object}
+   */
+  setupStates() {
+    return {
+      view: "calendar"
+      // 'calendar' | 'months' | 'years'
+    };
+  }
+  /**
+   * This will get the name of the month.
+   *
+   * @param {number} month
+   * @returns {string}
+   */
+  getMonthName(t) {
+    return ee.monthNames[t];
+  }
+  /**
+   * This will go to the previous month.
+   *
+   * @returns {void}
+   */
+  goToPreviousMonth() {
+    const t = this.data;
+    let s = t.current.month, n = t.current.year;
+    s === 0 ? (s = 11, n--) : s--, this.setCurrentDate(s, n);
+  }
+  /**
+   * This will go to the next month.
+   *
+   * @returns {void}
+   */
+  goToNextMonth() {
+    const t = this.data;
+    let s = t.current.month, n = t.current.year;
+    s === 11 ? (s = 0, n++) : s++, this.setCurrentDate(s, n);
+  }
+  /**
+   * This will set the current month and year.
+   *
+   * @param {number} month
+   * @param {number} year
+   * @param {number|null} [date=null]
+   * @returns {void}
+   */
+  setCurrentDate(t, s, n = null) {
+    const a = this.data;
+    a.current.month = t, a.current.year = s, typeof n == "number" && (a.current.date = P(n)), a.currentDate = `${s}-${P(t + 1)}-${a.current.date}`, a.monthName = this.getMonthName(t);
+  }
+  /**
+   * This will select a date.
+   *
+   * @param {string} date
+   * @returns {void}
+   */
+  selectDate(t) {
+    const s = /* @__PURE__ */ new Date(t + "T00:00:00");
+    this.setCurrentDate(s.getMonth(), s.getFullYear(), s.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(this.data.currentDate);
+  }
+  /**
+   * This will render the calendar.
+   *
+   * @returns {object}
+   */
+  render() {
+    return o({ class: "calendar-container p-3 rounded-md border min-w-80" }, [
+      T("view", (t) => {
+        switch (t) {
+          case "months":
+            return Ds(
+              {
+                // @ts-ignore
+                currentMonth: this.data.current.month,
+                // @ts-ignore
+                currentYear: this.data.current.year,
+                onSelect: (s) => {
+                  this.setCurrentDate(s, this.data.current.year), this.state.view = "calendar";
+                }
+              }
+            );
+          case "years":
+            return Ls(
+              {
+                // @ts-ignore
+                currentMonth: this.data.current.month,
+                // @ts-ignore
+                currentYear: this.data.current.year,
+                onSelect: (s) => {
+                  this.setCurrentDate(this.data.current.month, s), this.state.view = "calendar";
+                }
+              }
+            );
+          default:
+            return js({
+              // @ts-ignore
+              current: this.data.current,
+              // @ts-ignore
+              today: this.data.today,
+              select: (s) => this.selectDate(s),
+              next: () => this.goToNextMonth(),
+              previous: () => this.goToPreviousMonth(),
+              blockPriorDates: this.blockPriorDates || !1,
+              onMonthClick: (s) => {
+                s.preventDefault(), s.stopPropagation(), this.state.view = "months";
+              },
+              onYearClick: (s) => {
+                s.preventDefault(), s.stopPropagation(), this.state.view = "years";
+              }
+            });
+        }
+      })
+    ]);
+  }
+}
+const As = (e) => {
+  let t = "";
+  return e.length > 0 && (t = e.substring(0, 2), e.length > 2 && (t += "/" + e.substring(2, 4), e.length > 4 && (t += "/" + e.substring(4, 8)))), t;
+}, Es = (e) => {
+  if (e.length !== 8)
+    return null;
+  const t = parseInt(e.substring(0, 2), 10), s = parseInt(e.substring(2, 4), 10), n = parseInt(e.substring(4, 8), 10);
+  return t >= 1 && t <= 12 && s >= 1 && s <= 31 && n >= 1900 ? `${n}-${t.toString().padStart(2, "0")}-${s.toString().padStart(2, "0")}` : null;
+}, Us = ({ bind: e, required: t }) => p({
+  cache: "input",
+  class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
+  bind: e,
+  required: t
+}), Ys = ({ placeholder: e, handleInputChange: t, handleInputFocus: s }) => p({
+  cache: "dateInput",
+  class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
+  placeholder: e || "mm/dd/yyyy",
+  input: t,
+  focus: s,
+  onState: ["selectedDate", (n) => n ? ee.format("standard", n) : ""]
+}), Vs = ({ bind: e, required: t, toggleOpen: s, handleInputChange: n, handleInputFocus: a, placeholder: l }) => o(
+  {
+    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"
+  },
+  [
+    Us({ bind: e, required: t }),
+    Ys({ placeholder: l, handleInputChange: n, handleInputFocus: a }),
+    w(
+      {
+        class: "shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
+        click: s
+      },
+      [
+        Y({ html: g.calendar.days })
+      ]
+    )
+  ]
+), Ws = ({ handleDateSelect: e, blockPriorDates: t }) => me(
+  (s, n, a) => new te({
+    cache: "dropdown",
+    parent: a,
+    button: a.panel,
+    size: "fit"
+  }, [
+    new Hs({
+      selectedDate: a.state.selectedDate,
+      selectedCallBack: e,
+      blockPriorDates: t
+    })
+  ])
+), eo = O(
+  {
+    /**
+     * 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(e) {
+      const s = e.target.value.replace(/\D/g, "");
+      e.target.value = As(s);
+      const n = Es(s);
+      n && (this.state.selectedDate = n, this.input.value = n, L.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(n));
+    },
+    /**
+     * Handles input focus - select all text for easy editing.
+     *
+     * @param {Event} e
+     */
+    handleInputFocus(e) {
+      e.target.select();
+    },
+    /**
+     * Handles date selection from calendar.
+     *
+     * @param {string} date
+     */
+    handleDateSelect(e) {
+      this.state.selectedDate = e, this.state.open = !1, this.input.value = e, L.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(e);
+    },
+    /**
+     * Toggles the calendar popover.
+     *
+     * @param {Event} e
+     * @param {object} context
+     */
+    toggleOpen(e, { state: t }) {
+      t.toggle("open");
+    },
+    /**
+     * Renders the DatePicker component.
+     *
+     * @returns {object}
+     */
+    render() {
+      return o(
+        { class: "relative w-full max-w-[320px]" },
+        [
+          Vs({
+            toggleOpen: this.toggleOpen.bind(this),
+            bind: this.bind,
+            required: this.required,
+            handleInputChange: this.handleInputChange.bind(this),
+            handleInputFocus: this.handleInputFocus.bind(this),
+            placeholder: this.placeholder
+          }),
+          Ws({
+            handleDateSelect: this.handleDateSelect.bind(this),
+            blockPriorDates: this.blockPriorDates || !1
+          })
+        ]
+      );
+    }
+  }
+), je = ({ label: e, click: t }) => x(
+  {
+    class: `
+			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
+			opacity-50 hover:opacity-100 text-muted-foreground absolute
+			${e === "Previous" ? "left-1" : "right-1"}
+			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+		  `,
+    click: t,
+    "aria-label": `${e} month`,
+    variant: "icon",
+    icon: e === "Previous" ? g.chevron.single.left : g.chevron.single.right
+  }
+), qs = ({ onMonthClick: e, onYearClick: t, next: s, previous: n }) => o({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
+  x({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
+  x({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
+  je({ label: "Previous", click: n }),
+  je({ label: "Next", click: s })
+]), Gs = (e) => o({ class: "h-9 flex items-center justify-center font-medium" }, e), _s = () => o(
+  { class: "grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted-foreground mb-2" },
+  ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(Gs)
+), Ks = ({ day: e, iso: t, disabled: s, isStart: n, isEnd: a, isBetween: l, isOtherMonth: i, click: c }) => {
+  let u = "ghost", m = "";
+  return n || a ? (u = "default", m = "bg-primary text-primary-foreground hover:bg-primary/90") : l && (m = "bg-accent text-accent-foreground hover:bg-accent/80"), s && (m += " opacity-50 cursor-not-allowed"), i && (m += " text-muted-foreground opacity-50"), x(
+    {
+      class: `flex items-center justify-center p-0 text-sm font-medium rounded-md transition-colors ${m}`,
+      variant: u,
+      disabled: s,
+      click: (v) => {
+        v.preventDefault(), v.stopPropagation(), s || c();
+      }
+    },
+    e.toString()
+  );
+}, Qs = ({ today: e, current: t, blockPriorDates: s, onDateClick: n }) => {
+  const { start: a, end: l } = t, i = new Date(t.year, t.month, 1).getDay(), c = new Date(t.year, t.month + 1, 0).getDate(), u = [], m = t.month === 0 ? 11 : t.month - 1, v = t.month === 0 ? t.year - 1 : t.year, q = new Date(v, m + 1, 0).getDate(), A = t.month === 11 ? 0 : t.month + 1, E = t.month === 11 ? t.year + 1 : t.year;
+  for (let h = i - 1; h >= 0; h--) {
+    const d = q - h, y = j(v, m, d), S = new Date(v, m, d), $ = new Date(e.year, e.month, e.date), R = S < $, G = s && R, _ = a === y, K = l === y, st = a && l && y > a && y < l;
+    u.push({
+      day: d,
+      iso: y,
+      disabled: G,
+      isStart: _,
+      isEnd: K,
+      isBetween: st,
+      isOtherMonth: !0,
+      click: () => n(y)
+    });
+  }
+  for (let h = 1; h <= c; h++) {
+    const d = j(t.year, t.month, h), y = new Date(t.year, t.month, h), S = new Date(e.year, e.month, e.date), $ = y < S, R = s && $, G = a === d, _ = l === d, K = a && l && d > a && d < l;
+    u.push({
+      day: h,
+      iso: d,
+      disabled: R,
+      isStart: G,
+      isEnd: _,
+      isBetween: K,
+      isOtherMonth: !1,
+      click: () => {
+        n(d);
+      }
+    });
+  }
+  const ye = (7 - u.length % 7) % 7;
+  for (let h = 1; h <= ye; h++) {
+    const d = j(E, A, h), y = new Date(E, A, h), S = new Date(e.year, e.month, e.date), $ = y < S, R = s && $, G = a === d, _ = l === d, K = a && l && d > a && d < l;
+    u.push({
+      day: h,
+      iso: d,
+      disabled: R,
+      isStart: G,
+      isEnd: _,
+      isBetween: K,
+      isOtherMonth: !0,
+      click: () => n(d)
+    });
+  }
+  return o(
+    { class: "grid grid-cols-7 gap-1" },
+    u.map(
+      (h, d) => Ks({
+        day: h.day,
+        iso: h.iso,
+        disabled: h.disabled,
+        isStart: h.isStart,
+        isEnd: h.isEnd,
+        isBetween: h.isBetween,
+        isOtherMonth: h.isOtherMonth,
+        click: h.click
+      })
+    )
+  );
+}, Js = r((e, t) => o({ class: "flex flex-auto flex-col" }, [
+  qs({
+    // @ts-ignore
+    onMonthClick: e.onMonthClick,
+    // @ts-ignore
+    onYearClick: e.onYearClick,
+    // @ts-ignore
+    next: e.next,
+    // @ts-ignore
+    previous: e.previous
+  }),
+  o({
+    class: "flex flex-auto flex-col w-full",
+    onSet: [
+      "currentDate",
+      () => [
+        _s(),
+        Qs({
+          // @ts-ignore
+          today: e.today,
+          // @ts-ignore
+          current: e.current,
+          // @ts-ignore
+          blockPriorDates: e.blockPriorDates,
+          // @ts-ignore
+          onDateClick: e.onDateClick
+        })
+      ]
+    ]
+  })
+])), Zs = ({ currentMonth: e, currentYear: t, onSelect: s }) => o(
+  { class: "grid grid-cols-3 gap-2" },
+  ee.monthNames.map(
+    (n, a) => x(
+      {
+        click: (l) => {
+          l.preventDefault(), l.stopPropagation(), s(a);
+        },
+        variant: e === a ? "primary" : "ghost",
+        "aria-label": `Select ${n} ${t}`
+      },
+      n.substring(0, 3)
+    )
+  )
+), Xs = ({ start: e, end: t, selecting: s, onSelectStart: n, onSelectEnd: a }) => o({ class: "flex gap-x-2 mb-4" }, [
+  Q("selecting", (l) => x({
+    click: n,
+    variant: l === "start" ? "primary" : "outline",
+    class: "flex-1"
+  }, [
+    o({ class: "font-medium" }, Le("current.start", "Start Date"))
+  ])),
+  Q("selecting", (l) => x({
+    click: a,
+    variant: l === "end" ? "primary" : "outline",
+    class: "flex-1"
+  }, [
+    o({ class: "font-medium" }, Le("current.end", "End Date"))
+  ]))
+]), Le = (e, t) => [`[[${e}]]`, (s) => s == null ? t : en(s)], en = (e) => {
+  const t = /* @__PURE__ */ new Date(e + "T00:00:00"), s = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], n = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  return `${s[t.getDay()]}, ${t.getDate()} ${n[t.getMonth()]}`;
+}, tn = ({ currentYear: e, onSelect: t }) => {
+  const s = e - 50, n = Array.from({ length: 101 }, (a, l) => s + l);
+  return o(
+    { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
+    n.map(
+      (a) => x(
+        {
+          click: (l) => {
+            l.preventDefault(), l.stopPropagation(), t(a);
+          },
+          variant: a === e ? "primary" : "ghost",
+          "aria-label": `Select ${a}`
+        },
+        a.toString()
+      )
+    )
+  );
+};
+class sn extends C {
+  /**
+   * Declare compiler props.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.startDate = null, this.endDate = null, this.onRangeSelect = null, this.blockPriorDates = !1;
+  }
+  /**
+   * Initialize reactive data for today and current view.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    const t = /* @__PURE__ */ new Date(), s = this.startDate ? /* @__PURE__ */ new Date(this.startDate + "T00:00:00") : t, n = s.getMonth(), a = s.getFullYear();
+    return new z({
+      today: {
+        date: t.getDate(),
+        month: t.getMonth(),
+        year: t.getFullYear()
+      },
+      monthName: this.getMonthName(n),
+      currentData: `${s.getFullYear()}-${P(s.getMonth() + 1)}-${P(s.getDate())}`,
+      current: {
+        date: t.getDate(),
+        month: n,
+        year: a,
+        start: this.startDate,
+        end: this.endDate
+      },
+      selecting: "start"
+    });
+  }
+  /**
+   * This will get the name of the month.
+   *
+   * @param {number} month
+   * @returns {string}
+   */
+  getMonthName(t) {
+    return ee.monthNames[t];
+  }
+  /**
+   * Initialize component state.
+   *
+   * @returns {{view:string}}
+   */
+  setupStates() {
+    return {
+      view: "calendar"
+      // 'calendar', 'months', or 'years'
+    };
+  }
+  /**
+   * Handle a date cell click.
+   *
+   * @param {string} isoDate
+   * @returns {void}
+   */
+  handleClick(t) {
+    if (this.data.selecting === "start") {
+      this.data.current.start = t, this.data.current.end = null, this.data.selecting = "end";
+      const s = /* @__PURE__ */ new Date(t + "T00:00:00");
+      this.setCurrent({
+        month: s.getMonth(),
+        year: s.getFullYear(),
+        date: s.getDate()
+      });
+    } else {
+      this.data.current.start && t < this.data.current.start ? (this.data.current.end = this.data.current.start, this.data.current.start = t) : this.data.current.end = t, this.data.selecting = "start";
+      const s = /* @__PURE__ */ new Date(t + "T00:00:00");
+      this.setCurrent({
+        month: s.getMonth(),
+        year: s.getFullYear(),
+        date: s.getDate()
+      }), typeof this.onRangeSelect == "function" && this.onRangeSelect(this.data.current.start, this.data.current.end);
+    }
+  }
+  /**
+   * Update current month/year in data.
+   *
+   * @param {object} obj
+   * @returns {void}
+   */
+  setCurrent({ month: t, year: s, date: n = null }) {
+    const a = this.data.current;
+    a.month = (t + 12) % 12, a.year = s + (t < 0 ? -1 : t > 11 ? 1 : 0), n !== null && (a.date = n), this.data.monthName = this.getMonthName(a.month), this.data.currentDate = `${s}-${P(t + 1)}-${P(a.date)}`;
+  }
+  /**
+   * Render the range calendar.
+   *
+   * @returns {object}
+   */
+  render() {
+    const { today: t, current: s, selecting: n } = this.data, { start: a, end: l } = s;
+    return o({ class: "range-calendar border border-border rounded-lg shadow-md p-4 w-full max-w-sm min-w-80" }, [
+      Xs({
+        start: a,
+        end: l,
+        selecting: n,
+        onSelectStart: (i) => {
+          i.preventDefault(), i.stopPropagation(), this.data.selecting = "start";
+        },
+        onSelectEnd: (i) => {
+          i.preventDefault(), i.stopPropagation(), this.data.selecting = "end";
+        }
+      }),
+      T("view", (i) => {
+        switch (i) {
+          case "months":
+            return Zs(
+              {
+                currentMonth: s.month,
+                currentYear: s.year,
+                onSelect: (c) => {
+                  this.setCurrent({ month: c, year: s.year }), this.state.view = "calendar";
+                }
+              }
+            );
+          case "years":
+            return tn(
+              {
+                currentYear: s.year,
+                onSelect: (c) => {
+                  this.setCurrent({ month: s.month, year: c }), this.state.view = "calendar";
+                }
+              }
+            );
+          default:
+            return Js({
+              // @ts-ignore
+              monthName: this.data.monthName,
+              year: s.year,
+              today: t,
+              current: s,
+              blockPriorDates: this.blockPriorDates,
+              onDateClick: (c) => this.handleClick(c),
+              onMonthClick: (c) => {
+                c.preventDefault(), c.stopPropagation(), this.state.view = "months";
+              },
+              onYearClick: (c) => {
+                c.preventDefault(), c.stopPropagation(), this.state.view = "years";
+              },
+              next: () => {
+                const c = this.data.current, u = c.month === 11 ? { month: 0, year: c.year + 1 } : { month: c.month + 1, year: c.year };
+                this.setCurrent(u);
+              },
+              previous: () => {
+                const c = this.data.current, u = c.month === 0 ? { month: 11, year: c.year - 1 } : { month: c.month - 1, year: c.year };
+                this.setCurrent(u);
+              }
+            });
+        }
+      })
+    ]);
+  }
+}
+const nn = ({ bind: e, required: t }) => p({
+  cache: "input",
+  class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
+  bind: e,
+  required: t
+}), an = ({ bind: e, required: t, toggleOpen: s }) => w({
+  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
+}, [
+  nn({ bind: e, required: t }),
+  W(({ state: n }) => [
+    f(U.date(["[[start]]", n], "Start Date")),
+    f(" - "),
+    f(U.date(["[[end]]", n], "End Date"))
+  ]),
+  Y({ html: g.calendar.days })
+]), on = ({ handleDateSelect: e, blockPriorDates: t }) => me((s, n, a) => new te({
+  cache: "dropdown",
+  parent: a,
+  button: a.panel,
+  size: "xl"
+}, [
+  new sn({
+    startDate: a.state.start,
+    endDate: a.state.end,
+    onRangeSelect: e,
+    blockPriorDates: t
+  })
+])), to = O(
+  {
+    /**
+     * 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 e = this.input.value.split("-");
+        this.state.start = e[0], this.state.end = e[1];
+      }
+    },
+    /**
+     * Renders the DatePicker component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = (s, { state: n }) => n.toggle("open"), t = (s, n) => {
+        this.state.start = s, this.state.end = n, this.state.open = !1, this.input.value = `${s}-${n}`, L.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: n }, this.parent);
+      };
+      return o({ class: "relative w-full max-w-[320px]" }, [
+        an({
+          toggleOpen: e,
+          bind: this.bind,
+          required: this.required
+        }),
+        on({
+          handleDateSelect: t,
+          blockPriorDates: this.blockPriorDates || !1
+        })
+      ]);
+    }
+  }
+);
+function ln(e) {
+  let t = "";
+  return e.length > 0 && (t = e.substring(0, 2), e.length > 2 && (t += ":" + e.substring(2, 4))), t;
+}
+function rn(e) {
+  if (e.length < 4)
+    return { formattedTime: null, hour: null, minute: null, meridian: null };
+  const t = parseInt(e.substring(0, 2), 10), s = parseInt(e.substring(2, 4), 10);
+  if (t < 0 || t > 23 || s < 0 || s > 59)
+    return { formattedTime: null, hour: null, minute: null, meridian: null };
+  let n = t, a = "AM";
+  return t === 0 ? n = 12 : t > 12 ? (n = t - 12, a = "PM") : t === 12 && (a = "PM"), {
+    formattedTime: `${n.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")} ${a}`,
+    hour: n.toString().padStart(2, "0"),
+    minute: s.toString().padStart(2, "0"),
+    meridian: a
+  };
+}
+function cn({ bind: e, required: t }) {
+  return p({
+    cache: "input",
+    class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
+    bind: e,
+    required: t
+  });
+}
+function dn({ placeholder: e, handleInputChange: t, handleInputFocus: s }) {
+  return p({
+    cache: "timeInput",
+    class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
+    placeholder: e || "hh:mm AM/PM",
+    input: t,
+    focus: s,
+    onState: ["selectedTime", (n) => n || ""]
+  });
+}
+function un({ bind: e, required: t, toggleOpen: s, handleInputChange: n, handleInputFocus: a, placeholder: l }) {
+  return o(
+    {
+      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"
+    },
+    [
+      cn({ bind: e, required: t }),
+      dn({ placeholder: l, handleInputChange: n, handleInputFocus: a }),
+      w(
+        {
+          class: "shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
+          click: s
+        },
+        [
+          Y({ html: g.clock })
+        ]
+      )
+    ]
+  );
+}
+function re({ items: e, handleTimeSelect: t, state: s, stateValue: n, pad: a = !1 }) {
+  return o(
+    { class: "flex flex-col max-h-[200px] overflow-y-auto" },
+    e.map((l) => {
+      let i = a ? l.toString().padStart(2, "0") : l.toString();
+      return w({
+        text: i,
+        class: "hover:bg-muted/50 rounded-md pr-2 py-1",
+        click: () => t({ [n]: i }),
+        onState: [s, n, { "bg-muted": i }]
+      });
+    })
+  );
+}
+function hn({ handleTimeSelect: e }) {
+  return me(
+    (t, s, n) => new te(
+      {
+        cache: "dropdown",
+        parent: n,
+        button: n.panel,
+        size: "fit"
+      },
+      [
+        o(
+          { class: "flex flex-auto flex-col border rounded-md shadow-md" },
+          [
+            o(
+              { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
+              [
+                // Hours column
+                re({
+                  items: Array.from({ length: 12 }, (a, l) => l + 1),
+                  handleTimeSelect: e,
+                  state: n.state,
+                  stateValue: "hour",
+                  pad: !0
+                }),
+                // Minutes column
+                re({
+                  items: Array.from({ length: 60 }, (a, l) => l),
+                  handleTimeSelect: e,
+                  state: n.state,
+                  stateValue: "minute",
+                  pad: !0
+                }),
+                // AM/PM column
+                re({
+                  items: ["AM", "PM"],
+                  handleTimeSelect: e,
+                  state: n.state,
+                  stateValue: "meridian"
+                })
+              ]
+            )
+          ]
+        )
+      ]
+    )
+  );
+}
+function He(e) {
+  if (!e)
+    return { hour: null, minute: null, meridian: null };
+  const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
+  if (!s)
+    return { hour: null, minute: null, meridian: null };
+  let [, n, a, , l] = s, i = parseInt(n, 10), c = parseInt(a, 10);
+  return i < 0 || i > 23 || c < 0 || c > 59 ? { hour: null, minute: null, meridian: null } : (l ? (l = l.toUpperCase(), l === "PM" && i < 12 ? i += 12 : l === "AM" && i === 12 && (i = 12)) : i === 0 ? (l = "AM", i = 12) : i < 12 ? l = "AM" : i === 12 ? l = "PM" : (l = "PM", i -= 12), {
+    hour: i.toString().padStart(2, "0"),
+    minute: c.toString().padStart(2, "0"),
+    meridian: l
+  });
+}
+const so = O(
+  {
+    /**
+     * The initial shallow state of the TimePicker.
+     *
+     * @member {object} state
+     */
+    state() {
+      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: n } = He(e);
+      return {
+        selectedTime: e,
+        open: !1,
+        hour: t,
+        minute: s,
+        meridian: n
+      };
+    },
+    /**
+     * Updates the state after the input is rendered.
+     *
+     * @returns {void}
+     */
+    after() {
+      if (this.input.value) {
+        const { hour: e, minute: t, meridian: s } = He(this.input.value);
+        this.state.set({
+          hour: e,
+          minute: t,
+          meridian: s,
+          selectedTime: this.input.value
+        });
+      }
+    },
+    /**
+     * Toggles the time picker popover.
+     *
+     * @param {Event} e
+     * @param {object} context
+     */
+    toggleOpen(e, { state: t }) {
+      t.toggle("open");
+    },
+    /**
+     * Handles direct input changes and formats the time.
+     *
+     * @param {Event} e
+     */
+    handleInputChange(e) {
+      let t = e.target.value.replace(/[^\d]/g, ""), s = ln(t);
+      const n = rn(t);
+      n.formattedTime && (s = n.formattedTime, this.state.set({
+        hour: n.hour,
+        minute: n.minute,
+        meridian: n.meridian,
+        selectedTime: n.formattedTime
+      }), this.input.value = n.formattedTime, L.trigger("change", this.input), typeof this.change == "function" && this.change(n.formattedTime)), e.target.value = s;
+    },
+    /**
+     * Handles input focus - select all text for easy editing.
+     *
+     * @param {Event} e
+     */
+    handleInputFocus(e) {
+      e.target.select();
+    },
+    /**
+     * Handles time selection from the picker columns.
+     *
+     * @param {object} params
+     */
+    handleTimeSelect({ hour: e, minute: t, meridian: s }) {
+      if (e && (this.state.hour = e), t && (this.state.minute = t), s && (this.state.meridian = s), this.state.hour && this.state.minute && this.state.meridian) {
+        const n = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
+        this.state.selectedTime = n, this.state.open = !1, this.input.value = n, L.trigger("change", this.input), typeof this.change == "function" && this.change(n);
+      }
+    },
+    /**
+     * Renders the TimePicker component.
+     *
+     * @returns {object}
+     */
+    render() {
+      return o(
+        { class: "relative w-full max-w-[320px]" },
+        [
+          un({
+            toggleOpen: this.toggleOpen.bind(this),
+            bind: this.bind,
+            required: this.required,
+            handleInputChange: this.handleInputChange.bind(this),
+            handleInputFocus: this.handleInputFocus.bind(this),
+            placeholder: this.placeholder
+          }),
+          hn({
+            handleTimeSelect: this.handleTimeSelect.bind(this)
+          })
+        ]
+      );
+    }
+  }
+), fn = (e, t) => o({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+  b({ size: "lg" }, e)
+]), gn = ({ title: e }) => Z({ class: "flex flex-auto items-center" }, [
+  J({ class: "text-lg font-semibold" }, e)
+]), no = r((e, t) => it(
+  {
+    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 ${e.class}`,
+    // @ts-ignore
+    click: e.click,
+    aria: { expanded: ["open"] }
+  },
+  [
+    o({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
+      // Icon and content
+      // @ts-ignore
+      e.icon && fn(e.icon, e.iconColor),
+      o({ class: "flex flex-auto flex-col gap-4" }, [
+        o({ class: "flex flex-auto flex-col gap-y-2" }, [
+          gn(e),
+          // @ts-ignore
+          e.description && k({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
+          o({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
+        ]),
+        // @ts-ignore
+        e.buttons && ue({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
+      ])
+    ])
+  ]
+)), ao = r((e, t = []) => o({ class: "w-full max-w-md p-6 m-auto" }, [
+  Ge({ class: "flex flex-auto flex-col" }, [
+    o({ class: "flex flex-auto flex-col gap-y-4" }, [
+      o({ class: "flex flex-auto items-center justify-center" }, [
+        // @ts-ignore
+        e.icon && o({ class: "w-16 h-16 mb-2 text-primary" }, [
+          // @ts-ignore
+          b({ size: "lg" }, e.icon)
+        ])
+      ]),
+      Z({ class: "py-4 text-center" }, [
+        // @ts-ignore
+        J({ class: "text-xl font-bold" }, e.title),
+        // @ts-ignore
+        k({ class: "pb-8 text-muted-foreground" }, e.description || ""),
+        ...t
+      ])
+    ])
+  ])
+]));
+r((e, t) => ({
+  class: "flex items-center px-4 py-2",
+  ...e,
+  children: t
+}));
+r(({ value: e, label: t }) => w({
+  class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-md px-8 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+  onState: ["performance", { active: e }],
+  dataSet: ["performance", ["state", e, "active"]],
+  click: (s, { state: n }) => n.performance = e
+}, t));
+const mn = (e, t) => {
+  const s = e.toggleAllSelectedRows();
+  t.state.checked = !s;
+}, xn = (e) => Ue({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class || ""}` }, [
+  W((t) => new Rt({ class: "mr-2", onChange: (s, n) => mn(t, n) }))
+]), bn = ({ align: e, sortable: t, key: s, label: n, sort: a, class: l }) => {
+  const i = e || "justify-start";
+  return Ue({
+    class: `cursor-pointer py-3 px-4 text-base ${l || ""}`,
+    click: t && (() => a(s))
+  }, [
+    o({ class: `flex flex-auto w-full items-center ${i}` }, [
+      f(n),
+      t && Y({ class: "ml-2", html: g.arrows.upDown })
+    ])
+  ]);
+}, pe = (e) => ct([
+  dt({
+    class: "text-muted-foreground border-b",
+    map: [
+      e.headers,
+      (t) => t.label === "checkbox" ? xn({ toggle: e.toggle }) : bn({
+        align: t.align,
+        sortable: t.sortable,
+        key: t.key,
+        label: t.label,
+        sort: e.sort
+      })
+    ]
+  })
+]), pn = ({ key: e, rows: t, selectRow: s, rowItem: n, emptyState: a, skeleton: l, columnCount: i }) => new xt({
+  cache: "list",
+  key: e,
+  items: t,
+  rowItem: (c) => n(c, s),
+  class: "divide-y divide-border",
+  emptyState: a,
+  skeleton: l,
+  columnCount: i
+});
+class Qe extends C {
+  /**
+   * Initializes component data.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    let t = this.rows && this.rows.length > 0;
+    return (this.loadMoreItems || this.tableData) && !t && (t = null), new z({
+      selectedRows: [],
+      // @ts-ignore
+      hasItems: t,
+      selected: !1
+    });
+  }
+  /**
+   * This will toggle all selected rows.
+   *
+   * @returns {boolean}
+   */
+  toggleAllSelectedRows() {
+    const t = this.list.getRows(), s = this.data.selectedRows.length === t.length, n = s ? [] : t;
+    return this.data.selectedRows = n, this.updateSelected(), this.updateTable(!s), s;
+  }
+  /**
+   * This will update the selected state.
+   *
+   * @returns {void}
+   */
+  updateSelected() {
+    const t = this.data.get("selectedRows");
+    this.data.selected = t.length > 0;
+  }
+  /**
+   * This will get the selected rows.
+   *
+   * @returns {Array<object>}
+   */
+  getSelectedRows() {
+    return this.data.get("selectedRows");
+  }
+  /**
+   * This will update the table rows.
+   *
+   * @protected
+   * @param {boolean} selected
+   * @returns {void}
+   */
+  updateTable(t) {
+    const s = this.list.getRows();
+    s.forEach((n) => n.selected = t), this.list.setRows(s);
+  }
+  /**
+   * Handles row selection.
+   *
+   * @param {object} row
+   */
+  selectRow(t) {
+    const s = t.selected ?? !1;
+    t.selected = !s;
+    const n = this.data.get("selectedRows"), a = t.selected ? [...n, t] : n.filter((l) => l !== t);
+    this.data.selectedRows = a, this.updateSelected();
+  }
+  /**
+   * Gets the number of header columns.
+   *
+   * @returns {number}
+   */
+  getHeaderColCount() {
+    return this.customHeader ? this.customHeader?.children[0]?.children?.length : this.headers ? this.headers.length : 3;
+  }
+  /**
+   * Renders the DataTable component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
+    return o({ class: "w-full flex flex-auto flex-col" }, [
+      Q("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
+      o({ class: `w-full rounded-md ${t} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+        xe({ class: "w-full" }, [
+          // @ts-ignore
+          this.headers && pe({ headers: this.headers, sort: (n) => this.sortRows(n) }),
+          // @ts-ignore
+          this.customHeader ?? null,
+          pn({
+            // @ts-ignore
+            key: this.key,
+            // @ts-ignore
+            rows: this.rows,
+            // @ts-ignore
+            selectRow: this.selectRow.bind(this),
+            // @ts-ignore
+            rowItem: this.rowItem,
+            // @ts-ignore
+            emptyState: this.emptyState,
+            // @ts-ignore
+            skeleton: this.skeleton,
+            columnCount: s
+          })
+        ])
+      ])
+    ]);
+  }
+  /**
+   * This will remove items from the list.
+   *
+   * @public
+   * @param {array} items
+   * @returns {void}
+   */
+  remove(t) {
+    this.list.remove(t);
+  }
+  /**
+   * This will set the items in the list.
+   *
+   * @public
+   * @param {array} rows
+   * @returns {void}
+   */
+  setRows(t) {
+    this.list.setRows(t);
+  }
+  /**
+   * This will append items to the list.
+   *
+   * @public
+   * @param {array|object} items
+   * @returns {void}
+   */
+  append(t) {
+    this.list.append(t);
+  }
+  /**
+   * This will mingle the new items with the old items.
+   *
+   * @public
+   * @param {Array<Object>} newItems
+   * @param {boolean} withDelete
+   * @returns {void}
+   */
+  mingle(t, s = !1) {
+    this.list.mingle(t, s);
+  }
+  /**
+   * This will prepend items to the list.
+   *
+   * @public
+   * @param {array|object} items
+   * @returns {void}
+   */
+  prepend(t) {
+    this.list.prepend(t);
+  }
+  /**
+   * This will remove the selected rows.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.data.selectedRows = [];
+  }
+}
+const yn = (e) => new bt({
+  cache: "list",
+  loadMoreItems: e.loadMoreItems,
+  offset: e.offset,
+  limit: e.limit,
+  key: e.key,
+  tableData: e.tableData,
+  items: e.items,
+  rowItem: (t) => e.rowItem(t, e.selectRow),
+  class: "divide-y divide-border",
+  skeleton: e.skeleton,
+  columnCount: e.columnCount
+});
+class wn extends Qe {
+  /**
+   * Renders the DataTable component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
+    return o({ class: "w-full flex flex-auto flex-col" }, [
+      Q("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
+      o({ class: `w-full rounded-md ${t} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+        xe({ class: "w-full" }, [
+          // @ts-ignore
+          this.headers && pe({ headers: this.headers, sort: (n) => this.sortRows(n) }),
+          // @ts-ignore
+          this.customHeader ?? null,
+          yn({
+            // @ts-ignore
+            loadMoreItems: this.loadMoreItems,
+            // @ts-ignore
+            offset: this.offset,
+            // @ts-ignore
+            limit: this.limit,
+            // @ts-ignore
+            class: this.class,
+            // @ts-ignore
+            tableData: this.tableData,
+            // @ts-ignore
+            key: this.key,
+            // @ts-ignore
+            items: this.rows,
+            // @ts-ignore
+            selectRow: this.selectRow.bind(this),
+            // @ts-ignore
+            rowItem: this.rowItem,
+            // @ts-ignore
+            skeleton: this.skeleton,
+            columnCount: s
+          })
+        ])
+      ])
+    ]);
+  }
+  /**
+   * Refreshes the list.
+   *
+   * @returns {void}
+   */
+  refresh() {
+    this.list.refresh();
+  }
+}
+const oo = r((e) => new wn(
+  {
+    // @ts-ignore
+    cache: e.cache ?? "list",
+    // @ts-ignore
+    tableData: e.data,
+    // @ts-ignore
+    loadMoreItems: e.loadMoreItems,
+    // @ts-ignore
+    offset: e.offset,
+    // @ts-ignore
+    limit: e.limit,
+    // @ts-ignore
+    class: e.class,
+    // @ts-ignore
+    key: e.key,
+    // @ts-ignore
+    rows: e.rows,
+    // @ts-ignore
+    rowItem: e.rowItem,
+    // @ts-ignore
+    headers: e.headers,
+    // @ts-ignore
+    customHeader: e.customHeader,
+    // @ts-ignore
+    border: e.border,
+    // @ts-ignore
+    emptyState: e.emptyState,
+    // @ts-ignore
+    skeleton: e.skeleton
+  }
+)), vn = (e) => new pt({
+  cache: "list",
+  scrollContainer: e.scrollContainer,
+  loadMoreItems: e.loadMoreItems,
+  offset: e.offset,
+  limit: e.limit,
+  key: e.key,
+  tableData: e.tableData,
+  items: e.items,
+  rowItem: (t) => e.rowItem(t, e.selectRow),
+  class: "divide-y divide-border",
+  skeleton: e.skeleton,
+  columnCount: e.columnCount
+});
+class kn extends Qe {
+  /**
+   * Renders the DataTable component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
+    return o({ class: "w-full flex flex-auto flex-col" }, [
+      Q("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
+      o({ class: `w-full rounded-md ${t} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+        xe({ class: "w-full" }, [
+          // @ts-ignore
+          this.headers && pe({ headers: this.headers, sort: (n) => this.sortRows(n) }),
+          // @ts-ignore
+          this.customHeader ?? null,
+          vn({
+            // @ts-ignore
+            scrollContainer: this.scrollContainer,
+            // @ts-ignore
+            loadMoreItems: this.loadMoreItems,
+            // @ts-ignore
+            offset: this.offset,
+            // @ts-ignore
+            limit: this.limit,
+            // @ts-ignore
+            class: this.class,
+            // @ts-ignore
+            tableData: this.tableData,
+            // @ts-ignore
+            key: this.key,
+            // @ts-ignore
+            items: this.rows,
+            // @ts-ignore
+            selectRow: this.selectRow.bind(this),
+            // @ts-ignore
+            rowItem: this.rowItem,
+            // @ts-ignore
+            skeleton: this.skeleton,
+            columnCount: s
+          })
+        ])
+      ])
+    ]);
+  }
+  /**
+   * Refreshes the list.
+   *
+   * @returns {void}
+   */
+  refresh() {
+    this.list.refresh();
+  }
+}
+const lo = r((e) => new kn(
+  {
+    // @ts-ignore
+    cache: e.cache ?? "list",
+    // @ts-ignore
+    tableData: e.data,
+    // @ts-ignore
+    scrollContainer: e.scrollContainer,
+    // @ts-ignore
+    loadMoreItems: e.loadMoreItems,
+    // @ts-ignore
+    offset: e.offset,
+    // @ts-ignore
+    limit: e.limit,
+    // @ts-ignore
+    class: e.class,
+    // @ts-ignore
+    key: e.key,
+    // @ts-ignore
+    rows: e.rows,
+    // @ts-ignore
+    rowItem: e.rowItem,
+    // @ts-ignore
+    headers: e.headers,
+    // @ts-ignore
+    customHeader: e.customHeader,
+    // @ts-ignore
+    border: e.border,
+    // @ts-ignore
+    emptyState: e.emptyState,
+    // @ts-ignore
+    skeleton: e.skeleton
+  }
+)), Cn = r(({ name: e, email: t }) => o({ class: "min-w-0 flex-auto" }, [
+  k({ class: "text-base font-semibold leading-6 m-0" }, e),
+  k({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, t)
+])), Sn = () => o({ class: "flex items-center gap-x-1.5" }, [
+  o({ class: "flex-none rounded-full bg-emerald-500/20 p-1" }, [
+    o({ class: "h-1.5 w-1.5 rounded-full bg-emerald-500" })
+  ]),
+  k({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), $n = (e) => k({ class: "text-xs leading-5 text-muted-foreground" }, [
+  f("Last seen "),
+  ut({ datetime: e }, "3h ago")
+]), Dn = (e, t) => e === "online" ? Sn() : $n(t), In = r(({ role: e, lastSeen: t, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  k({ class: "text-sm leading-6 m-0" }, e),
+  Dn(s, t)
+])), Tn = (e) => e.split(" ").map((s) => s[0]).join(""), Mn = r((e) => ge({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  o({ class: "flex min-w-0 gap-x-4" }, [
+    // @ts-ignore
+    us({ src: e.image, alt: e.name, fallbackText: Tn(e.name) }),
+    // @ts-ignore
+    Cn({ name: e.name, email: e.email })
+  ]),
+  In({
+    // @ts-ignore
+    role: e.role,
+    // @ts-ignore
+    lastSeen: e.lastSeen,
+    // @ts-ignore
+    status: e.status
+  })
+])), ro = r((e) => new yt({
+  cache: "list",
+  key: "name",
+  // @ts-ignore
+  items: e.users,
+  role: "list",
+  class: "divide-y divide-border",
+  rowItem: Mn
+}));
+class Bn extends C {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.class = "", this.checkCallBack = null;
+  }
+  /**
+   * This will render the component.
+   *
+   * @override
+   * @returns {object}
+   */
+  render() {
+    const t = this.state;
+    return w({
+      class: this.class || "",
+      onState: [
+        ["selected", {
+          selected: !0
+        }],
+        ["active", {
+          active: !0
+        }]
+      ],
+      click: () => {
+        if (t.toggle("active"), !this.checkCallBack)
+          return;
+        const s = t.active ? this : null;
+        this.checkCallBack(s);
+      }
+    }, this.children);
+  }
+  /**
+   * This will set up the states.
+   *
+   * @override
+   * @protected
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      selected: !1,
+      active: !1
+    };
+  }
+  /**
+   * This will update the states.
+   *
+   * @param {object} selected
+   * @returns {void}
+   */
+  update(t) {
+    this.state.set({
+      selected: t,
+      active: t
+    });
+  }
+}
+const Pn = r(({ options: e, click: t }, s) => ({
+  tag: "li",
+  ...{
+    class: `relative flex flex-row w-auto text-left p-0 transition-all cursor-pointer min-w-[48px] option${e ? " sub" : ""}`,
+    click: t
+  },
+  children: s
+})), zn = (e, t = null, s = !1) => [
+  t && o({
+    class: "icon w-12 rounded-md flex items-center justify-center min-w-12",
+    onState: ["selected", {
+      selected: !0
+    }]
+  }, [
+    b({ size: "sm" }, t)
+  ]),
+  V({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, e),
+  s && f(
+    {
+      class: "flex justify-center items-center px-1 transition-all text-muted-foreground mr-2",
+      onState: [
+        ["selected", {
+          rotate: !0
+        }],
+        ["active", {
+          rotate: !0
+        }]
+      ]
+    },
+    [
+      b({ size: "xs" }, g.chevron.single.down)
+    ]
+  )
+];
+class Je extends C {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.label = "", this.icon = null, this.href = null, this.exact = !1, this.options = null, this.content = null, this.callBack = null, this.checkCallBack = null, this.link = null;
+  }
+  /**
+   * This will render the component.
+   *
+   * @override
+   * @returns {object}
+   */
+  render() {
+    const t = !this.options && this.callBack;
+    return Pn(
+      { options: this.options, click: t },
+      [
+        this.addLink()
+      ]
+    );
+  }
+  /**
+   * This will add the link.
+   *
+   * @returns {object}
+   * @protected
+   */
+  addLink() {
+    const t = this.options && this.options.length > 0, s = this.content || zn(String(this.label), this.icon, t);
+    return this.href ? new gt(
+      {
+        class: "flex flex-auto flex-row rounded-md transition-all overflow-x-hidden",
+        cache: "link",
+        href: this.href,
+        activeClass: "selected",
+        exact: this.exact || !1
+      },
+      s
+    ) : new Bn({
+      class: "flex flex-auto flex-row rounded-md transition-all overflow-x-hidden",
+      cache: "link",
+      checkCallBack: this.checkCallBack
+    }, s);
+  }
+  /**
+   * This will check if the link is selected.
+   *
+   * @returns {boolean}
+   */
+  isSelected() {
+    return this.link.state.get("selected");
+  }
+  update(t) {
+    this.link.update(t);
+  }
+}
+const On = r(({ map: e }, t) => X({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: e }, [
+  Ae({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, t)
+]));
+class Nn extends C {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.mobileBorder = !1;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.mapOptions(this.options), s = this.class || "", n = this.mobileBorder ? "border md:border-0 rounded-md" : "";
+    return fe({ class: `navigation flex flex-auto flex-col ${s}` }, [
+      X({
+        class: `relative group flex flex-col gap-2 py-2 px-2 list-none m-0 ${n}`,
+        map: t
+      }),
+      ...this.addSubs()
+    ]);
+  }
+  /**
+   * This will get the options.
+   *
+   * @param {array} options
+   * @returns {array}
+   */
+  mapOptions(t = []) {
+    return [t.map((n) => n.group ? this.addGroup(n) : this.addLink(n)), (n) => n];
+  }
+  /**
+   * This will get the subs.
+   *
+   * @returns {array}
+   */
+  addSubs() {
+    return [];
+  }
+  /**
+   * This will add a group.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addGroup(t) {
+    const s = this.mapOptions(t.options);
+    return On({ map: s }, t.group);
+  }
+  /**
+   * This will add a link.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addLink(t) {
+    return new Je(t);
+  }
+}
+class Ze extends Nn {
+  onCreated() {
+    this.links = [];
+  }
+  /**
+   * This will set up the sub nav.
+   *
+   * @param {object} link
+   * @returns {object}
+   */
+  setupSubNav(t) {
+    return new jn(
+      {
+        parentLink: t,
+        options: t.options
+      }
+    );
+  }
+  /**
+   * This will add a sub navigation.
+   *
+   * @param {object} link
+   * @returns {object}
+   */
+  addSubNav(t) {
+    const s = this.setupSubNav(t);
+    return t.sub = s, s;
+  }
+  /**
+   * This will add a link.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addLink(t) {
+    const s = new Je(t);
+    if (this.links.push(s), !s.options)
+      return s;
+    const n = this.addSubNav(s);
+    return {
+      class: "child-group",
+      link: s,
+      sub: n
+    };
+  }
+}
+const Rn = (e, t) => new RegExp(`${e}($|/|\\.).*`).test(t), Fn = (e, t) => {
+  const s = e.link.panel.pathname;
+  return !s && e.isSelected() ? !0 : e.exact ? t === s : Rn(s, t);
+};
+class jn extends Ze {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    super.declareProps(), this.parentLink = null, this.mainClassName = "";
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = `navigation flex flex-auto flex-col sub ${this.mainClassName || ""}`, s = this.mapOptions(this.options);
+    return fe({ class: t, onState: this.onState() }, [
+      X({ class: "relative group flex flex-col gap-2 py-2 px-0 list-none m-0" }, [...s, ...this.addSubs(), this.addWatcher()])
+    ]);
+  }
+  /**
+   * This will add awatcher to update the links
+   * when the path changes.
+   *
+   * @returns {object}
+   */
+  addWatcher() {
+    return {
+      watch: {
+        value: ["[[path]]", we.data],
+        callBack: this.updateLinks.bind(this)
+      }
+    };
+  }
+  /**
+   * This will set up the on state.
+   *
+   * @returns {array}
+   */
+  onState() {
+    return [
+      ["selected", { active: !0 }],
+      ["active", { active: !0 }]
+    ];
+  }
+  /**
+   * This will set up the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      remotes: [
+        {
+          /**
+           * This will link the state to the parent link.
+           */
+          id: this.parentLink.link.getId(),
+          selected: null,
+          active: null
+        }
+      ]
+    };
+  }
+  /**
+   * This will update the links after setup.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const t = we.data.path;
+    this.updateLinks(t);
+  }
+  /**
+   * This will update the links.
+   *
+   * @param {string} value
+   * @returns {void}
+   */
+  updateLinks(t) {
+    let s = !1;
+    for (const n of this.links)
+      if (n.rendered && (s = Fn(n, t), s === !0))
+        break;
+    this.parentLink.update(s);
+  }
+}
+const Ln = (e) => he({ class: "text-lg ml-2" }, e), Hn = (e) => o({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
+  x({
+    variant: "icon",
+    class: "m-2",
+    click: (t, { state: s }) => s.toggle("open"),
+    icon: g.arrows.left
+  }),
+  e.title && Ln(e.title)
+]), An = () => o({
+  class: `
+			absolute inset-0 bg-black/40 z-[-1] fadeIn
+			transition-opacity duration-200
+		`,
+  click: (e, { state: t }) => t.open = !1
+});
+class En extends C {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.title = "";
+  }
+  /**
+   * This will render the modal component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return o({
+      class: "fixed inset-0 z-50",
+      style: "[[typeClass]]"
+    }, [
+      An(),
+      // Popover Content
+      o({
+        class: `
+					absolute popIn w-auto p-0 bg-popover m-auto shadow-lg rounded-md top-0 bottom-0 left-2 right-2 max-h-[85vh] text-inherit block
+				`,
+        dataSet: ["open", ["expanded", !0, "true"]]
+      }, [
+        o({ class: "flex flex-auto flex-col w-full h-full overflow-y-auto max-h-[85vh] rounded-md bg-popover border" }, [
+          Hn({ title: this.title }),
+          o({ class: "flex flex-auto flex-col" }, this.children)
+        ])
+      ])
+    ]);
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: {
+        id: this.parent.getId(),
+        callBack: (n) => {
+          n === !1 && (document.documentElement.style.overflowY = "auto", this.destroy());
+        }
+      }
+    };
+  }
+  /**
+   * This will add the body scroll lock.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    document.documentElement.style.overflowY = "hidden";
+  }
+  /**
+   * This will override the set up to use the body.
+   *
+   * @param {object} container
+   */
+  setContainer(t) {
+    this.container = app.root;
+  }
+}
+const Xe = () => x({ class: "m-2", variant: "ghost", addState() {
+  return {
+    open: !1
+  };
+}, click: (e, { state: t }) => t.toggle("open") }, [
+  b({}, g.bar.three)
+]), Un = (e) => he({ class: "text-lg ml-2" }, e), Yn = (e) => o({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
+  Xe(),
+  e.title && Un(e.title)
+]), et = (e, t) => {
+  e.forEach((s) => {
+    if (s.options) {
+      et(s.options, t);
+      return;
+    }
+    s.callBack = t;
+  });
+}, tt = (e) => o({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
+  T(
+    "open",
+    (t) => t ? [
+      new En({ title: e.title }, [
+        W(({ state: s }) => {
+          const n = (a) => s.open = !1;
+          return et(e.options, n), new Ze(
+            {
+              options: e.options
+            }
+          );
+        })
+      ])
+    ] : null
+  )
+]), io = r((e) => o({ cache: "mobileNav", class: "inline-flex relative lg:hidden" }, [
+  o([
+    Xe(),
+    tt(e)
+  ])
+])), co = r((e) => o({ cache: "mobileNav", class: "flex flex-auto flex-col w-full relative lg:hidden" }, [
+  o({ class: "flex flex-auto flex-col w-full" }, [
+    Yn(e),
+    tt(e)
+  ])
+])), uo = r((e) => {
+  const t = e.margin || "m-4 ml-0";
+  return e.allowHistory = e.allowHistory === !0, o({ class: `flex-none ${t}` }, [
+    x({ variant: "back", class: "ghost", ...e })
+  ]);
+});
+class Vn extends C {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.class = "";
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return o(
+      {
+        class: this.getClassName(),
+        // @ts-ignore
+        animateIn: this.animateIn ?? null,
+        // @ts-ignore
+        animateOut: this.animateOut ?? null,
+        onSet: ["loading", {
+          loading: !0
+        }]
+      },
+      [
+        this.addBody()
+      ]
+    );
+  }
+  /**
+   * This will get the overlay className.
+   *
+   * @returns {string}
+   */
+  getClassName() {
+    return `absolute flex flex-auto flex-col overlay left-0 top-0 right-0 z-20
+			h-svh max-h-svh min-h-svh
+			bg-background pointer-events-auto
+			lg:left-16
+			will-change-contents ${this.class || ""}`;
+  }
+  /**
+   * This will setup and render the component.
+   *
+   * @param {object} container
+   * @returns {void}
+   */
+  setContainer(t) {
+    this.container = app.root;
+  }
+  /**
+   * This will setup the overlay states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      loading: !1
+    };
+  }
+  /**
+   * This will set the loading state.= to true.
+   *
+   * @returns {void}
+   */
+  addLoading() {
+    this.state.loading = !0;
+  }
+  /**
+   * This will set the loading state to false.
+   *
+   * @returns {void}
+   */
+  removeLoading() {
+    this.state.loading = !1;
+  }
+  /**
+   * This will add the body of the overlay.
+   *
+   * @returns {object}
+   */
+  addBody() {
+    return o({ class: "body fadeIn flex flex-auto flex-col bg-background" }, this.getContents());
+  }
+  /**
+   * This will get the body contents.
+   *
+   * @returns {array|null}
+   */
+  getContents() {
+    return this.children;
+  }
+}
+Ye.addType("dockableOverlay", (e) => {
+  if (!e)
+    return;
+  const t = e.component;
+  t && t.rendered === !0 && t.state.docked === !1 && t.destroy();
+});
+class ho extends Vn {
+  /**
+   * This will stop presistence.
+   *
+   * @returns {void}
+   */
+  onCreated() {
+    this.dockSize = this.maxSize || 1024;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.container;
+    return o(
+      {
+        // @ts-ignore
+        animateIn: this.animateIn ?? null,
+        // @ts-ignore
+        animateOut: this.animateOut ?? null,
+        onState: [
+          ["loading", {
+            loading: !0
+          }],
+          ["docked", (s, n) => {
+            s ? (n.className = this.getDockedClassName(), t.appendChild(n)) : (n.className = this.getClassName(), app.root.appendChild(n));
+          }]
+        ]
+      },
+      [
+        this.addBody()
+      ]
+    );
+  }
+  /**
+   * This will get the docked className.
+   *
+   * @returns {string}
+   */
+  getDockedClassName() {
+    return "flex flex-auto flex-col bg-background flex will-change-contents " + (this.class || "");
+  }
+  /**
+   * This will setup and render the component.
+   *
+   * @param {object} container
+   * @returns {void}
+   */
+  setup(t) {
+    this.container = t, this.initialize();
+  }
+  /**
+   * This will setup the overlay states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      loading: !1,
+      docked: this.canDock()
+    };
+  }
+  /**
+   * This will check the dock size.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    Ye.add(
+      this.container,
+      "dockableOverlay",
+      {
+        component: this
+      }
+    ), this.onResize();
+  }
+  /**
+   * This will setup the overlay events.
+   *
+   * @returns {Array<object>}
+   */
+  setupEvents() {
+    return [
+      ["resize", globalThis, () => this.onResize()]
+    ];
+  }
+  /**
+   * This will check if the overlay can dock.
+   *
+   * @returns {boolean}
+   */
+  canDock() {
+    return globalThis.innerWidth >= this.dockSize;
+  }
+  /**
+   * This will handle the overlay resize.
+   *
+   * @returns {void}
+   */
+  onResize() {
+    this.state.docked = this.canDock();
+  }
+}
+const Wn = r(({ index: e, click: t, state: s }, n) => ge({
+  class: "p-2 cursor-pointer hover:bg-muted/50",
+  onState: [
+    [s, "selectedIndex", {
+      "bg-accent": e,
+      "text-white": e
+    }]
+  ],
+  click: () => t(e)
+}, n)), qn = r(({ selectOption: e, state: t }) => X({
+  class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
+  for: ["filteredOptions", (s, n) => Wn({ index: n, click: e, state: t }, s.label)]
+})), Gn = r((e) => o({ class: "relative flex flex-auto items-center" }, [
+  N({
+    cache: "input",
+    // @ts-ignore
+    class: e.class ?? "",
+    // @ts-ignore
+    placeholder: e.placeholder ?? "Search...",
+    // @ts-ignore
+    bind: e.bind ?? [e.state, "searchQuery"],
+    keyup: (t, s) => {
+      s.state && (s.state.open = !1), typeof e.filterOptions == "function" && e.filterOptions(), s.dropdown && s.dropdown.updatePosition(), e.keyup && e.keyup(t, s);
+    },
+    pointerup: (t, s) => {
+      typeof s.toggleDropdown == "function" && s.toggleDropdown();
+    },
+    keydown: (t) => [
+      // @ts-ignore
+      typeof e.handleKeyDown == "function" && e.handleKeyDown(t)
+    ]
+  }),
+  // @ts-ignore
+  e.icon && o({ class: "absolute flex right-0 mr-2" }, [
+    // @ts-ignore
+    b({ size: "sm" }, e.icon)
+  ])
+])), _n = (e) => o({
+  class: "relative flex fle-auto flex-col",
+  onState: ["open", (t, s, n) => {
+    if (t)
+      return new te({
+        cache: "dropdown",
+        parent: n,
+        button: n.input,
+        size: "xl"
+      }, [
+        qn(e)
+      ]);
+  }]
+}), fo = M(
+  {
+    /**
+     * This will set up the data object.
+     *
+     * @returns {object} - The data object.
+     */
+    setData() {
+      const e = this.options || [];
+      return new z({
+        options: e,
+        filteredOptions: e
+      });
+    },
+    /**
+     * This will set up the state object.
+     *
+     * @returns {object} - The state object.
+     */
+    state() {
+      return {
+        searchQuery: "",
+        selectedIndex: -1,
+        open: !1
+      };
+    },
+    /**
+     * This will set the selected index by query.
+     *
+     * @returns {void}
+     */
+    setSelectedIndexByQuery() {
+      const e = this.data.filteredOptions;
+      let { searchQuery: t } = this.state;
+      t = t.toLowerCase();
+      const s = e.findIndex((n) => n.label.toLowerCase() === t);
+      s >= 0 && (this.state.selectedIndex = s);
+    },
+    /**
+     * This will filter the options.
+     *
+     * @returns {void}
+     */
+    filterOptions() {
+      const e = this.state.searchQuery.toLowerCase();
+      if (e === "" || e.length === 0) {
+        this.data.filteredOptions = this.data.options;
+        return;
+      }
+      const t = this.data.get("options");
+      this.data.filteredOptions = t.filter(
+        (s) => s.label.toLowerCase().includes(e)
+      );
+    },
+    /**
+     * This will get the selected value.
+     *
+     * @returns {object}
+     */
+    getValue() {
+      const { selectedIndex: e } = this.state;
+      return e < 0 ? null : this.data.get(`filteredOptions[${e}]`);
+    },
+    /**
+     * This will select an option.
+     *
+     * @param {number} index - The index of the option.
+     * @returns {void}
+     */
+    selectOption(e) {
+      this.state.selectedIndex = e;
+      const t = this.data.get(`filteredOptions[${e}]`);
+      this.state.searchQuery = t.label, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(t);
+    },
+    /**
+     * Toggles the dropdown open state.
+     */
+    toggleDropdown() {
+      this.state.toggle("open"), this.state.open && this.setSelectedIndexByQuery();
+    },
+    /**
+     * This will handle key down events.
+     *
+     * @param {object} event - The event object.
+     * @returns {void}
+     */
+    handleKeyDown(e) {
+      const t = this.data.filteredOptions, { selectedIndex: s } = this.state;
+      e.key === "ArrowDown" ? (e.preventDefault(), this.state.selectedIndex = Math.min(s + 1, t.length - 1)) : e.key === "ArrowUp" ? (e.preventDefault(), this.state.selectedIndex = Math.max(s - 1, 0)) : e.key === "Enter" && s >= 0 && (e.preventDefault(), this.selectOption(s));
+    },
+    /**
+     * This will render the component.
+     *
+     * @returns {object} - The rendered component.
+     */
+    render() {
+      return o({ class: "relative w-full max-w-md" }, [
+        Gn({
+          // @ts-ignore
+          state: this.state,
+          // @ts-ignore
+          icon: this.icon,
+          // @ts-ignore
+          placeholder: this.placeholder,
+          // @ts-ignore
+          filterOptions: this.filterOptions.bind(this),
+          // @ts-ignore
+          handleKeyDown: this.handleKeyDown.bind(this)
+        }),
+        _n({
+          // @ts-ignore
+          state: this.state,
+          // @ts-ignore
+          setSelected: this.setSelectedIndexByQuery.bind(this),
+          // @ts-ignore
+          selectOption: this.selectOption.bind(this)
+        })
+      ]);
+    }
+  }
+), go = r((e) => {
+  const t = e.icon ?? g.magnifyingGlass.default;
+  return o({
+    // @ts-ignore
+    class: `relative flex items-center w-full rounded-xl bg-muted/30 focus-within:ring-2 focus-within:ring-ring transition-all ${e.containerClass || ""}`
+  }, [
+    o({ class: "absolute left-4 flex items-center pointer-events-none text-muted-foreground" }, [
+      b({ size: "sm" }, t)
+    ]),
+    p({
+      type: "text",
+      // @ts-ignore
+      cache: e.cache ?? "input",
+      // @ts-ignore
+      class: `w-full bg-transparent border-none outline-none pl-12 pr-4 py-4 text-base text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-0 ${e.class || ""}`,
+      // @ts-ignore
+      placeholder: e.placeholder ?? "Search...",
+      // @ts-ignore
+      bind: e.bind,
+      // @ts-ignore
+      value: e.value,
+      // @ts-ignore
+      keyup: e.keyup,
+      // @ts-ignore
+      keydown: e.keydown,
+      // @ts-ignore
+      input: e.input,
+      // @ts-ignore
+      change: e.change,
+      // @ts-ignore
+      focus: e.focus,
+      // @ts-ignore
+      blur: e.blur
+    })
+  ]);
+});
+class Kn extends C {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.class = "";
+  }
+  /**
+   * This will render the page.
+   *
+   * @returns {object}
+   */
+  render() {
+    return o({ class: `${this.class || ""}` }, this.children);
+  }
+}
+class Qn extends Kn {
+  /**
+   * This will be called every time the route
+   * is activated.
+   *
+   * @param {object} params
+   */
+  update(t) {
+  }
+}
+const Jn = r((e, t) => (e.class = "basic-page pt-[80px] sm:pt-0 flex flex-auto flex-col " + (e.class || ""), {
+  tag: "section",
+  ...e,
+  children: t
+})), Zn = r(({ title: e, description: t }) => Z({ class: "sm:py-8 px-6 md:px-5 flex flex-col" }, [
+  ht({ class: "scroll-m-20 text-3xl font-bold tracking-tight" }, e),
+  t && k({ class: "text-base text-muted-foreground py-2 max-w-[700px]" }, t)
+]));
+class mo extends Qn {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    super.declareProps(), this.title = "", this.description = "";
+  }
+  /**
+   * This will render the page.
+   *
+   * @returns {object}
+   */
+  render() {
+    return Jn([
+      Zn({
+        title: this.title,
+        description: this.description
+      }),
+      wt(this.children)
+    ]);
+  }
+}
+export {
+  $a as $,
+  Ra as A,
+  uo as B,
+  Hs as C,
+  Qe as D,
+  Ea as E,
+  no as F,
+  ho as G,
+  Ja as H,
+  oo as I,
+  ga as J,
+  ao as K,
+  ha as L,
+  Ia as M,
+  Ge as N,
+  Fa as O,
+  La as P,
+  ja as Q,
+  Zt as R,
+  Kt as S,
+  Ha as T,
+  Mt as U,
+  Gt as V,
+  _t as W,
+  Qt as X,
+  j as Y,
+  mo as Z,
+  bn as _,
+  us as a,
+  P as a$,
+  ie as a0,
+  Ht as a1,
+  _a as a2,
+  Ze as a3,
+  N as a4,
+  Tt as a5,
+  ua as a6,
+  Ka as a7,
+  Je as a8,
+  Jn as a9,
+  fo as aA,
+  Gn as aB,
+  Ma as aC,
+  go as aD,
+  Ua as aE,
+  jn as aF,
+  pe as aG,
+  fa as aH,
+  ma as aI,
+  qa as aJ,
+  pa as aK,
+  so as aL,
+  Yn as aM,
+  Ga as aN,
+  ia as aO,
+  Na as aP,
+  b as aQ,
+  Sa as aR,
+  ro as aS,
+  Mn as aT,
+  Ve as aU,
+  O as aV,
+  va as aW,
+  Is as aX,
+  qt as aY,
+  la as aZ,
+  oa as a_,
+  Se as aa,
+  Cs as ab,
+  io as ac,
+  co as ad,
+  js as ae,
+  wa as af,
+  Xe as ag,
+  Bn as ah,
+  Nn as ai,
+  On as aj,
+  En as ak,
+  Wa as al,
+  ka as am,
+  Vn as an,
+  Kn as ao,
+  Ca as ap,
+  Ss as aq,
+  te as ar,
+  Hn as as,
+  Pa as at,
+  xa as au,
+  sn as av,
+  Ta as aw,
+  za as ax,
+  Oa as ay,
+  lo as az,
+  An as b,
+  Va as b0,
+  ra as c,
+  Qn as d,
+  Qa as e,
+  x as f,
+  Os as g,
+  It as h,
+  Rt as i,
+  xn as j,
+  da as k,
+  Ba as l,
+  ca as m,
+  Da as n,
+  Ya as o,
+  Za as p,
+  $s as q,
+  Xa as r,
+  pn as s,
+  ba as t,
+  eo as u,
+  to as v,
+  ya as w,
+  oe as x,
+  Rs as y,
+  Aa as z
+};