@stachelock/ui 0.6.8 → 0.6.10

package/dist/inputs/PhoneInput.js

@@ -1,11 +1,12 @@
-import { defineComponent as Pe, inject as Le, ref as f, computed as u, toRef as Oe, watch as M, nextTick as ie, onMounted as Re, onUnmounted as Te, createBlock as O, openBlock as y, unref as b, withCtx as R, createElementVNode as i, normalizeClass as I, createVNode as B, createElementBlock as Y, createCommentVNode as D, renderSlot as Ae, toDisplayString as W, Teleport as Me, Transition as Be, normalizeStyle as De, withDirectives as Ue, withModifiers as Z, vModelText as Fe, Fragment as He, renderList as Ge, withKeys as Ke } from "vue";
-import { useField as qe } from "vee-validate";
-import { Listbox as Ye, ListboxButton as je, ListboxOptions as ze, ListboxOption as $e } from "@headlessui/vue";
-import { ChevronDownIcon as _e, CheckIcon as We, ExclamationCircleIcon as Ze, CheckCircleIcon as Je } from "@heroicons/vue/20/solid";
-import Xe from "../forms/FormFieldWrapper.js";
-import { g as Qe } from "../id-DafBB_QF.js";
-import { AsYouType as X, validatePhoneNumberLength as ea, parsePhoneNumberFromString as aa } from "libphonenumber-js";
-import { _ as la } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+import { defineComponent as Pe, inject as Le, ref as f, computed as i, toRef as Re, watch as M, nextTick as ie, onMounted as Te, onUnmounted as Ae, createBlock as L, openBlock as C, unref as b, withCtx as R, createElementVNode as u, normalizeClass as I, createVNode as B, createElementBlock as Y, createCommentVNode as D, renderSlot as Me, toDisplayString as W, Teleport as Be, Transition as De, normalizeStyle as Ue, withDirectives as Fe, withModifiers as Z, vModelText as He, Fragment as Ge, renderList as Ke, withKeys as qe } from "vue";
+import { useField as Ye } from "vee-validate";
+import { Listbox as je, ListboxButton as ze, ListboxOptions as $e, ListboxOption as _e } from "@headlessui/vue";
+import { ChevronDownIcon as We, CheckIcon as Ze, ExclamationCircleIcon as Je, CheckCircleIcon as Xe } from "@heroicons/vue/20/solid";
+import Qe from "../forms/FormFieldWrapper.js";
+import { g as ea } from "../id-DafBB_QF.js";
+import { i as aa } from "../validation-Dzczp6MS.js";
+import { AsYouType as X, validatePhoneNumberLength as la, parsePhoneNumberFromString as ta } from "libphonenumber-js";
+import { _ as oa } from "../_plugin-vue_export-helper-CHgC5LLL.js";
 const E = {
   US: { code: "US", name: "United States", dialCode: "+1" },
   CA: { code: "CA", name: "Canada", dialCode: "+1" },
@@ -75,13 +76,13 @@ const E = {
 }, ue = Object.values(E).sort(
   (a, s) => a.name.localeCompare(s.name)
 );
-function ta(a) {
+function sa(a) {
   return E[a]?.dialCode ?? "+1";
 }
 function T(a, s, v = {}) {
-  const { required: t = !1 } = v;
+  const { required: l = !1 } = v;
   if (!a || a.trim() === "")
-    return t ? {
+    return l ? {
       isValid: !1,
       errorMessage: "Phone number is required",
       errorCode: "EMPTY"
@@ -100,23 +101,23 @@ function T(a, s, v = {}) {
       errorCode: "TOO_SHORT"
     };
   try {
-    const C = new X(s);
-    C.input(n);
-    const p = C.getNumber();
-    if (!p)
+    const p = new X(s);
+    p.input(n);
+    const y = p.getNumber();
+    if (!y)
       return {
         isValid: !1,
         errorMessage: `Invalid format for ${E[s]?.name || "selected country"}`,
         errorCode: "INVALID_FORMAT"
       };
-    if (!p.isPossible())
+    if (!y.isPossible())
       return {
         isValid: !1,
         errorMessage: `Not a possible phone number for ${E[s]?.name || "this country"}`,
         errorCode: "NOT_POSSIBLE"
       };
-    const w = ea(
-      p.nationalNumber || n,
+    const w = la(
+      y.nationalNumber || n,
       s
     );
     if (w) {
@@ -134,26 +135,26 @@ function T(a, s, v = {}) {
     }
     return {
       isValid: !0,
-      e164: p.number,
-      national: p.formatNational(),
-      international: p.formatInternational(),
-      country: p.country
+      e164: y.number,
+      national: y.formatNational(),
+      international: y.formatInternational(),
+      country: y.country
     };
-  } catch (C) {
-    return console.error("Phone validation error:", C), {
+  } catch (p) {
+    return console.error("Phone validation error:", p), {
       isValid: !1,
       errorMessage: "Invalid phone number format",
       errorCode: "INVALID_FORMAT"
     };
   }
 }
-function oa(a, s = "US") {
+function ra(a, s = "US") {
   if (!a) return "";
   try {
     const v = new X(s);
     v.input(a);
-    const t = v.getNumber();
-    return t ? t.formatNational() : a.replace(/^\+[0-9]{1,3}/, "").trim();
+    const l = v.getNumber();
+    return l ? l.formatNational() : a.replace(/^\+[0-9]{1,3}/, "").trim();
   } catch (v) {
     return console.error("Error formatting phone number:", v), a || "";
   }
@@ -162,7 +163,7 @@ function J(a, s = "US") {
   if (!a)
     return { formatted: "", numberObject: void 0 };
   try {
-    const v = a.replace(/(?!^\+)[^0-9]/g, ""), t = new X(s), n = t.input(v), h = t.getNumber();
+    const v = a.replace(/(?!^\+)[^0-9]/g, ""), l = new X(s), n = l.input(v), h = l.getNumber();
     return { formatted: n, numberObject: h };
   } catch (v) {
     return console.error("Error formatting phone number:", v), { formatted: a, numberObject: void 0 };
@@ -171,13 +172,13 @@ function J(a, s = "US") {
 function ce(a) {
   if (!(!a || !a.startsWith("+")))
     try {
-      const s = aa(a);
+      const s = ta(a);
       if (s?.country)
         return s.country;
     } catch {
     }
 }
-function sa(a) {
+function na(a) {
   return {
     US: "(555) 123-4567",
     CA: "(555) 123-4567",
@@ -191,16 +192,16 @@ function sa(a) {
     MX: "55 1234 5678"
   }[a] || E[a]?.dialCode || "";
 }
-function ra(a) {
-  return sa(a) || "Enter phone number";
+function da(a) {
+  return na(a) || "Enter phone number";
 }
-const na = ["src", "alt"], da = { class: "sl-font-medium" }, ia = { class: "sl-bg-white dark:sl-bg-slate-800 sl-px-2 sl-py-2 sl-border-b sl-border-gray-100 dark:sl-border-slate-700" }, ua = { class: "sl-max-h-56 sl-overflow-y-auto sl-overscroll-contain" }, ca = { class: "sl-flex sl-items-center sl-gap-3" }, ma = { class: "sl-w-5 sl-h-5 sl-rounded-full sl-overflow-hidden sl-flex-shrink-0 sl-bg-gray-100 sl-shadow-sm" }, fa = ["src", "alt"], va = { class: "sl-font-medium sl-w-12" }, ga = {
+const ia = ["src", "alt"], ua = { class: "sl-font-medium" }, ca = { class: "sl-bg-white dark:sl-bg-slate-800 sl-px-2 sl-py-2 sl-border-b sl-border-gray-100 dark:sl-border-slate-700" }, ma = { class: "sl-max-h-56 sl-overflow-y-auto sl-overscroll-contain" }, fa = { class: "sl-flex sl-items-center sl-gap-3" }, va = { class: "sl-w-5 sl-h-5 sl-rounded-full sl-overflow-hidden sl-flex-shrink-0 sl-bg-gray-100 sl-shadow-sm" }, ga = ["src", "alt"], ha = { class: "sl-font-medium sl-w-12" }, pa = {
   key: 0,
   class: "sl-px-3 sl-py-4 sl-text-sm sl-text-gray-500 dark:sl-text-gray-300 sl-text-center"
-}, ha = ["id", "name", "value", "placeholder", "autocomplete", "disabled", "aria-describedby", "aria-invalid", "onKeydown"], Ca = {
+}, Ca = ["id", "name", "value", "placeholder", "autocomplete", "disabled", "aria-describedby", "aria-invalid", "onKeydown"], ya = {
   key: 0,
   class: "sl-flex sl-items-center sl-pr-3 sl-pointer-events-none"
-}, ya = /* @__PURE__ */ Pe({
+}, ba = /* @__PURE__ */ Pe({
   __name: "PhoneInput",
   props: {
     name: {
@@ -278,22 +279,22 @@ const na = ["src", "alt"], da = { class: "sl-font-medium" }, ia = { class: "sl-b
   },
   emits: ["update:modelValue", "update:value", "update:country", "update-metadata", "submit", "focus", "blur", "validated"],
   setup(a, { expose: s, emit: v }) {
-    const t = a, n = v, h = Le("phoneInput", {}), C = f(null), p = f(null), w = f(null), S = f(null), U = f({ top: 0, left: 0 }), k = u(() => Qe(t.name)), j = Oe(t, "name"), Q = u(() => t.modelValue ?? t.value ?? ""), r = f(
-      t.defaultCountry || h.defaultCountry || "US"
+    const l = a, n = v, h = Le("phoneInput", {}), p = f(null), y = f(null), w = f(null), S = f(null), U = f({ top: 0, left: 0 }), k = i(() => ea(l.name)), j = Re(l, "name"), Q = i(() => l.modelValue ?? l.value ?? ""), r = f(
+      l.defaultCountry || h.defaultCountry || "US"
     ), V = f(""), c = f(""), m = f(""), F = f(""), N = f(!1), ee = f(!1), {
       meta: A,
       errorMessage: me,
       handleBlur: fe,
       handleChange: ae,
       setTouched: ve
-    } = qe(j, t.rules, {
+    } = Ye(j, l.rules, {
       initialValue: Q.value
-    }), le = u(() => E[r.value] || E.US), z = u({
+    }), le = i(() => E[r.value] || E.US), ge = i(() => l.required ? !1 : aa(l.rules)), z = i({
       get: () => le.value,
       set: (e) => {
         e && e.code !== r.value && de(e.code);
       }
-    }), ge = u(() => ta(r.value)), he = u(() => t.placeholder || ra(r.value)), $ = u(() => F.value || me.value), H = u(() => !!$.value && (A.touched || t.showErrors)), Ce = u(() => (H.value || N.value && t.colorfulValidation) && (A.touched || t.showErrors)), te = u(() => N.value && !!c.value && !F.value && t.colorfulValidation), ye = u(() => t.disabled ? "sl-ring-gray-200 dark:sl-ring-slate-600" : H.value ? "sl-ring-red-500 focus-within:sl-ring-red-500" : te.value && t.colorfulValidation ? "sl-ring-green-500 focus-within:sl-ring-green-500" : "sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-primary-600"), pe = u(() => ({
+    }), he = i(() => sa(r.value)), pe = i(() => l.placeholder || da(r.value)), $ = i(() => F.value || me.value), H = i(() => !!$.value && (A.touched || l.showErrors)), Ce = i(() => (H.value || N.value && l.colorfulValidation) && (A.touched || l.showErrors)), te = i(() => N.value && !!c.value && !F.value && l.colorfulValidation), ye = i(() => l.disabled ? "sl-ring-gray-200 dark:sl-ring-slate-600" : H.value ? "sl-ring-red-500 focus-within:sl-ring-red-500" : te.value && l.colorfulValidation ? "sl-ring-green-500 focus-within:sl-ring-green-500" : "sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-primary-600"), be = i(() => ({
       top: `${U.value.top}px`,
       left: `${U.value.left}px`
     })), oe = async () => {
@@ -306,48 +307,48 @@ const na = ["src", "alt"], da = { class: "sl-font-medium" }, ia = { class: "sl-b
         };
       }
     }, G = () => {
-      P.value && oe();
-    }, P = f(!1), be = () => {
-      P.value = !P.value, P.value && oe();
+      O.value && oe();
+    }, O = f(!1), we = () => {
+      O.value = !O.value, O.value && oe();
     };
     M(z, () => {
-      P.value = !1;
+      O.value = !1;
     });
     const se = (e) => {
       const o = e.target;
-      w.value && !w.value.contains(o) && !o.closest('[role="listbox"]') && (P.value = !1);
-    }, we = u(() => {
+      w.value && !w.value.contains(o) && !o.closest('[role="listbox"]') && (O.value = !1);
+    }, xe = i(() => {
       const e = [];
-      return $.value && e.push(`${k.value}-error`), t.hint && e.push(`${k.value}-hint`), e.length > 0 ? e.join(" ") : void 0;
-    }), re = u(() => {
+      return $.value && e.push(`${k.value}-error`), l.hint && e.push(`${k.value}-hint`), e.length > 0 ? e.join(" ") : void 0;
+    }), re = i(() => {
       let e = [...ue];
       if (h.preferredCountries?.length) {
-        const l = e.filter(
+        const t = e.filter(
           (g) => h.preferredCountries.includes(g.code)
         ), d = e.filter(
           (g) => !h.preferredCountries.includes(g.code)
         );
-        e = [...l, ...d];
+        e = [...t, ...d];
       }
       if (h.excludedCountries?.length && (e = e.filter(
-        (l) => !h.excludedCountries.includes(l.code)
+        (t) => !h.excludedCountries.includes(t.code)
       )), !V.value) return e;
       const o = V.value.toLowerCase();
       return e.filter(
-        (l) => l.name.toLowerCase().includes(o) || l.dialCode.includes(o) || l.code.toLowerCase().includes(o)
+        (t) => t.name.toLowerCase().includes(o) || t.dialCode.includes(o) || t.code.toLowerCase().includes(o)
       );
-    }), ne = (e) => `https://flagcdn.com/w40/${e.toLowerCase()}.png`, xe = (e) => {
+    }), ne = (e) => `https://flagcdn.com/w40/${e.toLowerCase()}.png`, Ie = (e) => {
       const o = e.target;
       o.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239ca3af"%3E%3Cpath d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/%3E%3C/svg%3E';
     }, de = (e) => {
       if (r.value = e, V.value = "", n("update:country", e), ee.value && c.value) {
-        const { formatted: o, numberObject: l } = J(c.value, e);
-        c.value = o, l?.number && (m.value = l.number, L(l.number));
-        const d = T(c.value, e, { required: t.required });
+        const { formatted: o, numberObject: t } = J(c.value, e);
+        c.value = o, t?.number && (m.value = t.number, P(t.number));
+        const d = T(c.value, e, { required: l.required });
         K(d);
       }
       ie(() => {
-        C.value?.focus();
+        p.value?.focus();
       });
     }, K = (e) => {
       N.value = e.isValid, F.value = e.errorMessage || "", n("validated", e), n("update-metadata", {
@@ -355,78 +356,78 @@ const na = ["src", "alt"], da = { class: "sl-font-medium" }, ia = { class: "sl-b
         valid: e.isValid,
         e164: e.e164
       });
-    }, L = (e) => {
+    }, P = (e) => {
       n("update:modelValue", e), n("update:value", e);
-    }, Ie = (e) => {
-      const o = e.target, l = o.value;
+    }, Ee = (e) => {
+      const o = e.target, t = o.value;
       if (ue.some(
-        (q) => q.name.toLowerCase() === l.toLowerCase() || q.code.toLowerCase() === l.toLowerCase()
+        (q) => q.name.toLowerCase() === t.toLowerCase() || q.code.toLowerCase() === t.toLowerCase()
       )) return;
-      if (!l.trim()) {
-        c.value = "", m.value = "", L(""), ae(e);
-        const q = T("", r.value, { required: t.required });
+      if (!t.trim()) {
+        c.value = "", m.value = "", P(""), ae(e);
+        const q = T("", r.value, { required: l.required });
         K(q);
         return;
       }
-      const { formatted: g, numberObject: x } = J(l, r.value);
-      c.value = g, o.value = g, x?.number ? (m.value = x.number, L(x.number)) : (m.value = "", L(""));
-      const Ve = T(g, r.value, { required: t.required });
-      K(Ve), ae(e);
-    }, Ee = async (e) => {
+      const { formatted: g, numberObject: x } = J(t, r.value);
+      c.value = g, o.value = g, x?.number ? (m.value = x.number, P(x.number)) : (m.value = "", P(""));
+      const Oe = T(g, r.value, { required: l.required });
+      K(Oe), ae(e);
+    }, Se = async (e) => {
       e.preventDefault();
       const o = e.clipboardData?.getData("text") || "";
       if (!o) return;
-      if (t.autoDetectCountry && o.startsWith("+")) {
+      if (l.autoDetectCountry && o.startsWith("+")) {
         const x = ce(o);
         x && x !== r.value && (r.value = x, n("update:country", x));
       }
-      const { formatted: l, numberObject: d } = J(o, r.value);
-      c.value = l, C.value && (C.value.value = l), d?.number ? (m.value = d.number, L(d.number)) : (m.value = "", L(""));
-      const g = T(l, r.value, { required: t.required });
+      const { formatted: t, numberObject: d } = J(o, r.value);
+      c.value = t, p.value && (p.value.value = t), d?.number ? (m.value = d.number, P(d.number)) : (m.value = "", P(""));
+      const g = T(t, r.value, { required: l.required });
       K(g);
-    }, Se = (e) => {
+    }, ke = (e) => {
       fe(e), ve(!0), n("blur");
-    }, ke = () => {
-      n("focus");
     }, Ne = () => {
+      n("focus");
+    }, Ve = () => {
       A.valid && N.value && m.value && n("submit");
     }, _ = (e) => {
       if (!e) {
-        c.value = "", m.value = "", N.value = !t.required, F.value = "";
+        c.value = "", m.value = "", N.value = !l.required, F.value = "";
         return;
       }
-      if (t.autoDetectCountry && e.startsWith("+")) {
+      if (l.autoDetectCountry && e.startsWith("+")) {
         const d = ce(e);
         d && (r.value = d, n("update:country", d));
       }
-      const o = oa(e, r.value);
+      const o = ra(e, r.value);
       c.value = o, m.value = e.startsWith("+") ? e : "";
-      const l = T(o, r.value, { required: t.required });
-      N.value = l.isValid, l.e164 && (m.value = l.e164);
+      const t = T(o, r.value, { required: l.required });
+      N.value = t.isValid, t.e164 && (m.value = t.e164);
     };
     return s({
-      focus: () => C.value?.focus(),
-      blur: () => C.value?.blur(),
-      validate: () => T(c.value, r.value, { required: t.required }),
+      focus: () => p.value?.focus(),
+      blur: () => p.value?.blur(),
+      validate: () => T(c.value, r.value, { required: l.required }),
       getE164: () => m.value,
       getCountry: () => r.value,
       setCountry: (e) => de(e)
-    }), Re(() => {
-      ee.value = !0, _(Q.value), window.addEventListener("scroll", G, !0), window.addEventListener("resize", G), document.addEventListener("click", se);
     }), Te(() => {
+      ee.value = !0, _(Q.value), window.addEventListener("scroll", G, !0), window.addEventListener("resize", G), document.addEventListener("click", se);
+    }), Ae(() => {
       window.removeEventListener("scroll", G, !0), window.removeEventListener("resize", G), document.removeEventListener("click", se);
-    }), M(() => t.modelValue, (e) => {
+    }), M(() => l.modelValue, (e) => {
       e !== m.value && _(e);
-    }, { immediate: !1 }), M(() => t.value, (e) => {
+    }, { immediate: !1 }), M(() => l.value, (e) => {
       e !== m.value && _(e);
-    }, { immediate: !1 }), M(() => t.defaultCountry, (e) => {
+    }, { immediate: !1 }), M(() => l.defaultCountry, (e) => {
       e && !c.value && (r.value = e);
     }), M(V, () => {
-    }), (e, o) => (y(), O(Xe, {
+    }), (e, o) => (C(), L(Qe, {
       id: k.value,
       name: j.value,
       label: a.label,
-      optional: !a.required,
+      optional: ge.value,
       "error-message": $.value,
       "success-message": a.successMessage,
       "is-valid": N.value,
@@ -439,46 +440,46 @@ const na = ["src", "alt"], da = { class: "sl-font-medium" }, ia = { class: "sl-b
       "colorful-validation": a.colorfulValidation
     }, {
       default: R(() => [
-        i("div", {
+        u("div", {
           class: I(["sl-flex sl-rounded-md sl-ring-1 sl-ring-inset", [
             ye.value,
             a.disabled ? "sl-bg-gray-50 dark:sl-bg-slate-800 sl-shadow-none" : "sl-bg-white dark:sl-bg-slate-800 sl-shadow-sm focus-within:sl-ring-2 focus-within:sl-ring-inset"
           ]])
         }, [
-          B(b(Ye), {
+          B(b(je), {
             modelValue: z.value,
-            "onUpdate:modelValue": o[3] || (o[3] = (l) => z.value = l),
+            "onUpdate:modelValue": o[3] || (o[3] = (t) => z.value = t),
             disabled: a.disabled,
             as: "div",
             class: "sl-relative sl-flex-shrink-0"
           }, {
             default: R(() => [
-              i("div", {
+              u("div", {
                 ref_key: "countryButtonRef",
                 ref: w,
                 class: "sl-h-full"
               }, [
-                B(b(je), {
+                B(b(ze), {
                   disabled: a.disabled,
                   class: I(["sl-flex sl-items-center sl-gap-1.5 sl-h-full sl-pl-3 sl-pr-2 sl-border-r sl-text-sm focus:sl-outline-none sl-transition-colors", [
                     a.disabled ? "sl-text-gray-400 dark:sl-text-gray-300 sl-cursor-not-allowed sl-border-gray-200 dark:sl-border-slate-600 sl-bg-transparent" : "sl-text-gray-700 dark:sl-text-gray-100 sl-border-gray-300 dark:sl-border-slate-600 hover:sl-bg-gray-50 dark:hover:sl-bg-slate-700 sl-cursor-pointer"
                   ]]),
                   "data-testid": "country-selector",
-                  onClick: be
+                  onClick: we
                 }, {
                   default: R(() => [
-                    i("span", {
+                    u("span", {
                       class: I(["sl-w-5 sl-h-5 sl-rounded-full sl-overflow-hidden sl-flex-shrink-0 sl-shadow-sm", a.disabled ? "sl-opacity-60 sl-bg-gray-200" : "sl-bg-gray-100"])
                     }, [
-                      i("img", {
+                      u("img", {
                         src: ne(r.value),
                         alt: le.value.name,
                         class: I(["sl-w-full sl-h-full sl-object-cover", { "sl-grayscale sl-opacity-75": a.disabled }]),
-                        onError: xe
-                      }, null, 42, na)
+                        onError: Ie
+                      }, null, 42, ia)
                     ], 2),
-                    i("span", da, W(ge.value), 1),
-                    a.disabled ? D("", !0) : (y(), O(b(_e), {
+                    u("span", ua, W(he.value), 1),
+                    a.disabled ? D("", !0) : (C(), L(b(We), {
                       key: 0,
                       class: "sl-h-4 sl-w-4 sl-text-gray-400",
                       "aria-hidden": "true"
@@ -487,8 +488,8 @@ const na = ["src", "alt"], da = { class: "sl-font-medium" }, ia = { class: "sl-b
                   _: 1
                 }, 8, ["disabled", "class"])
               ], 512),
-              (y(), O(Me, { to: "body" }, [
-                B(Be, {
+              (C(), L(Be, { to: "body" }, [
+                B(De, {
                   "enter-active-class": "sl-transition sl-duration-100 sl-ease-out",
                   "enter-from-class": "sl-transform sl-scale-95 sl-opacity-0",
                   "enter-to-class": "sl-transform sl-scale-100 sl-opacity-100",
@@ -497,18 +498,18 @@ const na = ["src", "alt"], da = { class: "sl-font-medium" }, ia = { class: "sl-b
                   "leave-to-class": "sl-transform sl-scale-95 sl-opacity-0"
                 }, {
                   default: R(() => [
-                    B(b(ze), {
+                    B(b($e), {
                       ref_key: "dropdownRef",
                       ref: S,
-                      style: De([pe.value, { "z-index": "9999" }]),
+                      style: Ue([be.value, { "z-index": "9999" }]),
                       class: "sl-fixed sl-w-72 sl-rounded-lg sl-bg-white dark:sl-bg-slate-800 sl-text-sm sl-shadow-xl sl-ring-1 sl-ring-black dark:sl-ring-slate-600 sl-ring-opacity-5 focus:sl-outline-none sl-overflow-hidden"
                     }, {
                       default: R(() => [
-                        i("div", ia, [
-                          Ue(i("input", {
+                        u("div", ca, [
+                          Fe(u("input", {
                             ref_key: "searchInputRef",
-                            ref: p,
-                            "onUpdate:modelValue": o[0] || (o[0] = (l) => V.value = l),
+                            ref: y,
+                            "onUpdate:modelValue": o[0] || (o[0] = (t) => V.value = t),
                             type: "text",
                             class: "sl-w-full sl-px-3 sl-py-1.5 sl-text-sm sl-border sl-border-gray-300 dark:sl-border-slate-600 sl-rounded-md sl-bg-white dark:sl-bg-slate-700 sl-text-gray-900 dark:sl-text-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-primary-500 focus:sl-border-primary-500",
                             placeholder: "Search countries...",
@@ -517,45 +518,45 @@ const na = ["src", "alt"], da = { class: "sl-font-medium" }, ia = { class: "sl-b
                             onKeydown: o[2] || (o[2] = Z(() => {
                             }, ["stop"]))
                           }, null, 544), [
-                            [Fe, V.value]
+                            [He, V.value]
                           ])
                         ]),
-                        i("div", ua, [
-                          (y(!0), Y(He, null, Ge(re.value, (l) => (y(), O(b($e), {
-                            key: l.code,
-                            value: l,
+                        u("div", ma, [
+                          (C(!0), Y(Ge, null, Ke(re.value, (t) => (C(), L(b(_e), {
+                            key: t.code,
+                            value: t,
                             as: "template"
                           }, {
                             default: R(({ active: d, selected: g }) => [
-                              i("li", {
+                              u("li", {
                                 class: I([
                                   "sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9",
                                   d ? "sl-bg-primary-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-gray-100"
                                 ]),
                                 "data-testid": "country-option"
                               }, [
-                                i("div", ca, [
-                                  i("span", ma, [
-                                    i("img", {
-                                      src: ne(l.code),
-                                      alt: l.name,
+                                u("div", fa, [
+                                  u("span", va, [
+                                    u("img", {
+                                      src: ne(t.code),
+                                      alt: t.name,
                                       class: "sl-w-full sl-h-full sl-object-cover",
                                       loading: "lazy"
-                                    }, null, 8, fa)
+                                    }, null, 8, ga)
                                   ]),
-                                  i("span", va, W(l.dialCode), 1),
-                                  i("span", {
+                                  u("span", ha, W(t.dialCode), 1),
+                                  u("span", {
                                     class: I(["sl-truncate", g ? "sl-font-medium" : "sl-font-normal"])
-                                  }, W(l.name), 3)
+                                  }, W(t.name), 3)
                                 ]),
-                                g ? (y(), Y("span", {
+                                g ? (C(), Y("span", {
                                   key: 0,
                                   class: I([
                                     "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-4",
                                     d ? "sl-text-white" : "sl-text-primary-600"
                                   ])
                                 }, [
-                                  B(b(We), {
+                                  B(b(Ze), {
                                     class: "sl-h-5 sl-w-5",
                                     "aria-hidden": "true"
                                   })
@@ -564,7 +565,7 @@ const na = ["src", "alt"], da = { class: "sl-font-medium" }, ia = { class: "sl-b
                             ]),
                             _: 2
                           }, 1032, ["value"]))), 128)),
-                          re.value.length === 0 ? (y(), Y("li", ga, " No countries found ")) : D("", !0)
+                          re.value.length === 0 ? (C(), Y("li", pa, " No countries found ")) : D("", !0)
                         ])
                       ]),
                       _: 1
@@ -576,50 +577,50 @@ const na = ["src", "alt"], da = { class: "sl-font-medium" }, ia = { class: "sl-b
             ]),
             _: 1
           }, 8, ["modelValue", "disabled"]),
-          i("input", {
+          u("input", {
             ref_key: "inputRef",
-            ref: C,
+            ref: p,
             id: k.value,
             name: j.value,
             type: "tel",
             value: c.value,
-            placeholder: a.disabled ? "" : he.value,
+            placeholder: a.disabled ? "" : pe.value,
             autocomplete: a.autoComplete,
             inputmode: "tel",
             enterkeyhint: "go",
             disabled: a.disabled,
-            "aria-describedby": we.value,
+            "aria-describedby": xe.value,
             "aria-invalid": H.value,
             class: I(["sl-block sl-flex-1 sl-min-w-0 sl-border-0 sl-bg-transparent sl-py-2 sl-px-3 focus:sl-ring-0 focus:sl-outline-none sm:sl-text-sm sm:sl-leading-6", [
               a.disabled ? "sl-text-gray-400 dark:sl-text-gray-300 sl-cursor-not-allowed sl-placeholder:text-gray-300 dark:sl-placeholder:text-gray-500" : "sl-text-gray-800 dark:sl-text-gray-100 sl-placeholder:text-gray-400 dark:sl-placeholder:text-gray-400"
             ]]),
-            onInput: Ie,
-            onBlur: Se,
-            onFocus: ke,
-            onKeydown: Ke(Z(Ne, ["prevent"]), ["enter"]),
-            onPaste: Ee,
+            onInput: Ee,
+            onBlur: ke,
+            onFocus: Ne,
+            onKeydown: qe(Z(Ve, ["prevent"]), ["enter"]),
+            onPaste: Se,
             "data-testid": "phone-input"
-          }, null, 42, ha),
-          Ce.value ? (y(), Y("div", Ca, [
-            H.value ? (y(), O(b(Ze), {
+          }, null, 42, Ca),
+          Ce.value ? (C(), Y("div", ya, [
+            H.value ? (C(), L(b(Je), {
               key: 0,
               class: "sl-h-5 sl-w-5 sl-text-red-500",
               "aria-hidden": "true",
               "data-testid": "error-icon"
-            })) : te.value ? (y(), O(b(Je), {
+            })) : te.value ? (C(), L(b(Xe), {
               key: 1,
               class: "sl-h-5 sl-w-5 sl-text-green-500",
               "aria-hidden": "true",
               "data-testid": "success-icon"
             })) : D("", !0)
           ])) : D("", !0),
-          Ae(e.$slots, "input-right", {}, void 0, !0)
+          Me(e.$slots, "input-right", {}, void 0, !0)
         ], 2)
       ]),
       _: 3
     }, 8, ["id", "name", "label", "optional", "error-message", "success-message", "is-valid", "is-touched", "show-errors", "show-valid-check", "tertiary-label", "disabled", "disabled-message", "colorful-validation"]));
   }
-}), Pa = /* @__PURE__ */ la(ya, [["__scopeId", "data-v-7a799fd8"]]);
+}), Ra = /* @__PURE__ */ oa(ba, [["__scopeId", "data-v-efbeb626"]]);
 export {
-  Pa as default
+  Ra as default
 };

package/dist/inputs/RichTextInput.d.ts

@@ -1 +1,3 @@
-export {}
+export * from '../src/components/inputs/RichTextInput'
+import StachelockUI from '../src/components/inputs/RichTextInput'
+export default StachelockUI

package/dist/inputs/SelectInput.d.ts

@@ -1 +1,3 @@
-export {}
+export * from '../src/components/inputs/SelectInput'
+import StachelockUI from '../src/components/inputs/SelectInput'
+export default StachelockUI

package/dist/inputs/SelectInput.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../SelectInput.vue_vue_type_script_setup_true_lang-DFfKsmvj.js";
+import { _ as f } from "../SelectInput.vue_vue_type_script_setup_true_lang-D9yg_rkV.js";
 export {
   f as default
 };

package/dist/inputs/SelectTextInput.d.ts

@@ -1 +1,3 @@
-export {}
+export * from '../src/components/inputs/SelectTextInput'
+import StachelockUI from '../src/components/inputs/SelectTextInput'
+export default StachelockUI

package/dist/inputs/SelectTextInput.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../SelectTextInput.vue_vue_type_script_setup_true_lang-C3BGLjY1.js";
+import { _ as f } from "../SelectTextInput.vue_vue_type_script_setup_true_lang-CtFVOrhm.js";
 export {
   f as default
 };

package/dist/inputs/SwitchInput.d.ts

@@ -1 +1,3 @@
-export {}
+export * from '../src/components/inputs/SwitchInput'
+import StachelockUI from '../src/components/inputs/SwitchInput'
+export default StachelockUI

package/dist/inputs/SwitchInputGroup.d.ts

@@ -1 +1,3 @@
-export {}
+export * from '../src/components/inputs/SwitchInputGroup'
+import StachelockUI from '../src/components/inputs/SwitchInputGroup'
+export default StachelockUI