@stachelock/ui 0.6.8 → 0.6.10

package/dist/{CalendarHeader.vue_vue_type_script_setup_true_lang-CMBsY5Y0.js → CalendarHeader.vue_vue_type_script_setup_true_lang-Cbgbb2e5.js}

@@ -1,8 +1,8 @@
 import { defineComponent as P, ref as v, computed as x, watch as D, onMounted as q, onUnmounted as J, createElementBlock as d, openBlock as c, createElementVNode as s, toDisplayString as u, createVNode as y, unref as C, createCommentVNode as S, renderSlot as M, Fragment as _, withCtx as $, createTextVNode as Q, Transition as X, withDirectives as Z, renderList as ee, normalizeClass as te, vShow as se } from "vue";
 import { ChevronLeftIcon as le, ChevronRightIcon as ae, EllipsisHorizontalIcon as re } from "@heroicons/vue/20/solid";
 import ne from "./components/Button.js";
-import { _ as oe } from "./SelectInput.vue_vue_type_script_setup_true_lang-DFfKsmvj.js";
-import { t as h, p as A, b as ie, g as de, a as O } from "./calendar-DLry-Vik.js";
+import { _ as oe } from "./SelectInput.vue_vue_type_script_setup_true_lang-D9yg_rkV.js";
+import { t as h, p as A, b as ie, g as de, a as O } from "./calendar-DaXCwXP5.js";
 const ce = { class: "sl-flex sl-items-center sl-justify-between sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sl-pl-6 sl-py-4 lg:sl-flex-none sl-bg-white dark:sl-bg-slate-900" }, ue = { class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-800 dark:sl-text-slate-200" }, ye = ["datetime"], me = { class: "sl-flex sl-items-center" }, ge = { class: "sl-relative sl-flex sl-items-center sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-shadow-sm md:sl-items-stretch" }, ve = { class: "sl-sr-only" }, he = { class: "sl-sr-only" }, fe = { class: "sl-hidden md:sl-ml-4 md:sl-flex md:sl-items-center" }, be = { class: "sl-w-36" }, ke = { class: "sl-absolute sl-right-0 sl-z-10 sl-mt-3 sl-w-36 sl-origin-top-right sl-divide-y sl-divide-gray-100 dark:sl-divide-slate-700 sl-overflow-hidden sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-shadow-lg sl-ring-1 sl-ring-black dark:sl-ring-slate-600 sl-ring-opacity-5 focus:sl-outline-none" }, we = {
   key: 0,
   class: "sl-py-1"

package/dist/{ComboboxInput.vue_vue_type_script_setup_true_lang-DacJtKYo.js → ComboboxInput.vue_vue_type_script_setup_true_lang-kHTj4Ju2.js}

@@ -1,11 +1,11 @@
-import { defineComponent as te, ref as w, watch as F, computed as x, createElementBlock as m, openBlock as u, createVNode as d, unref as r, withCtx as v, createElementVNode as c, normalizeClass as y, createCommentVNode as f, withModifiers as B, createBlock as N, toDisplayString as M, Fragment as ae, renderList as oe } from "vue";
-import { Combobox as re, ComboboxInput as ne, ComboboxButton as ue, TransitionRoot as ie, ComboboxOptions as de, ComboboxOption as U } from "@headlessui/vue";
+import { defineComponent as te, ref as w, watch as F, computed as x, createElementBlock as m, openBlock as u, createVNode as d, unref as n, withCtx as v, createElementVNode as c, normalizeClass as g, createCommentVNode as f, withModifiers as I, createBlock as N, toDisplayString as M, Fragment as ae, renderList as oe } from "vue";
+import { Combobox as ne, ComboboxInput as re, ComboboxButton as ue, TransitionRoot as ie, ComboboxOptions as de, ComboboxOption as U } from "@headlessui/vue";
 import { XMarkIcon as ce, ChevronUpDownIcon as me, CheckIcon as z } from "@heroicons/vue/20/solid";
 import { useField as ve } from "vee-validate";
 import fe from "./forms/FormFieldWrapper.js";
 import { _ as pe } from "./UiLoading.vue_vue_type_script_setup_true_lang-rNvtzKbq.js";
-import { g as ye } from "./id-DafBB_QF.js";
-const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2 sl-gap-1" }, he = { class: "sl-block sl-truncate sl-font-medium" }, ke = {
+import { g as ge } from "./id-DafBB_QF.js";
+const ye = { class: "sl-w-full" }, he = { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2 sl-gap-1" }, be = { class: "sl-block sl-truncate sl-font-medium" }, ke = {
   key: 0,
   class: "sl-absolute sl-inset-y-0 sl-left-0 sl-flex sl-items-center sl-pl-3 sl-text-stachelock-600 dark:sl-text-stachelock-400"
 }, xe = {
@@ -14,7 +14,7 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
 }, we = { class: "sl-flex sl-items-center sl-gap-2" }, Ce = {
   key: 2,
   class: "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-px-4 sl-text-gray-700 dark:sl-text-slate-200"
-}, Ae = { class: "sl-block sl-truncate" }, Ve = { key: 0 }, Ie = 50, Ne = /* @__PURE__ */ te({
+}, Ae = { class: "sl-block sl-truncate" }, Ve = { key: 0 }, Be = 50, Ne = /* @__PURE__ */ te({
   __name: "ComboboxInput",
   props: {
     name: {},
@@ -35,11 +35,13 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
     modelValue: { type: [String, Number, Boolean, null, Object, Array] },
     value: { type: [String, Number, Boolean, null, Object, Array] },
     boxShadow: { type: Boolean, default: !1 },
-    clearable: { type: Boolean, default: !1 }
+    clearable: { type: Boolean, default: !1 },
+    showValidCheck: { type: Boolean, default: !0 },
+    colorfulValidation: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "update:value", "update:query", "blur", "focus"],
   setup(a, { emit: D }) {
-    const s = a, i = D, P = ye(s.name), o = w(""), C = s.modelValue ?? s.value, { value: b, errorMessage: K, handleChange: p, meta: A, setTouched: V } = ve(
+    const s = a, i = D, P = ge(s.name), o = w(""), C = s.modelValue ?? s.value, { value: y, errorMessage: K, handleChange: p, meta: A, setTouched: V } = ve(
       () => s.name,
       s.rules,
       {
@@ -54,9 +56,9 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
       (e) => {
         if (s.multiple) {
           const l = Array.isArray(e) ? e : [];
-          l !== t.value && (t.value = l, b.value = l);
+          l !== t.value && (t.value = l, y.value = l);
         } else
-          e !== t.value && (t.value = e, b.value = e);
+          e !== t.value && (t.value = e, y.value = e);
       },
       { immediate: !0 }
     ), F(
@@ -68,7 +70,7 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
     const $ = x(() => [
       "sl-w-full",
       "sl-border-none",
-      "sl-py-2",
+      "sl-py-1.5",
       "sl-pl-3",
       "sl-pr-10",
       "sl-text-sm",
@@ -89,10 +91,12 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
         "sl-w-full",
         "sl-cursor-default",
         "sl-rounded-md",
+        "sl-shadow-sm",
+        "sl-ring-1",
+        "sl-ring-inset",
         "sl-bg-white",
-        "dark:sl-bg-slate-900",
+        "dark:sl-bg-slate-800",
         "sl-text-left",
-        "sl-border",
         "sl-outline-none",
         "dark:sl-outline-none",
         "focus-within:sl-outline-none",
@@ -100,8 +104,8 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
         "[&_*]:sl-outline-none",
         "dark:[&_*]:sl-outline-none",
         "focus-within:sl-ring-2",
-        "focus-within:sl-ring-stachelock-500",
-        "focus-within:sl-border-stachelock-500",
+        "focus-within:sl-ring-inset",
+        "focus-within:sl-ring-stachelock-600",
         "sl-transition-all",
         "sl-duration-200"
       ];
@@ -109,46 +113,40 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
         "sl-bg-gray-50",
         "dark:sl-bg-slate-800",
         "sl-cursor-not-allowed",
-        "sl-border-gray-200",
-        "dark:sl-border-slate-700"
+        "sl-ring-gray-200",
+        "dark:sl-ring-slate-700"
       ) : K.value ? e.push(
-        "sl-border-red-300",
-        "dark:sl-border-red-500",
-        "focus-within:sl-ring-red-500",
-        "focus-within:sl-border-red-500"
-      ) : A.valid && A.touched ? e.push(
-        "sl-border-green-300",
-        "dark:sl-border-green-500",
-        "focus-within:sl-ring-green-500",
-        "focus-within:sl-border-green-500"
+        "sl-ring-red-500",
+        "dark:sl-ring-red-500"
+      ) : s.colorfulValidation && A.valid && A.touched ? e.push(
+        "sl-ring-green-500",
+        "dark:sl-ring-green-500"
       ) : e.push(
-        "sl-border-gray-300",
-        "dark:sl-border-slate-600",
-        "hover:sl-border-gray-400",
-        "dark:hover:sl-border-slate-500"
+        "sl-ring-gray-300",
+        "dark:sl-ring-slate-600"
       ), e.join(" ");
     }), S = (e) => {
       const l = e[s.itemKey];
       return l == null ? "" : typeof l == "string" || typeof l == "number" ? l : String(l);
-    }, I = (e) => {
+    }, B = (e) => {
       if (!e) return "";
       const l = e[s.itemText];
       return l != null ? String(l) : String(e);
-    }, g = w([]), T = w([]), L = w(1), Q = () => {
-      const e = L.value * Ie;
-      T.value = g.value.slice(0, e), L.value += 1;
+    }, h = w([]), T = w([]), L = w(1), Q = () => {
+      const e = L.value * Be;
+      T.value = h.value.slice(0, e), L.value += 1;
     }, R = () => {
       L.value = 1, T.value = [], Q();
     }, j = () => {
       if (o.value && o.value !== "")
         if (s.customQuery)
-          g.value = s.customQuery(o.value, s.items);
+          h.value = s.customQuery(o.value, s.items);
         else {
           const e = o.value.toLowerCase();
-          g.value = s.items.filter((l) => I(l).toLowerCase().includes(e));
+          h.value = s.items.filter((l) => B(l).toLowerCase().includes(e));
         }
       else
-        g.value = s.items;
+        h.value = s.items;
       R();
     }, q = x(() => s.items.filter((e) => !e.disabled)), W = (e) => {
       const l = e.target;
@@ -156,19 +154,19 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
     }, X = (e) => {
       if (s.multiple) {
         const l = Array.isArray(e) ? e : [];
-        t.value = l, b.value = l, V(!0), p(l);
+        t.value = l, y.value = l, V(!0), p(l);
       } else
-        t.value = e, b.value = e, V(!0), p(e);
+        t.value = e, y.value = e, V(!0), p(e);
     }, O = x(() => {
       if (!s.multiple || !Array.isArray(t.value)) return !1;
       const e = q.value;
       if (e.length === 0) return !1;
-      const l = Array.isArray(t.value) ? t.value : [], n = new Set(l.map((k) => S(k)));
-      return e.every((k) => n.has(S(k)));
+      const l = Array.isArray(t.value) ? t.value : [], r = new Set(l.map((k) => S(k)));
+      return e.every((k) => r.has(S(k)));
     }), G = () => {
       s.multiple && (O.value ? t.value = [] : t.value = [...q.value], V(!0), p(t.value), i("update:modelValue", t.value));
-    }, J = (e) => s.multiple ? !Array.isArray(e) || e.length === 0 ? "" : e.length === 1 ? I(e[0]) : `${e.length} selected` : I(e), h = x(() => s.multiple || o.value === "" ? null : { [s.itemKey]: null, [s.itemText]: o.value }), Y = () => {
-      s.multiple || h.value && (s.customQuery ? (i("update:modelValue", o.value), p(o.value)) : (t.value = h.value, p(t.value)));
+    }, J = (e) => s.multiple ? !Array.isArray(e) || e.length === 0 ? "" : e.length === 1 ? B(e[0]) : `${e.length} selected` : B(e), b = x(() => s.multiple || o.value === "" ? null : { [s.itemKey]: null, [s.itemText]: o.value }), Y = () => {
+      s.multiple || b.value && (s.customQuery ? (i("update:modelValue", o.value), p(o.value)) : (t.value = b.value, p(t.value)));
     }, Z = (e) => {
       const l = e.target;
       l.scrollTop + l.clientHeight >= l.scrollHeight && Q();
@@ -176,40 +174,41 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
       i("focus", e);
     }, ee = x(() => {
       if (!s.clearable) return !1;
-      const e = t.value ?? s.value ?? s.modelValue ?? b.value;
+      const e = t.value ?? s.value ?? s.modelValue ?? y.value;
       return s.multiple && Array.isArray(e) ? e.length > 0 : e != null && e !== "";
     }), le = (e) => {
       e.stopPropagation(), e.preventDefault();
       const l = s.multiple ? [] : null;
-      t.value = l, b.value = l, o.value = "", V(!0), p(l), i("update:modelValue", l), i("update:value", l);
+      t.value = l, y.value = l, o.value = "", V(!0), p(l), i("update:modelValue", l), i("update:value", l);
     }, se = (e) => {
-      !s.multiple && h.value && (t.value = h.value, p(t.value), i("update:modelValue", t.value)), i("blur", e);
+      !s.multiple && b.value && (t.value = b.value, p(t.value), i("update:modelValue", t.value), i("update:value", t.value)), i("blur", e);
     };
     return F(() => s.items, () => {
       j();
-    }, { immediate: !0, deep: !0 }), (e, l) => (u(), m("div", be, [
+    }, { immediate: !0, deep: !0 }), (e, l) => (u(), m("div", ye, [
       d(fe, {
-        id: r(P),
+        id: n(P),
         name: a.name,
         label: a.label,
         disabled: a.disabled,
         optional: !a.rules,
         "tertiary-label": a.tertiaryLabel,
         "box-shadow": a.boxShadow,
-        "error-message": r(K),
+        "error-message": n(K),
         "success-message": a.successMessage,
-        "is-valid": r(A).valid,
-        "is-touched": r(A).touched,
-        "show-valid-check": !1
+        "is-valid": n(A).valid,
+        "is-touched": n(A).touched,
+        "show-valid-check": a.showValidCheck,
+        "colorful-validation": a.colorfulValidation
       }, {
         "success-message": v(() => [
           a.successMessage ? (u(), m("span", Ve, M(a.successMessage), 1)) : f("", !0)
         ]),
         default: v(() => [
-          d(r(re), {
+          d(n(ne), {
             modelValue: t.value,
             "onUpdate:modelValue": [
-              l[4] || (l[4] = (n) => t.value = n),
+              l[4] || (l[4] = (r) => t.value = r),
               X
             ],
             disabled: a.disabled,
@@ -219,37 +218,37 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
           }, {
             default: v(() => [
               c("div", {
-                class: y(H.value)
+                class: g(H.value)
               }, [
-                d(r(ne), {
-                  id: r(P),
-                  class: y($.value),
+                d(n(re), {
+                  id: n(P),
+                  class: g($.value),
                   "display-value": J,
                   placeholder: a.placeholder || "Type to search...",
                   modelValue: o.value,
-                  "onUpdate:modelValue": l[0] || (l[0] = (n) => o.value = n),
+                  "onUpdate:modelValue": l[0] || (l[0] = (r) => o.value = r),
                   onInput: W,
                   onBlur: se,
                   onFocus: _
                 }, null, 8, ["id", "class", "placeholder", "modelValue"]),
-                c("div", ge, [
+                c("div", he, [
                   ee.value ? (u(), m("button", {
                     key: 0,
                     type: "button",
                     class: "sl-p-0.5 sl-rounded-full sl-text-gray-400 dark:sl-text-slate-400 hover:sl-text-gray-600 dark:hover:sl-text-slate-200 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none",
                     onClick: le,
-                    onMousedown: l[1] || (l[1] = B(() => {
+                    onMousedown: l[1] || (l[1] = I(() => {
                     }, ["prevent"]))
                   }, [
-                    d(r(ce), {
+                    d(n(ce), {
                       class: "sl-h-4 sl-w-4",
                       "aria-hidden": "true"
                     }),
                     l[5] || (l[5] = c("span", { class: "sl-sr-only" }, "Clear selection", -1))
                   ], 32)) : f("", !0),
-                  d(r(ue), { class: "sl-flex sl-items-center sl-outline-none focus:sl-outline-none dark:sl-outline-none dark:focus:sl-outline-none" }, {
+                  d(n(ue), { class: "sl-flex sl-items-center sl-outline-none focus:sl-outline-none dark:sl-outline-none dark:focus:sl-outline-none" }, {
                     default: v(() => [
-                      d(r(me), {
+                      d(n(me), {
                         class: "sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-300",
                         "aria-hidden": "true"
                       })
@@ -257,14 +256,14 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
                     _: 1
                   })
                 ]),
-                d(r(ie), {
+                d(n(ie), {
                   leave: "sl-transition sl-ease-in sl-duration-100",
                   "leave-from": "sl-opacity-100",
                   "leave-to": "sl-opacity-0",
-                  onAfterLeave: l[3] || (l[3] = (n) => o.value = "")
+                  onAfterLeave: l[3] || (l[3] = (r) => o.value = "")
                 }, {
                   default: v(() => [
-                    g.value.length > 0 || o.value !== "" || a.multiple && a.showAll ? (u(), N(r(de), {
+                    h.value.length > 0 || o.value !== "" || a.multiple && a.showAll ? (u(), N(n(de), {
                       key: 0,
                       class: "sl-absolute sl-z-[9999] sl-mt-1 sl-max-h-60 sl-w-full 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",
                       onScroll: Z
@@ -274,18 +273,18 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
                           key: 0,
                           role: "button",
                           tabindex: "0",
-                          onMousedown: l[2] || (l[2] = B(() => {
+                          onMousedown: l[2] || (l[2] = I(() => {
                           }, ["prevent"])),
-                          onClick: B(G, ["prevent", "stop"]),
-                          class: y([
+                          onClick: I(G, ["prevent", "stop"]),
+                          class: g([
                             "sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-10 sl-pr-4 sl-text-gray-900 dark:sl-text-slate-200",
                             "hover:sl-bg-stachelock-600 hover:sl-text-white"
                           ]),
                           "data-testid": "select-all-option"
                         }, [
-                          c("span", he, M(O.value ? "Unselect All" : "Select All"), 1),
+                          c("span", be, M(O.value ? "Unselect All" : "Select All"), 1),
                           O.value ? (u(), m("span", ke, [
-                            d(r(z), {
+                            d(n(z), {
                               class: "sl-h-5 sl-w-5",
                               "aria-hidden": "true"
                             })
@@ -296,32 +295,32 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
                             d(pe, { size: "sm" }),
                             l[6] || (l[6] = c("span", null, "Loading...", -1))
                           ])
-                        ])) : o.value !== "" && g.value.length === 0 ? (u(), m("div", Ce, " Nothing found. ")) : f("", !0),
-                        (u(!0), m(ae, null, oe(T.value, (n) => (u(), N(r(U), {
-                          key: S(n),
-                          value: n,
+                        ])) : o.value !== "" && h.value.length === 0 ? (u(), m("div", Ce, " Nothing found. ")) : f("", !0),
+                        (u(!0), m(ae, null, oe(T.value, (r) => (u(), N(n(U), {
+                          key: S(r),
+                          value: r,
                           as: "template",
-                          disabled: n.disabled
+                          disabled: r.disabled
                         }, {
                           default: v(({ active: k, selected: E }) => [
                             c("li", {
-                              class: y([
+                              class: g([
                                 "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-10 sl-pr-4",
                                 k ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200",
-                                n.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : ""
+                                r.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : ""
                               ])
                             }, [
                               c("span", {
-                                class: y([
+                                class: g([
                                   "sl-block sl-truncate",
                                   E ? "sl-font-medium" : "sl-font-normal"
                                 ])
-                              }, M(I(n)), 3),
+                              }, M(B(r)), 3),
                               E ? (u(), m("span", {
                                 key: 0,
-                                class: y(["sl-absolute sl-inset-y-0 sl-left-0 sl-flex sl-items-center sl-pl-3", k ? "sl-text-white" : "sl-text-stachelock-600 dark:sl-text-stachelock-400"])
+                                class: g(["sl-absolute sl-inset-y-0 sl-left-0 sl-flex sl-items-center sl-pl-3", k ? "sl-text-white" : "sl-text-stachelock-600 dark:sl-text-stachelock-400"])
                               }, [
-                                d(r(z), {
+                                d(n(z), {
                                   class: "sl-h-5 sl-w-5",
                                   "aria-hidden": "true"
                                 })
@@ -330,17 +329,17 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
                           ]),
                           _: 2
                         }, 1032, ["value", "disabled"]))), 128)),
-                        !a.multiple && h.value ? (u(), N(r(U), {
+                        !a.multiple && b.value ? (u(), N(n(U), {
                           key: 3,
-                          value: h.value,
+                          value: b.value,
                           as: "template"
                         }, {
-                          default: v(({ active: n }) => [
+                          default: v(({ active: r }) => [
                             c("li", {
-                              onClick: B(Y, ["prevent", "stop"]),
-                              class: y([
+                              onClick: I(Y, ["prevent", "stop"]),
+                              class: g([
                                 "sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-10 sl-pr-4",
-                                n ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200"
+                                r ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200"
                               ])
                             }, [
                               c("span", Ae, ' Enter "' + M(o.value) + '" manually ', 1)
@@ -360,7 +359,7 @@ const be = { class: "sl-w-full" }, ge = { class: "sl-absolute sl-inset-y-0 sl-ri
           }, 8, ["modelValue", "disabled", "multiple"])
         ]),
         _: 1
-      }, 8, ["id", "name", "label", "disabled", "optional", "tertiary-label", "box-shadow", "error-message", "success-message", "is-valid", "is-touched"])
+      }, 8, ["id", "name", "label", "disabled", "optional", "tertiary-label", "box-shadow", "error-message", "success-message", "is-valid", "is-touched", "show-valid-check", "colorful-validation"])
     ]));
   }
 });

package/dist/{DayCalendar.vue_vue_type_script_setup_true_lang-D-4jcUvI.js → DayCalendar.vue_vue_type_script_setup_true_lang-BgV8wr8v.js}

@@ -1,5 +1,5 @@
 import { defineComponent as G, ref as m, computed as i, onMounted as Y, nextTick as q, onUnmounted as J, createElementBlock as o, openBlock as n, createElementVNode as l, createCommentVNode as d, Fragment as f, renderList as y, createTextVNode as K, toDisplayString as r, normalizeClass as Q, normalizeStyle as x, unref as p, renderSlot as W } from "vue";
-import { i as $, c as X, d as ss, f as A } from "./calendar-DLry-Vik.js";
+import { i as $, c as X, d as ss, f as A } from "./calendar-DaXCwXP5.js";
 const ts = { class: "sl-isolate sl-flex sl-flex-auto sl-overflow-hidden sl-bg-white dark:sl-bg-slate-900" }, es = { class: "sl-grid sl-grid-cols-7 sl-text-sm sl-leading-6 sl-text-gray-500 dark:sl-text-slate-400 xl:sl-hidden" }, ls = ["onClick"], os = {
   key: 0,
   class: "sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sl-bg-gray-50 dark:sl-bg-slate-800 sl-px-4 sl-py-2"

package/dist/{DynamicForm.vue_vue_type_script_setup_true_lang-Bq8Gvhsc.js → DynamicForm.vue_vue_type_script_setup_true_lang-BR8Pq7Kw.js}

@@ -2,7 +2,7 @@ import { defineComponent as Y, ref as Z, reactive as _, watch as w, computed as
 import { useForm as te } from "vee-validate";
 import { ExclamationCircleIcon as se } from "@heroicons/vue/24/outline";
 import A from "./components/Button.js";
-import { _ as ae } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-CdNtWWlT.js";
+import { _ as ae } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-BCVmqg_n.js";
 const le = {
   key: 0,
   class: "sl-mb-6"

package/dist/{DynamicFormField.vue_vue_type_script_setup_true_lang-CdNtWWlT.js → DynamicFormField.vue_vue_type_script_setup_true_lang-BCVmqg_n.js}

@@ -1,10 +1,10 @@
 import { defineComponent as b, computed as s, defineAsyncComponent as y, createBlock as v, createElementBlock as g, openBlock as c, resolveDynamicComponent as w, mergeProps as k, toHandlers as V, createElementVNode as o, createVNode as _, unref as L, toDisplayString as P } from "vue";
-import { T as t } from "./TextInput-C5IzX7m_.js";
+import t from "./inputs/TextInput.js";
 import { ExclamationTriangleIcon as C } from "@heroicons/vue/24/outline";
 const D = {
   key: 1,
   class: "sl-p-4 sl-bg-yellow-50 sl-border sl-border-yellow-200 sl-rounded-md"
-}, F = { class: "sl-flex" }, T = { class: "sl-ml-3" }, M = { class: "sl-mt-2 sl-text-sm sl-text-yellow-700" }, A = /* @__PURE__ */ b({
+}, F = { class: "sl-flex" }, M = { class: "sl-ml-3" }, T = { class: "sl-mt-2 sl-text-sm sl-text-yellow-700" }, A = /* @__PURE__ */ b({
   __name: "DynamicFormField",
   props: {
     field: {},
@@ -137,9 +137,9 @@ const D = {
     }), null, 16, ["model-value"])) : (c(), g("div", D, [
       o("div", F, [
         _(L(C), { class: "sl-h-5 sl-w-5 sl-text-yellow-400" }),
-        o("div", T, [
+        o("div", M, [
           i[0] || (i[0] = o("h3", { class: "sl-text-sm sl-font-medium sl-text-yellow-800" }, " Unknown field type ", -1)),
-          o("div", M, [
+          o("div", T, [
             o("p", null, 'Field type "' + P(a.field.type) + '" is not supported.', 1)
           ])
         ])

package/dist/{EmailInput.vue_vue_type_script_setup_true_lang-BicPMIop.js → EmailInput.vue_vue_type_script_setup_true_lang-CWEfbsJ_.js}

@@ -1,9 +1,10 @@
-import { defineComponent as C, ref as I, toRef as m, watch as n, nextTick as M, createElementBlock as V, openBlock as F, createVNode as K, unref as t, withCtx as f, renderSlot as q, createElementVNode as L, withKeys as N, normalizeClass as O, withModifiers as T } from "vue";
-import { useField as $ } from "vee-validate";
-import { string as z } from "yup";
-import H from "./forms/FormFieldWrapper.js";
-import { g as R } from "./id-DafBB_QF.js";
-const S = { class: "sl-w-full" }, U = ["name", "id", "value", "placeholder", "autocomplete", "disabled", "onKeydown"], J = /* @__PURE__ */ C({
+import { defineComponent as I, ref as M, computed as V, toRef as m, watch as n, nextTick as F, createElementBlock as K, openBlock as O, createVNode as q, unref as s, withCtx as f, renderSlot as L, createElementVNode as N, withKeys as R, normalizeClass as T, withModifiers as $ } from "vue";
+import { useField as z } from "vee-validate";
+import { string as H } from "yup";
+import S from "./forms/FormFieldWrapper.js";
+import { g as U } from "./id-DafBB_QF.js";
+import { i as W } from "./validation-Dzczp6MS.js";
+const j = { class: "sl-w-full" }, A = ["name", "id", "value", "placeholder", "autocomplete", "disabled", "onKeydown"], Y = /* @__PURE__ */ I({
   __name: "EmailInput",
   props: {
     name: {},
@@ -12,7 +13,7 @@ const S = { class: "sl-w-full" }, U = ["name", "id", "value", "placeholder", "au
     placeholder: { default: "you@example.com" },
     disabled: { type: Boolean, default: !1 },
     disabledMessage: { default: "" },
-    rules: { default: () => z().email("Invalid email address").required("Email is required") },
+    rules: { default: () => H().email("Invalid email address").required("Email is required") },
     successMessage: { default: "" },
     tertiaryLabel: { default: "" },
     colorfulValidation: { type: Boolean, default: !0 },
@@ -22,100 +23,101 @@ const S = { class: "sl-w-full" }, U = ["name", "id", "value", "placeholder", "au
   },
   emits: ["update:value", "update:validity", "focus", "blur", "submit"],
   setup(l, { expose: h, emit: v }) {
-    const s = l, a = v, o = R(`sl-${s.name}`), r = I(!1), {
+    const a = l, t = v, d = U(`sl-${a.name}`), r = M(!1), g = V(() => W(a.rules)), {
       value: i,
-      errorMessage: g,
-      handleBlur: b,
+      errorMessage: b,
+      handleBlur: p,
       handleChange: y,
       meta: u,
       validate: c,
-      setTouched: p
-    } = $(m(s, "name"), m(s, "rules"), {
-      initialValue: s.value,
+      setTouched: w
+    } = z(m(a, "name"), m(a, "rules"), {
+      initialValue: a.value,
       validateOnValueUpdate: !0,
       validateOnMount: !1
     });
     n(
-      () => s.value,
+      () => a.value,
       (e) => {
         e !== void 0 && e !== i.value && (i.value = e);
       },
       { immediate: !0 }
     ), n(
       () => u.valid,
-      (e) => M(() => a("update:validity", e)),
+      (e) => F(() => t("update:validity", e)),
       { immediate: !0 }
-    ), n(i, (e, d) => {
-      e !== d && a("update:value", e || "");
+    ), n(i, (e, o) => {
+      e !== o && t("update:value", e || "");
     });
-    function w(e) {
-      const d = e.target.value;
-      y(d), a("update:value", d);
+    function k(e) {
+      const o = e.target.value;
+      y(o), t("update:value", o);
     }
-    async function k(e) {
-      r.value || (r.value = !0, p(!0)), await c(), b(e), a("blur", e);
+    async function B(e) {
+      r.value || (r.value = !0, w(!0)), await c(), p(e), t("blur", e);
     }
-    function B(e) {
-      a("focus", e);
+    function x(e) {
+      t("focus", e);
     }
-    function x() {
-      u.valid && i.value && a("submit");
+    function E() {
+      u.valid && i.value && t("submit");
     }
     return h({
       focus: () => {
-        document.getElementById(o)?.focus();
+        document.getElementById(d)?.focus();
       },
       blur: () => {
-        document.getElementById(o)?.blur();
+        document.getElementById(d)?.blur();
       },
       validate: c
-    }), (e, d) => (F(), V("div", S, [
-      K(H, {
-        id: t(o),
+    }), (e, o) => (O(), K("div", j, [
+      q(S, {
+        id: s(d),
         name: l.name,
         label: l.label,
         "tertiary-label": l.tertiaryLabel,
-        "error-message": t(g),
+        "error-message": s(b),
         "success-message": l.successMessage,
-        "is-valid": t(u).valid,
-        "is-touched": t(u).touched,
+        "is-valid": s(u).valid,
+        "is-touched": s(u).touched,
         "show-errors": l.showErrors,
         "show-valid-check": l.showValidCheck,
         "colorful-validation": l.colorfulValidation,
         disabled: l.disabled,
-        "disabled-message": l.disabledMessage
+        "disabled-message": l.disabledMessage,
+        optional: g.value
       }, {
-        default: f(({ inputClasses: E }) => [
-          L("input", {
+        default: f(({ inputClasses: C }) => [
+          N("input", {
             name: l.name,
-            id: t(o),
+            id: s(d),
             type: "email",
-            value: t(i),
+            value: s(i),
             placeholder: l.placeholder,
             autocomplete: l.autoComplete,
             disabled: l.disabled,
-            class: O(["sl-block sl-w-full sl-bg-transparent sl-text-gray-900 dark:sl-text-gray-100 placeholder:sl-text-gray-400 dark:placeholder:sl-text-gray-500 focus:sl-ring-0 focus:sl-outline-none sm:sl-text-sm sm:sl-leading-6", [
-              E,
+            class: T(["sl-block sl-w-full sl-bg-transparent sl-text-gray-900 dark:sl-text-gray-100 placeholder:sl-text-gray-400 dark:placeholder:sl-text-gray-500 focus:sl-ring-0 focus:sl-outline-none sm:sl-text-sm sm:sl-leading-6", [
+              C,
               "sl-py-1.5 sl-pl-2",
               { "sl-text-gray-400": l.disabled },
               { "sl-pr-10": l.showValidCheck }
             ]]),
-            onInput: w,
-            onFocus: B,
-            onBlur: k,
-            onKeydown: N(T(x, ["prevent"]), ["enter"]),
+            onInput: k,
+            onFocus: x,
+            onBlur: B,
+            onKeydown: R($(E, ["prevent"]), ["enter"]),
             enterkeyhint: "go",
             "data-testid": "email-input"
-          }, null, 42, U)
+          }, null, 42, A)
         ]),
         "input-right": f(() => [
-          q(e.$slots, "input-right")
+          L(e.$slots, "input-right")
         ]),
         _: 3
-      }, 8, ["id", "name", "label", "tertiary-label", "error-message", "success-message", "is-valid", "is-touched", "show-errors", "show-valid-check", "colorful-validation", "disabled", "disabled-message"])
+      }, 8, ["id", "name", "label", "tertiary-label", "error-message", "success-message", "is-valid", "is-touched", "show-errors", "show-valid-check", "colorful-validation", "disabled", "disabled-message", "optional"])
     ]));
   }
 });
 export {
-  J as _
+  Y as _
 };

package/dist/{InlineTabs.vue_vue_type_script_setup_true_lang-B6A0zsE6.js → InlineTabs.vue_vue_type_script_setup_true_lang-BWzrSbT3.js}

@@ -1,5 +1,5 @@
 import { defineComponent as w, createElementBlock as s, openBlock as t, createCommentVNode as n, createElementVNode as r, createVNode as I, unref as l, toDisplayString as d, Fragment as c, renderList as u, normalizeClass as h, withModifiers as V, createTextVNode as N, renderSlot as b } from "vue";
-import { _ as S } from "./SelectInput.vue_vue_type_script_setup_true_lang-DFfKsmvj.js";
+import { _ as S } from "./SelectInput.vue_vue_type_script_setup_true_lang-D9yg_rkV.js";
 import { u as $ } from "./useSimpleTabs-CSgkChEU.js";
 const B = { class: "sl-w-full" }, M = {
   key: 0,