@stachelock/ui 0.6.10 → 0.6.12

package/dist/{SelectTextInput.vue_vue_type_script_setup_true_lang-CtFVOrhm.js → SelectTextInput.vue_vue_type_script_setup_true_lang-DYlrRigi.js}

@@ -1,6 +1,6 @@
-import { defineComponent as Z, ref as w, onMounted as F, onBeforeUnmount as _, reactive as ee, toRefs as te, computed as u, watch as le, createElementBlock as L, openBlock as m, createVNode as v, unref as c, createSlots as se, withCtx as f, createElementVNode as d, normalizeClass as g, createBlock as O, toDisplayString as V, Teleport as ae, Transition as ne, normalizeStyle as ie, Fragment as oe, renderList as re, createCommentVNode as de, resolveDynamicComponent as ue } from "vue";
+import { defineComponent as Z, ref as w, onMounted as F, onBeforeUnmount as _, reactive as ee, toRefs as te, computed as u, watch as le, createElementBlock as L, openBlock as g, createVNode as v, unref as c, createSlots as se, withCtx as f, createElementVNode as d, normalizeClass as m, createBlock as O, toDisplayString as V, Teleport as ae, Transition as ne, normalizeStyle as ie, Fragment as oe, renderList as re, createCommentVNode as de, resolveDynamicComponent as ue } from "vue";
 import { ChevronUpDownIcon as ce, CheckIcon as fe } from "@heroicons/vue/20/solid";
