@speckle/ui-components 2.16.0 → 2.16.1-alpha10

package/dist/lib.js

@@ -1,19 +1,22 @@
-import { defineComponent as A, resolveDynamicComponent as H, computed as r, openBlock as a, createBlock as L, normalizeClass as k, withCtx as _, createCommentVNode as I, renderSlot as z, createTextVNode as M, createElementBlock as m, createElementVNode as i, createVNode as P, Transition as ge, unref as l, toDisplayString as B, toRefs as ae, Fragment as W, renderList as G, ref as O, onMounted as Y, mergeProps as oe, withDirectives as ne, isRef as ve, vModelText as Ae, useSlots as be, vModelDynamic as Xe, pushScopeId as Ne, popScopeId as Je, watch as le, withModifiers as ye, normalizeStyle as fe, onBeforeUnmount as Me } from "vue";
-import { isObjectLike as Le, clamp as je, isString as ie, isUndefined as Q, isArray as q, debounce as ze, throttle as Qe, noop as Ye } from "lodash";
-import { ArrowPathIcon as Ze, ChevronUpIcon as De, ChevronDownIcon as et, XMarkIcon as tt, MagnifyingGlassIcon as st, CheckIcon as nt, Bars3Icon as lt, Squares2X2Icon as at } from "@heroicons/vue/24/solid";
-import { CheckCircleIcon as ot, XCircleIcon as rt, ExclamationCircleIcon as it, InformationCircleIcon as ut, XMarkIcon as ct, CheckIcon as dt, ExclamationTriangleIcon as ft } from "@heroicons/vue/24/outline";
-import { XMarkIcon as ue, CheckIcon as pt, CheckCircleIcon as Te, ExclamationCircleIcon as xe, EnvelopeIcon as ht, KeyIcon as mt, XCircleIcon as gt, InformationCircleIcon as vt } from "@heroicons/vue/20/solid";
-import { useField as ke } from "vee-validate";
-import { nanoid as Ce } from "nanoid";
-import { isNullOrUndefined as bt, SourceApps as yt, getClientOperatingSystem as xt, OperatingSystem as pe } from "@speckle/shared";
-import { useResizeObserver as kt, useMutationObserver as Ct, onKeyDown as wt, isClient as we, computedAsync as $t } from "@vueuse/core";
-import { Listbox as St, ListboxLabel as It, ListboxButton as Bt, ListboxOptions as _t, ListboxOption as Pt, TransitionRoot as Lt, Dialog as jt, TransitionChild as Ve, DialogPanel as Vt, Disclosure as Ot, DisclosureButton as At, DisclosurePanel as Mt, Menu as zt, MenuButton as Dt, MenuItems as Tt, MenuItem as Rt } from "@headlessui/vue";
-import { directive as Re } from "vue-tippy";
-import Ft from "v3-infinite-loading";
-const Et = {
+var bt = Object.defineProperty;
+var yt = (e, t, s) => t in e ? bt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var Q = (e, t, s) => (yt(e, typeof t != "symbol" ? t + "" : t, s), s);
+import { defineComponent as A, resolveDynamicComponent as Z, computed as u, openBlock as a, createBlock as P, normalizeClass as x, withCtx as _, createCommentVNode as S, renderSlot as R, createTextVNode as M, createElementBlock as p, createElementVNode as v, createVNode as V, Transition as Ae, unref as n, toDisplayString as L, toRefs as N, Fragment as D, renderList as q, ref as O, onMounted as se, mergeProps as ye, withDirectives as de, isRef as $e, vModelText as Me, useSlots as Te, vModelDynamic as xt, pushScopeId as kt, popScopeId as wt, watch as te, withModifiers as le, normalizeStyle as fe, useModel as Je, onBeforeUnmount as Ye, getCurrentInstance as Ct, inject as $t, withKeys as ie, mergeModels as Ge, defineAsyncComponent as It } from "vue";
+import { isObjectLike as _e, clamp as Xe, isArray as X, isString as Ce, isUndefined as ce, debounce as Fe, throttle as et, noop as St, uniq as Bt, intersection as Vt, difference as Lt } from "lodash";
+import { ArrowPathIcon as tt, ExclamationCircleIcon as _t, ChevronUpIcon as st, ChevronDownIcon as zt, XMarkIcon as Re, MagnifyingGlassIcon as Pt, CheckIcon as lt, Bars3Icon as jt, Squares2X2Icon as Ot, UserCircleIcon as At } from "@heroicons/vue/24/solid";
+import { CheckCircleIcon as Mt, XCircleIcon as Tt, ExclamationCircleIcon as Ft, InformationCircleIcon as Rt, XMarkIcon as Et, CheckIcon as Ut, ExclamationTriangleIcon as Dt } from "@heroicons/vue/24/outline";
+import { XMarkIcon as pe, CheckIcon as nt, CheckCircleIcon as at, ExclamationCircleIcon as Ie, EnvelopeIcon as Wt, KeyIcon as qt, XCircleIcon as Ht, InformationCircleIcon as Kt } from "@heroicons/vue/20/solid";
+import { useField as Se } from "vee-validate";
+import { nanoid as Ee } from "nanoid";
+import { isNullOrUndefined as Gt, SourceApps as Xt, getClientOperatingSystem as Zt, OperatingSystem as ze, md5 as Qt } from "@speckle/shared";
+import { useResizeObserver as Nt, useMutationObserver as Jt, onKeyDown as Yt, isClient as Ue, computedAsync as es, useFocus as ts, useDropZone as ss } from "@vueuse/core";
+import { Listbox as ls, ListboxLabel as ns, ListboxButton as as, ListboxOptions as os, ListboxOption as rs, Switch as is, TransitionRoot as ot, Dialog as us, TransitionChild as Ze, DialogPanel as cs, Disclosure as ds, DisclosureButton as fs, DisclosurePanel as ps, Menu as hs, MenuButton as ms, MenuItems as vs, MenuItem as gs, Combobox as bs, ComboboxOptions as ys, ComboboxOption as xs } from "@headlessui/vue";
+import { directive as rt } from "vue-tippy";
+import ks from "v3-infinite-loading";
+const ws = {
   key: 2,
   style: { margin: "0 !important", width: "0.01px" }
-}, Wt = /* @__PURE__ */ A({
+}, Cs = /* @__PURE__ */ A({
   __name: "Button",
   props: {
     /**
@@ -140,114 +143,114 @@ const Et = {
     }
   },
   emits: ["click"],
-  setup(e, { emit: n }) {
-    const t = e, s = H("NuxtLink"), o = H("RouterLink"), c = r(() => t.linkComponent ? t.linkComponent : t.external ? "a" : Le(s) ? s : Le(o) ? o : "a"), d = r(() => {
-      if (!t.to)
-        return t.submit ? "submit" : "button";
-    }), f = r(() => t.disabled || t.loading), x = r(() => t.loading ? Ze : t.iconLeft), p = r(() => {
+  setup(e, { emit: t }) {
+    const s = e, l = Z("NuxtLink"), o = Z("RouterLink"), r = u(() => s.linkComponent ? s.linkComponent : s.external ? "a" : _e(l) ? l : _e(o) ? o : "a"), d = u(() => {
+      if (!s.to)
+        return s.submit ? "submit" : "button";
+    }), i = u(() => s.disabled || s.loading), f = u(() => s.loading ? tt : s.iconLeft), c = u(() => {
       const g = [];
-      if (g.push("border-2"), f.value)
+      if (g.push("border-2"), i.value)
         g.push(
-          t.outlined ? "border-foreground-disabled" : "bg-foundation-disabled border-transparent"
+          s.outlined ? "border-foreground-disabled" : "bg-foundation-disabled border-transparent"
         );
       else
-        switch (t.color) {
+        switch (s.color) {
           case "invert":
             g.push(
-              t.outlined ? "border-foundation dark:border-foreground" : "bg-foundation dark:bg-foreground border-transparent"
+              s.outlined ? "border-foundation dark:border-foreground" : "bg-foundation dark:bg-foreground border-transparent"
             );
             break;
           case "card":
             g.push(
-              t.outlined ? "border-foundation-2 shadow" : "bg-foundation-2 dark:bg-foundation-2 border-foundation shadow"
+              s.outlined ? "border-foundation-2 shadow" : "bg-foundation-2 dark:bg-foundation-2 border-foundation shadow"
             );
             break;
           case "danger":
-            g.push(t.outlined ? "border-danger" : "bg-danger border-danger");
+            g.push(s.outlined ? "border-danger" : "bg-danger border-danger");
             break;
           case "secondary":
             g.push(
-              t.outlined ? "border-foundation" : "bg-foundation border-foundation-2"
+              s.outlined ? "border-foundation" : "bg-foundation border-foundation-2"
             );
             break;
           case "warning":
-            g.push(t.outlined ? "border-warning" : "bg-warning border-warning");
+            g.push(s.outlined ? "border-warning" : "bg-warning border-warning");
             break;
           case "info":
-            g.push(t.outlined ? "border-info" : "bg-info border-info");
+            g.push(s.outlined ? "border-info" : "bg-info border-info");
             break;
           case "success":
-            g.push(t.outlined ? "border-success" : "bg-success border-success");
+            g.push(s.outlined ? "border-success" : "bg-success border-success");
             break;
           case "default":
           default:
             g.push(
-              t.outlined ? "border-primary hover:border-primary-focus" : "bg-primary hover:bg-primary-focus border-transparent"
+              s.outlined ? "border-primary hover:border-primary-focus" : "bg-primary hover:bg-primary-focus border-transparent"
             );
             break;
         }
       return g.join(" ");
-    }), b = r(() => {
+    }), C = u(() => {
       const g = [];
-      if (!t.text && !t.link)
-        if (f.value)
+      if (!s.text && !s.link)
+        if (i.value)
           g.push(
-            (t.outlined, "text-foreground-disabled")
+            (s.outlined, "text-foreground-disabled")
           );
         else
-          switch (t.color) {
+          switch (s.color) {
             case "invert":
               g.push(
-                t.outlined ? "text-foundation dark:text-foreground" : "text-primary"
+                s.outlined ? "text-foundation dark:text-foreground" : "text-primary"
               );
               break;
             case "card":
-              g.push((t.outlined, "text-foreground"));
+              g.push((s.outlined, "text-foreground"));
               break;
             case "danger":
               g.push(
-                t.outlined ? "text-danger" : "text-foundation dark:text-foreground"
+                s.outlined ? "text-danger" : "text-foundation dark:text-foreground"
               );
               break;
             case "warning":
               g.push(
-                t.outlined ? "text-warning" : "text-foundation dark:text-foreground"
+                s.outlined ? "text-warning" : "text-foundation dark:text-foreground"
               );
               break;
             case "info":
               g.push(
-                t.outlined ? "text-info" : "text-foundation dark:text-foreground"
+                s.outlined ? "text-info" : "text-foundation dark:text-foreground"
               );
               break;
             case "success":
               g.push(
-                t.outlined ? "text-success" : "text-foundation dark:text-foreground"
+                s.outlined ? "text-success" : "text-foundation dark:text-foreground"
               );
               break;
             case "secondary":
               g.push(
-                (t.outlined, "text-foreground hover:text-primary")
+                (s.outlined, "text-foreground hover:text-primary")
               );
               break;
             case "default":
             default:
               g.push(
-                t.outlined ? "text-primary hover:text-primary-focus" : "text-foundation dark:text-foreground"
+                s.outlined ? "text-primary hover:text-primary-focus" : "text-foundation dark:text-foreground"
               );
               break;
           }
       else
-        f.value ? g.push("text-foreground-disabled") : t.color === "invert" ? g.push(
+        i.value ? g.push("text-foreground-disabled") : s.color === "invert" ? g.push(
           "text-foundation hover:text-foundation-2 dark:text-foreground dark:hover:text-foreground"
-        ) : t.color === "secondary" ? g.push("text-foreground-2 hover:text-primary-focus") : t.color === "success" ? g.push("text-success") : t.color === "warning" ? g.push("text-warning") : t.color === "info" ? g.push("text-info") : t.color === "danger" ? g.push("text-danger") : g.push("text-primary hover:text-primary-focus");
+        ) : s.color === "secondary" ? g.push("text-foreground-2 hover:text-primary-focus") : s.color === "success" ? g.push("text-success") : s.color === "warning" ? g.push("text-warning") : s.color === "info" ? g.push("text-info") : s.color === "danger" ? g.push("text-danger") : g.push("text-primary hover:text-primary-focus");
       return g.join(" ");
-    }), y = r(() => {
+    }), b = u(() => {
       const g = [];
-      return g.push(t.rounded ? "rounded-full" : "rounded-md"), g.join(" ");
-    }), h = r(() => {
+      return g.push(s.rounded ? "rounded-full" : "rounded-md"), g.join(" ");
+    }), h = u(() => {
       const g = [];
-      if (!f.value)
-        switch (t.color) {
+      if (!i.value)
+        switch (s.color) {
           case "invert":
             g.push("hover:ring-4 ring-white/50");
             break;
@@ -269,8 +272,8 @@ const Et = {
             break;
         }
       return g.join(" ");
-    }), C = r(() => {
-      switch (t.size) {
+    }), k = u(() => {
+      switch (s.size) {
         case "xs":
           return "h-5 text-xs font-medium xxx-tracking-wide";
         case "sm":
@@ -283,8 +286,8 @@ const Et = {
         case "base":
           return "h-8 text-base font-medium xxx-tracking-wide";
       }
-    }), u = r(() => {
-      switch (t.size) {
+    }), m = u(() => {
+      switch (s.size) {
         case "xs":
           return "px-1";
         case "sm":
@@ -297,30 +300,30 @@ const Et = {
         case "base":
           return "px-3";
       }
-    }), j = r(() => {
+    }), z = u(() => {
       const g = [];
-      return t.fullWidth && g.push("w-full"), f.value && g.push("cursor-not-allowed"), g.join(" ");
-    }), v = r(() => {
+      return s.fullWidth && g.push("w-full"), i.value && g.push("cursor-not-allowed"), g.join(" ");
+    }), w = u(() => {
       const g = [];
-      return !f.value && !t.link && !t.text && g.push("active:scale-[0.97]"), !f.value && t.link && g.push(
+      return !i.value && !s.link && !s.text && g.push("active:scale-[0.97]"), !i.value && s.link && g.push(
         "underline decoration-transparent decoration-2 underline-offset-4	hover:decoration-inherit"
       ), g.join(" ");
-    }), w = r(() => {
-      const g = t.link || t.text;
+    }), $ = u(() => {
+      const g = s.link || s.text;
       return [
         "transition inline-flex justify-center items-center space-x-2 outline-none select-none",
-        j.value,
+        z.value,
+        k.value,
         C.value,
-        b.value,
-        g ? "" : p.value,
-        g ? "" : y.value,
+        g ? "" : c.value,
+        g ? "" : b.value,
         g ? "" : h.value,
-        t.link ? "" : u.value,
-        v.value
+        s.link ? "" : m.value,
+        w.value
       ].join(" ");
-    }), S = r(() => {
+    }), j = u(() => {
       const g = [""];
-      switch (t.loading && g.push("animate-spin"), t.size) {
+      switch (s.loading && g.push("animate-spin"), s.size) {
         case "xs":
           g.push("h-3 w-3");
           break;
@@ -339,46 +342,46 @@ const Et = {
           break;
       }
       return g.join(" ");
-    }), R = (g) => {
-      if (f.value) {
+    }), E = (g) => {
+      if (i.value) {
         g.preventDefault(), g.stopPropagation(), g.stopImmediatePropagation();
         return;
       }
-      n("click", g);
+      t("click", g);
     };
-    return (g, T) => (a(), L(H(e.to ? c.value : "button"), {
+    return (g, T) => (a(), P(Z(e.to ? r.value : "button"), {
       href: e.to,
       to: e.to,
       type: d.value,
       external: e.external,
-      class: k(w.value),
-      disabled: f.value,
+      class: x($.value),
+      disabled: i.value,
       role: "button",
-      onClick: R
+      onClick: E
     }, {
       default: _(() => [
-        x.value ? (a(), L(H(x.value), {
+        f.value ? (a(), P(Z(f.value), {
           key: 0,
-          class: k(`${S.value} ${e.hideText ? "" : "mr-2"}`)
-        }, null, 8, ["class"])) : I("", !0),
-        e.hideText ? (a(), m("div", Et, "   ")) : z(g.$slots, "default", { key: 1 }, () => [
+          class: x(`${j.value} ${e.hideText ? "" : "mr-2"}`)
+        }, null, 8, ["class"])) : S("", !0),
+        e.hideText ? (a(), p("div", ws, "   ")) : R(g.$slots, "default", { key: 1 }, () => [
           M("Button")
         ], !0),
-        e.iconRight || !e.loading ? (a(), L(H(e.iconRight), {
+        e.iconRight || !e.loading ? (a(), P(Z(e.iconRight), {
           key: 3,
-          class: k(`${S.value} ${e.hideText ? "" : "ml-2"}`)
-        }, null, 8, ["class"])) : I("", !0)
+          class: x(`${j.value} ${e.hideText ? "" : "ml-2"}`)
+        }, null, 8, ["class"])) : S("", !0)
       ]),
       _: 3
     }, 8, ["href", "to", "type", "external", "class", "disabled"]));
   }
 });
-const Fe = (e, n) => {
-  const t = e.__vccOpts || e;
-  for (const [s, o] of n)
-    t[s] = o;
-  return t;
-}, re = /* @__PURE__ */ Fe(Wt, [["__scopeId", "data-v-38aa371e"]]), Ut = /* @__PURE__ */ A({
+const it = (e, t) => {
+  const s = e.__vccOpts || e;
+  for (const [l, o] of t)
+    s[l] = o;
+  return s;
+}, ne = /* @__PURE__ */ it(Cs, [["__scopeId", "data-v-38aa371e"]]), $s = /* @__PURE__ */ A({
   __name: "Link",
   props: {
     to: {
@@ -427,15 +430,15 @@ const Fe = (e, n) => {
     }
   },
   emits: ["click"],
-  setup(e, { emit: n }) {
-    const t = e, s = (o) => {
-      if (t.disabled) {
+  setup(e, { emit: t }) {
+    const s = e, l = (o) => {
+      if (s.disabled) {
         o.preventDefault(), o.stopPropagation(), o.stopImmediatePropagation();
         return;
       }
-      n("click", o);
+      t("click", o);
     };
-    return (o, c) => (a(), L(re, {
+    return (o, r) => (a(), P(ne, {
       link: "",
       to: e.to,
       external: e.external,
@@ -446,10 +449,10 @@ const Fe = (e, n) => {
       "icon-right": e.iconRight,
       "hide-text": e.hideText,
       role: "link",
-      onClickCapture: s
+      onClickCapture: l
     }, {
       default: _(() => [
-        z(o.$slots, "default", {}, () => [
+        R(o.$slots, "default", {}, () => [
           M("Link")
         ])
       ]),
@@ -457,43 +460,43 @@ const Fe = (e, n) => {
     }, 8, ["to", "external", "disabled", "size", "foreground-link", "icon-left", "icon-right", "hide-text"]));
   }
 });
-var ee = /* @__PURE__ */ ((e) => (e[e.Success = 0] = "Success", e[e.Warning = 1] = "Warning", e[e.Danger = 2] = "Danger", e[e.Info = 3] = "Info", e))(ee || {});
-const qt = {
+var ve = /* @__PURE__ */ ((e) => (e[e.Success = 0] = "Success", e[e.Warning = 1] = "Warning", e[e.Danger = 2] = "Danger", e[e.Info = 3] = "Info", e))(ve || {});
+const Is = {
   "aria-live": "assertive",
   class: "pointer-events-none fixed inset-0 flex items-end px-4 py-6 mt-10 sm:items-start sm:p-6 z-50"
-}, Ht = { class: "flex w-full flex-col items-center space-y-4 sm:items-end" }, Gt = {
+}, Ss = { class: "flex w-full flex-col items-center space-y-4 sm:items-end" }, Bs = {
   key: 0,
   class: "pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-foundation text-foreground shadow-lg ring-1 ring-primary-muted ring-opacity-5"
-}, Kt = { class: "p-4" }, Xt = { class: "flex items-start" }, Nt = { class: "flex-shrink-0" }, Jt = { class: "ml-2 w-0 flex-1 flex flex-col" }, Qt = {
+}, Vs = { class: "p-4" }, Ls = { class: "flex items-start" }, _s = { class: "flex-shrink-0" }, zs = { class: "ml-2 w-0 flex-1 flex flex-col" }, Ps = {
   key: 0,
   class: "text-foreground font-bold"
-}, Yt = {
+}, js = {
   key: 1,
   class: "label label--light text-foreground-2"
-}, Zt = {
+}, Os = {
   key: 2,
   class: "flex justify-start mt-2"
-}, es = /* @__PURE__ */ i("span", { class: "sr-only" }, "Close", -1), xl = /* @__PURE__ */ A({
+}, As = /* @__PURE__ */ v("span", { class: "sr-only" }, "Close", -1), za = /* @__PURE__ */ A({
   __name: "ToastRenderer",
   props: {
     notification: null
   },
   emits: ["update:notification"],
-  setup(e, { emit: n }) {
-    const t = e, s = r(
+  setup(e, { emit: t }) {
+    const s = e, l = u(
       () => {
-        var d, f;
-        return !((d = t.notification) != null && d.description) && !((f = t.notification) != null && f.cta);
+        var d, i;
+        return !((d = s.notification) != null && d.description) && !((i = s.notification) != null && i.cta);
       }
     ), o = () => {
-      n("update:notification", null);
-    }, c = (d) => {
-      var f, x, p;
-      (p = (x = (f = t.notification) == null ? void 0 : f.cta) == null ? void 0 : x.onClick) == null || p.call(x, d), o();
+      t("update:notification", null);
+    }, r = (d) => {
+      var i, f, c;
+      (c = (f = (i = s.notification) == null ? void 0 : i.cta) == null ? void 0 : f.onClick) == null || c.call(f, d), o();
     };
-    return (d, f) => (a(), m("div", qt, [
-      i("div", Ht, [
-        P(ge, {
+    return (d, i) => (a(), p("div", Is, [
+      v("div", Ss, [
+        V(Ae, {
           "enter-active-class": "transform ease-out duration-300 transition",
           "enter-from-class": "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2",
           "enter-to-class": "translate-y-0 opacity-100 sm:translate-x-0",
@@ -502,55 +505,55 @@ const qt = {
           "leave-to-class": "opacity-0"
         }, {
           default: _(() => [
-            e.notification ? (a(), m("div", Gt, [
-              i("div", Kt, [
-                i("div", Xt, [
-                  i("div", Nt, [
-                    e.notification.type === l(ee).Success ? (a(), L(l(ot), {
+            e.notification ? (a(), p("div", Bs, [
+              v("div", Vs, [
+                v("div", Ls, [
+                  v("div", _s, [
+                    e.notification.type === n(ve).Success ? (a(), P(n(Mt), {
                       key: 0,
                       class: "h-6 w-6 text-success",
                       "aria-hidden": "true"
-                    })) : e.notification.type === l(ee).Danger ? (a(), L(l(rt), {
+                    })) : e.notification.type === n(ve).Danger ? (a(), P(n(Tt), {
                       key: 1,
                       class: "h-6 w-6 text-danger",
                       "aria-hidden": "true"
-                    })) : e.notification.type === l(ee).Warning ? (a(), L(l(it), {
+                    })) : e.notification.type === n(ve).Warning ? (a(), P(n(Ft), {
                       key: 2,
                       class: "h-6 w-6 text-warning",
                       "aria-hidden": "true"
-                    })) : e.notification.type === l(ee).Info ? (a(), L(l(ut), {
+                    })) : e.notification.type === n(ve).Info ? (a(), P(n(Rt), {
                       key: 3,
                       class: "h-6 w-6 text-info",
                       "aria-hidden": "true"
-                    })) : I("", !0)
+                    })) : S("", !0)
                   ]),
-                  i("div", Jt, [
-                    e.notification.title ? (a(), m("p", Qt, B(e.notification.title), 1)) : I("", !0),
-                    e.notification.description ? (a(), m("p", Yt, B(e.notification.description), 1)) : I("", !0),
-                    e.notification.cta ? (a(), m("div", Zt, [
-                      P(Ut, {
+                  v("div", zs, [
+                    e.notification.title ? (a(), p("p", Ps, L(e.notification.title), 1)) : S("", !0),
+                    e.notification.description ? (a(), p("p", js, L(e.notification.description), 1)) : S("", !0),
+                    e.notification.cta ? (a(), p("div", Os, [
+                      V($s, {
                         to: e.notification.cta.url,
                         class: "label",
                         primary: "",
-                        onClick: c
+                        onClick: r
                       }, {
                         default: _(() => [
-                          M(B(e.notification.cta.title), 1)
+                          M(L(e.notification.cta.title), 1)
                         ]),
                         _: 1
                       }, 8, ["to"])
-                    ])) : I("", !0)
+                    ])) : S("", !0)
                   ]),
-                  i("div", {
-                    class: k(["ml-4 flex flex-shrink-0", { "self-center": s.value }])
+                  v("div", {
+                    class: x(["ml-4 flex flex-shrink-0", { "self-center": l.value }])
                   }, [
-                    i("button", {
+                    v("button", {
                       type: "button",
                       class: "inline-flex rounded-md bg-foundation text-foreground-2 hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
                       onClick: o
                     }, [
-                      es,
-                      P(l(ue), {
+                      As,
+                      V(n(pe), {
                         class: "h-6 w-6",
                         "aria-hidden": "true"
                       })
@@ -558,20 +561,20 @@ const qt = {
                   ], 2)
                 ])
               ])
-            ])) : I("", !0)
+            ])) : S("", !0)
           ]),
           _: 1
         })
       ])
     ]));
   }
-}), ts = /* @__PURE__ */ i("circle", {
+}), Ms = /* @__PURE__ */ v("circle", {
   cx: "4",
   cy: "4",
   r: "3"
-}, null, -1), ss = [
-  ts
-], ns = /* @__PURE__ */ A({
+}, null, -1), Ts = [
+  Ms
+], De = /* @__PURE__ */ A({
   __name: "Badge",
   props: {
     size: null,
@@ -583,119 +586,119 @@ const qt = {
     clickableIcon: { type: Boolean }
   },
   emits: ["click-icon"],
-  setup(e, { emit: n }) {
-    const t = e, s = r(
-      () => t.colorClasses || "bg-blue-100 text-blue-800"
-    ), o = r(
-      () => t.dotIconColorClasses || "text-blue-400"
-    ), c = r(() => {
-      const p = [
+  setup(e, { emit: t }) {
+    const s = e, l = u(
+      () => s.colorClasses || "bg-blue-100 text-blue-800"
+    ), o = u(
+      () => s.dotIconColorClasses || "text-blue-400"
+    ), r = u(() => {
+      const c = [
         "inline-flex items-center",
-        s.value,
-        t.size === "lg" ? "px-3 py-0.5 label" : "px-2.5 py-0.5 caption font-medium"
+        l.value,
+        s.size === "lg" ? "px-3 py-0.5 label" : "px-2.5 py-0.5 caption font-medium"
       ];
-      return t.rounded ? (p.push("rounded"), p.push(
-        t.size === "lg" ? "px-2 py-0.5 label" : "px-2.5 py-0.5 caption font-medium"
-      )) : (p.push("rounded-full"), p.push(
-        t.size === "lg" ? "px-2.5 py-0.5 label" : "px-2.5 py-0.5 caption font-medium"
-      )), p.join(" ");
-    }), d = r(() => {
-      const p = [
+      return s.rounded ? (c.push("rounded"), c.push(
+        s.size === "lg" ? "px-2 py-0.5 label" : "px-2.5 py-0.5 caption font-medium"
+      )) : (c.push("rounded-full"), c.push(
+        s.size === "lg" ? "px-2.5 py-0.5 label" : "px-2.5 py-0.5 caption font-medium"
+      )), c.join(" ");
+    }), d = u(() => {
+      const c = [
         "mt-0.5 ml-0.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full focus:outline-none"
       ];
-      return t.clickableIcon ? p.push("cursor-pointer") : p.push("cursor-default"), p.join(" ");
-    }), f = r(() => [
+      return s.clickableIcon ? c.push("cursor-pointer") : c.push("cursor-default"), c.join(" ");
+    }), i = u(() => [
       "-ml-0.5 mr-1.5 h-2 w-2",
       o.value
-    ].join(" ")), x = (p) => {
-      if (!t.clickableIcon) {
-        p.stopPropagation(), p.stopImmediatePropagation(), p.preventDefault();
+    ].join(" ")), f = (c) => {
+      if (!s.clickableIcon) {
+        c.stopPropagation(), c.stopImmediatePropagation(), c.preventDefault();
         return;
       }
-      n("click-icon", p);
+      t("click-icon", c);
     };
-    return (p, b) => (a(), m("span", {
-      class: k(c.value)
+    return (c, C) => (a(), p("span", {
+      class: x(r.value)
     }, [
-      e.dot ? (a(), m("svg", {
+      e.dot ? (a(), p("svg", {
         key: 0,
-        class: k(f.value),
+        class: x(i.value),
         fill: "currentColor",
         viewBox: "0 0 8 8"
-      }, ss, 2)) : I("", !0),
-      z(p.$slots, "default", {}, () => [
+      }, Ts, 2)) : S("", !0),
+      R(c.$slots, "default", {}, () => [
         M("Badge")
       ]),
-      e.iconLeft ? (a(), m("button", {
+      e.iconLeft ? (a(), p("button", {
         key: 1,
-        class: k(d.value),
-        onClick: b[0] || (b[0] = (y) => x(y))
+        class: x(d.value),
+        onClick: C[0] || (C[0] = (b) => f(b))
       }, [
-        (a(), L(H(e.iconLeft), {
-          class: k(["h-4 w-4", o.value])
+        (a(), P(Z(e.iconLeft), {
+          class: x(["h-4 w-4", o.value])
         }, null, 8, ["class"]))
-      ], 2)) : I("", !0)
+      ], 2)) : S("", !0)
     ], 2));
   }
 });
-let Oe = [];
-function ls(e) {
-  Oe = Oe ? e : e.slice();
+let Qe = [];
+function Fs(e) {
+  Qe = Qe ? e : e.slice();
 }
-var te = /* @__PURE__ */ ((e) => (e[e.sm = 640] = "sm", e[e.md = 746] = "md", e[e.lg = 1024] = "lg", e[e.xl = 1280] = "xl", e[e["2xl"] = 1536] = "2xl", e))(te || {});
-function Ee(e) {
+var ge = /* @__PURE__ */ ((e) => (e[e.sm = 640] = "sm", e[e.md = 746] = "md", e[e.lg = 1024] = "lg", e[e.xl = 1280] = "xl", e[e["2xl"] = 1536] = "2xl", e))(ge || {});
+function ut(e) {
   const {
     props: {
-      modelValue: n,
-      steps: t,
-      orientation: s,
+      modelValue: t,
+      steps: s,
+      orientation: l,
       goVerticalBelow: o,
-      nonInteractive: c,
+      nonInteractive: r,
       stepsPadding: d
     },
-    emit: f
-  } = e, x = r(
-    () => (s == null ? void 0 : s.value) === "vertical" ? "vertical" : "horizontal"
-  ), p = r({
-    get: () => je((n == null ? void 0 : n.value) || 0, -1, t.value.length),
-    set: (v) => f("update:modelValue", je(v, 0, t.value.length))
-  }), b = (v) => `${v + 1}`, y = (v) => v === p.value, h = (v) => v < p.value, C = (v, w) => {
-    var R;
-    if (c != null && c.value) {
-      w == null || w.preventDefault(), w == null || w.stopPropagation(), w == null || w.stopImmediatePropagation();
+    emit: i
+  } = e, f = u(
+    () => (l == null ? void 0 : l.value) === "vertical" ? "vertical" : "horizontal"
+  ), c = u({
+    get: () => Xe((t == null ? void 0 : t.value) || 0, -1, s.value.length),
+    set: (w) => i("update:modelValue", Xe(w, 0, s.value.length))
+  }), C = (w) => `${w + 1}`, b = (w) => w === c.value, h = (w) => w < c.value, k = (w, $) => {
+    var E;
+    if (r != null && r.value) {
+      $ == null || $.preventDefault(), $ == null || $.stopPropagation(), $ == null || $.stopImmediatePropagation();
       return;
     }
-    p.value = v;
-    const S = t.value[p.value];
-    (R = S == null ? void 0 : S.onClick) == null || R.call(S);
-  }, u = r(() => {
-    const v = ["flex"];
-    let w, S;
-    return (d == null ? void 0 : d.value) === "xs" ? (w = "space-x-2", S = "space-y-1") : (d == null ? void 0 : d.value) === "sm" ? (w = "space-x-4", S = "space-y-1") : (w = "space-x-8", S = "space-y-4"), v.push("flex"), x.value === "vertical" || o != null && o.value ? (v.push(`flex-col ${S} justify-center`), (o == null ? void 0 : o.value) === te.sm ? v.push(
-      `sm:flex-row sm:space-y-0 sm:justify-start sm:${w} sm:items-center`
-    ) : (o == null ? void 0 : o.value) === te.md ? v.push(
-      `md:flex-row md:space-y-0 md:justify-start md:${w} md:items-center`
-    ) : (o == null ? void 0 : o.value) === te.lg ? v.push(
-      `lg:flex-row lg:space-y-0 lg:justify-start lg:${w} lg:items-center`
-    ) : (o == null ? void 0 : o.value) === te.xl && v.push(
-      `xl:flex-row xl:space-y-0 xl:justify-start xl:${w} xl:items-center`
-    )) : v.push(`flex-row ${w} items-center`), v.join(" ");
-  }), j = r(() => {
-    const v = ["flex items-center"];
-    return c != null && c.value || v.push("cursor-pointer"), v.join(" ");
+    c.value = w;
+    const j = s.value[c.value];
+    (E = j == null ? void 0 : j.onClick) == null || E.call(j);
+  }, m = u(() => {
+    const w = ["flex"];
+    let $, j;
+    return (d == null ? void 0 : d.value) === "xs" ? ($ = "space-x-2", j = "space-y-1") : (d == null ? void 0 : d.value) === "sm" ? ($ = "space-x-4", j = "space-y-1") : ($ = "space-x-8", j = "space-y-4"), w.push("flex"), f.value === "vertical" || o != null && o.value ? (w.push(`flex-col ${j} justify-center`), (o == null ? void 0 : o.value) === ge.sm ? w.push(
+      `sm:flex-row sm:space-y-0 sm:justify-start sm:${$} sm:items-center`
+    ) : (o == null ? void 0 : o.value) === ge.md ? w.push(
+      `md:flex-row md:space-y-0 md:justify-start md:${$} md:items-center`
+    ) : (o == null ? void 0 : o.value) === ge.lg ? w.push(
+      `lg:flex-row lg:space-y-0 lg:justify-start lg:${$} lg:items-center`
+    ) : (o == null ? void 0 : o.value) === ge.xl && w.push(
+      `xl:flex-row xl:space-y-0 xl:justify-start xl:${$} xl:items-center`
+    )) : w.push(`flex-row ${$} items-center`), w.join(" ");
+  }), z = u(() => {
+    const w = ["flex items-center"];
+    return r != null && r.value || w.push("cursor-pointer"), w.join(" ");
   });
   return {
-    value: p,
-    isCurrentStep: y,
+    value: c,
+    isCurrentStep: b,
     isFinishedStep: h,
-    switchStep: C,
-    getStepDisplayValue: b,
-    listClasses: u,
-    linkClasses: j,
-    orientation: x
+    switchStep: k,
+    getStepDisplayValue: C,
+    listClasses: m,
+    linkClasses: z,
+    orientation: f
   };
 }
-ls([
+Fs([
   "sm:space-x-8",
   "md:space-x-8",
   "lg:space-x-8",
@@ -709,16 +712,16 @@ ls([
   "lg:space-x-4",
   "xl:space-x-4"
 ]);
-const as = ["aria-label"], os = ["href", "onClick"], rs = { class: "flex space-x-3 items-center text-primary-focus normal font-medium leading-5" }, is = { class: "shrink-0 h-8 w-8 rounded-full bg-primary-focus text-foreground-on-primary inline-flex items-center justify-center" }, us = { class: "flex flex-col" }, cs = {
+const Rs = ["aria-label"], Es = ["href", "onClick"], Us = { class: "flex space-x-3 items-center text-primary-focus normal font-medium leading-5" }, Ds = { class: "shrink-0 h-8 w-8 rounded-full bg-primary-focus text-foreground-on-primary inline-flex items-center justify-center" }, Ws = { class: "flex flex-col" }, qs = {
   key: 0,
   class: "label label--light text-foreground"
-}, ds = ["href", "onClick"], fs = { class: "flex space-x-3 items-center text-primary-focus normal font-medium leading-5" }, ps = { class: "shrink-0 h-8 w-8 rounded-full border-2 border-primary-focus inline-flex items-center justify-center" }, hs = { class: "flex flex-col" }, ms = {
+}, Hs = ["href", "onClick"], Ks = { class: "flex space-x-3 items-center text-primary-focus normal font-medium leading-5" }, Gs = { class: "shrink-0 h-8 w-8 rounded-full border-2 border-primary-focus inline-flex items-center justify-center" }, Xs = { class: "flex flex-col" }, Zs = {
   key: 0,
   class: "label label--light text-foreground"
-}, gs = ["href", "onClick"], vs = { class: "flex space-x-3 items-center text-foreground-disabled normal font-medium leading-5" }, bs = { class: "shrink-0 h-8 w-8 rounded-full border-2 border-foreground-disabled inline-flex items-center justify-center" }, ys = { class: "flex flex-col" }, xs = {
+}, Qs = ["href", "onClick"], Ns = { class: "flex space-x-3 items-center text-foreground-disabled normal font-medium leading-5" }, Js = { class: "shrink-0 h-8 w-8 rounded-full border-2 border-foreground-disabled inline-flex items-center justify-center" }, Ys = { class: "flex flex-col" }, el = {
   key: 0,
   class: "label label--light"
-}, kl = /* @__PURE__ */ A({
+}, Pa = /* @__PURE__ */ A({
   __name: "Number",
   props: {
     ariaLabel: null,
@@ -730,94 +733,94 @@ const as = ["aria-label"], os = ["href", "onClick"], rs = { class: "flex space-x
     stepsPadding: null
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: n }) {
-    const t = e, {
-      isCurrentStep: s,
+  setup(e, { emit: t }) {
+    const s = e, {
+      isCurrentStep: l,
       isFinishedStep: o,
-      switchStep: c,
+      switchStep: r,
       getStepDisplayValue: d,
-      listClasses: f,
-      linkClasses: x
-    } = Ee({
-      props: ae(t),
-      emit: n
+      listClasses: i,
+      linkClasses: f
+    } = ut({
+      props: N(s),
+      emit: t
     });
-    return (p, b) => (a(), m("nav", {
+    return (c, C) => (a(), p("nav", {
       class: "flex justify-center",
       "aria-label": e.ariaLabel || "Progress steps"
     }, [
-      i("ol", {
-        class: k(l(f))
+      v("ol", {
+        class: x(n(i))
       }, [
-        (a(!0), m(W, null, G(e.steps, (y, h) => (a(), m("li", {
-          key: y.name
+        (a(!0), p(D, null, q(e.steps, (b, h) => (a(), p("li", {
+          key: b.name
         }, [
-          l(o)(h) ? (a(), m("a", {
+          n(o)(h) ? (a(), p("a", {
             key: 0,
-            href: y.href,
-            class: k(l(x)),
-            onClick: (C) => l(c)(h, C)
+            href: b.href,
+            class: x(n(f)),
+            onClick: (k) => n(r)(h, k)
           }, [
-            i("div", rs, [
-              i("div", is, [
-                P(l(pt), { class: "w-5 h-5" })
+            v("div", Us, [
+              v("div", Ds, [
+                V(n(nt), { class: "w-5 h-5" })
               ]),
-              i("div", us, [
-                i("div", null, B(y.name), 1),
-                y.description ? (a(), m("div", cs, B(y.description), 1)) : I("", !0)
+              v("div", Ws, [
+                v("div", null, L(b.name), 1),
+                b.description ? (a(), p("div", qs, L(b.description), 1)) : S("", !0)
               ])
             ])
-          ], 10, os)) : l(s)(h) ? (a(), m("a", {
+          ], 10, Es)) : n(l)(h) ? (a(), p("a", {
             key: 1,
-            href: y.href,
-            class: k(l(x)),
+            href: b.href,
+            class: x(n(f)),
             "aria-current": "step",
-            onClick: (C) => l(c)(h, C)
+            onClick: (k) => n(r)(h, k)
           }, [
-            i("div", fs, [
-              i("div", ps, B(l(d)(h)), 1),
-              i("div", hs, [
-                i("div", null, B(y.name), 1),
-                y.description ? (a(), m("div", ms, B(y.description), 1)) : I("", !0)
+            v("div", Ks, [
+              v("div", Gs, L(n(d)(h)), 1),
+              v("div", Xs, [
+                v("div", null, L(b.name), 1),
+                b.description ? (a(), p("div", Zs, L(b.description), 1)) : S("", !0)
               ])
             ])
-          ], 10, ds)) : (a(), m("a", {
+          ], 10, Hs)) : (a(), p("a", {
             key: 2,
-            href: y.href,
-            class: k(l(x)),
-            onClick: (C) => l(c)(h, C)
+            href: b.href,
+            class: x(n(f)),
+            onClick: (k) => n(r)(h, k)
           }, [
-            i("div", vs, [
-              i("div", bs, B(l(d)(h)), 1),
-              i("div", ys, [
-                i("div", null, B(y.name), 1),
-                y.description ? (a(), m("div", xs, B(y.description), 1)) : I("", !0)
+            v("div", Ns, [
+              v("div", Js, L(n(d)(h)), 1),
+              v("div", Ys, [
+                v("div", null, L(b.name), 1),
+                b.description ? (a(), p("div", el, L(b.description), 1)) : S("", !0)
               ])
             ])
-          ], 10, gs))
+          ], 10, Qs))
         ]))), 128))
       ], 2)
-    ], 8, as));
+    ], 8, Rs));
   }
-}), ks = ["aria-label"], Cs = ["href", "onClick"], ws = { class: "relative flex h-5 w-5 flex-shrink-0 items-center justify-center" }, $s = {
+}), tl = ["aria-label"], sl = ["href", "onClick"], ll = { class: "relative flex h-5 w-5 flex-shrink-0 items-center justify-center" }, nl = {
   key: 0,
   class: "h-3 w-3 rounded-full bg-foreground-2"
-}, Ss = ["href", "onClick"], Is = {
+}, al = ["href", "onClick"], ol = {
   class: "relative flex h-5 w-5 flex-shrink-0 items-center justify-center",
   "aria-hidden": "true"
-}, Bs = {
+}, rl = {
   key: 0,
   class: "h-3 w-3 rounded-full bg-foreground"
-}, _s = /* @__PURE__ */ i("span", { class: "absolute h-4 w-4 rounded-full bg-outline-2" }, null, -1), Ps = /* @__PURE__ */ i("span", { class: "relative block h-2 w-2 rounded-full bg-primary-focus" }, null, -1), Ls = ["href", "onClick"], js = {
+}, il = /* @__PURE__ */ v("span", { class: "absolute h-4 w-4 rounded-full bg-outline-2" }, null, -1), ul = /* @__PURE__ */ v("span", { class: "relative block h-2 w-2 rounded-full bg-primary-focus" }, null, -1), cl = ["href", "onClick"], dl = {
   class: "relative flex h-5 w-5 flex-shrink-0 items-center justify-center",
   "aria-hidden": "true"
-}, Vs = {
+}, fl = {
   key: 0,
   class: "h-3 w-3 rounded-full bg-foreground-2"
-}, Os = {
+}, pl = {
   key: 1,
   class: "h-4 w-4 rounded-full bg-foreground-disabled"
-}, Cl = /* @__PURE__ */ A({
+}, ja = /* @__PURE__ */ A({
   __name: "Bullet",
   props: {
     ariaLabel: null,
@@ -830,117 +833,117 @@ const as = ["aria-label"], os = ["href", "onClick"], rs = { class: "flex space-x
     stepsPadding: null
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: n }) {
-    const t = e, { isCurrentStep: s, isFinishedStep: o, switchStep: c, listClasses: d, linkClasses: f } = Ee({
-      props: ae(t),
-      emit: n
-    }), x = r(() => {
-      const b = ["h6 font-medium leading-7"];
-      let y;
-      return t.stepsPadding === "xs" ? y = "ml-1" : t.stepsPadding === "sm" ? y = "ml-2" : y = "ml-3", b.push(y), t.basic && b.push("sr-only"), b.join(" ");
-    }), p = r(() => {
-      const b = [];
-      return t.basic && b.push("basic"), b.join(" ");
+  setup(e, { emit: t }) {
+    const s = e, { isCurrentStep: l, isFinishedStep: o, switchStep: r, listClasses: d, linkClasses: i } = ut({
+      props: N(s),
+      emit: t
+    }), f = u(() => {
+      const C = ["h6 font-medium leading-7"];
+      let b;
+      return s.stepsPadding === "xs" ? b = "ml-1" : s.stepsPadding === "sm" ? b = "ml-2" : b = "ml-3", C.push(b), s.basic && C.push("sr-only"), C.join(" ");
+    }), c = u(() => {
+      const C = [];
+      return s.basic && C.push("basic"), C.join(" ");
     });
-    return (b, y) => (a(), m("nav", {
+    return (C, b) => (a(), p("nav", {
       class: "flex justify-center",
       "aria-label": e.ariaLabel || "Progress steps"
     }, [
-      i("ol", {
-        class: k([l(d), p.value])
+      v("ol", {
+        class: x([n(d), c.value])
       }, [
-        (a(!0), m(W, null, G(e.steps, (h, C) => (a(), m("li", {
+        (a(!0), p(D, null, q(e.steps, (h, k) => (a(), p("li", {
           key: h.name
         }, [
-          l(o)(C) ? (a(), m("a", {
+          n(o)(k) ? (a(), p("a", {
             key: 0,
             href: h.href,
-            class: k(l(f)),
-            onClick: (u) => l(c)(C, u)
+            class: x(n(i)),
+            onClick: (m) => n(r)(k, m)
           }, [
-            i("span", ws, [
-              e.basic ? (a(), m("span", $s)) : (a(), L(l(Te), {
+            v("span", ll, [
+              e.basic ? (a(), p("span", nl)) : (a(), P(n(at), {
                 key: 1,
                 class: "h-full w-full text-primary",
                 "aria-hidden": "true"
               }))
             ]),
-            i("span", {
-              class: k(["text-foreground", x.value])
-            }, B(h.name), 3)
-          ], 10, Cs)) : l(s)(C) ? (a(), m("a", {
+            v("span", {
+              class: x(["text-foreground", f.value])
+            }, L(h.name), 3)
+          ], 10, sl)) : n(l)(k) ? (a(), p("a", {
             key: 1,
             href: h.href,
-            class: k(l(f)),
+            class: x(n(i)),
             "aria-current": "step",
-            onClick: (u) => l(c)(C, u)
+            onClick: (m) => n(r)(k, m)
           }, [
-            i("span", Is, [
-              e.basic ? (a(), m("span", Bs)) : (a(), m(W, { key: 1 }, [
-                _s,
-                Ps
+            v("span", ol, [
+              e.basic ? (a(), p("span", rl)) : (a(), p(D, { key: 1 }, [
+                il,
+                ul
               ], 64))
             ]),
-            i("span", {
-              class: k(["text-primary-focus", x.value])
-            }, B(h.name), 3)
-          ], 10, Ss)) : (a(), m("a", {
+            v("span", {
+              class: x(["text-primary-focus", f.value])
+            }, L(h.name), 3)
+          ], 10, al)) : (a(), p("a", {
             key: 2,
             href: h.href,
-            class: k(l(f)),
-            onClick: (u) => l(c)(C, u)
+            class: x(n(i)),
+            onClick: (m) => n(r)(k, m)
           }, [
-            i("div", js, [
-              e.basic ? (a(), m("span", Vs)) : (a(), m("div", Os))
+            v("div", dl, [
+              e.basic ? (a(), p("span", fl)) : (a(), p("div", pl))
             ]),
-            i("p", {
-              class: k(["text-foreground-disabled", x.value])
-            }, B(h.name), 3)
-          ], 10, Ls))
+            v("p", {
+              class: x(["text-foreground-disabled", f.value])
+            }, L(h.name), 3)
+          ], 10, cl))
         ]))), 128))
       ], 2)
-    ], 8, ks));
+    ], 8, tl));
   }
-}), As = ["disabled"], wl = /* @__PURE__ */ A({
+}), hl = ["disabled"], Oa = /* @__PURE__ */ A({
   __name: "CardButton",
   props: {
     disabled: { type: Boolean },
     modelValue: { type: Boolean }
   },
   emits: ["update:modelValue", "click"],
-  setup(e, { emit: n }) {
-    const t = e, s = r(() => {
-      const c = [
+  setup(e, { emit: t }) {
+    const s = e, l = u(() => {
+      const r = [
         "h-20 bg-foundation-2 inline-flex justify-center items-center outline-none",
         "normal px-16 py-5 shadow rounded transition active:scale-95"
       ];
-      return t.disabled ? c.push("bg-foundation-disabled text-foreground-2 cursor-not-allowed") : (c.push(
-        t.modelValue ? "bg-primary-focus text-foreground-on-primary" : "bg-foundation text-foreground"
-      ), c.push("ring-outline-2 hover:ring-4")), c.join(" ");
-    }), o = (c) => {
-      if (t.disabled) {
-        c.preventDefault(), c.stopPropagation(), c.stopImmediatePropagation();
+      return s.disabled ? r.push("bg-foundation-disabled text-foreground-2 cursor-not-allowed") : (r.push(
+        s.modelValue ? "bg-primary-focus text-foreground-on-primary" : "bg-foundation text-foreground"
+      ), r.push("ring-outline-2 hover:ring-4")), r.join(" ");
+    }), o = (r) => {
+      if (s.disabled) {
+        r.preventDefault(), r.stopPropagation(), r.stopImmediatePropagation();
         return;
       }
-      n("update:modelValue", !t.modelValue), n("click", c);
+      t("update:modelValue", !s.modelValue), t("click", r);
     };
-    return (c, d) => (a(), m("button", {
-      class: k(s.value),
+    return (r, d) => (a(), p("button", {
+      class: x(l.value),
       disabled: e.disabled,
       onClick: o
     }, [
-      z(c.$slots, "default", {}, () => [
+      R(r.$slots, "default", {}, () => [
         M("Text")
       ])
-    ], 10, As));
+    ], 10, hl));
   }
-}), Ms = { class: "relative flex items-start" }, zs = { class: "flex h-6 items-center" }, Ds = ["id", "checked", "aria-describedby", "name", "disabled", "value"], Ts = {
+}), ml = { class: "relative flex items-start" }, vl = { class: "flex h-6 items-center" }, gl = ["id", "checked", "aria-describedby", "name", "disabled", "value"], bl = {
   class: "ml-2 text-sm",
   style: { "padding-top": "2px" }
-}, Rs = ["for"], Fs = {
+}, yl = ["for"], xl = {
   key: 0,
   class: "text-danger ml-1"
-}, Es = ["id"], $l = /* @__PURE__ */ A({
+}, kl = ["id"], Aa = /* @__PURE__ */ A({
   inheritAttrs: !1,
   __name: "Checkbox",
   props: {
@@ -1029,108 +1032,110 @@ const as = ["aria-label"], os = ["href", "onClick"], rs = { class: "flex space-x
   },
   emits: ["update:modelValue"],
   setup(e) {
-    const n = e, t = (v) => `${v}-${Ce()}`, s = r(() => n.value || n.name), {
+    const t = e, s = (w) => `${w}-${Ee()}`, l = u(() => t.value || t.name), {
       checked: o,
-      errorMessage: c,
+      errorMessage: r,
       handleChange: d,
-      value: f
-    } = ke(n.name, n.rules, {
-      validateOnMount: n.validateOnMount,
+      value: i
+    } = Se(t.name, t.rules, {
+      validateOnMount: t.validateOnMount,
       type: "checkbox",
-      checkedValue: s,
-      initialValue: n.modelValue || void 0
-    }), x = r(() => n.label || n.name), p = r(() => c.value ? "border-danger-lighter" : "border-foreground-4 "), b = r(() => n.description || c.value), y = r(() => `${n.name}-description`), h = r(() => {
-      const v = [];
-      return n.inlineDescription ? v.push("inline ml-2") : v.push("block"), c.value ? v.push("text-danger") : v.push("text-foreground-2"), v.join(" ");
-    }), C = O(t("checkbox")), u = r(() => n.id || C.value), j = (v) => {
-      n.disabled || d(v);
+      checkedValue: l,
+      initialValue: t.modelValue || void 0
+    }), f = u(() => t.label || t.name), c = u(() => r.value ? "border-danger-lighter" : "border-foreground-4 "), C = u(() => t.description || r.value), b = u(() => `${t.name}-description`), h = u(() => {
+      const w = [];
+      return t.inlineDescription ? w.push("inline ml-2") : w.push("block"), r.value ? w.push("text-danger") : w.push("text-foreground-2"), w.join(" ");
+    }), k = O(s("checkbox")), m = u(() => t.id || k.value), z = (w) => {
+      t.disabled || d(w);
     };
-    return Y(() => {
-      const v = n.modelValue, w = f.value, S = Array.isArray(v) ? v.includes(n.value) : v === n.value, R = Array.isArray(w) ? w.includes(n.value) : w === n.value;
-      S !== R && d(v);
-    }), (v, w) => (a(), m("div", Ms, [
-      i("div", zs, [
-        i("input", oe({
-          id: u.value,
-          checked: l(o),
-          "aria-describedby": y.value,
+    return se(() => {
+      const w = t.modelValue, $ = i.value, j = Array.isArray(w) ? w.includes(t.value) : w === t.value, E = Array.isArray($) ? $.includes(t.value) : $ === t.value;
+      j !== E && d(w);
+    }), (w, $) => (a(), p("div", ml, [
+      v("div", vl, [
+        v("input", ye({
+          id: m.value,
+          checked: n(o),
+          "aria-describedby": b.value,
           name: e.name,
           disabled: e.disabled,
-          value: s.value,
+          value: l.value,
           type: "checkbox",
-          class: ["h-4 w-4 rounded text-primary focus:ring-primary bg-foundation disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-2", p.value]
-        }, v.$attrs, { onChange: j }), null, 16, Ds)
+          class: ["h-4 w-4 rounded text-primary focus:ring-primary bg-foundation disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-2", c.value]
+        }, w.$attrs, { onChange: z }), null, 16, gl)
       ]),
-      i("div", Ts, [
-        i("label", {
-          for: u.value,
-          class: k(["font-medium text-foreground", { "sr-only": e.hideLabel }])
+      v("div", bl, [
+        v("label", {
+          for: m.value,
+          class: x(["font-medium text-foreground", { "sr-only": e.hideLabel }])
         }, [
-          i("span", null, B(x.value), 1),
-          e.showRequired ? (a(), m("span", Fs, "*")) : I("", !0)
-        ], 10, Rs),
-        b.value ? (a(), m("p", {
+          v("span", null, L(f.value), 1),
+          e.showRequired ? (a(), p("span", xl, "*")) : S("", !0)
+        ], 10, yl),
+        C.value ? (a(), p("p", {
           key: 0,
-          id: y.value,
-          class: k(h.value)
-        }, B(b.value), 11, Es)) : I("", !0)
+          id: b.value,
+          class: x(h.value)
+        }, L(C.value), 11, kl)) : S("", !0)
       ])
     ]));
   }
 });
 function We(e) {
-  const { props: n, inputEl: t, emit: s } = e, { value: o, errorMessage: c } = ke(n.name, n.rules, {
-    validateOnMount: l(n.validateOnMount),
-    validateOnValueUpdate: l(n.validateOnValueUpdate),
-    initialValue: l(n.modelValue) || void 0
-  }), d = r(() => {
-    const S = ["block label text-foreground-2 mb-2"];
-    return l(n.showLabel) || S.push("sr-only"), S.join(" ");
-  }), f = r(() => {
-    const S = [
-      "block w-full rounded focus:outline-none text-foreground transition-all",
-      "disabled:cursor-not-allowed disabled:bg-foundation-disabled disabled:text-disabled-muted",
-      "placeholder:text-foreground-2"
+  const { props: t, inputEl: s, emit: l, options: o } = e, { value: r, errorMessage: d } = Se(t.name, t.rules, {
+    validateOnMount: n(t.validateOnMount),
+    validateOnValueUpdate: n(t.validateOnValueUpdate),
+    initialValue: n(t.modelValue) || void 0
+  }), i = u(() => {
+    const g = ["block label text-foreground-2 mb-2"];
+    return n(t.showLabel) || g.push("sr-only"), g.join(" ");
+  }), f = u(() => [
+    "focus:outline-none disabled:cursor-not-allowed disabled:bg-foundation-disabled",
+    "disabled:text-disabled-muted placeholder:text-foreground-2",
+    "rounded"
+  ].join(" ")), c = u(() => {
+    const g = [
+      "block w-full text-foreground transition-all",
+      f.value
     ];
-    return c.value ? S.push(
-      "border-2 border-danger text-danger-darker focus:border-danger focus:ring-danger"
-    ) : S.push("border-0 focus:ring-2 focus:ring-outline-2"), l(n.color) === "foundation" ? S.push("bg-foundation shadow-sm hover:shadow") : S.push("bg-foundation-page"), S.join(" ");
-  }), x = O(Ce()), p = r(() => l(n.label) || l(n.name)), b = r(() => {
-    const S = c.value;
-    return !S || !l(n.useLabelInErrors) ? S : S.replace("Value", p.value);
-  }), y = r(
-    () => b.value && l(n.hideErrorMessage)
-  ), h = r(() => b.value || l(n.help)), C = r(() => !!h.value), u = r(
-    () => C.value ? `${l(n.name)}-${x.value}` : void 0
-  ), j = r(() => {
-    const S = ["mt-2 text-sm"];
-    return S.push(c.value ? "text-danger" : "text-foreground-2"), S.join(" ");
-  }), v = () => {
-    var S;
-    (S = t.value) == null || S.focus();
-  }, w = () => {
-    o.value = "", s("change", { value: "" }), s("clear");
+    return d.value ? g.push(
+      "focus:border-danger focus:ring-danger border-2 border-danger text-danger-darker"
+    ) : g.push("border-0 focus:ring-2 focus:ring-outline-2"), n(t.color) === "foundation" ? g.push("bg-foundation shadow-sm hover:shadow") : g.push("bg-foundation-page"), g.join(" ");
+  }), C = O(Ee()), b = u(() => n(t.label) || n(t.name)), h = u(() => {
+    const g = d.value;
+    return !g || !n(t.useLabelInErrors) ? g : g.replace("Value", b.value);
+  }), k = u(
+    () => h.value && n(t.hideErrorMessage)
+  ), m = u(() => h.value || n(t.help)), z = u(() => !!m.value), w = u(
+    () => z.value ? `${n(t.name)}-${C.value}` : void 0
+  ), $ = u(() => {
+    const g = ["mt-2 text-sm"];
+    return g.push(d.value ? "text-danger" : "text-foreground-2"), g.join(" ");
+  }), j = () => {
+    var g;
+    (g = s.value) == null || g.focus();
+  }, E = () => {
+    var g;
+    r.value = X(r.value) ? [] : "", (g = o == null ? void 0 : o.customClear) == null || g.call(o), l("change", { value: r.value }), l("clear");
   };
-  return Y(() => {
-    l(n.autoFocus) && v();
+  return se(() => {
+    n(t.autoFocus) && j();
   }), {
-    coreClasses: f,
-    title: p,
-    value: o,
-    helpTipId: u,
-    helpTipClasses: j,
-    helpTip: h,
-    hideHelpTip: y,
-    errorMessage: b,
-    clear: w,
-    focus: v,
-    labelClasses: d
+    coreInputClasses: f,
+    coreClasses: c,
+    title: b,
+    value: r,
+    helpTipId: w,
+    helpTipClasses: $,
+    helpTip: m,
+    hideHelpTip: k,
+    errorMessage: h,
+    clear: E,
+    focus: j,
+    labelClasses: i
   };
 }
-const Ws = ["for"], Us = { class: "relative" }, qs = ["id", "name", "placeholder", "disabled", "aria-invalid", "aria-describedby"], Hs = /* @__PURE__ */ i("span", { class: "text-xs sr-only" }, "Clear input", -1), Gs = {
-  key: 2,
-  class: "pointer-events-none absolute inset-y-0 mt-3 text-4xl right-0 flex items-center pr-2 text-danger opacity-50"
-}, Ks = ["id"], Sl = /* @__PURE__ */ A({
+const wl = ["for"], Cl = { class: "relative" }, $l = ["id", "name", "placeholder", "disabled", "aria-invalid", "aria-describedby"], Il = /* @__PURE__ */ v("span", { class: "text-xs sr-only" }, "Clear input", -1), Sl = ["id"], Ma = /* @__PURE__ */ A({
   __name: "TextArea",
   props: {
     name: null,
@@ -1148,99 +1153,105 @@ const Ws = ["for"], Us = { class: "relative" }, qs = ["id", "name", "placeholder
     showClear: { type: Boolean },
     fullWidth: { type: Boolean },
     showRequired: { type: Boolean },
-    color: { default: "page" }
+    color: { default: "page" },
+    textareaClasses: null
   },
   emits: ["update:modelValue", "change", "input", "clear"],
-  setup(e, { expose: n, emit: t }) {
-    const s = e, o = O(null), {
-      coreClasses: c,
+  setup(e, { expose: t, emit: s }) {
+    const l = e, o = O(null), {
+      coreClasses: r,
       title: d,
-      value: f,
-      helpTipId: x,
-      helpTipClasses: p,
-      helpTip: b,
-      errorMessage: y,
+      value: i,
+      helpTipId: f,
+      helpTipClasses: c,
+      helpTip: C,
+      errorMessage: b,
       labelClasses: h,
-      clear: C,
-      focus: u
+      clear: k,
+      focus: m
     } = We({
-      props: ae(s),
-      emit: t,
+      props: N(l),
+      emit: s,
       inputEl: o
-    }), j = r(() => {
-      const v = ["pl-2"];
-      return s.showClear && y.value ? v.push("pr-12") : (s.showClear || y.value) && v.push("pr-8"), v.join(" ");
+    }), z = u(() => {
+      const w = ["pl-2"];
+      return l.showClear && b.value ? w.push("pr-12") : (l.showClear || b.value) && w.push("pr-8"), w.join(" ");
     });
-    return n({ focus: u }), (v, w) => (a(), m("div", {
-      class: k([e.fullWidth ? "w-full" : ""])
+    return t({ focus: m }), (w, $) => (a(), p("div", {
+      class: x([e.fullWidth ? "w-full" : ""])
     }, [
-      i("label", {
+      v("label", {
         for: e.name,
-        class: k(l(h))
+        class: x(n(h))
       }, [
-        i("span", null, B(l(d)), 1)
-      ], 10, Ws),
-      i("div", Us, [
-        ne(i("textarea", oe({
+        v("span", null, L(n(d)), 1)
+      ], 10, wl),
+      v("div", Cl, [
+        de(v("textarea", ye({
           id: e.name,
           ref_key: "inputElement",
           ref: o,
-          "onUpdate:modelValue": w[0] || (w[0] = (S) => ve(f) ? f.value = S : null),
+          "onUpdate:modelValue": $[0] || ($[0] = (j) => $e(i) ? i.value = j : null),
           name: e.name,
-          class: [l(c), j.value, "min-h-[4rem]"],
+          class: [
+            n(r),
+            z.value,
+            e.textareaClasses || "",
+            "min-h-[4rem] simple-scrollbar"
+          ],
           placeholder: e.placeholder,
           disabled: e.disabled,
-          "aria-invalid": l(y) ? "true" : "false",
-          "aria-describedby": l(x)
-        }, v.$attrs, {
-          onChange: w[1] || (w[1] = (S) => v.$emit("change", { event: S, value: l(f) })),
-          onInput: w[2] || (w[2] = (S) => v.$emit("input", { event: S, value: l(f) }))
-        }), null, 16, qs), [
-          [Ae, l(f)]
+          "aria-invalid": n(b) ? "true" : "false",
+          "aria-describedby": n(f)
+        }, w.$attrs, {
+          onChange: $[1] || ($[1] = (j) => w.$emit("change", { event: j, value: n(i) })),
+          onInput: $[2] || ($[2] = (j) => w.$emit("input", { event: j, value: n(i) }))
+        }), null, 16, $l), [
+          [Me, n(i)]
         ]),
-        e.showClear ? (a(), m("a", {
+        e.showClear ? (a(), p("a", {
           key: 0,
           title: "Clear input",
           class: "absolute top-2 right-0 flex items-center pr-2 cursor-pointer",
-          onClick: w[3] || (w[3] = //@ts-ignore
-          (...S) => l(C) && l(C)(...S)),
-          onKeydown: w[4] || (w[4] = //@ts-ignore
-          (...S) => l(C) && l(C)(...S))
+          onClick: $[3] || ($[3] = //@ts-ignore
+          (...j) => n(k) && n(k)(...j)),
+          onKeydown: $[4] || ($[4] = //@ts-ignore
+          (...j) => n(k) && n(k)(...j))
         }, [
-          Hs,
-          P(l(ue), {
+          Il,
+          V(n(pe), {
             class: "h-5 w-5 text-foreground",
             "aria-hidden": "true"
           })
-        ], 32)) : I("", !0),
-        l(y) ? (a(), m("div", {
+        ], 32)) : S("", !0),
+        n(b) ? (a(), p("div", {
           key: 1,
-          class: k([
-            "pointer-events-none absolute inset-y-0 right-0 flex items-center",
+          class: x([
+            "pointer-events-none absolute inset-y-0 right-0 flex items-start mt-2",
             e.showClear ? "pr-8" : "pr-2"
           ])
         }, [
-          P(l(xe), {
+          V(n(Ie), {
             class: "h-4 w-4 text-danger",
             "aria-hidden": "true"
           })
-        ], 2)) : I("", !0),
-        e.showRequired && !l(y) ? (a(), m("div", Gs, " * ")) : I("", !0)
+        ], 2)) : S("", !0),
+        e.showRequired && !n(b) ? (a(), p("div", {
+          key: 2,
+          class: x(["pointer-events-none absolute inset-y-0 mt-0.5 text-4xl right-0 flex items-start text-danger opacity-50", [e.showClear ? "pr-8" : "pr-2"]])
+        }, " * ", 2)) : S("", !0)
       ]),
-      l(x) ? (a(), m("p", {
+      n(f) ? (a(), p("p", {
         key: 0,
-        id: l(x),
-        class: k(l(p))
-      }, B(l(b)), 11, Ks)) : I("", !0)
+        id: n(f),
+        class: x(n(c))
+      }, L(n(C)), 11, Sl)) : S("", !0)
     ], 2));
   }
-}), Xs = ["for"], Ns = { class: "relative" }, Js = {
+}), Bl = ["for"], Vl = { class: "relative" }, Ll = {
   key: 0,
   class: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
-}, Qs = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "aria-describedby"], Ys = /* @__PURE__ */ i("span", { class: "text-xs sr-only" }, "Clear input", -1), Zs = {
-  key: 2,
-  class: "pointer-events-none absolute inset-y-0 mt-3 text-4xl right-0 flex items-center pr-2 text-danger opacity-50"
-}, en = ["id"], Il = /* @__PURE__ */ A({
+}, _l = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "aria-describedby"], zl = /* @__PURE__ */ v("span", { class: "text-xs sr-only" }, "Clear input", -1), Pl = ["id"], Ta = /* @__PURE__ */ A({
   inheritAttrs: !1,
   __name: "TextInput",
   props: {
@@ -1376,33 +1387,33 @@ const Ws = ["for"], Us = { class: "relative" }, qs = ["id", "name", "placeholder
     }
   },
   emits: ["update:modelValue", "change", "input", "clear", "focusin", "focusout"],
-  setup(e, { expose: n, emit: t }) {
-    const s = e, o = be(), c = O(null), {
+  setup(e, { expose: t, emit: s }) {
+    const l = e, o = Te(), r = O(null), {
       coreClasses: d,
-      title: f,
-      value: x,
-      helpTipId: p,
-      helpTipClasses: b,
-      helpTip: y,
+      title: i,
+      value: f,
+      helpTipId: c,
+      helpTipClasses: C,
+      helpTip: b,
       hideHelpTip: h,
-      errorMessage: C,
-      clear: u,
-      focus: j,
-      labelClasses: v
+      errorMessage: k,
+      clear: m,
+      focus: z,
+      labelClasses: w
     } = We({
-      props: ae(s),
-      emit: t,
-      inputEl: c
-    }), w = r(() => {
+      props: N(l),
+      emit: s,
+      inputEl: r
+    }), $ = u(() => {
       const T = ["h-5 w-5"];
-      return C.value ? T.push("text-danger") : T.push("text-foreground-2"), T.join(" ");
-    }), S = r(
-      () => ["email", "password"].includes(s.type) || s.customIcon
-    ), R = r(() => {
+      return k.value ? T.push("text-danger") : T.push("text-foreground-2"), T.join(" ");
+    }), j = u(
+      () => ["email", "password"].includes(l.type) || l.customIcon
+    ), E = u(() => {
       const T = [];
-      return S.value ? T.push("pl-8") : T.push("pl-2"), o["input-right"] || (C.value || s.showClear) && (C.value && s.showClear ? T.push("pr-12") : T.push("pr-8")), T.join(" ");
-    }), g = r(() => {
-      switch (s.size) {
+      return j.value ? T.push("pl-8") : T.push("pl-2"), o["input-right"] || (k.value || l.showClear) && (k.value && l.showClear ? T.push("pr-12") : T.push("pr-8")), T.join(" ");
+    }), g = u(() => {
+      switch (l.size) {
         case "sm":
           return "h-6";
         case "lg":
@@ -1414,197 +1425,205 @@ const Ws = ["for"], Us = { class: "relative" }, qs = ["id", "name", "placeholder
           return "h-8";
       }
     });
-    return n({ focus: j }), (T, E) => (a(), m("div", {
-      class: k([e.fullWidth ? "w-full" : "", e.wrapperClasses])
+    return t({ focus: z }), (T, U) => (a(), p("div", {
+      class: x([e.fullWidth ? "w-full" : "", e.wrapperClasses])
     }, [
-      i("label", {
+      v("label", {
         for: e.name,
-        class: k(l(v))
+        class: x(n(w))
       }, [
-        i("span", null, B(l(f)), 1)
-      ], 10, Xs),
-      i("div", Ns, [
-        S.value ? (a(), m("div", Js, [
-          e.customIcon ? (a(), L(H(e.customIcon), {
+        v("span", null, L(n(i)), 1)
+      ], 10, Bl),
+      v("div", Vl, [
+        j.value ? (a(), p("div", Ll, [
+          e.customIcon ? (a(), P(Z(e.customIcon), {
             key: 0,
-            class: k(w.value),
+            class: x($.value),
             "aria-hidden": "true"
-          }, null, 8, ["class"])) : e.type === "email" ? (a(), L(l(ht), {
+          }, null, 8, ["class"])) : e.type === "email" ? (a(), P(n(Wt), {
             key: 1,
-            class: k(w.value),
+            class: x($.value),
             "aria-hidden": "true"
-          }, null, 8, ["class"])) : e.type === "password" ? (a(), L(l(mt), {
+          }, null, 8, ["class"])) : e.type === "password" ? (a(), P(n(qt), {
             key: 2,
-            class: k(w.value),
+            class: x($.value),
             "aria-hidden": "true"
-          }, null, 8, ["class"])) : I("", !0)
-        ])) : I("", !0),
-        ne(i("input", oe({
+          }, null, 8, ["class"])) : S("", !0)
+        ])) : S("", !0),
+        de(v("input", ye({
           id: e.name,
           ref_key: "inputElement",
-          ref: c,
-          "onUpdate:modelValue": E[0] || (E[0] = (F) => ve(x) ? x.value = F : null),
+          ref: r,
+          "onUpdate:modelValue": U[0] || (U[0] = (F) => $e(f) ? f.value = F : null),
           type: e.type,
           name: e.name,
-          class: [l(d), R.value, g.value, e.inputClasses || ""],
+          class: [n(d), E.value, g.value, e.inputClasses || ""],
           placeholder: e.placeholder,
           disabled: e.disabled,
-          "aria-invalid": l(C) ? "true" : "false",
-          "aria-describedby": l(p),
+          "aria-invalid": n(k) ? "true" : "false",
+          "aria-describedby": n(c),
           role: "textbox"
         }, T.$attrs, {
-          onChange: E[1] || (E[1] = (F) => T.$emit("change", { event: F, value: l(x) })),
-          onInput: E[2] || (E[2] = (F) => T.$emit("input", { event: F, value: l(x) }))
-        }), null, 16, Qs), [
-          [Xe, l(x)]
+          onChange: U[1] || (U[1] = (F) => T.$emit("change", { event: F, value: n(f) })),
+          onInput: U[2] || (U[2] = (F) => T.$emit("input", { event: F, value: n(f) }))
+        }), null, 16, _l), [
+          [xt, n(f)]
         ]),
-        z(T.$slots, "input-right", {}, () => [
-          e.showClear ? (a(), m("a", {
+        R(T.$slots, "input-right", {}, () => [
+          e.showClear ? (a(), p("a", {
             key: 0,
             title: "Clear input",
             class: "absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer",
-            onClick: E[3] || (E[3] = //@ts-ignore
-            (...F) => l(u) && l(u)(...F)),
-            onKeydown: E[4] || (E[4] = //@ts-ignore
-            (...F) => l(u) && l(u)(...F))
+            onClick: U[3] || (U[3] = //@ts-ignore
+            (...F) => n(m) && n(m)(...F)),
+            onKeydown: U[4] || (U[4] = //@ts-ignore
+            (...F) => n(m) && n(m)(...F))
           }, [
-            Ys,
-            P(l(ue), {
+            zl,
+            V(n(pe), {
               class: "h-5 w-5 text-foreground",
               "aria-hidden": "true"
             })
-          ], 32)) : I("", !0),
-          l(C) ? (a(), m("div", {
+          ], 32)) : S("", !0),
+          n(k) ? (a(), p("div", {
             key: 1,
-            class: k([
+            class: x([
               "pointer-events-none absolute inset-y-0 right-0 flex items-center",
               e.showClear ? "pr-8" : "pr-2"
             ])
           }, [
-            P(l(xe), {
+            V(n(Ie), {
               class: "h-4 w-4 text-danger",
               "aria-hidden": "true"
             })
-          ], 2)) : I("", !0),
-          e.showRequired && !l(C) ? (a(), m("div", Zs, " * ")) : I("", !0)
+          ], 2)) : S("", !0),
+          e.showRequired && !n(k) ? (a(), p("div", {
+            key: 2,
+            class: x(["pointer-events-none absolute inset-y-0 mt-3 text-4xl right-0 flex items-center text-danger opacity-50", [e.showClear ? "pr-8" : "pr-2"]])
+          }, " * ", 2)) : S("", !0)
         ])
       ]),
-      l(p) && !l(h) ? (a(), m("p", {
+      n(c) && !n(h) ? (a(), p("p", {
         key: 0,
-        id: l(p),
-        class: k(l(b))
-      }, B(l(y)), 11, en)) : I("", !0)
+        id: n(c),
+        class: x(n(C))
+      }, L(n(b)), 11, Pl)) : S("", !0)
     ], 2));
   }
-}), tn = /^https?:\/\//, $e = /^[\w-_.+]+@[\w-_.+]+$/, sn = (e) => (e || "").match($e) ? !0 : "Value should be a valid e-mail address", nn = (e) => (e || "").split(",").map((s) => s.trim()).every((s) => s.match($e)) || "Value should be one or multiple comma-delimited e-mail addresses", ln = (e) => (ie(e) && (e = e.trim()), e ? !0 : "Value is required"), an = (e, n) => (t, s) => t === s.form[e] ? !0 : `Value must be the same as in field '${n || e}'`, on = (e) => (n) => {
-  const { minLength: t, maxLength: s } = e;
-  return n = bt(n) ? "" : n, ie(n) ? !Q(t) && n.length < t ? `Value needs to be at least ${t} characters long` : !Q(s) && n.length > s ? `Value needs to be no more than ${s} characters long` : !0 : "Value should be a text string";
-}, rn = (e) => (n) => {
-  const { match: t, message: s } = e;
-  return ie(n) ? t ? ie(t) ? n.includes(t) ? !0 : s : t.test(n) ? !0 : s : !0 : "Value should be a text string";
-}, Bl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), ct = /^https?:\/\//, qe = /^[\w-_.+]+@[\w-_.+]+$/, jl = (e) => (e || "").match(qe) ? !0 : "Value should be a valid e-mail address", Ol = (e) => (e || "").split(",").map((l) => l.trim()).every((l) => l.match(qe)) || "Value should be one or multiple comma-delimited e-mail addresses", Al = (e) => (Ce(e) && (e = e.trim()), e ? !0 : "Value is required"), Ml = (e, t) => (s, l) => s === l.form[e] ? !0 : `Value must be the same as in field '${t || e}'`, Tl = (e) => (t) => {
+  const { minLength: s, maxLength: l } = e;
+  return t = Gt(t) ? "" : t, Ce(t) ? !ce(s) && t.length < s ? `Value needs to be at least ${s} characters long` : !ce(l) && t.length > l ? `Value needs to be no more than ${l} characters long` : !0 : "Value should be a text string";
+}, Fl = (e) => (t) => {
+  const { match: s, message: l } = e;
+  return Ce(t) ? s ? Ce(s) ? t.includes(s) ? !0 : l : s.test(t) ? !0 : l : !0 : "Value should be a text string";
+}, Rl = (e) => ct.test(e) ? !0 : "Value is not a valid URL", El = (e) => Array.isArray(e) && e.length > 0 ? !0 : "Value should have at least a single item selected", Fa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  VALID_EMAIL: $e,
-  VALID_HTTP_URL: tn,
-  isEmail: sn,
-  isOneOrMultipleEmails: nn,
-  isRequired: ln,
-  isSameAs: an,
-  isStringOfLength: on,
-  stringContains: rn
+  VALID_EMAIL: qe,
+  VALID_HTTP_URL: ct,
+  isEmail: jl,
+  isItemSelected: El,
+  isOneOrMultipleEmails: Ol,
+  isRequired: Al,
+  isSameAs: Ml,
+  isStringOfLength: Tl,
+  isUrl: Rl,
+  stringContains: Fl
 }, Symbol.toStringTag, { value: "Module" }));
-function un(e) {
+function dt(e) {
   const {
-    skipCalculation: n,
-    elementToWatchForChanges: t,
-    itemContainer: s,
+    skipCalculation: t,
+    elementToWatchForChanges: s,
+    itemContainer: l,
     trackResize: o = !1,
-    trackMutations: c = !0
-  } = e || {}, d = O(0), f = () => {
-    const x = s.value;
-    if (n != null && n.value || !x)
+    trackMutations: r = !0
+  } = e || {}, d = O(0), i = () => {
+    const f = l.value;
+    if (t != null && t.value || !f)
       return;
-    const p = x.children;
-    let b = 0, y = 0, h;
-    for (const C of p) {
-      const u = C.offsetTop;
-      Q(h) ? (h = u, b += 1) : u === h && (b += 1), y += 1;
+    const c = f.children;
+    let C = 0, b = 0, h;
+    for (const k of c) {
+      const m = k.offsetTop;
+      ce(h) ? (h = m, C += 1) : m === h && (C += 1), b += 1;
     }
-    d.value = y - b;
+    d.value = b - C;
   };
-  return o && kt(t, f), c && Ct(t, f, {
+  return o && Nt(s, i), r && Jt(s, i, {
     childList: !0,
     subtree: !0
   }), {
     hiddenItemCount: d
   };
 }
-function cn(e) {
-  const { props: n, emit: t, dynamicVisibility: s } = e;
+function ft(e) {
+  const { props: t, emit: s, dynamicVisibility: l } = e;
   let o;
-  if (s) {
-    const { elementToWatchForChanges: p, itemContainer: b } = s;
-    o = un({
-      skipCalculation: r(() => {
+  if (l) {
+    const { elementToWatchForChanges: c, itemContainer: C } = l;
+    o = dt({
+      skipCalculation: u(() => {
         var h;
-        return !((h = n.multiple) != null && h.value);
+        return !((h = t.multiple) != null && h.value);
       }),
-      elementToWatchForChanges: p,
-      itemContainer: b
+      elementToWatchForChanges: c,
+      itemContainer: C
     }).hiddenItemCount;
   } else
     o = O(0);
-  const c = r({
+  const r = u({
     get: () => {
-      var b, y;
-      const p = (b = n.modelValue) == null ? void 0 : b.value;
-      return (y = n.multiple) != null && y.value ? q(p) ? p : [] : q(p) ? void 0 : p;
+      var C, b;
+      const c = (C = t.modelValue) == null ? void 0 : C.value;
+      return (b = t.multiple) != null && b.value ? X(c) ? c : [] : X(c) ? void 0 : c;
     },
-    set: (p) => {
-      var b, y, h;
-      if ((b = n.multiple) != null && b.value && !q(p)) {
+    set: (c) => {
+      var C, b, h;
+      if ((C = t.multiple) != null && C.value && !X(c)) {
         console.warn("Attempting to set non-array value in selector w/ multiple=true");
         return;
-      } else if (!((y = n.multiple) != null && y.value) && q(p)) {
+      } else if (!((b = t.multiple) != null && b.value) && X(c)) {
         console.warn("Attempting to set array value in selector w/ multiple=false");
         return;
       }
-      t("update:modelValue", (h = n.multiple) != null && h.value ? p || [] : p);
+      s("update:modelValue", (h = t.multiple) != null && h.value ? c || [] : c);
     }
-  }), d = (p) => q(p);
+  }), d = (c) => X(c);
   return {
-    selectedValue: c,
+    selectedValue: r,
     hiddenSelectedItemCount: o,
     isArrayValue: d,
-    isMultiItemArrayValue: (p) => q(p) && p.length > 1,
-    firstItem: (p) => d(p) ? p[0] : p
+    isMultiItemArrayValue: (c) => X(c) && c.length > 1,
+    firstItem: (c) => d(c) ? c[0] : c
   };
 }
-const dn = (e) => (Ne("data-v-60cf597b"), e = e(), Je(), e), fn = /* @__PURE__ */ dn(() => /* @__PURE__ */ i("div", { class: "swoosher relative top-0 bg-blue-500/50" }, null, -1)), pn = [
-  fn
-], hn = /* @__PURE__ */ A({
+const Ul = (e) => (kt("data-v-60cf597b"), e = e(), wt(), e), Dl = /* @__PURE__ */ Ul(() => /* @__PURE__ */ v("div", { class: "swoosher relative top-0 bg-blue-500/50" }, null, -1)), Wl = [
+  Dl
+], ql = /* @__PURE__ */ A({
   __name: "Bar",
   props: {
     loading: { type: Boolean }
   },
   setup(e) {
-    return (n, t) => (a(), m("div", {
-      class: k([
+    return (t, s) => (a(), p("div", {
+      class: x([
         "relative w-full h-1 bg-blue-500/30 text-xs text-foreground-on-primary overflow-hidden rounded-xl",
         e.loading ? "opacity-100" : "opacity-0"
       ])
-    }, pn, 2));
+    }, Wl, 2));
   }
 });
-const Ue = /* @__PURE__ */ Fe(hn, [["__scopeId", "data-v-60cf597b"]]), mn = { class: "flex items-center justify-between w-full" }, gn = { class: "block truncate grow text-left" }, vn = { class: "pointer-events-none shrink-0 ml-1 flex items-center" }, bn = ["disabled"], yn = {
+const He = /* @__PURE__ */ it(ql, [["__scopeId", "data-v-60cf597b"]]), Hl = { class: "flex items-center justify-between w-full" }, Kl = { class: "block truncate grow text-left" }, Gl = { class: "pointer-events-none shrink-0 ml-1 flex items-center space-x-2" }, Xl = {
+  key: 1,
+  class: "text-4xl text-danger opacity-50 h-4 w-4 leading-6"
+}, Zl = ["disabled"], Ql = {
   key: 0,
   class: "flex flex-col mx-1 mb-1"
-}, xn = /* @__PURE__ */ i("span", { class: "sr-only label text-foreground" }, "Search", -1), kn = { class: "relative" }, Cn = { class: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2" }, wn = ["placeholder"], $n = {
+}, Nl = /* @__PURE__ */ v("span", { class: "sr-only label text-foreground" }, "Search", -1), Jl = { class: "relative" }, Yl = { class: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2" }, en = ["placeholder"], tn = {
   key: 0,
   class: "px-1"
-}, Sn = { key: 1 }, In = /* @__PURE__ */ i("div", { class: "text-foreground-2 text-center" }, "Nothing found 🤷‍♂️", -1), Bn = {
-  class: /* @__PURE__ */ k(["block truncate"])
-}, _n = ["id"], Pn = /* @__PURE__ */ A({
+}, sn = { key: 1 }, ln = /* @__PURE__ */ v("div", { class: "text-foreground-2 text-center" }, "Nothing found 🤷‍♂️", -1), nn = {
+  class: /* @__PURE__ */ x(["block truncate"])
+}, an = ["id"], pt = /* @__PURE__ */ A({
   __name: "Base",
   props: {
     multiple: {
@@ -1663,6 +1682,12 @@ const Ue = /* @__PURE__ */ Fe(hn, [["__scopeId", "data-v-60cf597b"]]), mn = { cl
       type: String,
       required: !0
     },
+    /**
+     * Optional text that replaces the label as the placeholder when set.
+     */
+    placeholder: {
+      type: String
+    },
     /**
      * Whether to show the label visually
      */
@@ -1749,157 +1774,169 @@ const Ue = /* @__PURE__ */ Fe(hn, [["__scopeId", "data-v-60cf597b"]]), mn = { cl
     fullyControlValue: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Whether to show the red "required" asterisk
+     */
+    showRequired: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: n, emit: t }) {
-    const s = e, { value: o, errorMessage: c } = ke(s.name, s.rules, {
-      validateOnMount: s.validateOnMount,
-      validateOnValueUpdate: s.validateOnValueUpdate,
-      initialValue: s.modelValue
-    }), d = O(null), f = O(""), x = O([]), p = O(!1), b = O(1), y = O(Ce()), h = r(() => l(s.label) || l(s.name)), C = r(() => {
-      const $ = c.value;
-      return !$ || !l(s.useLabelInErrors) ? $ : $.replace("Value", h.value);
-    }), u = r(() => C.value || l(s.help)), j = r(() => !!u.value), v = r(
-      () => j.value ? `${l(s.name)}-${y.value}` : void 0
-    ), w = r(
-      () => c.value ? "text-danger" : "text-foreground-2"
-    ), S = r(
-      () => s.buttonStyle !== "simple" && s.clearable && !s.disabled
-    ), R = r(() => {
-      const $ = ["relative flex group"];
-      return s.buttonStyle !== "simple" && ($.push("hover:shadow rounded-md"), $.push("outline outline-2 outline-primary-muted")), s.fixedHeight && $.push("h-8"), $.join(" ");
-    }), g = r(() => {
-      const $ = [];
-      return s.buttonStyle !== "simple" && $.push(
-        Z.value ? "bg-foundation-disabled text-foreground-disabled" : ""
-      ), Z.value && $.push("cursor-not-allowed"), $.join(" ");
-    }), T = r(() => {
-      const $ = [
+  setup(e, { expose: t, emit: s }) {
+    const l = e, o = (y) => _e(y), { value: r, errorMessage: d } = Se(l.name, l.rules, {
+      validateOnMount: l.validateOnMount,
+      validateOnValueUpdate: l.validateOnValueUpdate,
+      initialValue: l.modelValue
+    }), i = O(null), f = O(""), c = O([]), C = O(!1), b = O(1), h = O(Ee()), k = u(() => n(l.label) || n(l.name)), m = u(() => {
+      const y = d.value;
+      return !y || !n(l.useLabelInErrors) ? y : y.replace("Value", k.value);
+    }), z = u(() => m.value || n(l.help)), w = u(() => !!z.value), $ = u(
+      () => w.value ? `${n(l.name)}-${h.value}` : void 0
+    ), j = u(
+      () => d.value ? "text-danger" : "text-foreground-2"
+    ), E = u(
+      () => l.buttonStyle !== "simple" && l.clearable && !l.disabled
+    ), g = u(() => {
+      const y = ["relative flex group"];
+      return d.value ? (y.push("hover:shadow rounded-md"), y.push("text-danger-darker focus:border-danger focus:ring-danger"), l.buttonStyle !== "simple" && y.push("outline outline-2 outline-danger")) : l.buttonStyle !== "simple" && (y.push("hover:shadow rounded-md"), y.push("outline outline-2 outline-primary-muted")), l.fixedHeight && y.push("h-8"), y.join(" ");
+    }), T = u(() => {
+      const y = [];
+      return l.buttonStyle !== "simple" && y.push(
+        Y.value ? "bg-foundation-disabled text-foreground-disabled" : ""
+      ), Y.value && y.push("cursor-not-allowed"), y.join(" ");
+    }), U = u(() => {
+      const y = [
         "relative z-[1]",
         "flex items-center justify-center text-center shrink-0",
         "rounded-r-md overflow-hidden transition-all",
         "text-foreground",
-        Se.value ? `w-6 ${g.value}` : "w-0"
+        xe.value ? `w-6 ${T.value}` : "w-0"
       ];
-      return Z.value || ($.push(
+      return Y.value || (y.push(
         "hover:bg-primary hover:text-foreground-on-primary dark:text-foreground-on-primary"
-      ), s.buttonStyle === "tinted" ? $.push("bg-outline-3") : $.push("bg-primary-muted")), $.join(" ");
-    }), E = r(() => {
-      const $ = [
+      ), l.buttonStyle === "tinted" ? y.push("bg-outline-3") : y.push("bg-primary-muted")), y.join(" ");
+    }), F = u(() => {
+      const y = [
         "relative z-[2]",
         "normal rounded-md cursor-pointer transition truncate flex-1",
         "flex items-center",
-        g.value
+        T.value
       ];
-      return s.buttonStyle !== "simple" && ($.push("py-2 px-3"), Z.value || (s.buttonStyle === "tinted" ? $.push("bg-foundation-page text-foreground") : $.push("bg-foundation text-foreground"))), S.value && Se.value && $.push("rounded-r-none"), $.join(" ");
-    }), F = r(
-      () => !!(s.search && (s.filterPredicate || s.getSearchResults))
-    ), X = r(() => F.value && s.getSearchResults), Z = r(
-      () => s.disabled || !s.items.length && !X.value
-    ), U = r({
+      return l.buttonStyle !== "simple" && (y.push("py-2 px-3"), Y.value || (l.buttonStyle === "tinted" ? y.push("bg-foundation-page text-foreground") : y.push("bg-foundation text-foreground"))), E.value && xe.value && y.push("rounded-r-none"), y.join(" ");
+    }), ae = u(
+      () => !!(l.search && (l.filterPredicate || l.getSearchResults))
+    ), G = u(() => ae.value && l.getSearchResults), Y = u(
+      () => l.disabled || !l.items.length && !G.value
+    ), K = u({
       get: () => {
-        const $ = o.value;
-        return s.multiple ? q($) ? $ : [] : q($) ? void 0 : $;
+        const y = r.value;
+        return l.multiple ? X(y) ? y : [] : X(y) ? void 0 : y;
       },
-      set: ($) => {
-        if (s.multiple && !q($)) {
+      set: (y) => {
+        if (l.multiple && !X(y)) {
           console.warn("Attempting to set non-array value in selector w/ multiple=true");
           return;
-        } else if (!s.multiple && q($)) {
+        } else if (!l.multiple && X(y)) {
           console.warn("Attempting to set array value in selector w/ multiple=false");
           return;
         }
-        let D;
-        if (s.multiple)
-          D = $ || [];
+        let B;
+        if (l.multiple)
+          B = y || [];
         else {
-          const V = o.value;
-          D = s.allowUnset && V && $ && ce(V) === ce($) ? void 0 : $;
+          const I = r.value;
+          B = l.allowUnset && I && y && ee(I) === ee(y) ? void 0 : y;
         }
-        s.fullyControlValue ? t("update:modelValue", D) : o.value = D, b.value += 1;
+        l.fullyControlValue ? s("update:modelValue", B) : r.value = B, b.value += 1;
       }
-    }), Se = r(() => s.multiple ? U.value.length !== 0 : !!U.value), qe = () => {
-      s.multiple ? U.value = [] : U.value = void 0;
-    }, He = r(() => {
-      const $ = f.value;
-      return !F.value || !($ != null && $.length) ? x.value : s.filterPredicate ? x.value.filter(
-        (D) => {
-          var V;
-          return ((V = s.filterPredicate) == null ? void 0 : V.call(s, D, $)) || !1;
+    }), xe = u(() => l.multiple && X(K.value) ? K.value.length !== 0 : !!K.value), Be = () => {
+      l.multiple ? K.value = [] : K.value = void 0;
+    }, Ve = u(() => {
+      const y = f.value;
+      return !ae.value || !(y != null && y.length) ? c.value : l.filterPredicate ? c.value.filter(
+        (B) => {
+          var I;
+          return ((I = l.filterPredicate) == null ? void 0 : I.call(l, B, y)) || !1;
         }
-      ) : x.value;
-    }), Ie = ($) => JSON.stringify($), ce = ($) => s.by ? $[s.by] : $, de = async () => {
-      if (!(!X.value || !s.getSearchResults)) {
-        p.value = !0;
+      ) : c.value;
+    }), ke = (y) => JSON.stringify(y), ee = (y) => o(y) ? y[l.by || "id"] : y, he = async () => {
+      if (!(!G.value || !l.getSearchResults)) {
+        C.value = !0;
         try {
-          x.value = await s.getSearchResults(f.value);
+          c.value = await l.getSearchResults(f.value);
         } finally {
-          p.value = !1;
+          C.value = !1;
         }
       }
-    }, Ge = ze(de, 1e3), Ke = ($) => {
-      const { active: D, disabled: V } = $ || {}, { hideCheckmarks: K } = s, N = [
+    }, Le = Fe(he, 1e3), me = (y) => {
+      const { active: B, disabled: I } = y || {}, { hideCheckmarks: W } = l, H = [
         "relative transition cursor-pointer select-none py-1.5 pl-3",
-        K ? "" : "pr-9"
+        W ? "" : "pr-9"
       ];
-      return V ? N.push("opacity-50 cursor-not-allowed") : N.push(D ? "text-primary" : "text-foreground"), N.join(" ");
+      return I ? H.push("opacity-50 cursor-not-allowed") : H.push(B ? "text-primary" : "text-foreground"), H.join(" ");
     };
-    return le(
-      () => s.items,
-      ($) => {
-        x.value = $.slice();
+    return te(
+      () => l.items,
+      (y) => {
+        c.value = y.slice();
       },
       { immediate: !0 }
-    ), le(f, () => {
-      X.value && Ge();
-    }), Y(() => {
-      X.value && !s.items.length && de();
-    }), n({ triggerSearch: de }), ($, D) => (a(), m("div", null, [
-      (a(), L(l(St), {
+    ), te(f, () => {
+      G.value && Le();
+    }), se(() => {
+      G.value && !l.items.length && he();
+    }), t({ triggerSearch: he }), (y, B) => (a(), p("div", null, [
+      (a(), P(n(ls), {
         key: b.value,
-        modelValue: U.value,
-        "onUpdate:modelValue": D[4] || (D[4] = (V) => U.value = V),
+        modelValue: K.value,
+        "onUpdate:modelValue": B[4] || (B[4] = (I) => K.value = I),
         name: e.name,
         multiple: e.multiple,
         by: e.by,
-        disabled: Z.value,
+        disabled: Y.value,
         as: "div"
       }, {
         default: _(() => [
-          P(l(It), {
-            class: k(["block label text-foreground-2 mb-2", { "sr-only": !e.showLabel }])
+          V(n(ns), {
+            class: x(["block label text-foreground-2 mb-2", { "sr-only": !e.showLabel }])
           }, {
             default: _(() => [
-              M(B(e.label), 1)
+              M(L(e.label), 1)
             ]),
             _: 1
           }, 8, ["class"]),
-          i("div", {
-            class: k(R.value)
+          v("div", {
+            class: x(g.value)
           }, [
-            P(l(Bt), {
-              class: k(E.value)
+            V(n(as), {
+              class: x(F.value)
             }, {
-              default: _(({ open: V }) => [
-                i("div", mn, [
-                  i("div", gn, [
-                    !U.value || l(q)(U.value) && !U.value.length ? z($.$slots, "nothing-selected", { key: 0 }, () => [
-                      M(B(e.label), 1)
-                    ]) : z($.$slots, "something-selected", {
+              default: _(({ open: I }) => [
+                v("div", Hl, [
+                  v("div", Kl, [
+                    !K.value || n(X)(K.value) && !K.value.length ? R(y.$slots, "nothing-selected", { key: 0 }, () => [
+                      M(L(e.placeholder ? e.placeholder : e.label), 1)
+                    ]) : R(y.$slots, "something-selected", {
                       key: 1,
-                      value: U.value
+                      value: K.value
                     }, () => [
-                      M(B(Ie(U.value)), 1)
+                      M(L(ke(K.value)), 1)
                     ])
                   ]),
-                  i("div", vn, [
-                    V ? (a(), L(l(De), {
+                  v("div", Gl, [
+                    m.value ? (a(), P(n(_t), {
                       key: 0,
+                      class: "h-4 w-4 text-danger",
+                      "aria-hidden": "true"
+                    })) : e.showRequired ? (a(), p("div", Xl, " * ")) : S("", !0),
+                    I ? (a(), P(n(st), {
+                      key: 2,
                       class: "h-4 w-4 text-foreground",
                       "aria-hidden": "true"
-                    })) : (a(), L(l(et), {
-                      key: 1,
+                    })) : (a(), P(n(zt), {
+                      key: 3,
                       class: "h-4 w-4 text-foreground",
                       "aria-hidden": "true"
                     }))
@@ -1908,106 +1945,106 @@ const Ue = /* @__PURE__ */ Fe(hn, [["__scopeId", "data-v-60cf597b"]]), mn = { cl
               ]),
               _: 3
             }, 8, ["class"]),
-            S.value ? ne((a(), m("button", {
+            E.value ? de((a(), p("button", {
               key: 0,
-              class: k(T.value),
+              class: x(U.value),
               disabled: e.disabled,
-              onClick: D[0] || (D[0] = (V) => qe())
+              onClick: B[0] || (B[0] = (I) => Be())
             }, [
-              P(l(tt), { class: "w-3 h-3" })
-            ], 10, bn)), [
-              [l(Re), "Clear"]
-            ]) : I("", !0),
-            P(ge, {
+              V(n(Re), { class: "w-3 h-3" })
+            ], 10, Zl)), [
+              [n(rt), "Clear"]
+            ]) : S("", !0),
+            V(Ae, {
               "leave-active-class": "transition ease-in duration-100",
               "leave-from-class": "opacity-100",
               "leave-to-class": "opacity-0"
             }, {
               default: _(() => [
-                P(l(_t), {
+                V(n(os), {
                   class: "absolute top-[100%] z-10 mt-1 w-full rounded-md bg-foundation-2 py-1 label label--light outline outline-2 outline-primary-muted focus:outline-none shadow",
-                  onFocus: D[3] || (D[3] = (V) => {
-                    var K;
-                    return (K = d.value) == null ? void 0 : K.focus();
+                  onFocus: B[3] || (B[3] = (I) => {
+                    var W;
+                    return (W = i.value) == null ? void 0 : W.focus();
                   })
                 }, {
                   default: _(() => [
-                    F.value ? (a(), m("label", yn, [
-                      xn,
-                      i("div", kn, [
-                        i("div", Cn, [
-                          P(l(st), { class: "h-5 w-5 text-foreground" })
+                    ae.value ? (a(), p("label", Ql, [
+                      Nl,
+                      v("div", Jl, [
+                        v("div", Yl, [
+                          V(n(Pt), { class: "h-5 w-5 text-foreground" })
                         ]),
-                        ne(i("input", {
+                        de(v("input", {
                           ref_key: "searchInput",
-                          ref: d,
-                          "onUpdate:modelValue": D[1] || (D[1] = (V) => f.value = V),
+                          ref: i,
+                          "onUpdate:modelValue": B[1] || (B[1] = (I) => f.value = I),
                           type: "text",
                           class: "pl-9 w-full border-0 bg-foundation-page rounded placeholder:font-normal normal placeholder:text-foreground-2 focus:outline-none focus:ring-1 focus:border-outline-1 focus:ring-outline-1",
                           placeholder: e.searchPlaceholder,
-                          onKeydown: D[2] || (D[2] = ye(() => {
+                          onKeydown: B[2] || (B[2] = le(() => {
                           }, ["stop"]))
-                        }, null, 40, wn), [
-                          [Ae, f.value]
+                        }, null, 40, en), [
+                          [Me, f.value]
                         ])
                       ])
-                    ])) : I("", !0),
-                    i("div", {
-                      class: k(["overflow-auto simple-scrollbar", [F.value ? "max-h-52" : "max-h-60"]])
+                    ])) : S("", !0),
+                    v("div", {
+                      class: x(["overflow-auto simple-scrollbar", [ae.value ? "max-h-52" : "max-h-60"]])
                     }, [
-                      X.value && p.value ? (a(), m("div", $n, [
-                        P(Ue, { loading: !0 })
-                      ])) : X.value && !x.value.length ? (a(), m("div", Sn, [
-                        z($.$slots, "nothing-found", {}, () => [
-                          In
+                      G.value && C.value ? (a(), p("div", tn, [
+                        V(He, { loading: !0 })
+                      ])) : G.value && !c.value.length ? (a(), p("div", sn, [
+                        R(y.$slots, "nothing-found", {}, () => [
+                          ln
                         ])
-                      ])) : I("", !0),
-                      !X.value || !p.value ? (a(!0), m(W, { key: 2 }, G(He.value, (V) => {
-                        var K;
-                        return a(), L(l(Pt), {
-                          key: ce(V),
-                          value: V,
-                          disabled: ((K = e.disabledItemPredicate) == null ? void 0 : K.call(e, V)) || !1
+                      ])) : S("", !0),
+                      !G.value || !C.value ? (a(!0), p(D, { key: 2 }, q(Ve.value, (I) => {
+                        var W;
+                        return a(), P(n(rs), {
+                          key: ee(I),
+                          value: I,
+                          disabled: ((W = e.disabledItemPredicate) == null ? void 0 : W.call(e, I)) || !1
                         }, {
-                          default: _(({ active: N, selected: Be }) => {
-                            var _e, Pe;
+                          default: _(({ active: H, selected: oe }) => {
+                            var re, we;
                             return [
-                              i("li", {
-                                class: k(
-                                  Ke({
-                                    active: N,
-                                    disabled: ((_e = e.disabledItemPredicate) == null ? void 0 : _e.call(e, V)) || !1
+                              v("li", {
+                                class: x(
+                                  me({
+                                    active: H,
+                                    disabled: ((re = e.disabledItemPredicate) == null ? void 0 : re.call(e, I)) || !1
                                   })
                                 )
                               }, [
-                                i("span", Bn, [
-                                  z($.$slots, "option", {
-                                    item: V,
-                                    active: N,
-                                    selected: Be,
-                                    disabled: ((Pe = e.disabledItemPredicate) == null ? void 0 : Pe.call(e, V)) || !1
+                                v("span", nn, [
+                                  R(y.$slots, "option", {
+                                    item: I,
+                                    active: H,
+                                    selected: oe,
+                                    disabled: ((we = e.disabledItemPredicate) == null ? void 0 : we.call(e, I)) || !1
                                   }, () => [
-                                    M(B(Ie(V)), 1)
+                                    M(L(ke(I)), 1)
                                   ])
                                 ]),
-                                !e.hideCheckmarks && Be ? (a(), m("span", {
+                                !e.hideCheckmarks && oe ? (a(), p("span", {
                                   key: 0,
-                                  class: k([
-                                    N ? "text-primary" : "text-foreground",
+                                  class: x([
+                                    H ? "text-primary" : "text-foreground",
                                     "absolute inset-y-0 right-0 flex items-center pr-4"
                                   ])
                                 }, [
-                                  P(l(nt), {
+                                  V(n(lt), {
                                     class: "h-5 w-5",
                                     "aria-hidden": "true"
                                   })
-                                ], 2)) : I("", !0)
+                                ], 2)) : S("", !0)
                               ], 2)
                             ];
                           }),
                           _: 2
                         }, 1032, ["value", "disabled"]);
-                      }), 128)) : I("", !0)
+                      }), 128)) : S("", !0)
                     ], 2)
                   ]),
                   _: 3
@@ -2019,37 +2056,37 @@ const Ue = /* @__PURE__ */ Fe(hn, [["__scopeId", "data-v-60cf597b"]]), mn = { cl
         ]),
         _: 3
       }, 8, ["modelValue", "name", "multiple", "by", "disabled"])),
-      v.value ? (a(), m("p", {
+      $.value ? (a(), p("p", {
         key: 0,
-        id: v.value,
-        class: k(["mt-2 text-sm", w.value])
-      }, B(u.value), 11, _n)) : I("", !0)
+        id: $.value,
+        class: x(["mt-2 text-sm", j.value])
+      }, L(z.value), 11, an)) : S("", !0)
     ]));
   }
-}), Ln = /* @__PURE__ */ A({
+}), on = /* @__PURE__ */ A({
   __name: "SourceAppBadge",
   props: {
     sourceApp: null
   },
   setup(e) {
-    return (n, t) => (a(), L(ns, {
+    return (t, s) => (a(), P(De, {
       "color-classes": "text-foreground-on-primary",
       rounded: "",
       style: fe({ backgroundColor: e.sourceApp.bgColor })
     }, {
       default: _(() => [
-        M(B(e.sourceApp.short), 1)
+        M(L(e.sourceApp.short), 1)
       ]),
       _: 1
     }, 8, ["style"]));
   }
-}), jn = {
+}), rn = {
   key: 0,
   class: "text-foreground-2 normal"
-}, Vn = {
+}, un = {
   key: 1,
   class: "flex items-center"
-}, On = { class: "truncate" }, An = { class: "flex items-center" }, Mn = { class: "truncate" }, _l = /* @__PURE__ */ A({
+}, cn = { class: "truncate" }, dn = { class: "flex items-center" }, fn = { class: "truncate" }, Ra = /* @__PURE__ */ A({
   __name: "SourceApps",
   props: {
     /**
@@ -2105,129 +2142,217 @@ const Ue = /* @__PURE__ */ Fe(hn, [["__scopeId", "data-v-60cf597b"]]), mn = { cl
     items: {
       type: Array,
       default: void 0
+    },
+    clearable: {
+      type: Boolean
+    },
+    help: {
+      type: String
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: n }) {
-    const t = e, s = O(null), o = O(null), { selectedValue: c, hiddenSelectedItemCount: d, isMultiItemArrayValue: f, firstItem: x } = cn({
-      props: ae(t),
-      emit: n,
-      dynamicVisibility: { elementToWatchForChanges: s, itemContainer: o }
-    }), p = (b, y) => b.name.toLocaleLowerCase().includes(y.toLocaleLowerCase());
-    return (b, y) => (a(), L(Pn, {
-      modelValue: l(c),
-      "onUpdate:modelValue": y[0] || (y[0] = (h) => ve(c) ? c.value = h : null),
+  setup(e, { emit: t }) {
+    const s = e, l = O(null), o = O(null), { selectedValue: r, hiddenSelectedItemCount: d, isMultiItemArrayValue: i, firstItem: f } = ft({
+      props: N(s),
+      emit: t,
+      dynamicVisibility: { elementToWatchForChanges: l, itemContainer: o }
+    }), c = (C, b) => C.name.toLocaleLowerCase().includes(b.toLocaleLowerCase());
+    return (C, b) => (a(), P(pt, {
+      modelValue: n(r),
+      "onUpdate:modelValue": b[0] || (b[0] = (h) => $e(r) ? r.value = h : null),
       multiple: e.multiple,
-      items: e.items ?? l(yt),
+      items: e.items ?? n(Xt),
       search: e.search,
       "search-placeholder": e.searchPlaceholder,
       label: e.label,
       "show-label": e.showLabel,
       name: e.name || "sourceApps",
-      "filter-predicate": p,
+      "filter-predicate": c,
+      clearable: e.clearable,
+      help: e.help,
       by: "name"
     }, {
       "nothing-selected": _(() => [
-        e.selectorPlaceholder ? (a(), m(W, { key: 0 }, [
-          M(B(e.selectorPlaceholder), 1)
-        ], 64)) : (a(), m(W, { key: 1 }, [
-          M(B(e.multiple ? "Select apps" : "Select an app"), 1)
+        e.selectorPlaceholder ? (a(), p(D, { key: 0 }, [
+          M(L(e.selectorPlaceholder), 1)
+        ], 64)) : (a(), p(D, { key: 1 }, [
+          M(L(e.multiple ? "Select apps" : "Select an app"), 1)
         ], 64))
       ]),
       "something-selected": _(({ value: h }) => [
-        l(f)(h) ? (a(), m("div", {
+        n(i)(h) ? (a(), p("div", {
           key: 0,
           ref_key: "elementToWatchForChanges",
-          ref: s,
+          ref: l,
           class: "flex items-center space-x-0.5 h-5"
         }, [
-          i("div", {
+          v("div", {
             ref_key: "itemContainer",
             ref: o,
             class: "flex flex-wrap overflow-hidden space-x-0.5 h-5"
           }, [
-            (a(!0), m(W, null, G(h, (C) => (a(), L(Ln, {
-              key: C.name,
-              "source-app": C
+            (a(!0), p(D, null, q(h, (k) => (a(), P(on, {
+              key: k.name,
+              "source-app": k
             }, null, 8, ["source-app"]))), 128))
           ], 512),
-          l(d) > 0 ? (a(), m("div", jn, " +" + B(l(d)), 1)) : I("", !0)
-        ], 512)) : (a(), m("div", Vn, [
-          i("div", {
+          n(d) > 0 ? (a(), p("div", rn, " +" + L(n(d)), 1)) : S("", !0)
+        ], 512)) : (a(), p("div", un, [
+          v("div", {
             class: "h-2 w-2 rounded-full mr-2",
-            style: fe({ backgroundColor: l(x)(h).bgColor })
+            style: fe({ backgroundColor: n(f)(h).bgColor })
           }, null, 4),
-          i("span", On, B(l(x)(h).name), 1)
+          v("span", cn, L(n(f)(h).name), 1)
         ]))
       ]),
       option: _(({ item: h }) => [
-        i("div", An, [
-          i("div", {
+        v("div", dn, [
+          v("div", {
             class: "h-2 w-2 rounded-full mr-2",
             style: fe({ backgroundColor: h.bgColor })
           }, null, 4),
-          i("span", Mn, B(h.name), 1)
+          v("span", fn, L(h.name), 1)
         ])
       ]),
       _: 1
-    }, 8, ["modelValue", "multiple", "items", "search", "search-placeholder", "label", "show-label", "name"]));
+    }, 8, ["modelValue", "multiple", "items", "search", "search-placeholder", "label", "show-label", "name", "clearable", "help"]));
+  }
+}), pn = { class: "flex flex-wrap gap-1.5 text-xs" }, Ea = /* @__PURE__ */ A({
+  __name: "Badges",
+  props: {
+    items: null,
+    label: null,
+    name: null,
+    help: null,
+    modelValue: null,
+    multiple: { type: Boolean },
+    rules: null,
+    by: null
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const s = e, { selectedValue: l, isArrayValue: o } = ft({
+      props: N(s),
+      emit: t
+    }), r = (d) => {
+      o(l.value) ? l.value = l.value.filter((i) => i.id !== d.id) : l.value = void 0;
+    };
+    return (d, i) => (a(), P(pt, {
+      modelValue: n(l),
+      "onUpdate:modelValue": i[0] || (i[0] = (f) => $e(l) ? l.value = f : null),
+      multiple: e.multiple,
+      items: e.items,
+      label: e.label,
+      name: e.name,
+      help: e.help,
+      rules: e.rules,
+      by: e.by
+    }, {
+      "something-selected": _(({ value: f }) => [
+        v("ul", pn, [
+          (a(!0), p(D, null, q(n(o)(f) ? f : [f], (c) => (a(), p("li", {
+            key: c[e.by]
+          }, [
+            V(De, {
+              size: "lg",
+              "clickable-icon": !0,
+              "icon-left": n(Re),
+              onClickIcon: le((C) => r(c), ["stop"])
+            }, {
+              default: _(() => [
+                M(L(c.text), 1)
+              ]),
+              _: 2
+            }, 1032, ["icon-left", "onClickIcon"])
+          ]))), 128))
+        ])
+      ]),
+      option: _(({ item: f }) => [
+        M(L(f.text), 1)
+      ]),
+      _: 1
+    }, 8, ["modelValue", "multiple", "items", "label", "name", "help", "rules", "by"]));
+  }
+}), hn = { class: "flex items-center" }, mn = { class: "absolute inset-0 flex items-center gap-2 px-1 text-white" }, Ua = /* @__PURE__ */ A({
+  __name: "Switch",
+  props: {
+    modelValue: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = Je(e, "modelValue");
+    return (s, l) => (a(), p("div", hn, [
+      V(n(is), {
+        modelValue: t.value,
+        "onUpdate:modelValue": l[0] || (l[0] = (o) => t.value = o),
+        class: x(["relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary", { "bg-primary": t.value, "bg-primary-muted": !t.value }])
+      }, {
+        default: _(() => [
+          v("div", mn, [
+            V(n(lt), { class: "h-5 w-5 drop-shadow-md" }),
+            V(n(Re), { class: "h-5 w-5 drop-shadow-md" })
+          ]),
+          v("span", {
+            class: x(["scale-95 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200", { "translate-x-5": t.value, "translate-x-0": !t.value }])
+          }, null, 2)
+        ]),
+        _: 1
+      }, 8, ["modelValue", "class"])
+    ]));
   }
 });
-var se = /* @__PURE__ */ ((e) => (e.CtrlOrCmd = "cmd-or-ctrl", e.AltOrOpt = "alt-or-opt", e.Shift = "shift", e))(se || {});
-const he = xt(), zn = {
+var be = /* @__PURE__ */ ((e) => (e.CtrlOrCmd = "cmd-or-ctrl", e.AltOrOpt = "alt-or-opt", e.Shift = "shift", e))(be || {});
+const Pe = Zt(), vn = {
   [
     "cmd-or-ctrl"
     /* CtrlOrCmd */
-  ]: he === pe.Mac ? "Cmd" : "Ctrl",
+  ]: Pe === ze.Mac ? "Cmd" : "Ctrl",
   [
     "alt-or-opt"
     /* AltOrOpt */
-  ]: he === pe.Mac ? "Opt" : "Alt",
+  ]: Pe === ze.Mac ? "Opt" : "Alt",
   shift: "Shift"
 };
-function Pl(e) {
-  const n = (t) => Object.values(se).includes(t);
-  return e.map((t) => n(t) ? zn[t] : t).join("+");
+function Da(e) {
+  const t = (s) => Object.values(be).includes(s);
+  return e.map((s) => t(s) ? vn[s] : s).join("+");
 }
-function Ll(e, ...n) {
-  wt(
-    n[0],
-    (t) => {
-      const s = t.getModifierState("Alt"), o = he === pe.Mac ? t.getModifierState("Meta") : t.getModifierState("Control"), c = t.getModifierState("Shift");
+function Wa(e, ...t) {
+  Yt(
+    t[0],
+    (s) => {
+      const l = s.getModifierState("Alt"), o = Pe === ze.Mac ? s.getModifierState("Meta") : s.getModifierState("Control"), r = s.getModifierState("Shift");
       for (const d of e)
         switch (d) {
-          case se.CtrlOrCmd:
+          case be.CtrlOrCmd:
             if (!o)
               return;
             break;
-          case se.AltOrOpt:
-            if (!s)
+          case be.AltOrOpt:
+            if (!l)
               return;
             break;
-          case se.Shift:
-            if (!c)
+          case be.Shift:
+            if (!r)
               return;
             break;
         }
-      n[1](t);
+      t[1](s);
     },
-    n[2]
+    t[2]
   );
 }
-function jl(e) {
-  const n = (e == null ? void 0 : e.model) || O(), t = r({
-    get: () => !!n.value,
-    set: (s) => n.value = s ? !0 : void 0
+function qa(e) {
+  const t = (e == null ? void 0 : e.model) || O(), s = u({
+    get: () => !!t.value,
+    set: (l) => t.value = l ? !0 : void 0
   });
-  return { model: n, isChecked: t };
+  return { model: t, isChecked: s };
 }
-const Dn = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 dark:bg-neutral-900/70 transition-opacity" }, null, -1), Tn = { class: "fixed inset-0 z-10 overflow-y-auto" }, Rn = { class: "flex min-h-full justify-center p-4 text-center items-center sm:p-0" }, Fn = {
+const gn = /* @__PURE__ */ v("div", { class: "fixed inset-0 bg-neutral-100/70 dark:bg-neutral-900/70 transition-opacity backdrop-blur-xs" }, null, -1), bn = { class: "fixed inset-0 z-10 h-screen w-screen" }, yn = { class: "flex justify-center items-center h-full w-full p-4 sm:p-0" }, xn = {
   key: 0,
-  class: "flex items-center justify-center shadow p-4 relative z-10 bg-foundation rounded-t-lg"
-}, En = { class: "text-2xl font-bold" }, Wn = { class: "p-4 sm:p-6" }, Un = {
-  key: 2,
-  class: "flex p-4 sm:px-6 sm:py-5 border-t gap-2 border-outline-3"
-}, Vl = /* @__PURE__ */ A({
+  class: "flex items-center justify-start rounded-t-lg shrink-0 h-16 px-8"
+}, kn = { class: "text-2xl font-bold" }, Ha = /* @__PURE__ */ A({
   __name: "Dialog",
   props: {
     open: { type: Boolean },
@@ -2239,12 +2364,12 @@ const Dn = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
     onSubmit: { type: Function }
   },
   emits: ["update:open", "fully-closed"],
-  setup(e, { emit: n }) {
-    const t = e, s = be(), o = r(() => !!t.onSubmit), c = r(() => t.buttons || s.buttons), d = r({
-      get: () => t.open,
-      set: (b) => n("update:open", b)
-    }), f = r(() => {
-      switch (t.maxWidth) {
+  setup(e, { emit: t }) {
+    const s = e, l = Te(), o = O(!1), r = O(!1), d = u(() => !!s.onSubmit), i = u(() => s.buttons || l.buttons), f = u({
+      get: () => s.open,
+      set: (k) => t("update:open", k)
+    }), c = u(() => {
+      switch (s.maxWidth) {
         case "sm":
           return 0;
         case "md":
@@ -2256,24 +2381,27 @@ const Dn = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
         default:
           return 1e4;
       }
-    }), x = r(() => {
-      const b = ["w-full", "sm:my-8 sm:w-full sm:max-w-xl"];
-      return !t.title && !c.value && b.push("px-4 pt-4 pb-4", "sm:p-6"), f.value >= 1 && b.push("md:max-w-2xl"), f.value >= 2 && b.push("lg:max-w-4xl"), f.value >= 3 && b.push("xl:max-w-6xl"), f.value >= 4 && b.push("2xl:max-w-7xl"), b.join(" ");
-    }), p = () => {
-      t.preventCloseOnClickOutside || (d.value = !1);
-    };
-    return (b, y) => (a(), L(l(Lt), {
+    }), C = u(() => {
+      const k = ["w-full", "sm:my-8 sm:w-full sm:max-w-xl"];
+      return c.value >= 1 && k.push("max-w-2xl"), c.value >= 2 && k.push("max-w-4xl"), c.value >= 3 && k.push("max-w-6xl"), c.value >= 4 && k.push("max-w-7xl"), k.join(" ");
+    }), b = () => {
+      s.preventCloseOnClickOutside || (f.value = !1);
+    }, h = et((k) => {
+      const m = k.target, { scrollTop: z, offsetHeight: w, scrollHeight: $ } = m;
+      o.value = z > 0, r.value = z + w >= $;
+    }, 60);
+    return (k, m) => (a(), P(n(ot), {
       as: "template",
-      show: d.value
+      show: f.value
     }, {
       default: _(() => [
-        P(l(jt), {
+        V(n(us), {
           as: "div",
           class: "relative z-40",
-          onClose: p
+          onClose: b
         }, {
           default: _(() => [
-            P(l(Ve), {
+            V(n(Ze), {
               as: "template",
               enter: "ease-out duration-300",
               "enter-from": "opacity-0",
@@ -2283,13 +2411,13 @@ const Dn = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
               "leave-to": "opacity-0"
             }, {
               default: _(() => [
-                Dn
+                gn
               ]),
               _: 1
             }),
-            i("div", Tn, [
-              i("div", Rn, [
-                P(l(Ve), {
+            v("div", bn, [
+              v("div", yn, [
+                V(n(Ze), {
                   as: "template",
                   enter: "ease-out duration-300",
                   "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
@@ -2297,43 +2425,54 @@ const Dn = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
                   leave: "ease-in duration-200",
                   "leave-from": "opacity-100 translate-y-0 sm:scale-100",
                   "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-                  onAfterLeave: y[1] || (y[1] = (h) => b.$emit("fully-closed"))
+                  onAfterLeave: m[2] || (m[2] = (z) => k.$emit("fully-closed"))
                 }, {
                   default: _(() => [
-                    P(l(Vt), {
-                      class: k([
-                        "transform rounded-lg bg-foundation text-left shadow-xl transition-all",
-                        x.value
+                    V(n(cs), {
+                      class: x([
+                        "transform rounded-lg text-foreground overflow-hidden bg-foundation text-left shadow-xl transition-all flex flex-col max-h-[90vh]",
+                        C.value
                       ]),
-                      as: o.value ? "form" : "div",
-                      onSubmit: ye(e.onSubmit, ["prevent"])
+                      as: d.value ? "form" : "div",
+                      onSubmit: le(e.onSubmit, ["prevent"])
                     }, {
                       default: _(() => [
-                        e.title ? (a(), m("div", Fn, [
-                          i("h4", En, B(e.title), 1)
-                        ])) : I("", !0),
-                        e.hideCloser ? I("", !0) : (a(), m("button", {
-                          key: 1,
-                          class: "absolute z-20 top-5 right-4 text-foreground",
-                          onClick: y[0] || (y[0] = (h) => d.value = !1)
+                        v("div", {
+                          class: x(o.value && "relative z-10 shadow-lg")
+                        }, [
+                          e.title ? (a(), p("div", xn, [
+                            v("h4", kn, L(e.title), 1)
+                          ])) : S("", !0)
+                        ], 2),
+                        e.hideCloser ? S("", !0) : (a(), p("button", {
+                          key: 0,
+                          class: x(["absolute z-20 right-4 bg-foundation rounded-full p-1", e.title ? "top-4" : "top-3"]),
+                          onClick: m[0] || (m[0] = (z) => f.value = !1)
+                        }, [
+                          V(n(Et), { class: "h-6 w-6" })
+                        ], 2)),
+                        v("div", {
+                          class: x(["flex-1 simple-scrollbar overflow-y-auto bg-white dark:bg-foundation", e.title ? "py-6 px-8" : "p-10"]),
+                          onScroll: m[1] || (m[1] = //@ts-ignore
+                          (...z) => n(h) && n(h)(...z))
                         }, [
-                          P(l(ct), { class: "h-6 w-6" })
-                        ])),
-                        i("div", Wn, [
-                          z(b.$slots, "default", {}, () => [
+                          R(k.$slots, "default", {}, () => [
                             M("Put your content here!")
                           ])
-                        ]),
-                        c.value ? (a(), m("div", Un, [
-                          e.buttons ? (a(!0), m(W, { key: 0 }, G(e.buttons, (h, C) => (a(), L(l(re), oe({ key: C }, h.props, {
-                            onClick: h.onClick
+                        ], 34),
+                        i.value ? (a(), p("div", {
+                          key: 1,
+                          class: x(["flex p-4 sm:px-6 gap-2 shrink-0", !r.value && "shadow-t"])
+                        }, [
+                          e.buttons ? (a(!0), p(D, { key: 0 }, q(e.buttons, (z, w) => (a(), P(n(ne), ye({ key: w }, z.props, {
+                            onClick: z.onClick
                           }), {
                             default: _(() => [
-                              M(B(h.text), 1)
+                              M(L(z.text), 1)
                             ]),
                             _: 2
-                          }, 1040, ["onClick"]))), 128)) : z(b.$slots, "buttons", { key: 1 })
-                        ])) : I("", !0)
+                          }, 1040, ["onClick"]))), 128)) : R(k.$slots, "buttons", { key: 1 })
+                        ], 2)) : S("", !0)
                       ]),
                       _: 3
                     }, 8, ["class", "as", "onSubmit"])
@@ -2349,7 +2488,7 @@ const Dn = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
       _: 3
     }, 8, ["show"]));
   }
-}), qn = { class: "inline-flex items-center space-x-2" }, Hn = { class: "label-light" }, Ol = /* @__PURE__ */ A({
+}), wn = { class: "inline-flex items-center space-x-2" }, Cn = { class: "label-light" }, Ka = /* @__PURE__ */ A({
   __name: "Disclosure",
   props: {
     title: null,
@@ -2357,12 +2496,12 @@ const Dn = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
     color: { default: "default" }
   },
   setup(e) {
-    const n = e, t = r(() => {
+    const t = e, s = u(() => {
       const o = [
         "pr-3 h-10 w-full flex items-center justify-between border-l-2 px-2 rounded transition",
         "ring-1 font-medium"
       ];
-      switch (n.color) {
+      switch (t.color) {
         case "warning":
           o.push(
             "border-warning text-warning ring-warning-lighter hover:ring-warning"
@@ -2384,9 +2523,9 @@ const Dn = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
           break;
       }
       return o.join(" ");
-    }), s = r(() => {
+    }), l = u(() => {
       const o = ["mt-4 px-3 py-1 border-x "];
-      switch (n.color) {
+      switch (t.color) {
         case "warning":
           o.push("border-warning-lighter");
           break;
@@ -2403,32 +2542,32 @@ const Dn = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
       }
       return o.join(" ");
     });
-    return (o, c) => (a(), m("div", null, [
-      P(l(Ot), null, {
+    return (o, r) => (a(), p("div", null, [
+      V(n(ds), null, {
         default: _(({ open: d }) => [
-          P(l(At), {
-            class: k(t.value)
+          V(n(fs), {
+            class: x(s.value)
           }, {
             default: _(() => [
-              i("div", qn, [
-                e.icon ? (a(), L(H(e.icon), {
+              v("div", wn, [
+                e.icon ? (a(), P(Z(e.icon), {
                   key: 0,
                   class: "h-4 w-4"
-                })) : I("", !0),
-                i("span", null, B(e.title), 1)
+                })) : S("", !0),
+                v("span", null, L(e.title), 1)
               ]),
-              P(l(De), {
-                class: k([d ? "" : "rotate-180 transform", "h-5 w-5"])
+              V(n(st), {
+                class: x([d ? "" : "rotate-180 transform", "h-5 w-5"])
               }, null, 8, ["class"])
             ]),
             _: 2
           }, 1032, ["class"]),
-          P(l(Mt), {
-            class: k(s.value)
+          V(n(ps), {
+            class: x(l.value)
           }, {
             default: _(() => [
-              i("div", Hn, [
-                z(o.$slots, "default", {}, () => [
+              v("div", Cn, [
+                R(o.$slots, "default", {}, () => [
                   M("Panel contents")
                 ])
               ])
@@ -2441,136 +2580,136 @@ const Dn = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
     ]));
   }
 });
-var J = /* @__PURE__ */ ((e) => (e.Grid = "grid", e.List = "list", e))(J || {});
-const Al = /* @__PURE__ */ A({
+var ue = /* @__PURE__ */ ((e) => (e.Grid = "grid", e.List = "list", e))(ue || {});
+const Ga = /* @__PURE__ */ A({
   __name: "GridListToggle",
   props: {
     modelValue: null
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { emit: n }) {
-    const t = e, s = r({
-      get: () => t.modelValue || J.Grid,
-      set: (d) => n("update:modelValue", d)
-    }), o = r(
-      () => s.value === J.Grid ? lt : at
-    ), c = (d) => {
-      n("click", d);
-      const f = s.value === J.Grid ? J.List : J.Grid;
-      s.value = f;
+  setup(e, { emit: t }) {
+    const s = e, l = u({
+      get: () => s.modelValue || ue.Grid,
+      set: (d) => t("update:modelValue", d)
+    }), o = u(
+      () => l.value === ue.Grid ? jt : Ot
+    ), r = (d) => {
+      t("click", d);
+      const i = l.value === ue.Grid ? ue.List : ue.Grid;
+      l.value = i;
     };
-    return (d, f) => (a(), m("button", {
+    return (d, i) => (a(), p("button", {
       class: "flex items-center justify-center rounded bg-foundation h-8 w-8 shadow cursor-pointer text-foreground",
-      onClick: c
+      onClick: r
     }, [
-      (a(), L(H(o.value), { class: "h-6 w-6" }))
+      (a(), P(Z(o.value), { class: "h-6 w-6" }))
     ]));
   }
 });
-var Gn = /* @__PURE__ */ ((e) => (e[e.Throttle = 0] = "Throttle", e[e.Debounce = 1] = "Debounce", e))(Gn || {}), me = /* @__PURE__ */ ((e) => (e[e.Left = 0] = "Left", e[e.Right = 1] = "Right", e))(me || {});
-function Kn(e, n) {
-  if (!we)
+var $n = /* @__PURE__ */ ((e) => (e[e.Throttle = 0] = "Throttle", e[e.Debounce = 1] = "Debounce", e))($n || {}), je = /* @__PURE__ */ ((e) => (e[e.Left = 0] = "Left", e[e.Right = 1] = "Right", e))(je || {});
+function In(e, t) {
+  if (!Ue)
     return;
   const {
-    wait: t = 100,
-    throttleOrDebounce: s = 0
+    wait: s = 100,
+    throttleOrDebounce: l = 0
     /* Throttle */
-  } = n || {}, o = t ? s === 0 ? Qe(e, t) : ze(e, t) : e;
-  Y(() => window.addEventListener("resize", o)), Me(() => window.removeEventListener("resize", o));
+  } = t || {}, o = s ? l === 0 ? et(e, s) : Fe(e, s) : e;
+  se(() => window.addEventListener("resize", o)), Ye(() => window.removeEventListener("resize", o));
 }
-function Ml(e) {
-  Y(() => {
+function Xa(e) {
+  se(() => {
     window.addEventListener("beforeunload", e);
-  }), Me(() => {
+  }), Ye(() => {
     window.removeEventListener("beforeunload", e);
   });
 }
-function Xn(e) {
-  const { el: n, defaultDirection: t } = e, s = O(
-    Q(t) ? 1 : t
+function Sn(e) {
+  const { el: t, defaultDirection: s } = e, l = O(
+    ce(s) ? 1 : s
     /* Right */
-  ), o = r(() => {
-    const d = l(e.stopUpdatesBelowWidth);
-    if (!Q(d))
+  ), o = u(() => {
+    const d = n(e.stopUpdatesBelowWidth);
+    if (!ce(d))
       return d;
-    const f = l(n);
-    return f != null && f.offsetWidth ? f.offsetWidth * 2 : void 0;
-  }), c = () => {
-    if (!we)
+    const i = n(t);
+    return i != null && i.offsetWidth ? i.offsetWidth * 2 : void 0;
+  }), r = () => {
+    if (!Ue)
       return;
-    const d = l(n);
+    const d = n(t);
     if (!d)
       return;
-    const f = d.getBoundingClientRect(), x = f.x + f.width > window.innerWidth, p = f.x < 0;
-    x && p || !Q(o.value) && window.innerWidth < o.value || (x ? s.value = 0 : p && (s.value = 1));
+    const i = d.getBoundingClientRect(), f = i.x + i.width > window.innerWidth, c = i.x < 0;
+    f && c || !ce(o.value) && window.innerWidth < o.value || (f ? l.value = 0 : c && (l.value = 1));
   };
-  return Kn(() => c()), le(
-    () => l(n),
+  return In(() => r()), te(
+    () => n(t),
     (d) => {
-      d && c();
+      d && r();
     }
   ), {
-    direction: r(() => s.value),
-    recalculateDirection: c
+    direction: u(() => l.value),
+    recalculateDirection: r
   };
 }
-const Nn = ["disabled", "onClick"], zl = /* @__PURE__ */ A({
+const Bn = ["disabled", "onClick"], Za = /* @__PURE__ */ A({
   __name: "Menu",
   props: {
     open: { type: Boolean },
     items: null
   },
   emits: ["update:open", "chosen"],
-  setup(e, { emit: n }) {
-    const t = e, s = O(null), { direction: o } = Xn({
-      el: r(() => {
+  setup(e, { emit: t }) {
+    const s = e, l = O(null), { direction: o } = Sn({
+      el: u(() => {
         var h;
-        return ((h = s.value) == null ? void 0 : h.el) || null;
+        return ((h = l.value) == null ? void 0 : h.el) || null;
       }),
-      defaultDirection: me.Left,
+      defaultDirection: je.Left,
       stopUpdatesBelowWidth: 300
-    }), c = O(null), d = O(!1), f = r({
-      get: () => t.open || !1,
-      set: (h) => n("update:open", h)
-    }), x = (h) => {
-      const { active: C, disabled: u } = h, j = ["group flex w-full items-center rounded-md px-2 py-2 text-sm"];
-      return C ? j.push("bg-primary text-foreground-on-primary") : u ? j.push("text-foreground-disabled") : j.push("text-foreground"), j.join(" ");
-    }, p = (h, C) => {
-      n("chosen", { item: h, event: C });
-    }, b = () => {
+    }), r = O(null), d = O(!1), i = u({
+      get: () => s.open || !1,
+      set: (h) => t("update:open", h)
+    }), f = (h) => {
+      const { active: k, disabled: m } = h, z = ["group flex w-full items-center rounded-md px-2 py-2 text-sm"];
+      return k ? z.push("bg-primary text-foreground-on-primary") : m ? z.push("text-foreground-disabled") : z.push("text-foreground"), z.join(" ");
+    }, c = (h, k) => {
+      t("chosen", { item: h, event: k });
+    }, C = () => {
       var h;
-      return (h = c.value) == null ? void 0 : h.el.click();
-    }, y = (h) => {
-      const C = !!h;
-      return d.value = C, C;
+      return (h = r.value) == null ? void 0 : h.el.click();
+    }, b = (h) => {
+      const k = !!h;
+      return d.value = k, k;
     };
-    return le(d, (h, C) => {
-      h !== C && (f.value = h);
-    }), le(f, (h) => {
-      (h && !d.value || !h && d.value) && b();
-    }), (h, C) => (a(), L(l(zt), {
+    return te(d, (h, k) => {
+      h !== k && (i.value = h);
+    }), te(i, (h) => {
+      (h && !d.value || !h && d.value) && C();
+    }), (h, k) => (a(), P(n(hs), {
       as: "div",
       class: "relative inline-block"
     }, {
-      default: _(({ open: u }) => [
-        i("div", null, [
-          P(l(Dt), {
+      default: _(({ open: m }) => [
+        v("div", null, [
+          V(n(ms), {
             ref_key: "menuButton",
-            ref: c,
+            ref: r,
             class: "hidden",
-            onClick: C[0] || (C[0] = ye(() => {
+            onClick: k[0] || (k[0] = le(() => {
             }, ["stop", "prevent"]))
           }, null, 512),
-          i("div", {
-            class: k(u ? "pointer-events-none" : "")
+          v("div", {
+            class: x(m ? "pointer-events-none" : "")
           }, [
-            z(h.$slots, "default", {
-              toggle: b,
-              open: y(u)
+            R(h.$slots, "default", {
+              toggle: C,
+              open: b(m)
             })
           ], 2)
         ]),
-        P(ge, {
+        V(Ae, {
           "enter-active-class": "transition duration-100 ease-out",
           "enter-from-class": "transform scale-95 opacity-0",
           "enter-to-class": "transform scale-100 opacity-100",
@@ -2579,36 +2718,36 @@ const Nn = ["disabled", "onClick"], zl = /* @__PURE__ */ A({
           "leave-to-class": "transform scale-95 opacity-0"
         }, {
           default: _(() => [
-            P(l(Tt), {
+            V(n(vs), {
               ref_key: "menuItems",
-              ref: s,
-              class: k([
+              ref: l,
+              class: x([
                 "absolute mt-2 w-56 origin-top-right divide-y divide-outline-3 rounded-md bg-foundation shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-40",
-                l(o) === l(me).Left ? "right-0" : ""
+                n(o) === n(je).Left ? "right-0" : ""
               ])
             }, {
               default: _(() => [
-                (a(!0), m(W, null, G(e.items, (j, v) => (a(), m("div", {
-                  key: v,
+                (a(!0), p(D, null, q(e.items, (z, w) => (a(), p("div", {
+                  key: w,
                   class: "px-1 py-1"
                 }, [
-                  (a(!0), m(W, null, G(j, (w) => (a(), L(l(Rt), {
-                    key: w.id,
-                    disabled: w.disabled
+                  (a(!0), p(D, null, q(z, ($) => (a(), P(n(gs), {
+                    key: $.id,
+                    disabled: $.disabled
                   }, {
-                    default: _(({ active: S, disabled: R }) => [
-                      ne((a(), m("span", null, [
-                        i("button", {
-                          class: k(x({ active: S, disabled: R })),
-                          disabled: R,
-                          onClick: (g) => p(w, g)
+                    default: _(({ active: j, disabled: E }) => [
+                      de((a(), p("span", null, [
+                        v("button", {
+                          class: x(f({ active: j, disabled: E })),
+                          disabled: E,
+                          onClick: (g) => c($, g)
                         }, [
-                          z(h.$slots, "item", { item: w }, () => [
-                            M(B(w.title), 1)
+                          R(h.$slots, "item", { item: $ }, () => [
+                            M(L($.title), 1)
                           ])
-                        ], 10, Nn)
+                        ], 10, Bn)
                       ])), [
-                        [l(Re), w.disabled && w.disabledTooltip]
+                        [n(rt), $.disabled && $.disabledTooltip]
                       ])
                     ]),
                     _: 2
@@ -2624,33 +2763,108 @@ const Nn = ["disabled", "onClick"], zl = /* @__PURE__ */ A({
       _: 3
     }));
   }
-}), Jn = { class: "flex flex-col space-y-4" }, Qn = { class: "flex space-x-6" }, Dl = /* @__PURE__ */ A({
+}), Vn = { class: "flex flex-col space-y-4" }, Ln = { class: "flex space-x-6" }, Qa = /* @__PURE__ */ A({
   __name: "Tabs",
   props: {
     items: null
   },
   setup(e) {
-    const n = e, t = O(null), s = r(() => t.value && n.items.find((c) => c.id === t.value) || n.items[0]), o = (c) => {
-      t.value = c.id;
+    const t = e, s = O(null), l = u(() => s.value && t.items.find((r) => r.id === s.value) || t.items[0]), o = (r) => {
+      s.value = r.id;
     };
-    return (c, d) => (a(), m("div", Jn, [
-      i("div", Qn, [
-        (a(!0), m(W, null, G(e.items, (f) => (a(), L(re, {
-          key: f.id,
+    return (r, d) => (a(), p("div", Vn, [
+      v("div", Ln, [
+        (a(!0), p(D, null, q(e.items, (i) => (a(), P(ne, {
+          key: i.id,
           link: "",
-          color: s.value.id === f.id ? "default" : "secondary",
-          onClick: (x) => o(f)
+          color: l.value.id === i.id ? "default" : "secondary",
+          onClick: (f) => o(i)
         }, {
           default: _(() => [
-            M(B(f.title), 1)
+            M(L(i.title), 1)
           ]),
           _: 2
         }, 1032, ["color", "onClick"]))), 128))
       ]),
-      z(c.$slots, "default", { activeItem: s.value })
+      R(r.$slots, "default", { activeItem: l.value })
     ]));
   }
-}), Yn = { class: "w-full flex flex-col items-center my-2 space-y-2 mt-4" }, Zn = { class: "inline-flex items-center space-x-1" }, el = /* @__PURE__ */ i("span", { class: "text-foreground-2" }, "That's it, you've loaded everything!", -1), tl = { class: "w-full flex flex-col items-center my-2 space-y-2 mt-4" }, sl = { class: "inline-flex items-center space-x-1" }, nl = /* @__PURE__ */ i("span", { class: "text-foreground-2" }, "An error occurred while loading", -1), Tl = /* @__PURE__ */ A({
+}), _n = { class: "text-foreground" }, zn = { class: "w-full text-sm overflow-x-auto overflow-y-visible simple-scrollbar" }, Pn = ["onClick", "onKeypress"], jn = /* @__PURE__ */ v("div", { class: "text-gray-900 font-medium order-1" }, "Placeholder", -1), On = { class: "absolute right-1.5 gap-1 flex items-center p-0" }, Na = /* @__PURE__ */ A({
+  __name: "Table",
+  props: {
+    items: null,
+    buttons: null,
+    columns: null,
+    overflowCells: { type: Boolean },
+    onRowClick: { type: Function }
+  },
+  setup(e) {
+    const t = e, s = u(() => {
+      const d = (t.buttons || []).length;
+      let i = 16;
+      return d > 0 && (i = 48 + (d - 1) * 42), `${i}px`;
+    }), l = (d) => {
+      var i;
+      return ((i = t.columns.find((f) => f.id === d)) == null ? void 0 : i.classes) || "";
+    }, o = (d, i) => {
+      const f = l(d);
+      return i === 0 ? `bg-transparent py-3 pr-5 px-1 ${f}` : `lg:p-0 px-1 ${f}`;
+    }, r = (d) => {
+      var i;
+      (i = t.onRowClick) == null || i.call(t, d);
+    };
+    return (d, i) => (a(), p("div", _n, [
+      v("div", zn, [
+        e.items.length > 0 ? (a(), p("div", {
+          key: 0,
+          class: "grid z-10 grid-cols-12 items-center gap-6 font-semibold bg-foundation rounded-t-lg w-full border-b border-outline-3 pb-2 pt-4 px-4 min-w-[900px]",
+          style: fe({ paddingRight: s.value })
+        }, [
+          (a(!0), p(D, null, q(e.columns, (f) => (a(), p("div", {
+            key: f.id,
+            class: x([l(f.id), "capitalize"])
+          }, L(f.header), 3))), 128))
+        ], 4)) : S("", !0),
+        v("div", {
+          class: x(["divide-y divide-outline-3 h-full overflow-visible", { "pb-32": e.overflowCells }])
+        }, [
+          (a(!0), p(D, null, q(e.items, (f) => (a(), p("div", {
+            key: f.id,
+            class: x(["relative grid grid-cols-12 items-center gap-6 px-4 py-1 min-w-[900px] bg-foundation", { "cursor-pointer hover:bg-primary-muted": !!e.onRowClick }]),
+            style: fe({ paddingRight: s.value }),
+            tabindex: "0",
+            onClick: (c) => r(f),
+            onKeypress: (c) => r(f)
+          }, [
+            (a(!0), p(D, null, q(e.columns, (c, C) => (a(), p("div", {
+              key: c.id,
+              class: x(o(c.id, C)),
+              tabindex: "0"
+            }, [
+              R(d.$slots, c.id, { item: f }, () => [
+                jn
+              ])
+            ], 2))), 128)),
+            v("div", On, [
+              (a(!0), p(D, null, q(e.buttons, (c) => (a(), p("div", {
+                key: c.label
+              }, [
+                V(n(ne), {
+                  "icon-left": c.icon,
+                  size: "sm",
+                  color: "secondary",
+                  "hide-text": "",
+                  class: x(c.class),
+                  onClick: le((C) => c.action(f), ["stop"])
+                }, null, 8, ["icon-left", "class", "onClick"])
+              ]))), 128))
+            ])
+          ], 46, Pn))), 128))
+        ], 2)
+      ])
+    ]));
+  }
+}), An = { class: "w-full flex flex-col items-center my-2 space-y-2 mt-4" }, Mn = { class: "inline-flex items-center space-x-1" }, Tn = /* @__PURE__ */ v("span", { class: "text-foreground-2" }, "That's it, you've loaded everything!", -1), Fn = { class: "w-full flex flex-col items-center my-2 space-y-2 mt-4" }, Rn = { class: "inline-flex items-center space-x-1" }, En = /* @__PURE__ */ v("span", { class: "text-foreground-2" }, "An error occurred while loading", -1), Ja = /* @__PURE__ */ A({
   __name: "InfiniteLoading",
   props: {
     settings: null,
@@ -2658,58 +2872,58 @@ const Nn = ["disabled", "onClick"], zl = /* @__PURE__ */ A({
   },
   emits: ["infinite"],
   setup(e) {
-    const n = O(null), t = O(!1);
-    return we && Y(() => {
-      const s = setInterval(() => {
+    const t = O(null), s = O(!1);
+    return Ue && se(() => {
+      const l = setInterval(() => {
         var o;
-        (o = n.value) != null && o.isConnected && (t.value = !0, clearInterval(s));
+        (o = t.value) != null && o.isConnected && (s.value = !0, clearInterval(l));
       }, 200);
-    }), (s, o) => (a(), m("div", {
+    }), (l, o) => (a(), p("div", {
       ref_key: "wrapper",
-      ref: n
+      ref: t
     }, [
-      t.value ? (a(), L(l(Ft), oe({ key: 0 }, s.$props.settings || {}, {
-        onInfinite: o[0] || (o[0] = (c) => s.$emit("infinite", c))
+      s.value ? (a(), P(n(ks), ye({ key: 0 }, l.$props.settings || {}, {
+        onInfinite: o[0] || (o[0] = (r) => l.$emit("infinite", r))
       }), {
         spinner: _(() => [
-          P(Ue, {
+          V(He, {
             loading: !0,
             class: "my-2"
           })
         ]),
         complete: _(() => [
-          i("div", Yn, [
-            i("div", Zn, [
-              P(l(dt), { class: "w-5 h-5 text-success" }),
-              el
+          v("div", An, [
+            v("div", Mn, [
+              V(n(Ut), { class: "w-5 h-5 text-success" }),
+              Tn
             ])
           ])
         ]),
-        error: _(({ retry: c }) => [
-          i("div", tl, [
-            i("div", sl, [
-              P(l(ft), { class: "w-5 h-5 text-danger" }),
-              nl
+        error: _(({ retry: r }) => [
+          v("div", Fn, [
+            v("div", Rn, [
+              V(n(Dt), { class: "w-5 h-5 text-danger" }),
+              En
             ]),
-            e.allowRetry ? (a(), L(re, {
+            e.allowRetry ? (a(), P(ne, {
               key: 0,
-              onClick: c
+              onClick: r
             }, {
               default: _(() => [
                 M("Retry")
               ]),
               _: 2
-            }, 1032, ["onClick"])) : I("", !0)
+            }, 1032, ["onClick"])) : S("", !0)
           ])
         ]),
         _: 1
-      }, 16)) : I("", !0)
+      }, 16)) : S("", !0)
     ], 512));
   }
-}), ll = { class: "relative group" }, al = {
+}), Un = { class: "relative group" }, Dn = {
   key: 0,
   class: "absolute -inset-1 bg-blue-300 dark:bg-blue-500 opacity-5 dark:opacity-0 rounded-md blur-sm group-hover:opacity-60 dark:group-hover:opacity-30 transition duration-500"
-}, Rl = /* @__PURE__ */ A({
+}, Ya = /* @__PURE__ */ A({
   __name: "Panel",
   props: {
     /**
@@ -2746,48 +2960,48 @@ const Nn = ["disabled", "onClick"], zl = /* @__PURE__ */ A({
     }
   },
   emits: ["submit"],
-  setup(e, { emit: n }) {
-    const t = e, s = r(
-      () => t.customPadding ? "" : "px-4 py-4 sm:px-6"
-    ), o = r(
-      () => t.customPadding ? "" : "px-4 py-4 sm:p-6"
-    ), c = r(() => {
+  setup(e, { emit: t }) {
+    const s = e, l = u(
+      () => s.customPadding ? "" : "px-4 py-4 sm:px-6"
+    ), o = u(
+      () => s.customPadding ? "" : "px-4 py-4 sm:p-6"
+    ), r = u(() => {
       const d = ["rounded-lg"];
-      return t.noShadow || d.push("shadow"), t.ring && d.push("ring-outline-2 hover:ring-2"), t.panelClasses && d.push(t.panelClasses), d.join(" ");
+      return s.noShadow || d.push("shadow"), s.ring && d.push("ring-outline-2 hover:ring-2"), s.panelClasses && d.push(s.panelClasses), d.join(" ");
     });
-    return (d, f) => (a(), m("div", ll, [
-      e.fancyGlow ? (a(), m("div", al)) : I("", !0),
-      (a(), L(H(e.form ? "form" : "div"), {
-        class: k([
+    return (d, i) => (a(), p("div", Un, [
+      e.fancyGlow ? (a(), p("div", Dn)) : S("", !0),
+      (a(), P(Z(e.form ? "form" : "div"), {
+        class: x([
           "relative divide-outline-3 bg-foundation text-foreground flex flex-col divide-y overflow-hidden",
-          c.value
+          r.value
         ]),
-        onSubmit: f[0] || (f[0] = (x) => n("submit", x))
+        onSubmit: i[0] || (i[0] = (f) => t("submit", f))
       }, {
         default: _(() => [
-          d.$slots.header ? (a(), m("div", {
+          d.$slots.header ? (a(), p("div", {
             key: 0,
-            class: k(s.value)
+            class: x(l.value)
           }, [
-            z(d.$slots, "header")
-          ], 2)) : I("", !0),
-          i("div", {
-            class: k(["grow", o.value])
+            R(d.$slots, "header")
+          ], 2)) : S("", !0),
+          v("div", {
+            class: x(["grow", o.value])
           }, [
-            z(d.$slots, "default")
+            R(d.$slots, "default")
           ], 2),
-          d.$slots.footer ? (a(), m("div", {
+          d.$slots.footer ? (a(), p("div", {
             key: 1,
-            class: k(s.value)
+            class: x(l.value)
           }, [
-            z(d.$slots, "footer")
-          ], 2)) : I("", !0)
+            R(d.$slots, "footer")
+          ], 2)) : S("", !0)
         ]),
         _: 3
       }, 40, ["class"]))
     ]));
   }
-}), ol = { class: "flex-shrink-0" }, rl = /* @__PURE__ */ i("span", { class: "sr-only" }, "Dismiss", -1), Fl = /* @__PURE__ */ A({
+}), Wn = { class: "flex-shrink-0" }, qn = /* @__PURE__ */ v("span", { class: "sr-only" }, "Dismiss", -1), eo = /* @__PURE__ */ A({
   __name: "Alert",
   props: {
     color: { default: "success" },
@@ -2798,162 +3012,162 @@ const Nn = ["disabled", "onClick"], zl = /* @__PURE__ */ A({
   },
   emits: ["dismiss"],
   setup(e) {
-    const n = e, t = be(), s = r(() => !!t.description), o = r(() => {
-      if (n.customIcon)
-        return n.customIcon;
-      switch (n.color) {
+    const t = e, s = Te(), l = u(() => !!s.description), o = u(() => {
+      if (t.customIcon)
+        return t.customIcon;
+      switch (t.color) {
         case "info":
-          return vt;
+          return Kt;
         case "warning":
-          return xe;
+          return Ie;
         case "danger":
-          return gt;
+          return Ht;
         case "success":
         default:
-          return Te;
+          return at;
       }
-    }), c = r(() => {
-      const u = [];
-      switch (n.size) {
+    }), r = u(() => {
+      const m = [];
+      switch (t.size) {
         case "xs":
-          u.push("p-1");
+          m.push("p-1");
           break;
         case "default":
         default:
-          u.push(s.value ? "p-4" : "p-2");
+          m.push(l.value ? "p-4" : "p-2");
           break;
       }
-      switch (n.color) {
+      switch (t.color) {
         case "success":
-          u.push("bg-success-lighter border-l-4 border-success");
+          m.push("bg-success-lighter border-l-4 border-success");
           break;
         case "info":
-          u.push("bg-info-lighter border-l-4 border-info");
+          m.push("bg-info-lighter border-l-4 border-info");
           break;
         case "danger":
-          u.push("bg-danger-lighter border-l-4 border-danger");
+          m.push("bg-danger-lighter border-l-4 border-danger");
           break;
         case "warning":
-          u.push("bg-warning-lighter border-l-4 border-warning");
+          m.push("bg-warning-lighter border-l-4 border-warning");
           break;
       }
-      return u.join(" ");
-    }), d = r(() => {
-      const u = [];
-      if (s.value)
-        u.push("");
+      return m.join(" ");
+    }), d = u(() => {
+      const m = [];
+      if (l.value)
+        m.push("");
       else
-        switch (u.push("items-center"), n.size) {
+        switch (m.push("items-center"), t.size) {
           case "xs":
-            u.push("space-x-1");
+            m.push("space-x-1");
             break;
           case "default":
           default:
-            u.push("space-x-2");
+            m.push("space-x-2");
             break;
         }
-      return u.join(" ");
-    }), f = r(() => {
-      const u = ["grow"];
-      switch (s.value || u.push("flex items-center space-x-2"), n.size) {
+      return m.join(" ");
+    }), i = u(() => {
+      const m = ["grow"];
+      switch (l.value || m.push("flex items-center space-x-2"), t.size) {
         case "xs":
-          u.push("ml-1");
+          m.push("ml-1");
           break;
         case "default":
         default:
-          u.push("ml-3");
+          m.push("ml-3");
           break;
       }
-      return u.join(" ");
-    }), x = r(() => {
-      const u = [];
-      switch (n.size) {
+      return m.join(" ");
+    }), f = u(() => {
+      const m = [];
+      switch (t.size) {
         case "xs":
-          u.push("text-xs");
+          m.push("text-xs");
           break;
         case "default":
         default:
-          u.push("mt-2 text-sm");
+          m.push("mt-2 text-sm");
           break;
       }
-      return u.join(" ");
-    }), p = r(() => {
-      var v;
-      const u = ["flex"];
-      s.value || u.push("grow justify-end");
-      const j = s.value && ((v = n.actions) == null ? void 0 : v.length);
-      switch (n.size) {
+      return m.join(" ");
+    }), c = u(() => {
+      var w;
+      const m = ["flex"];
+      l.value || m.push("grow justify-end");
+      const z = l.value && ((w = t.actions) == null ? void 0 : w.length);
+      switch (t.size) {
         case "xs":
-          u.push("space-x-1"), j && u.push("mt-1");
+          m.push("space-x-1"), z && m.push("mt-1");
           break;
         case "default":
         default:
-          u.push("space-x-2"), j && u.push("mt-4");
+          m.push("space-x-2"), z && m.push("mt-4");
           break;
       }
-      return u.join(" ");
-    }), b = r(() => {
-      const u = [];
-      switch (n.color) {
+      return m.join(" ");
+    }), C = u(() => {
+      const m = [];
+      switch (t.color) {
         case "success":
-          u.push("text-success-darker");
+          m.push("text-success-darker");
           break;
         case "info":
-          u.push("text-info-darker");
+          m.push("text-info-darker");
           break;
         case "danger":
-          u.push("text-danger-darker");
+          m.push("text-danger-darker");
           break;
         case "warning":
-          u.push("text-warning-darker");
+          m.push("text-warning-darker");
           break;
       }
-      return u.join(" ");
-    }), y = r(() => {
-      const u = [];
-      switch (n.size) {
+      return m.join(" ");
+    }), b = u(() => {
+      const m = [];
+      switch (t.size) {
         case "xs":
-          u.push("h-4 w-4"), u.push(s.value ? "mt-0.5" : "");
+          m.push("h-4 w-4"), m.push(l.value ? "mt-0.5" : "");
           break;
         case "default":
         default:
-          u.push("h-5 w-5");
+          m.push("h-5 w-5");
           break;
       }
-      switch (n.color) {
+      switch (t.color) {
         case "success":
-          u.push("text-success");
+          m.push("text-success");
           break;
         case "info":
-          u.push("text-info");
+          m.push("text-info");
           break;
         case "danger":
-          u.push("text-danger");
+          m.push("text-danger");
           break;
         case "warning":
-          u.push("text-warning");
+          m.push("text-warning");
           break;
       }
-      return u.join(" ");
-    }), h = r(() => {
-      const u = [];
-      switch (n.color) {
+      return m.join(" ");
+    }), h = u(() => {
+      const m = [];
+      switch (t.color) {
         case "success":
-          u.push("bg-success-lighter ring-success");
+          m.push("bg-success-lighter ring-success");
           break;
         case "info":
-          u.push("bg-info-lighter ring-info");
+          m.push("bg-info-lighter ring-info");
           break;
         case "danger":
-          u.push("bg-danger-lighter ring-danger");
+          m.push("bg-danger-lighter ring-danger");
           break;
         case "warning":
-          u.push("bg-warning-lighter ring-warning");
+          m.push("bg-warning-lighter ring-warning");
           break;
       }
-      return u.join(" ");
-    }), C = r(() => {
-      switch (n.size) {
+      return m.join(" ");
+    }), k = u(() => {
+      switch (t.size) {
         case "xs":
           return "xs";
         case "default":
@@ -2961,120 +3175,891 @@ const Nn = ["disabled", "onClick"], zl = /* @__PURE__ */ A({
           return "sm";
       }
     });
-    return (u, j) => (a(), m("div", {
-      class: k(["rounded-md", [c.value, b.value]])
+    return (m, z) => (a(), p("div", {
+      class: x(["rounded-md", [r.value, C.value]])
     }, [
-      i("div", {
-        class: k(["flex", d.value])
+      v("div", {
+        class: x(["flex", d.value])
       }, [
-        i("div", ol, [
-          (a(), L(H(o.value), {
-            class: k(y.value),
+        v("div", Wn, [
+          (a(), P(Z(o.value), {
+            class: x(b.value),
             "aria-hidden": "true"
           }, null, 8, ["class"]))
         ]),
-        i("div", {
-          class: k(f.value)
+        v("div", {
+          class: x(i.value)
         }, [
-          i("h3", {
-            class: k(["text-sm", [s.value ? "font-medium" : ""]])
+          v("h3", {
+            class: x(["text-sm", [l.value ? "font-medium" : ""]])
           }, [
-            z(u.$slots, "title", {}, () => [
+            R(m.$slots, "title", {}, () => [
               M("Title")
             ])
           ], 2),
-          s.value ? (a(), m("div", {
+          l.value ? (a(), p("div", {
             key: 0,
-            class: k(x.value)
+            class: x(f.value)
           }, [
-            z(u.$slots, "description", {}, () => [
+            R(m.$slots, "description", {}, () => [
               M(" Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam. ")
             ])
-          ], 2)) : I("", !0),
-          i("div", {
-            class: k(p.value)
+          ], 2)) : S("", !0),
+          v("div", {
+            class: x(c.value)
           }, [
-            (a(!0), m(W, null, G(e.actions || [], (v, w) => (a(), L(re, {
-              key: w,
+            (a(!0), p(D, null, q(e.actions || [], (w, $) => (a(), P(ne, {
+              key: $,
               color: e.color,
-              size: C.value,
-              to: v.url,
-              external: v.externalUrl || !1,
-              onClick: (S) => v.onClick || l(Ye)
+              size: k.value,
+              to: w.url,
+              external: w.externalUrl || !1,
+              onClick: (j) => w.onClick || n(St)
             }, {
               default: _(() => [
-                M(B(v.title), 1)
+                M(L(w.title), 1)
               ]),
               _: 2
             }, 1032, ["color", "size", "to", "external", "onClick"]))), 128))
           ], 2)
         ], 2),
-        e.withDismiss ? (a(), m("div", {
+        e.withDismiss ? (a(), p("div", {
           key: 0,
-          class: k(["flex", [s.value ? "items-start" : "items-center"]])
+          class: x(["flex", [l.value ? "items-start" : "items-center"]])
         }, [
-          i("button", {
+          v("button", {
             type: "button",
-            class: k(["inline-flex rounded-md focus:outline-none focus:ring-2", h.value]),
-            onClick: j[0] || (j[0] = (v) => u.$emit("dismiss"))
+            class: x(["inline-flex rounded-md focus:outline-none focus:ring-2", h.value]),
+            onClick: z[0] || (z[0] = (w) => m.$emit("dismiss"))
           }, [
-            rl,
-            P(l(ue), {
+            qn,
+            V(n(pe), {
               class: "h-5 w-5",
               "aria-hidden": "true"
             })
           ], 2)
-        ], 2)) : I("", !0)
+        ], 2)) : S("", !0)
       ], 2)
     ], 2));
   }
 });
-function El(e) {
-  var u, j;
-  const { get: n, initialState: t, readOptions: s, set: o, asyncRead: c = !0, debugging: d } = e, f = d == null ? void 0 : d.log, x = () => (new Error("Trace:").stack || "").substring(7), p = ((j = (u = e.debugging) == null ? void 0 : u.log) == null ? void 0 : j.logger) || console.debug, b = f && !f.writesOnly ? () => {
-    const v = n();
-    return p(`debugging: '${f.name}' read`, v, x()), v;
-  } : n, y = f && !f.readsOnly ? (v) => (p(`debugging: '${f.name}' written to`, v, x()), o(v)) : o, h = c ? $t(b, t, s) : r(b), C = r(() => h.value);
-  return C.update = y, C;
+function to(e) {
+  var m, z;
+  const { get: t, initialState: s, readOptions: l, set: o, asyncRead: r = !0, debugging: d } = e, i = d == null ? void 0 : d.log, f = () => (new Error("Trace:").stack || "").substring(7), c = ((z = (m = e.debugging) == null ? void 0 : m.log) == null ? void 0 : z.logger) || console.debug, C = i && !i.writesOnly ? () => {
+    const w = t();
+    return c(`debugging: '${i.name}' read`, w, f()), w;
+  } : t, b = i && !i.readsOnly ? (w) => (c(`debugging: '${i.name}' written to`, w, f()), o(w)) : o, h = r ? es(C, s, l) : u(C), k = u(() => h.value);
+  return k.update = b, k;
 }
+const Hn = /* @__PURE__ */ A({
+  __name: "ContextManager",
+  setup(e, { expose: t }) {
+    const l = Ct().provides, o = Object.getOwnPropertySymbols(l).find(
+      (h) => h.description === "ComboboxContext"
+    );
+    o || console.error("FormTagsContextManager ctx key not found!");
+    const r = $t(o || "__undefined");
+    return r || console.error("FormTagsContextManager ctx not found!"), t({ goUp: () => {
+      r == null || r.goToOption(1);
+    }, goDown: () => {
+      r == null || r.goToOption(2);
+    }, open: () => {
+      r && r.openCombobox();
+    }, close: () => {
+      r == null || r.closeCombobox();
+    }, selectActive: () => {
+      r == null || r.selectActiveOption();
+    }, isOpen: () => (r == null ? void 0 : r.comboboxState.value) === 0 }), (h, k) => R(h.$slots, "default");
+  }
+}), Kn = ["for"], Gn = ["disabled", "placeholder", "onKeydown"], Xn = /* @__PURE__ */ v("span", { class: "text-xs sr-only" }, "Clear input", -1), Zn = { key: 1 }, Qn = /* @__PURE__ */ v("div", { class: "text-foreground-2 text-center" }, [
+  /* @__PURE__ */ M(" Press "),
+  /* @__PURE__ */ v("strong", null, "Enter"),
+  /* @__PURE__ */ M(" to create tag ⚡ ")
+], -1), Nn = [
+  Qn
+], Jn = ["id"], so = /* @__PURE__ */ A({
+  __name: "Tags",
+  props: {
+    name: null,
+    help: null,
+    label: null,
+    showLabel: { type: Boolean },
+    rules: null,
+    validateOnMount: { type: Boolean },
+    validateOnValueUpdate: { type: Boolean },
+    autoFocus: { type: Boolean },
+    showClear: { type: Boolean },
+    showRequired: { type: Boolean },
+    color: { default: "page" },
+    wrapperClasses: null,
+    size: { default: "base" },
+    placeholder: null,
+    disabled: { type: Boolean },
+    useLabelInErrors: { type: Boolean, default: !0 },
+    getAutocompleteItems: { type: Function },
+    modelValue: null
+  },
+  emits: ["update:modelValue", "change", "clear"],
+  setup(e, { expose: t, emit: s }) {
+    const l = e, o = (y) => y.type === "input", r = O(null), { focused: d } = ts(r), i = O(
+      null
+    ), {
+      coreInputClasses: f,
+      coreClasses: c,
+      labelClasses: C,
+      title: b,
+      helpTip: h,
+      helpTipId: k,
+      hideHelpTip: m,
+      helpTipClasses: z,
+      errorMessage: w,
+      clear: $,
+      value: j
+    } = We({
+      props: N(l),
+      emit: s,
+      inputEl: r
+      // options: {
+      //   customClear: () => (selectedItems.value = [])
+      // }
+    }), E = O([]), g = O(!1), T = O(!1), U = O(""), F = u({
+      get: () => j.value || [],
+      set: (y) => {
+        j.value = Bt(y).filter((B) => !!B.length);
+      }
+    }), ae = u(() => {
+      switch (l.size) {
+        case "sm":
+          return "h-6";
+        case "lg":
+          return "h-10";
+        case "xl":
+          return "h-14";
+        case "base":
+        default:
+          return "h-8";
+      }
+    }), G = u(() => l.showClear && !!F.value.length), Y = u(() => {
+      const y = [
+        c.value,
+        l.disabled ? "cursor-not-allowed !bg-foundation-disabled !text-disabled-muted" : ""
+      ];
+      return G.value && (w.value || l.showRequired) ? y.push("pr-14") : (G.value || w.value || l.showRequired) && y.push("pr-8"), w.value ? (y.push("border-2 border-danger text-danger-darker"), d.value && y.push("ring-1 ring-danger")) : (y.push("border-2 border-transparent"), d.value && y.push("ring-2 ring-outline-2")), y.join(" ");
+    }), K = (y) => {
+      if (l.disabled)
+        return;
+      const B = F.value.indexOf(y);
+      if (B !== -1) {
+        const I = F.value.slice();
+        I.splice(B, 1), F.value = I;
+      }
+    }, xe = () => {
+      var y;
+      (y = r.value) == null || y.blur(), T.value = !1;
+    }, Be = (y) => {
+      if (y.key !== "Backspace" || U.value.length)
+        return;
+      const B = F.value.slice();
+      B.pop(), F.value = B, T.value = !1;
+    }, Ve = () => {
+      var y, B, I;
+      (y = i.value) != null && y.isOpen() ? (B = i.value) == null || B.goUp() : (I = i.value) == null || I.open();
+    }, ke = () => {
+      var y, B, I;
+      (y = i.value) != null && y.isOpen() ? (B = i.value) == null || B.goDown() : (I = i.value) == null || I.open();
+    }, ee = async () => {
+      l.getAutocompleteItems && (g.value = !0, E.value = await Promise.resolve(
+        l.getAutocompleteItems(U.value)
+      ), g.value = !1);
+    }, he = Fe(ee, 1e3), Le = () => {
+      g.value = !0, he();
+    }, me = (y, B) => {
+      var W, H;
+      if (o(y) ? y.data === " " || y.data === "," || y.data === ";" : !0) {
+        let oe = !1;
+        if ((W = i.value) != null && W.isOpen() && E.value.length && !B)
+          (H = i.value) == null || H.selectActive(), oe = !0;
+        else {
+          const re = U.value.trim().substring(0, U.value.length - (o(y) ? 1 : 0)), we = F.value.includes(re);
+          re.length > 0 && !we && (F.value = [...F.value, re], oe = !0);
+        }
+        oe && (U.value = "", T.value = !1);
+      } else
+        T.value = !!U.value.length;
+    };
+    return te(T, (y, B) => {
+      var I, W;
+      y && !B ? l.getAutocompleteItems && ((I = i.value) == null || I.open()) : !y && B && ((W = i.value) == null || W.close());
+    }), te(U, () => {
+      Le();
+    }), se(() => {
+      ee();
+    }), t({ resolveAutocompleteItems: ee }), (y, B) => (a(), P(n(bs), {
+      modelValue: F.value,
+      "onUpdate:modelValue": B[5] || (B[5] = (I) => F.value = I),
+      as: "div",
+      multiple: "",
+      clearable: "",
+      class: x([e.wrapperClasses])
+    }, {
+      default: _(() => [
+        V(Hn, {
+          ref_key: "ctxManager",
+          ref: i
+        }, {
+          default: _(() => [
+            v("label", {
+              for: e.name,
+              class: x(n(C))
+            }, [
+              v("span", null, L(n(b)), 1)
+            ], 10, Kn),
+            v("div", {
+              class: x(["relative flex flex-wrap items-center space-x-1 px-2 py-1", Y.value])
+            }, [
+              (a(!0), p(D, null, q(F.value, (I) => (a(), P(De, {
+                key: I,
+                "icon-left": e.disabled ? void 0 : n(pe),
+                "clickable-icon": "",
+                size: "lg",
+                onClickIcon: () => K(I)
+              }, {
+                default: _(() => [
+                  M(L(I), 1)
+                ]),
+                _: 2
+              }, 1032, ["icon-left", "onClickIcon"]))), 128)),
+              de(v("input", {
+                ref_key: "inputEl",
+                ref: r,
+                "onUpdate:modelValue": B[0] || (B[0] = (I) => U.value = I),
+                disabled: e.disabled,
+                class: x(["bg-transparent grow shrink border-0 focus:ring-0 p-0", [n(f), ae.value]]),
+                style: { "flex-basis": "70px", "min-width": "70px" },
+                placeholder: F.value.length ? void 0 : e.placeholder,
+                onInput: me,
+                onKeydown: [
+                  ie(xe, ["escape"]),
+                  B[1] || (B[1] = ie(le((I) => me(I, !0), ["stop", "prevent"]), ["enter"])),
+                  ie(me, ["tab"]),
+                  ie(Be, ["backspace"]),
+                  ie(Ve, ["arrow-up"]),
+                  ie(ke, ["arrow-down"])
+                ],
+                onBlur: B[2] || (B[2] = (I) => T.value = !1)
+              }, null, 42, Gn), [
+                [Me, U.value]
+              ]),
+              G.value ? (a(), p("a", {
+                key: 0,
+                title: "Clear input",
+                class: "absolute top-2 right-0 flex items-center pr-2 cursor-pointer",
+                onClick: B[3] || (B[3] = //@ts-ignore
+                (...I) => n($) && n($)(...I)),
+                onKeydown: B[4] || (B[4] = //@ts-ignore
+                (...I) => n($) && n($)(...I))
+              }, [
+                Xn,
+                V(n(pe), {
+                  class: "h-5 w-5 text-foreground",
+                  "aria-hidden": "true"
+                })
+              ], 32)) : S("", !0),
+              n(w) ? (a(), p("div", {
+                key: 1,
+                class: x([
+                  "pointer-events-none absolute top-[10px] right-0 flex items-center",
+                  G.value ? "pr-8" : "pr-2"
+                ])
+              }, [
+                V(n(Ie), {
+                  class: "h-4 w-4 text-danger",
+                  "aria-hidden": "true"
+                })
+              ], 2)) : S("", !0),
+              e.showRequired && !n(w) ? (a(), p("div", {
+                key: 2,
+                class: x(["pointer-events-none absolute top-[2px] text-4xl right-0 flex items-center text-danger opacity-50", G.value ? "pr-8" : "pr-2"])
+              }, " * ", 2)) : S("", !0)
+            ], 2),
+            V(n(ot), {
+              leave: "transition ease-in duration-100",
+              "leave-from": "opacity-100",
+              "leave-to": "opacity-0",
+              class: "relative px-0.5"
+            }, {
+              default: _(() => [
+                V(n(ys), { class: "absolute top-1 max-h-60 w-full overflow-auto simple-scrollbar rounded-md bg-foundation-2 py-1 shadow label label--light outline outline-2 outline-primary-muted focus:outline-none" }, {
+                  default: _(() => [
+                    g.value ? (a(), p("div", {
+                      key: 0,
+                      class: x(["px-1", E.value.length ? "mb-1" : ""])
+                    }, [
+                      V(He, { loading: !0 })
+                    ], 2)) : S("", !0),
+                    !E.value.length && !g.value ? (a(), p("div", Zn, Nn)) : S("", !0),
+                    E.value.length ? (a(!0), p(D, { key: 2 }, q(E.value, (I) => (a(), P(n(xs), {
+                      key: I,
+                      as: "template",
+                      value: I
+                    }, {
+                      default: _(({ selected: W, active: H }) => [
+                        v("li", {
+                          class: x(["relative cursor-pointer select-none py-1.5 pl-3", {
+                            "text-primary": H,
+                            "text-foreground": !H
+                          }])
+                        }, [
+                          v("span", {
+                            class: x(["block truncate", { "font-medium": W, "font-normal": !W }])
+                          }, L(I), 3),
+                          W ? (a(), p("span", {
+                            key: 0,
+                            class: x(["absolute inset-y-0 right-0 flex items-center pr-4", { "text-primary": H, "text-foreground": !H }])
+                          }, [
+                            V(n(nt), {
+                              class: "h-5 w-5",
+                              "aria-hidden": "true"
+                            })
+                          ], 2)) : S("", !0)
+                        ], 2)
+                      ]),
+                      _: 2
+                    }, 1032, ["value"]))), 128)) : S("", !0)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            n(k) && !n(m) ? (a(), p("p", {
+              key: 0,
+              id: n(k),
+              class: x(n(z))
+            }, L(n(h)), 11, Jn)) : S("", !0)
+          ]),
+          _: 1
+        }, 512)
+      ]),
+      _: 1
+    }, 8, ["modelValue", "class"]));
+  }
+});
+function ht(e) {
+  const { props: t } = e, s = u(() => {
+    var f;
+    switch ((f = t.size) == null ? void 0 : f.value) {
+      case "xs":
+        return "h-5";
+      case "sm":
+        return "h-6";
+      case "lg":
+        return "h-10";
+      case "xl":
+        return "h-14";
+      case "editable":
+        return "h-60";
+      case "base":
+      default:
+        return "h-8";
+    }
+  }), l = u(() => {
+    var f;
+    switch ((f = t.size) == null ? void 0 : f.value) {
+      case "xs":
+        return "w-5";
+      case "sm":
+        return "w-6";
+      case "lg":
+        return "w-10";
+      case "xl":
+        return "w-14";
+      case "editable":
+        return "w-60";
+      case "base":
+      default:
+        return "w-8";
+    }
+  }), o = u(() => {
+    var f;
+    switch ((f = t.size) == null ? void 0 : f.value) {
+      case "xs":
+        return "text-tiny";
+      case "sm":
+        return "text-xs";
+      case "lg":
+        return "text-md";
+      case "xl":
+        return "text-2xl";
+      case "editable":
+        return "h1";
+      case "base":
+      default:
+        return "text-sm";
+    }
+  }), r = u(() => {
+    var f;
+    switch ((f = t.size) == null ? void 0 : f.value) {
+      case "xs":
+        return "w-3 h-3";
+      case "sm":
+        return "w-3 h-3";
+      case "lg":
+        return "w-5 h-5";
+      case "xl":
+        return "w-8 h-8";
+      case "editable":
+        return "w-20 h-20";
+      case "base":
+      default:
+        return "w-4 h-4";
+    }
+  }), d = u(
+    () => `${l.value} ${s.value} ${o.value}`
+  );
+  return { heightClasses: s, widthClasses: l, sizeClasses: d, iconClasses: r };
+}
+const Yn = {
+  key: 1,
+  class: "flex h-full w-full select-none items-center justify-center"
+}, ea = { key: 2 }, Oe = /* @__PURE__ */ A({
+  __name: "Avatar",
+  props: {
+    user: { default: null },
+    size: { default: "base" },
+    hoverEffect: { type: Boolean, default: !1 },
+    active: { type: Boolean },
+    noBorder: { type: Boolean },
+    noBg: { type: Boolean }
+  },
+  setup(e) {
+    const t = e, { sizeClasses: s, iconClasses: l } = ht({ props: N(t) }), o = u(() => {
+      var h, k, m;
+      if (!((h = t.user) != null && h.name.length))
+        return;
+      const c = t.user.name.split(" "), C = ((k = c[0]) == null ? void 0 : k[0]) || "", b = ((m = c[1]) == null ? void 0 : m[0]) || "";
+      return t.size === "sm" || t.size === "xs" ? C : C + b;
+    }), r = u(() => t.noBorder ? "" : "border-2 border-foundation"), d = u(() => t.noBg ? "" : "bg-primary"), i = u(() => t.hoverEffect ? "hover:border-primary focus:border-primary active:scale-95" : ""), f = u(() => t.active ? "border-primary" : "");
+    return (c, C) => (a(), p("div", {
+      class: x([
+        "text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold uppercase transition",
+        n(s),
+        d.value,
+        r.value,
+        i.value,
+        f.value
+      ])
+    }, [
+      R(c.$slots, "default", {}, () => {
+        var b;
+        return [
+          (b = e.user) != null && b.avatar ? (a(), p("div", {
+            key: 0,
+            class: "h-full w-full bg-cover bg-center bg-no-repeat",
+            style: fe({ backgroundImage: `url('${e.user.avatar}')` })
+          }, null, 4)) : o.value ? (a(), p("div", Yn, L(o.value), 1)) : (a(), p("div", ea, [
+            V(n(At), {
+              class: x(n(l))
+            }, null, 8, ["class"])
+          ]))
+        ];
+      }),
+      R(c.$slots, "absolute-anchor")
+    ], 2));
+  }
+}), lo = /* @__PURE__ */ A({
+  __name: "AvatarGroup",
+  props: {
+    users: { default: () => [] },
+    overlap: { type: Boolean, default: !0 },
+    size: { default: "base" },
+    maxCount: { default: void 0 }
+  },
+  setup(e) {
+    const t = e, s = O(null), l = O(null), { hiddenItemCount: o } = dt({
+      elementToWatchForChanges: s,
+      itemContainer: l,
+      trackResize: !0,
+      trackMutations: !0
+    }), { heightClasses: r } = ht({ props: N(t) }), d = u(() => t.maxCount ? Math.max(t.users.length - t.maxCount, 0) : 0), i = u(
+      () => o.value + d.value
+    ), f = u(
+      () => t.maxCount ? t.users.slice(0, t.maxCount) : t.users
+    );
+    return (c, C) => (a(), p("div", {
+      ref_key: "elementToWatchForChanges",
+      ref: s,
+      class: x(`flex ${e.overlap ? "-space-x-2" : ""}`)
+    }, [
+      v("div", {
+        ref_key: "itemContainer",
+        ref: l,
+        class: x(`flex flex-wrap overflow-hidden ${e.overlap ? "-space-x-2 " : ""} ${n(r)}`)
+      }, [
+        (a(!0), p(D, null, q(f.value, (b, h) => (a(), P(Oe, {
+          key: b.id || h,
+          user: b,
+          size: e.size
+        }, null, 8, ["user", "size"]))), 128))
+      ], 2),
+      i.value ? (a(), P(Oe, {
+        key: 0,
+        size: e.size
+      }, {
+        default: _(() => [
+          M(" +" + L(i.value), 1)
+        ]),
+        _: 1
+      }, 8, ["size"])) : S("", !0)
+    ], 2));
+  }
+}), ta = /* @__PURE__ */ A({
+  __name: "Icon",
+  props: {
+    loading: { type: Boolean, default: !0 },
+    size: { default: "base" }
+  },
+  setup(e) {
+    const t = e, s = u(() => {
+      const l = ["text-primary transition-all animate-spin"];
+      switch (l.push(t.loading ? "opacity-100" : "opacity-0"), t.size) {
+        case "base":
+          l.push("h-8 w-8");
+          break;
+        case "sm":
+          l.push("h-5 w-5");
+          break;
+        case "lg":
+          l.push("h-12 w-12");
+          break;
+      }
+      return l.join(" ");
+    });
+    return (l, o) => (a(), P(n(tt), {
+      class: x(s.value)
+    }, null, 8, ["class"]));
+  }
+}), sa = { class: "flex flex-col items-center space-y-2" }, la = {
+  key: 1,
+  class: "relative group"
+}, na = { class: "opacity-0 transition-all absolute group-hover:opacity-100 inset-0 flex items-end justify-center bottom-4" }, aa = {
+  key: 2,
+  class: "w-full text-center text-danger text-sm"
+}, no = /* @__PURE__ */ A({
+  __name: "AvatarEditable",
+  props: Ge({
+    modelValue: null,
+    placeholder: null,
+    name: null,
+    rules: null,
+    validateOnMount: { type: Boolean },
+    validateOnValueUpdate: { type: Boolean },
+    disabled: { type: Boolean }
+  }, {
+    editMode: { type: Boolean, local: !0 }
+  }),
+  emits: Ge(["save", "update:modelValue"], ["update:editMode"]),
+  setup(e, { expose: t, emit: s }) {
+    const l = e, o = It({
+      loader: () => import("./AvatarEditor-594c4e0d.js"),
+      loadingComponent: ta,
+      delay: 100
+    }), { value: r, errorMessage: d } = Se(l.name, l.rules, {
+      validateOnMount: l.validateOnMount,
+      validateOnValueUpdate: l.validateOnValueUpdate,
+      initialValue: l.modelValue || void 0
+    }), i = Je(e, "editMode", { local: !0 }), f = u(
+      () => ({
+        avatar: r.value,
+        name: l.placeholder
+      })
+    ), c = (h) => {
+      r.value = h, s("save", h);
+    };
+    return t({ open: () => i.value = !0, close: () => i.value = !1 }), (h, k) => (a(), p("div", sa, [
+      i.value ? (a(), P(n(o), {
+        key: 0,
+        user: f.value,
+        disabled: e.disabled,
+        onCancel: k[0] || (k[0] = (m) => i.value = !1),
+        onSave: c
+      }, null, 8, ["user", "disabled"])) : (a(), p("div", la, [
+        V(Oe, {
+          user: f.value,
+          size: "editable"
+        }, null, 8, ["user"]),
+        v("div", na, [
+          V(ne, {
+            disabled: e.disabled,
+            color: "secondary",
+            onClick: k[1] || (k[1] = (m) => i.value = !0)
+          }, {
+            default: _(() => [
+              M(" Change ")
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ])
+      ])),
+      n(d) ? (a(), p("div", aa, L(n(d)), 1)) : S("", !0)
+    ]));
+  }
+});
+class J extends Error {
+  constructor(t, s) {
+    t || (t = new.target.defaultMessage), super(t, s);
+  }
+}
+/**
+ * Default message if none is passed
+ */
+Q(J, "defaultMessage", "Unexpected error occurred");
+class oa extends J {
+}
+Q(oa, "defaultMessage", "An unexpected logic error occurred!");
+class ra extends J {
+}
+Q(ra, "defaultMessage", "Attempting to access an uninitialized resource");
+class ia extends J {
+}
+Q(ia, "defaultMessage", "getCurrentInstance() returned null. Method must be called at the top of a setup function");
+class ua extends J {
+}
+Q(ua, "defaultMessage", "Operation not supported in current (server or client) environment");
+var Ke = /* @__PURE__ */ ((e) => (e.AnyAudio = "audio/*", e.AnyVideo = "video/*", e.AnyImage = "image/*", e))(Ke || {});
+function ca(e, t) {
+  const s = Vt(
+    Object.values(Ke),
+    t
+  );
+  for (const r of s)
+    switch (r) {
+      case "audio/*":
+        if (e.type.startsWith("audio"))
+          return !0;
+        break;
+      case "image/*":
+        if (e.type.startsWith("image"))
+          return !0;
+        break;
+      case "video/*":
+        if (e.type.startsWith("video"))
+          return !0;
+        break;
+    }
+  const l = Lt(t, s), o = da(e.name);
+  if (!o)
+    return new mt();
+  for (const r of l)
+    if (r.toLowerCase() === o.toLowerCase())
+      return !0;
+  return new vt();
+}
+function da(e) {
+  const t = e.split(".").pop() || null;
+  return t ? `.${t}` : null;
+}
+function fa(e) {
+  return e.startsWith(".") || Object.values(Ke).includes(e);
+}
+function Ne(e) {
+  const t = (r) => parseFloat(r.toFixed(2)).toString();
+  if (e < 1024)
+    return `${e}bytes`;
+  const s = e / 1024;
+  if (s < 1024)
+    return `${t(s)}KB`;
+  const l = s / 1024;
+  if (l < 1024)
+    return `${t(l)}MB`;
+  const o = l / 1024;
+  return `${t(o)}GB`;
+}
+function pa(e) {
+  const t = {
+    name: e.name,
+    lastModified: e.lastModified,
+    size: e.size,
+    type: e.type
+  };
+  return Qt(JSON.stringify(t));
+}
+class mt extends J {
+}
+Q(mt, "defaultMessage", "The selected file has a missing extension");
+class vt extends J {
+}
+Q(vt, "defaultMessage", "The selected file type is forbidden");
+var ha = /* @__PURE__ */ ((e) => (e[e.Success = 1] = "Success", e[e.Failure = 2] = "Failure", e))(ha || {});
+function ma(e) {
+  if (!e)
+    return;
+  const t = e.split(",").map((s) => fa(s) ? s : null).filter((s) => s !== null);
+  return t.length ? t : void 0;
+}
+function va(e) {
+  const { disabled: t, accept: s, multiple: l, sizeLimit: o, countLimit: r } = e, d = u(() => ma(n(s))), i = (f) => {
+    const c = [], C = d.value;
+    for (const b of f) {
+      const h = pa(b), k = n(l) ? n(r) : 1;
+      if (!c.find((m) => m.id === h)) {
+        if (k && c.length >= k)
+          break;
+        if (C) {
+          const m = ca(b, C);
+          if (m instanceof Error) {
+            c.push({
+              file: b,
+              id: h,
+              error: m
+            });
+            continue;
+          }
+        }
+        if (b.size > n(o)) {
+          c.push({
+            file: b,
+            id: h,
+            error: new gt(
+              `The selected file's size (${Ne(
+                b.size
+              )}) is too big (over ${Ne(n(o))})`
+            )
+          });
+          continue;
+        }
+        c.push({ file: b, id: h, error: null });
+      }
+    }
+    return c;
+  };
+  return {
+    /**
+     * Validate incoming files and build UploadableFileItem structs out of them
+     */
+    buildUploadableFiles: (f) => {
+      if (!n(t || !1))
+        return i(f);
+    }
+  };
+}
+class gt extends J {
+}
+Q(gt, "defaultMessage", "The selected file's size is too large");
+const ga = ["accept", "multiple"], ao = /* @__PURE__ */ A({
+  __name: "Zone",
+  props: {
+    accept: null,
+    multiple: { type: Boolean },
+    sizeLimit: { default: 1024 * 1024 * 100 },
+    countLimit: null,
+    disabled: { type: Boolean }
+  },
+  emits: ["files-selected"],
+  setup(e, { expose: t, emit: s }) {
+    const l = e, o = O(null), r = O(null), { buildUploadableFiles: d } = va({
+      sizeLimit: u(() => l.sizeLimit),
+      countLimit: u(() => l.countLimit),
+      accept: u(() => l.accept),
+      multiple: u(() => l.multiple),
+      disabled: u(() => l.disabled)
+    }), i = (b) => {
+      const h = d(b);
+      h != null && h.length && s("files-selected", { files: h });
+    }, { isOverDropZone: f } = ss(o, (b) => {
+      b != null && b.length && i(b);
+    }), c = () => {
+      const b = r.value;
+      if (!b)
+        return;
+      const h = [...b.files || []];
+      b.value = "", h.length && i(h);
+    }, C = () => {
+      var b;
+      (b = r.value) == null || b.click();
+    };
+    return t({
+      triggerPicker: C
+    }), (b, h) => (a(), p("div", {
+      ref_key: "fileUploadZone",
+      ref: o,
+      class: "file-upload-zone"
+    }, [
+      R(b.$slots, "default", {
+        isDraggingFiles: n(f),
+        openFilePicker: C,
+        activatorOn: { click: C }
+      }),
+      v("input", {
+        ref_key: "fileInput",
+        ref: r,
+        type: "file",
+        class: "hidden",
+        accept: e.accept,
+        multiple: e.multiple,
+        onClick: h[0] || (h[0] = le(() => {
+        }, ["stop"])),
+        onChange: c
+      }, null, 40, ga)
+    ], 512));
+  }
+});
 export {
-  Fl as CommonAlert,
-  ns as CommonBadge,
-  Ue as CommonLoadingBar,
-  Cl as CommonStepsBullet,
-  kl as CommonStepsNumber,
-  Ut as CommonTextLink,
-  re as FormButton,
-  wl as FormCardButton,
-  $l as FormCheckbox,
-  Pn as FormSelectBase,
-  _l as FormSelectSourceApps,
-  Sl as FormTextArea,
-  Il as FormTextInput,
-  xl as GlobalToastRenderer,
-  J as GridListToggleValue,
-  me as HorizontalDirection,
-  Tl as InfiniteLoading,
-  Vl as LayoutDialog,
-  Ol as LayoutDisclosure,
-  Al as LayoutGridListToggle,
-  zl as LayoutMenu,
-  Rl as LayoutPanel,
-  Dl as LayoutTabs,
-  se as ModifierKeys,
-  Ln as SourceAppBadge,
-  te as TailwindBreakpoints,
-  Gn as ThrottleOrDebounce,
-  ee as ToastNotificationType,
-  Bl as ValidationHelpers,
-  he as clientOs,
-  Pl as getKeyboardShortcutTitle,
-  Ll as onKeyboardShortcut,
-  jl as useFormCheckboxModel,
-  cn as useFormSelectChildInternals,
-  Ml as useOnBeforeWindowUnload,
-  Xn as useResponsiveHorizontalDirectionCalculation,
-  Kn as useWindowResizeHandler,
-  un as useWrappingContainerHiddenCount,
-  El as writableAsyncComputed
+  J as BaseError,
+  ha as BlobUploadStatus,
+  eo as CommonAlert,
+  De as CommonBadge,
+  He as CommonLoadingBar,
+  ta as CommonLoadingIcon,
+  ja as CommonStepsBullet,
+  Pa as CommonStepsNumber,
+  $s as CommonTextLink,
+  ia as ComposableInvokedOutOfScopeError,
+  ne as FormButton,
+  Oa as FormCardButton,
+  Aa as FormCheckbox,
+  ao as FormFileUploadZone,
+  Ea as FormSelectBadges,
+  pt as FormSelectBase,
+  Ra as FormSelectSourceApps,
+  Ua as FormSwitch,
+  so as FormTags,
+  Ma as FormTextArea,
+  Ta as FormTextInput,
+  za as GlobalToastRenderer,
+  ue as GridListToggleValue,
+  je as HorizontalDirection,
+  Ja as InfiniteLoading,
+  Ha as LayoutDialog,
+  Ka as LayoutDisclosure,
+  Ga as LayoutGridListToggle,
+  Za as LayoutMenu,
+  Ya as LayoutPanel,
+  Na as LayoutTable,
+  Qa as LayoutTabs,
+  oa as LogicError,
+  be as ModifierKeys,
+  on as SourceAppBadge,
+  ge as TailwindBreakpoints,
+  $n as ThrottleOrDebounce,
+  ve as ToastNotificationType,
+  ra as UninitializedResourceAccessError,
+  Ke as UniqueFileTypeSpecifier,
+  ua as UnsupportedEnvironmentError,
+  Oe as UserAvatar,
+  no as UserAvatarEditable,
+  lo as UserAvatarGroup,
+  Fa as ValidationHelpers,
+  Pe as clientOs,
+  Da as getKeyboardShortcutTitle,
+  Wa as onKeyboardShortcut,
+  Ne as prettyFileSize,
+  qa as useFormCheckboxModel,
+  ft as useFormSelectChildInternals,
+  Xa as useOnBeforeWindowUnload,
+  Sn as useResponsiveHorizontalDirectionCalculation,
+  In as useWindowResizeHandler,
+  dt as useWrappingContainerHiddenCount,
+  to as writableAsyncComputed
 };
+//# sourceMappingURL=lib.js.map