-import { Listbox as ve, ListboxButton as xe, ListboxOptions as me, ListboxOption as ge } from "@headlessui/vue";
+import { Listbox as ve, ListboxButton as xe, ListboxOptions as ge, ListboxOption as me } from "@headlessui/vue";
 import pe from "./forms/FormFieldWrapper.js";
 import { g as ye } from "./id-DafBB_QF.js";
 const he = {
@@ -39,7 +39,8 @@ const he = {
     disabled: { type: Boolean, default: !1 },
     disabledMessage: { type: String, default: "" },
     colorfulValidation: { type: Boolean, default: !0 },
-    showValidCheck: { type: Boolean, default: !0 },
+    showValidCheck: { type: Boolean, default: !1 },
+    // Disabled by default since chevron icon would overlap
     optional: { type: Boolean, default: !1 }
   },
   emits: ["update:value", "update:validity"],
@@ -154,7 +155,7 @@ const he = {
       { deep: !0 }
     ), F(() => {
       H.value && k();
-    }), n.validateOnMount && (p.value = !0, k()), (e, t) => (m(), L("div", he, [
+    }), n.validateOnMount && (p.value = !0, k()), (e, t) => (g(), L("div", he, [
       v(pe, {
         id: c(U),
         name: s.name,
@@ -172,7 +173,7 @@ const he = {
       }, se({
         default: f(() => [
           d("div", {
-            class: g(["sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset", [
+            class: m(["sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset", [
               J.value,
               s.disabled ? "sl-bg-gray-50 dark:sl-bg-slate-800" : "sl-bg-white dark:sl-bg-slate-800"
             ]])
@@ -187,8 +188,8 @@ const he = {
                   v(c(xe), {
                     ref_key: "listboxButtonRef",
                     ref: R,
-                    class: g([
-                      "sl-relative sl-cursor-default sl-rounded-l-md sl-border-0 sl-py-1.5 sl-pl-3 sl-pr-10 sl-text-left sl-text-sm sl-bg-transparent",
+                    class: m([
+                      "sl-relative sl-cursor-default sl-rounded-l-md sl-border-0 sl-py-1.5 sl-pl-2 sl-pr-10 sl-text-left sl-text-sm sl-leading-6 sl-bg-transparent",
                       "focus:sl-outline-none focus:sl-ring-0",
                       s.disabled ? "sl-cursor-not-allowed sl-text-gray-500 dark:sl-text-slate-400" : "sl-text-gray-900 dark:sl-text-slate-100"
                     ]),
@@ -198,7 +199,7 @@ const he = {
                   }, {
                     default: f(() => [
                       d("span", {
-                        class: g(["sl-block sl-truncate sl-min-w-[80px]", B.value ? "" : "sl-text-gray-400 dark:sl-text-slate-500"])
+                        class: m(["sl-block sl-truncate sl-min-w-[80px] sl-max-w-[200px]", B.value ? "" : "sl-text-gray-400 dark:sl-text-slate-500"])
                       }, V(B.value?.label || s.select?.placeholder || "Select…"), 3),
                       d("span", ke, [
                         v(c(ce), {
@@ -209,34 +210,34 @@ const he = {
                     ]),
                     _: 1
                   }, 8, ["class"]),
-                  (m(), O(ae, { to: "body" }, [
+                  (g(), O(ae, { to: "body" }, [
                     v(ne, {
                       "leave-active-class": "sl-transition sl-duration-100 sl-ease-in",
                       "leave-from-class": "sl-opacity-100",
                       "leave-to-class": "sl-opacity-0"
                     }, {
                       default: f(() => [
-                        v(c(me), {
+                        v(c(ge), {
                           class: "sl-fixed sl-z-[9999] sl-max-h-56 sl-overflow-auto sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-py-1 sl-text-base sl-shadow-lg dark:sl-shadow-slate-900/50 sl-ring-1 sl-ring-black sl-ring-opacity-5 dark:sl-ring-slate-700 focus:sl-outline-none sm:sl-text-sm",
                           style: ie(I.value)
                         }, {
                           default: f(() => [
-                            (m(!0), L(oe, null, re(N.value, (l) => (m(), O(c(ge), {
+                            (g(!0), L(oe, null, re(N.value, (l) => (g(), O(c(me), {
                               key: l.value,
                               value: l,
                               as: "template"
                             }, {
                               default: f(({ active: r, selected: o }) => [
                                 d("li", {
-                                  class: g([
+                                  class: m([
                                     "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-3 sl-pr-9",
                                     r ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200"
                                   ])
                                 }, [
                                   d("span", {
-                                    class: g(["sl-block sl-truncate", o ? "sl-font-medium" : "sl-font-normal"])
+                                    class: m(["sl-block sl-truncate", o ? "sl-font-medium" : "sl-font-normal"])
                                   }, V(l.label), 3),
-                                  o ? (m(), L("span", we, [
+                                  o ? (g(), L("span", we, [
                                     v(c(fe), {
                                       class: "sl-h-5 sl-w-5",
                                       "aria-hidden": "true"
@@ -260,9 +261,9 @@ const he = {
             t[1] || (t[1] = d("div", { class: "sl-w-px sl-bg-gray-200 dark:sl-bg-slate-700 sl-self-stretch" }, null, -1)),
             d("div", Se, [
               d("input", {
-                class: g([
-                  "sl-block sl-w-full sl-text-sm focus:sl-outline-none focus:sl-ring-0 sl-border-0 sl-py-1.5 sl-pl-3 sl-pr-10 sl-rounded-r-md sl-bg-transparent",
-                  "sl-placeholder:text-gray-400 dark:sl-placeholder:text-slate-500",
+                class: m([
+                  "sl-block sl-w-full sl-text-sm sl-leading-6 focus:sl-outline-none focus:sl-ring-0 sl-border-0 sl-py-1.5 sl-pl-2 sl-pr-10 sl-rounded-r-md sl-bg-transparent",
+                  "placeholder:sl-text-gray-400 dark:placeholder:sl-text-slate-500",
                   s.disabled ? "sl-text-gray-500 dark:sl-text-slate-400 sl-cursor-not-allowed" : "sl-text-gray-900 dark:sl-text-slate-100"
                 ]),
                 "aria-invalid": h.value || void 0,
@@ -284,7 +285,7 @@ const he = {
         s.labelIconLeft ? {
           name: "prefix",
           fn: f(() => [
-            (m(), O(ue(s.labelIconLeft), { class: "sl-h-4 sl-w-4 sl-text-yellow-300" }))
+            (g(), O(ue(s.labelIconLeft), { class: "sl-h-4 sl-w-4 sl-text-yellow-300" }))
           ]),
           key: "0"
         } : void 0,

package/dist/{SwitchInput.vue_vue_type_script_setup_true_lang-D5Es9AjF.js → SwitchInput.vue_vue_type_script_setup_true_lang-r8ZwU1Zy.js}

@@ -45,7 +45,7 @@ const z = { class: "sl-w-full" }, U = { class: "sl-flex sl-items-center sl-justi
   },
   emits: ["update:modelValue", "blur", "focus"],
   setup(e, { expose: L, emit: T }) {
-    const s = e, f = T, u = g(), m = I(`sl-${s.name}`), { value: C, errorMessage: F, handleChange: y, handleBlur: H, meta: x } = O(
+    const s = e, f = T, u = g(null), m = I(`sl-${s.name}`), { value: C, errorMessage: F, handleChange: y, handleBlur: H, meta: x } = O(
       () => s.name,
       s.rules,
       {

package/dist/{SwitchInputGroup.vue_vue_type_script_setup_true_lang-DigNYqVZ.js → SwitchInputGroup.vue_vue_type_script_setup_true_lang-PgsXeiig.js}

@@ -1,5 +1,5 @@
 import { defineComponent as D, ref as U, watch as y, createElementBlock as a, openBlock as t, createElementVNode as C, createCommentVNode as r, toDisplayString as c, normalizeClass as v, Fragment as g, renderList as b, createVNode as p } from "vue";
-import { _ as f } from "./SwitchInput.vue_vue_type_script_setup_true_lang-D5Es9AjF.js";
+import { _ as f } from "./SwitchInput.vue_vue_type_script_setup_true_lang-r8ZwU1Zy.js";
 const L = {
   key: 0,
   class: "sl-bg-white dark:sl-bg-slate-800 sl-shadow sm:sl-rounded-lg sl-w-full",

package/dist/{TabGroup.vue_vue_type_script_setup_true_lang-123nIzRC.js → TabGroup.vue_vue_type_script_setup_true_lang-DTWW7kYh.js}

@@ -1,7 +1,7 @@
 import { defineComponent as P, computed as v, createElementBlock as a, openBlock as o, createCommentVNode as d, createVNode as u, unref as s, withCtx as c, createElementVNode as m, Fragment as j, renderList as z, createBlock as p, normalizeClass as _, createTextVNode as A, toDisplayString as k, renderSlot as y, KeepAlive as F, resolveDynamicComponent as K, mergeProps as U, toHandlers as q } from "vue";
 import { TabGroup as J, TabList as Q, Tab as R } from "@headlessui/vue";
 import { useTabs as W } from "./composables/useTabs.js";
-import { _ as X } from "./SelectInput.vue_vue_type_script_setup_true_lang-D9yg_rkV.js";
+import { _ as X } from "./SelectInput.vue_vue_type_script_setup_true_lang-DEaP3bhC.js";
 const Y = { class: "sl-w-full" }, Z = {
   key: 0,
   class: "sl-block sm:sl-hidden sl-mb-4"

package/dist/{TabGroupUnderline.vue_vue_type_script_setup_true_lang-DbIwjaLJ.js → TabGroupUnderline.vue_vue_type_script_setup_true_lang-B8e7kxad.js}

@@ -1,7 +1,7 @@
 import { defineComponent as P, computed as x, createElementBlock as n, openBlock as t, createCommentVNode as r, createVNode as v, toDisplayString as m, unref as l, withCtx as F, createElementVNode as c, Fragment as L, renderList as U, normalizeClass as f, createTextVNode as z, renderSlot as g, createBlock as y, KeepAlive as A, resolveDynamicComponent as K, mergeProps as j, toHandlers as q } from "vue";
 import { TabGroup as J } from "@headlessui/vue";
 import { useTabs as Q } from "./composables/useTabs.js";
-import { _ as R } from "./SelectInput.vue_vue_type_script_setup_true_lang-D9yg_rkV.js";
+import { _ as R } from "./SelectInput.vue_vue_type_script_setup_true_lang-DEaP3bhC.js";
 const W = { class: "sl-w-full" }, X = {
   key: 0,
   class: "sl-text-lg sl-font-semibold sl-text-gray-900 dark:sl-text-white sl-mb-4"

package/dist/{TabsInPills.vue_vue_type_script_setup_true_lang-mw68ZzS1.js → TabsInPills.vue_vue_type_script_setup_true_lang-Dzi4ENL1.js}

@@ -1,5 +1,5 @@
 import { defineComponent as I, createElementBlock as l, openBlock as t, createElementVNode as o, renderSlot as m, createVNode as V, unref as s, Fragment as r, renderList as i, normalizeClass as u, withModifiers as w, createTextVNode as N, createCommentVNode as h, toDisplayString as p } from "vue";
-import { _ as S } from "./SelectInput.vue_vue_type_script_setup_true_lang-D9yg_rkV.js";
+import { _ as S } from "./SelectInput.vue_vue_type_script_setup_true_lang-DEaP3bhC.js";
 import { u as $ } from "./useSimpleTabs-CSgkChEU.js";
 const B = { class: "sl-w-full" }, E = { class: "sm:sl-hidden" }, U = { class: "sl-hidden sm:sl-block sl-overflow-x-auto" }, z = {
   class: "sl-flex sl-flex-nowrap sl-space-x-4",

package/dist/{TagifyInput.vue_vue_type_script_setup_true_lang-BF2mK8JC.js → TagifyInput.vue_vue_type_script_setup_true_lang-CwxJ2x1x.js}

@@ -1,14 +1,14 @@
-import { defineComponent as V, ref as p, watch as z, onMounted as A, createBlock as w, openBlock as u, withCtx as g, createElementVNode as d, normalizeClass as F, createElementBlock as c, Fragment as T, renderList as S, withDirectives as k, toDisplayString as h, normalizeStyle as Q, withKeys as C, withModifiers as y, vModelText as B, createVNode as U, unref as R, createCommentVNode as K, renderSlot as L, nextTick as W } from "vue";
+import { defineComponent as z, ref as v, watch as A, onMounted as F, createBlock as w, openBlock as u, withCtx as g, createElementVNode as d, normalizeClass as k, createElementBlock as c, Fragment as T, renderList as S, withDirectives as C, toDisplayString as h, normalizeStyle as Q, withKeys as B, withModifiers as y, vModelText as K, createVNode as U, unref as R, createCommentVNode as L, renderSlot as N, nextTick as W } from "vue";
 import { XMarkIcon as X } from "@heroicons/vue/20/solid";
-import { _ } from "./UiBadge.vue_vue_type_script_setup_true_lang-DOtbLb9x.js";
-import j from "./forms/FormFieldWrapper.js";
-const G = { key: 0 }, H = ["onUpdate:modelValue", "placeholder", "disabled", "onKeydown", "onBlur"], P = ["onClick", "disabled"], Y = { class: "sl-flex-1 sl-min-w-0 sl-relative" }, Z = ["placeholder", "disabled", "onKeydown"], ee = { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-pointer-events-auto" }, te = {
+import { _ as j } from "./UiBadge.vue_vue_type_script_setup_true_lang-DOtbLb9x.js";
+import G from "./forms/FormFieldWrapper.js";
+const H = { key: 0 }, P = ["onUpdate:modelValue", "placeholder", "disabled", "onKeydown", "onBlur"], Y = ["onClick", "disabled"], Z = ["placeholder", "disabled", "onKeydown"], _ = { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-pointer-events-auto" }, ee = {
   key: 0,
   class: "sl-absolute sl-z-50 sl-mt-1 sl-max-h-60 sl-w-full sl-overflow-auto sl-rounded-md sl-bg-white sl-py-1 sl-text-base sl-shadow-lg sl-ring-1 sl-ring-black sl-ring-opacity-5 focus:sl-outline-none sm:sl-text-sm"
-}, le = ["onClick"], se = { class: "sl-flex" }, ae = { class: "sl-truncate sl-font-semibold" }, ne = { class: "sl-block sl-truncate" }, oe = {
+}, te = ["onClick"], le = { class: "sl-flex" }, se = { class: "sl-truncate sl-font-semibold" }, ae = { class: "sl-block sl-truncate" }, ne = {
   key: 0,
   class: "sl-ml-2 sl-truncate sl-text-gray-500"
-}, ce = /* @__PURE__ */ V({
+}, de = /* @__PURE__ */ z({
   __name: "TagifyInput",
   props: {
     items: {
@@ -81,29 +81,29 @@ const G = { key: 0 }, H = ["onUpdate:modelValue", "placeholder", "disabled", "on
     }
   },
   emits: ["update:value", "update:query", "invalid-tag"],
-  setup(s, { expose: N, emit: D }) {
-    const t = s, m = D, i = p(""), f = p([]), n = p(JSON.parse(JSON.stringify(t.value))), v = p(!1);
-    z(
+  setup(s, { expose: D, emit: I }) {
+    const t = s, m = I, o = v(""), p = v([]), n = v(JSON.parse(JSON.stringify(t.value))), f = v(!1);
+    A(
       () => t.value,
       (e) => {
         JSON.stringify(e) !== JSON.stringify(n.value) && (n.value = JSON.parse(JSON.stringify(e)));
       },
       { deep: !0 }
     );
-    const I = (e) => e[t.itemSubtext] || e[t.itemText], $ = (e) => e[t.itemSubtext] ? e[t.itemText] : void 0, q = (e) => e[t.tagDisplayKey] || e[t.itemText], E = () => {
-      if (i.value && i.value.length > 0) {
-        m("update:query", i.value);
-        const e = i.value.toLowerCase();
-        f.value = t.items.filter((a) => a[t.itemText]?.toLowerCase().includes(e) || a[t.itemSubtext]?.toLowerCase().includes(e)), v.value = !0;
+    const $ = (e) => e[t.itemSubtext] || e[t.itemText], q = (e) => e[t.itemSubtext] ? e[t.itemText] : void 0, E = (e) => e[t.tagDisplayKey] || e[t.itemText], J = () => {
+      if (o.value && o.value.length > 0) {
+        m("update:query", o.value);
+        const e = o.value.toLowerCase();
+        p.value = t.items.filter((a) => a[t.itemText]?.toLowerCase().includes(e) || a[t.itemSubtext]?.toLowerCase().includes(e)), f.value = !0;
       } else
-        f.value = [], v.value = !1;
-    }, J = () => {
-      const e = i.value.trim();
+        p.value = [], f.value = !1;
+    }, M = () => {
+      const e = o.value.trim();
       if (e === "")
         return;
       let a = null;
       const l = e.toLowerCase(), r = t.items.find(
-        (o) => o[t.itemText]?.toLowerCase() === l || o[t.itemSubtext]?.toLowerCase() === l
+        (i) => i[t.itemText]?.toLowerCase() === l || i[t.itemSubtext]?.toLowerCase() === l
       );
       if (r)
         a = { ...r };
@@ -112,16 +112,16 @@ const G = { key: 0 }, H = ["onUpdate:modelValue", "placeholder", "disabled", "on
       else
         return;
       n.value.some(
-        (o) => o[t.itemText] === a[t.itemText]
-      ) || (n.value.push(a), m("update:value", n.value)), i.value = "", f.value = [], v.value = !1;
-    }, M = (e) => {
+        (i) => i[t.itemText] === a[t.itemText]
+      ) || (n.value.push(a), m("update:value", n.value)), o.value = "", p.value = [], f.value = !1;
+    }, O = (e) => {
       const a = e[t.itemText].trim();
       n.value.some(
         (l) => l[t.itemText] === a
-      ) || (n.value.push({ ...e }), m("update:value", n.value)), i.value = "", f.value = [], v.value = !1;
+      ) || (n.value.push({ ...e }), m("update:value", n.value)), o.value = "", p.value = [], f.value = !1;
     }, b = (e) => {
       n.value.splice(e, 1), m("update:value", n.value);
-    }, O = (e) => {
+    }, V = (e) => {
       n.value[e].isEditing = !0, W(() => {
       });
     }, x = (e) => {
@@ -136,11 +136,11 @@ const G = { key: 0 }, H = ["onUpdate:modelValue", "placeholder", "disabled", "on
         a[t.itemText] = l, m("update:value", n.value);
       }
     };
-    return A(() => {
-      f.value = [];
-    }), N({
+    return F(() => {
+      p.value = [];
+    }), D({
       selectedTags: n
-    }), (e, a) => (u(), w(j, {
+    }), (e, a) => (u(), w(G, {
       id: s.name,
       name: s.name,
       label: s.label,
@@ -150,74 +150,77 @@ const G = { key: 0 }, H = ["onUpdate:modelValue", "placeholder", "disabled", "on
       optional: s.optional
     }, {
       "tertiary-label-overlay": g(() => [
-        L(e.$slots, "tertiary-overlay")
+        N(e.$slots, "tertiary-overlay")
       ]),
       default: g(() => [
         d("div", {
-          class: F(["sl-flex sl-flex-wrap sl-items-center sl-gap-4 sl-rounded-md sl-bg-white sl-px-3 sm:sl-text-sm sm:sl-leading-6", s.inline ? null : "sl-shadow-sm sl-border sl-border-gray-300 focus-within:sl-ring-2 focus-within:sl-ring-stachelock-600"])
+          class: k(["sl-flex sl-flex-wrap sl-items-center sl-gap-2 sl-rounded-md sl-bg-white sl-py-1.5 sl-ring-1 sl-ring-inset sl-ring-gray-300 dark:sl-ring-slate-600 dark:sl-bg-slate-800 sm:sl-text-sm sm:sl-leading-6", s.inline ? null : "sl-shadow-sm focus-within:sl-ring-2 focus-within:sl-ring-stachelock-600"])
         }, [
-          (u(!0), c(T, null, S(n.value, (l, r) => (u(), w(_, {
+          (u(!0), c(T, null, S(n.value, (l, r) => (u(), w(j, {
             key: r,
-            onClick: (o) => O(r),
+            onClick: (i) => V(r),
             theme: "primary",
-            size: "sm"
+            size: "sm",
+            class: "sl-ml-2"
           }, {
             default: g(() => [
-              l.isEditing ? k((u(), c("input", {
+              l.isEditing ? C((u(), c("input", {
                 key: 1,
                 ref_for: !0,
                 ref: "editInput",
-                "onUpdate:modelValue": (o) => l[t.itemText] = o,
+                "onUpdate:modelValue": (i) => l[t.itemText] = i,
                 placeholder: s.placeholder,
                 disabled: s.disabled,
-                onKeydown: C(y((o) => x(r), ["prevent"]), ["enter"]),
-                onBlur: (o) => x(r),
-                class: "sl-bg-transparent sl-border-none sl-outline-none sl-text-stachelock-600 sl-text-sm placeholder:sl-text-stachelock-400/80 focus:sl-ring-0 focus:sl-ring-stachelock-600 focus:sl-rounded-lg -sl-mx-3 -sl-my-2",
+                onKeydown: B(y((i) => x(r), ["prevent"]), ["enter"]),
+                onBlur: (i) => x(r),
+                class: "sl-bg-transparent sl-border-none sl-outline-none sl-text-stachelock-600 sl-text-sm placeholder:sl-text-gray-400 dark:placeholder:sl-text-slate-500 focus:sl-ring-0 focus:sl-ring-stachelock-600 focus:sl-rounded-lg",
                 style: Q({ width: l[t.itemText].length + 4 + "ch" })
-              }, null, 44, H)), [
-                [B, l[t.itemText]]
-              ]) : (u(), c("span", G, h(q(l)), 1)),
+              }, null, 44, P)), [
+                [K, l[t.itemText]]
+              ]) : (u(), c("span", H, h(E(l)), 1)),
               d("button", {
                 type: "button",
                 class: "sl-ml-2 sl-text-stachelock-600 hover:sl-text-stachelock-400 focus:sl-outline-none",
-                onClick: y((o) => b(r), ["stop"]),
+                onClick: y((i) => b(r), ["stop"]),
                 disabled: s.disabled
               }, [
                 U(R(X), { class: "sl-h-4 sl-w-4" })
-              ], 8, P)
+              ], 8, Y)
             ]),
             _: 2
           }, 1032, ["onClick"]))), 128)),
-          d("div", Y, [
-            k(d("input", {
+          d("div", {
+            class: k(["sl-flex-1 sl-min-w-0 sl-relative", n.value.length === 0 ? "sl-pl-2" : ""])
+          }, [
+            C(d("input", {
               ref: "input",
-              "onUpdate:modelValue": a[0] || (a[0] = (l) => i.value = l),
+              "onUpdate:modelValue": a[0] || (a[0] = (l) => o.value = l),
               placeholder: s.placeholder,
-              onInput: E,
+              onInput: J,
               disabled: s.disabled,
-              onKeydown: C(y(J, ["prevent"]), ["enter"]),
-              class: "sl-w-full sl-border-none sl-outline-none sl-rounded-md focus:sl-ring-0 sl-text-sm sl-font-light -sl-mx-3 sl-pr-12"
+              onKeydown: B(y(M, ["prevent"]), ["enter"]),
+              class: "sl-w-full sl-border-none sl-outline-none sl-rounded-md sl-bg-transparent focus:sl-ring-0 sl-text-sm sl-text-gray-900 dark:sl-text-slate-100 placeholder:sl-text-gray-400 dark:placeholder:sl-text-slate-500 sl-pr-12"
             }, null, 40, Z), [
-              [B, i.value]
+              [K, o.value]
             ]),
-            d("div", ee, [
-              L(e.$slots, "input-overlay")
+            d("div", _, [
+              N(e.$slots, "input-overlay")
             ]),
-            v.value && !s.disabled ? (u(), c("div", te, [
-              (u(!0), c(T, null, S(f.value, (l) => (u(), c("div", {
+            f.value && !s.disabled ? (u(), c("div", ee, [
+              (u(!0), c(T, null, S(p.value, (l) => (u(), c("div", {
                 key: l[s.itemKey],
                 class: "sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9 hover:sl-bg-stachelock-600 hover:sl-text-white",
-                onClick: y((r) => M(l), ["prevent"])
+                onClick: y((r) => O(l), ["prevent"])
               }, [
-                d("div", se, [
-                  d("span", ae, [
-                    d("span", ne, h(I(l)), 1)
+                d("div", le, [
+                  d("span", se, [
+                    d("span", ae, h($(l)), 1)
                   ]),
-                  s.showSubext ? (u(), c("span", oe, h($(l)), 1)) : K("", !0)
+                  s.showSubext ? (u(), c("span", ne, h(q(l)), 1)) : L("", !0)
                 ])
-              ], 8, le))), 128))
-            ])) : K("", !0)
-          ])
+              ], 8, te))), 128))
+            ])) : L("", !0)
+          ], 2)
         ], 2)
       ]),
       _: 3
@@ -225,5 +228,5 @@ const G = { key: 0 }, H = ["onUpdate:modelValue", "placeholder", "disabled", "on
   }
 });
 export {
-  ce as _
+  de as _
 };

package/dist/{TextAreaInput.vue_vue_type_script_setup_true_lang-Cf0MJobG.js → TextAreaInput.vue_vue_type_script_setup_true_lang-Dtf7H1sT.js}

@@ -50,8 +50,9 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
     const w = F(() => {
       const l = [
         "sl-w-full",
-        "sl-px-3",
-        "sl-py-2",
+        "sl-pl-2",
+        "sl-pr-3",
+        "sl-py-1.5",
         "sl-text-sm",
         "sl-border",
         "sl-rounded-md",

package/dist/calendars/CalendarDashboard.js

@@ -1,5 +1,5 @@
 import { defineComponent as _, ref as w, computed as d, createElementBlock as y, openBlock as D, createElementVNode as r, createVNode as s, withCtx as b, createTextVNode as x } from "vue";
-import { _ as C } from "../CalendarHeader.vue_vue_type_script_setup_true_lang-Cbgbb2e5.js";
+import { _ as C } from "../CalendarHeader.vue_vue_type_script_setup_true_lang-CooyV5tq.js";
 import { _ as S } from "../MonthCalendar.vue_vue_type_style_index_0_lang-BdrrlrNr.js";
 import { _ as E } from "../EventsList.vue_vue_type_script_setup_true_lang-BTIoGr_e.js";
 import V from "../components/Button.js";

package/dist/calendars/CalendarHeader.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../CalendarHeader.vue_vue_type_script_setup_true_lang-Cbgbb2e5.js";
+import { _ as f } from "../CalendarHeader.vue_vue_type_script_setup_true_lang-CooyV5tq.js";
 export {
   f as default
 };

package/dist/components/CloudinaryImage.js

@@ -158,7 +158,7 @@ const J = { class: "sl-flex sl-h-full sl-w-full sl-items-center sl-justify-cente
       ]) : O("", !0)
     ], 6));
   }
-}), te = /* @__PURE__ */ H(X, [["__scopeId", "data-v-4ba5c28c"]]);
+}), te = /* @__PURE__ */ H(X, [["__scopeId", "data-v-c1961485"]]);
 export {
   te as default
 };

package/dist/forms/FormFieldWrapper.js

@@ -113,7 +113,7 @@ const B = { class: "sl-grid sl-grid-cols-3 sl-items-center" }, p = ["for"], E =
         ])) : i("", !0),
         x.value ? (t(), l("div", {
           key: 2,
-          class: n(["sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset focus-within:sl-ring-stachelock-600", h.value])
+          class: n(["sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset sl-bg-white dark:sl-bg-slate-800 focus-within:sl-ring-2 focus-within:sl-ring-inset focus-within:sl-ring-stachelock-600", h.value])
         }, [
           o("div", N, [
             r(a.$slots, "prefix", {}, void 0, !0)
@@ -160,7 +160,7 @@ const B = { class: "sl-grid sl-grid-cols-3 sl-items-center" }, p = ["for"], E =
       }, 8, ["show"])
     ], 2));
   }
-}), U = /* @__PURE__ */ M(G, [["__scopeId", "data-v-ab892ba2"]]);
+}), U = /* @__PURE__ */ M(G, [["__scopeId", "data-v-7b34e824"]]);
 export {
   U as default
 };

package/dist/index.js

@@ -27,7 +27,7 @@ import { _ as Ti } from "./UiTable.vue_vue_type_script_setup_true_lang-xGAiJ9rS.
 import { _ as Mi } from "./UiTransition.vue_vue_type_script_setup_true_lang-C4jb9I-3.js";
 import { UserIcon as st, XMarkIcon as lt, XCircleIcon as at } from "@heroicons/vue/24/solid";
 import rt from "./components/CloudinaryImage.js";
-import { _ as ji } from "./CalendarHeader.vue_vue_type_script_setup_true_lang-Cbgbb2e5.js";
+import { _ as ji } from "./CalendarHeader.vue_vue_type_script_setup_true_lang-CooyV5tq.js";
 import { _ as Bi } from "./DayCalendar.vue_vue_type_script_setup_true_lang-BgV8wr8v.js";
 import { _ as Pi } from "./EventCard.vue_vue_type_script_setup_true_lang-B3TP-mWX.js";
 import { _ as Ai } from "./EventsList.vue_vue_type_script_setup_true_lang-BTIoGr_e.js";
@@ -52,19 +52,19 @@ import Ae from "dayjs/plugin/timezone";
 import dt from "dayjs/plugin/relativeTime";
 import { _ as nd } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-BCVmqg_n.js";
 import { _ as ct } from "./CheckboxInput.vue_vue_type_script_setup_true_lang-BikR9rgi.js";
-import { _ as ut } from "./ComboboxInput.vue_vue_type_script_setup_true_lang-kHTj4Ju2.js";
-import { _ as dd } from "./DatepickerInput.vue_vue_type_style_index_0_lang-DbI3619T.js";
-import { _ as ud } from "./EmailInput.vue_vue_type_script_setup_true_lang-CWEfbsJ_.js";
+import { _ as ut } from "./ComboboxInput.vue_vue_type_script_setup_true_lang-Cy0Pl8Ap.js";
+import { _ as dd } from "./DatepickerInput.vue_vue_type_style_index_0_lang-C_0dWHo6.js";
+import { _ as ud } from "./EmailInput.vue_vue_type_script_setup_true_lang-59bDl9yw.js";
 import { _ as fd } from "./EmptyInput.vue_vue_type_script_setup_true_lang-FWDCFF2c.js";
-import { _ as gd } from "./FileDropzoneInput.vue_vue_type_script_setup_true_lang-BJR-_ngq.js";
+import { _ as gd } from "./FileDropzoneInput.vue_vue_type_script_setup_true_lang-BC_qN5qn.js";
 import { _ as yd } from "./HiddenInput.vue_vue_type_script_setup_true_lang-PtGZ4eLW.js";
-import { _ as vd } from "./ImageDropzoneInput.vue_vue_type_script_setup_true_lang-7JWDfxD2.js";
-import { _ as mt } from "./TextAreaInput.vue_vue_type_script_setup_true_lang-Cf0MJobG.js";
-import { _ as ft } from "./SwitchInput.vue_vue_type_script_setup_true_lang-D5Es9AjF.js";
-import { _ as ke } from "./SelectInput.vue_vue_type_script_setup_true_lang-D9yg_rkV.js";
-import { _ as kd } from "./SelectTextInput.vue_vue_type_script_setup_true_lang-CtFVOrhm.js";
-import { _ as $d } from "./SwitchInputGroup.vue_vue_type_script_setup_true_lang-DigNYqVZ.js";
-import { _ as Cd } from "./TagifyInput.vue_vue_type_script_setup_true_lang-BF2mK8JC.js";
+import { _ as vd } from "./ImageDropzoneInput.vue_vue_type_script_setup_true_lang-CsAclXd8.js";
+import { _ as mt } from "./TextAreaInput.vue_vue_type_script_setup_true_lang-Dtf7H1sT.js";
+import { _ as ft } from "./SwitchInput.vue_vue_type_script_setup_true_lang-r8ZwU1Zy.js";
+import { _ as ke } from "./SelectInput.vue_vue_type_script_setup_true_lang-DEaP3bhC.js";
+import { _ as kd } from "./SelectTextInput.vue_vue_type_script_setup_true_lang-DYlrRigi.js";
+import { _ as $d } from "./SwitchInputGroup.vue_vue_type_script_setup_true_lang-PgsXeiig.js";
+import { _ as Cd } from "./TagifyInput.vue_vue_type_script_setup_true_lang-CwxJ2x1x.js";
 import { _ as Sd } from "./DashboardLayout.vue_vue_type_script_setup_true_lang-BAx4gKqh.js";
 import { _ as Td } from "./DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js";
 import { _ as Md } from "./HeaderLayout.vue_vue_type_script_setup_true_lang-BY2G6hCc.js";
@@ -84,10 +84,10 @@ import { TransitionRoot as ge, Dialog as pt, TransitionChild as $e, DialogPanel
 import { QuestionMarkCircleIcon as yt } from "@heroicons/vue/20/solid";
 import { SwatchIcon as xt, XMarkIcon as vt, PhoneIcon as _e, EnvelopeIcon as bt, GlobeAltIcon as Re, CakeIcon as He, CalendarDaysIcon as kt, BriefcaseIcon as wt, BuildingOfficeIcon as $t, LinkIcon as _t, MapPinIcon as Ce, BuildingLibraryIcon as Ct, UserGroupIcon as It } from "@heroicons/vue/24/outline";
 import { _ as Jd } from "./StepperPanels.vue_vue_type_script_setup_true_lang-DPLQ9mQn.js";
-import { _ as Qd } from "./InlineTabs.vue_vue_type_script_setup_true_lang-BWzrSbT3.js";
-import { _ as t0 } from "./TabGroup.vue_vue_type_script_setup_true_lang-123nIzRC.js";
-import { _ as l0 } from "./TabGroupUnderline.vue_vue_type_script_setup_true_lang-DbIwjaLJ.js";
-import { _ as r0 } from "./TabsInPills.vue_vue_type_script_setup_true_lang-mw68ZzS1.js";
+import { _ as Qd } from "./InlineTabs.vue_vue_type_script_setup_true_lang-DGGJem-g.js";
+import { _ as t0 } from "./TabGroup.vue_vue_type_script_setup_true_lang-DTWW7kYh.js";
+import { _ as l0 } from "./TabGroupUnderline.vue_vue_type_script_setup_true_lang-B8e7kxad.js";
+import { _ as r0 } from "./TabsInPills.vue_vue_type_script_setup_true_lang-Dzi4ENL1.js";
 import { _ as n0 } from "./BackgroundGradientWrapper.vue_vue_type_script_setup_true_lang-C8msTrTn.js";
 import { _ as d0 } from "./CardWrapper.vue_vue_type_script_setup_true_lang-D59QBAi9.js";
 import { _ as u0 } from "./DisclosureWrapper.vue_vue_type_script_setup_true_lang-CgHPOC-w.js";
@@ -1244,7 +1244,7 @@ const jt = { class: "sl-fixed sl-inset-0 sl-z-10 sl-w-screen sl-overflow-y-auto"
       }, null, 8, ["title", "description", "onClose"])) : w("", !0)
     ]));
   }
-}), ye = /* @__PURE__ */ W(js, [["__scopeId", "data-v-64df06ec"]]), Vs = { class: "sl-py-1 sl-text-sm sl-leading-5 sl-text-gray-600 dark:sl-text-gray-300" }, Bs = { class: "sl-text-xs sl-text-gray-500 dark:sl-text-gray-400" }, fn = /* @__PURE__ */ B({
+}), ye = /* @__PURE__ */ W(js, [["__scopeId", "data-v-2dd7ddec"]]), Vs = { class: "sl-py-1 sl-text-sm sl-leading-5 sl-text-gray-600 dark:sl-text-gray-300" }, Bs = { class: "sl-text-xs sl-text-gray-500 dark:sl-text-gray-400" }, fn = /* @__PURE__ */ B({
   __name: "OrganizationsEditor",
   props: {
     name: {},
@@ -3697,7 +3697,7 @@ const Wl = /* @__PURE__ */ W(Ol, [["render", Hl]]), ql = { class: "sl-bg-white s
     return (l, c) => (a(), u("div", mo, [
       c[4] || (c[4] = s("div", { class: "sl-absolute sl-inset-0 sl-bg-gray-50 dark:sl-bg-gray-900 sl--z-10" }, null, -1)),
       s("div", fo, [
-        c[3] || (c[3] = Je('<div class="sl-rounded-2xl sl-bg-gradient-to-r sl-from-primary-600 sl-to-primary-700 sl-p-6 sl-animate-pulse" data-v-dbce0c6a><div class="sl-flex sl-items-center sl-gap-4" data-v-dbce0c6a><div class="sl-w-20 sl-h-20 sl-rounded-full sl-bg-white/20" data-v-dbce0c6a></div><div class="sl-space-y-2" data-v-dbce0c6a><div class="sl-h-6 sl-w-48 sl-bg-white/20 sl-rounded" data-v-dbce0c6a></div><div class="sl-h-4 sl-w-24 sl-bg-white/20 sl-rounded" data-v-dbce0c6a></div></div></div></div>', 1)),
+        c[3] || (c[3] = Je('<div class="sl-rounded-2xl sl-bg-gradient-to-r sl-from-primary-600 sl-to-primary-700 sl-p-6 sl-animate-pulse" data-v-8fcac1e1><div class="sl-flex sl-items-center sl-gap-4" data-v-8fcac1e1><div class="sl-w-20 sl-h-20 sl-rounded-full sl-bg-white/20" data-v-8fcac1e1></div><div class="sl-space-y-2" data-v-8fcac1e1><div class="sl-h-6 sl-w-48 sl-bg-white/20 sl-rounded" data-v-8fcac1e1></div><div class="sl-h-4 sl-w-24 sl-bg-white/20 sl-rounded" data-v-8fcac1e1></div></div></div></div>', 1)),
         s("div", {
           class: M([
             "sl-grid sl-gap-6",
@@ -3797,7 +3797,7 @@ const Wl = /* @__PURE__ */ W(Ol, [["render", Hl]]), ql = { class: "sl-bg-white s
       ])
     ]));
   }
-}), zn = /* @__PURE__ */ W(_o, [["__scopeId", "data-v-dbce0c6a"]]);
+}), zn = /* @__PURE__ */ W(_o, [["__scopeId", "data-v-8fcac1e1"]]);
 class Co {
   designTokens;
   prefix = "sl-";