@stachelock/ui 0.6.7 → 0.6.10

package/dist/inputs/AddressInput.js

@@ -1,23 +1,24 @@
-import { defineComponent as me, inject as pe, onMounted as ye, ref as $, reactive as ve, computed as E, watch as be, createElementBlock as K, openBlock as x, createVNode as y, unref as p, withCtx as C, createElementVNode as v, createCommentVNode as R, normalizeClass as I, createBlock as O, Fragment as he, renderList as xe, toDisplayString as N, resolveDynamicComponent as ke, createTextVNode as H } from "vue";
-import { Combobox as we, ComboboxInput as Ce, ComboboxButton as Ie, TransitionRoot as W, ComboboxOptions as Se, ComboboxOption as Ae } from "@headlessui/vue";
-import { LockClosedIcon as ze, MagnifyingGlassIcon as _e, CheckIcon as $e, ChevronDownIcon as Ke, ChevronUpIcon as Ge } from "@heroicons/vue/20/solid";
-import { ClockIcon as Q, ExclamationCircleIcon as Te, CheckCircleIcon as Me } from "@heroicons/vue/24/outline";
-import { useField as Ue } from "vee-validate";
+import { defineComponent as pe, inject as ye, onMounted as ve, ref as $, reactive as be, computed as K, watch as he, createElementBlock as G, openBlock as x, createVNode as y, unref as p, withCtx as C, createElementVNode as v, createCommentVNode as R, normalizeClass as I, createBlock as E, Fragment as xe, renderList as ke, toDisplayString as N, resolveDynamicComponent as we, createTextVNode as H } from "vue";
+import { i as Ce } from "../validation-Dzczp6MS.js";
+import { Combobox as Ie, ComboboxInput as Se, ComboboxButton as Ae, TransitionRoot as W, ComboboxOptions as ze, ComboboxOption as _e } from "@headlessui/vue";
+import { LockClosedIcon as $e, MagnifyingGlassIcon as Ke, CheckIcon as Ge, ChevronDownIcon as Oe, ChevronUpIcon as Te } from "@heroicons/vue/20/solid";
+import { ClockIcon as Q, ExclamationCircleIcon as Me, CheckCircleIcon as Ue } from "@heroicons/vue/24/outline";
+import { useField as Ee } from "vee-validate";
 import { debounce as X } from "lodash-es";
-import Ee from "../forms/FormFieldWrapper.js";
-import G from "./TextInput.js";
-import { g as Oe } from "../id-DafBB_QF.js";
-import { Loader as Pe } from "@googlemaps/js-api-loader";
-import { _ as Le } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+import Pe from "../forms/FormFieldWrapper.js";
+import O from "./TextInput.js";
+import { g as Le } from "../id-DafBB_QF.js";
+import { Loader as Re } from "@googlemaps/js-api-loader";
+import { _ as Ne } from "../_plugin-vue_export-helper-CHgC5LLL.js";
 let k = null, U = null, L = null, T = null, F = !1;
-const M = /* @__PURE__ */ new Map(), Re = 1e3, Ne = 1e3 * 60 * 60 * 24;
-function Fe(e) {
+const M = /* @__PURE__ */ new Map(), Fe = 1e3, Be = 1e3 * 60 * 60 * 24;
+function De(e) {
   k = e, F = !1, T = null, L = null, U = null;
 }
-function De() {
+function Ve() {
   return k !== null && !!k.apiKey;
 }
-async function D() {
+async function B() {
   if (!F) {
     if (T)
       return T;
@@ -27,7 +28,7 @@ async function D() {
       );
     return T = (async () => {
       try {
-        await new Pe({
+        await new Re({
           apiKey: k.apiKey,
           version: k.version || "weekly",
           id: "__stachelockGoogleMapsScriptId",
@@ -47,11 +48,11 @@ function Y(e) {
 }
 function q(e) {
   const a = M.get(e);
-  return a ? Date.now() - a.ts > Ne ? (M.delete(e), null) : a.result : null;
+  return a ? Date.now() - a.ts > Be ? (M.delete(e), null) : a.result : null;
 }
 function ee(e, a) {
   try {
-    if (M.size >= Re) {
+    if (M.size >= Fe) {
       const c = M.keys().next().value;
       c && M.delete(c);
     }
@@ -61,26 +62,26 @@ function ee(e, a) {
 }
 function te(e, a = 15, c = "200x200") {
   if (!k?.apiKey) return "";
-  const n = k.staticMapsApiKey || k.apiKey, i = "https://maps.googleapis.com/maps/api/staticmap", f = new URLSearchParams({
+  const r = k.staticMapsApiKey || k.apiKey, i = "https://maps.googleapis.com/maps/api/staticmap", f = new URLSearchParams({
     center: `${e.lat},${e.lng}`,
     zoom: a.toString(),
     size: c,
-    key: n,
+    key: r,
     markers: `color:red|${e.lat},${e.lng}`
   });
   return `${i}?${f.toString()}`;
 }
-async function Be(e) {
+async function je(e) {
   if (!e?.trim())
     return {
       status: "INVALID_INPUT",
       message: "No placeId provided for geocoding."
     };
-  await D();
+  await B();
   const a = Y({ placeId: e }), c = q(a);
-  return c || new Promise((n) => {
+  return c || new Promise((r) => {
     if (!U) {
-      n({
+      r({
         status: "ERROR",
         message: "Geocoder service not initialized."
       });
@@ -88,48 +89,48 @@ async function Be(e) {
     }
     U.geocode({ placeId: e }, (i, f) => {
       if (f === google.maps.GeocoderStatus.OK && i && i.length > 0) {
-        const d = i[0], r = d.geometry ? {
+        const d = i[0], n = d.geometry ? {
           lat: d.geometry.location.lat(),
           lng: d.geometry.location.lng()
         } : void 0, h = {
           status: "OK",
           message: "Found address",
           address_components: d.address_components || [],
-          location: r,
+          location: n,
           formatted_address: d.formatted_address || "",
-          thumbnailUrl: r ? te(r) : void 0
+          thumbnailUrl: n ? te(n) : void 0
         };
-        ee(a, h), n(h);
+        ee(a, h), r(h);
       } else
-        n({
+        r({
           status: f.toString(),
           message: `Unable to geocode place: ${f}`
         });
     });
   });
 }
-function Ve(e) {
+function Ze(e) {
   const a = J(e);
   if (a.length < 10) return !1;
-  const c = /\d/.test(a), n = a.includes(","), i = /\b([A-Z]{2})\b/i.test(e), f = /\b\d{5}(?:-\d{4})?\b/.test(a);
-  return (n || i || f) && c;
+  const c = /\d/.test(a), r = a.includes(","), i = /\b([A-Z]{2})\b/i.test(e), f = /\b\d{5}(?:-\d{4})?\b/.test(a);
+  return (r || i || f) && c;
 }
-async function je(e) {
+async function He(e) {
   if (!e?.trim())
     return {
       status: "INVALID_INPUT",
       message: "No address provided for geocoding."
     };
-  if (!Ve(e))
+  if (!Ze(e))
     return {
       status: "INVALID_INPUT",
       message: "Insufficient address information for geocoding."
     };
-  await D();
+  await B();
   const a = Y(e), c = q(a);
-  return c || new Promise((n) => {
+  return c || new Promise((r) => {
     if (!U) {
-      n({
+      r({
         status: "ERROR",
         message: "Geocoder service not initialized."
       });
@@ -137,54 +138,54 @@ async function je(e) {
     }
     U.geocode({ address: e }, (i, f) => {
       if (f === google.maps.GeocoderStatus.OK && i && i.length > 0) {
-        const d = i[0], r = d.geometry ? {
+        const d = i[0], n = d.geometry ? {
           lat: d.geometry.location.lat(),
           lng: d.geometry.location.lng()
         } : void 0, h = {
           status: "OK",
           message: "Found address",
           address_components: d.address_components || [],
-          location: r,
+          location: n,
           formatted_address: d.formatted_address || "",
-          thumbnailUrl: r ? te(r) : void 0
+          thumbnailUrl: n ? te(n) : void 0
         };
-        ee(a, h), n(h);
+        ee(a, h), r(h);
       } else
-        n({
+        r({
           status: f.toString(),
           message: `Unable to geocode address: ${f}`
         });
     });
   });
 }
-async function Ze(e, a) {
+async function We(e, a) {
   if (!e?.trim())
     return [];
-  if (await D(), !L)
+  if (await B(), !L)
     return console.warn("[Geocoding] Places library not initialized"), [];
   try {
-    const { AutocompleteSuggestion: c } = L, n = {
+    const { AutocompleteSuggestion: c } = L, r = {
       input: e,
       ...a?.includedPrimaryTypes && { includedPrimaryTypes: a.includedPrimaryTypes },
       ...a?.includedRegionCodes && { includedRegionCodes: a.includedRegionCodes }
-    }, { suggestions: i } = await c.fetchAutocompleteSuggestions(n);
+    }, { suggestions: i } = await c.fetchAutocompleteSuggestions(r);
     return i.filter(
       (d) => d.placePrediction !== null
     ).map((d) => {
-      const r = d.placePrediction;
+      const n = d.placePrediction;
       return {
-        placeId: r.placeId,
-        description: r.text.toString(),
-        mainText: r.mainText?.toString() || r.text.toString(),
-        secondaryText: r.secondaryText?.toString() || "",
-        types: r.types || []
+        placeId: n.placeId,
+        description: n.text.toString(),
+        mainText: n.mainText?.toString() || n.text.toString(),
+        secondaryText: n.secondaryText?.toString() || "",
+        types: n.types || []
       };
     });
   } catch (c) {
     return console.error("[Geocoding] Error fetching autocomplete suggestions:", c), [];
   }
 }
-function He(e) {
+function Qe(e) {
   const a = {
     street: "",
     city: "",
@@ -194,14 +195,14 @@ function He(e) {
   };
   if (!e?.address_components)
     return a;
-  let c = "", n = "", i = "", f = "", d = "", r = "", h = "", S = "", A = "", P = "", b = "", z = "";
+  let c = "", r = "", i = "", f = "", d = "", n = "", h = "", S = "", A = "", P = "", b = "", z = "";
   for (const g of e.address_components) {
     const u = g.types;
-    u.includes("street_number") ? c = g.long_name : u.includes("route") ? n = g.long_name : u.includes("subpremise") ? i = g.long_name : u.includes("premise") ? f = g.long_name : u.includes("locality") ? d = g.long_name : u.includes("sublocality") || u.includes("sublocality_level_1") ? u.includes("sublocality_level_1") ? h = g.long_name : r = g.long_name : u.includes("administrative_area_level_2") ? S = g.long_name : u.includes("administrative_area_level_3") ? A = g.long_name : u.includes("postal_town") ? P = g.long_name : u.includes("administrative_area_level_1") ? a.state = g.short_name : u.includes("postal_code") ? b = g.long_name : u.includes("postal_code_prefix") ? z = g.long_name : u.includes("country") && (a.country = g.short_name);
+    u.includes("street_number") ? c = g.long_name : u.includes("route") ? r = g.long_name : u.includes("subpremise") ? i = g.long_name : u.includes("premise") ? f = g.long_name : u.includes("locality") ? d = g.long_name : u.includes("sublocality") || u.includes("sublocality_level_1") ? u.includes("sublocality_level_1") ? h = g.long_name : n = g.long_name : u.includes("administrative_area_level_2") ? S = g.long_name : u.includes("administrative_area_level_3") ? A = g.long_name : u.includes("postal_town") ? P = g.long_name : u.includes("administrative_area_level_1") ? a.state = g.short_name : u.includes("postal_code") ? b = g.long_name : u.includes("postal_code_prefix") ? z = g.long_name : u.includes("country") && (a.country = g.short_name);
   }
-  return c && n ? a.street = `${c} ${n}` : n ? a.street = n : f && (a.street = f), i && a.street && (a.street = `${a.street}, ${i}`), a.city = d || P || h || r || A || S || "", a.zipcode = b || z || "", a;
+  return c && r ? a.street = `${c} ${r}` : r ? a.street = r : f && (a.street = f), i && a.street && (a.street = `${a.street}, ${i}`), a.city = d || P || h || n || A || S || "", a.zipcode = b || z || "", a;
 }
-function We(e) {
+function Xe(e) {
   return [
     e.street,
     e.city,
@@ -209,10 +210,10 @@ function We(e) {
     e.country
   ].filter(Boolean).join(", ");
 }
-const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = { class: "sl-relative" }, Ye = { class: "sl-flex sl-flex-col" }, qe = {
+const Je = { class: "sl-address-input" }, Ye = { class: "sl-space-y-3" }, qe = { class: "sl-relative" }, et = { class: "sl-flex sl-flex-col" }, tt = {
   key: 0,
   class: "sl-flex sl-items-center sl-justify-between"
-}, et = { class: "sl-flex sl-items-center sl-gap-2" }, tt = { class: "sl-grid sl-grid-cols-1 sm:sl-grid-cols-2 sl-gap-3 sl-p-3 sl-bg-gray-50 dark:sl-bg-slate-800/50 sl-rounded-lg sl-border sl-border-gray-200 dark:sl-border-slate-700" }, st = { class: "sm:sl-col-span-2" }, lt = /* @__PURE__ */ me({
+}, st = { class: "sl-flex sl-items-center sl-gap-2" }, lt = { class: "sl-grid sl-grid-cols-1 sm:sl-grid-cols-2 sl-gap-3 sl-p-3 sl-bg-gray-50 dark:sl-bg-slate-800/50 sl-rounded-lg sl-border sl-border-gray-200 dark:sl-border-slate-700" }, at = { class: "sm:sl-col-span-2" }, ot = /* @__PURE__ */ pe({
   __name: "AddressInput",
   props: {
     name: {},
@@ -225,33 +226,34 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
     allowManualEntry: { type: Boolean, default: !0 },
     successMessage: { default: "" },
     tertiaryLabel: { default: "" },
-    validateOnMount: { type: Boolean, default: !1 }
+    validateOnMount: { type: Boolean, default: !1 },
+    optional: { type: Boolean, default: void 0 }
   },
   emits: ["update:modelValue", "blur", "focus"],
   setup(e, { expose: a, emit: c }) {
-    const n = e, i = c, f = Oe(n.name || "address-input"), d = pe("googleMaps", void 0);
-    ye(() => {
-      d?.apiKey && !De() && Fe({
+    const r = e, i = c, f = Le(r.name || "address-input"), d = ye("googleMaps", void 0);
+    ve(() => {
+      d?.apiKey && !Ve() && De({
         apiKey: d.apiKey,
         version: d.version,
         libraries: d.libraries
       });
     });
-    const { value: r, errorMessage: h, meta: S, handleChange: A, setTouched: P } = Ue(
-      () => n.name,
-      n.rules,
+    const { value: n, errorMessage: h, meta: S, handleChange: A, setTouched: P } = Ee(
+      () => r.name,
+      r.rules,
       {
-        validateOnMount: n.validateOnMount,
-        initialValue: n.modelValue
+        validateOnMount: r.validateOnMount,
+        initialValue: r.modelValue
       }
-    ), b = $([]), z = $(null), g = $(""), u = $(!1), B = $(!1), m = $("unverified"), s = ve({
+    ), b = $([]), z = $(null), g = $(""), u = $(!1), D = $(!1), m = $("unverified"), s = be({
       street: "",
       suite: "",
       city: "",
       state: "",
       zipcode: "",
       country: ""
-    }), V = E(() => !!(r.value?.formattedAddress || r.value?.street)), se = E(() => n.showSuggestionCount && b.value.length > 0 ? `${b.value.length} suggestions` : n.tertiaryLabel), j = E(() => {
+    }), V = K(() => !!(n.value?.formattedAddress || n.value?.street)), se = K(() => r.optional !== void 0 ? r.optional : Ce(r.rules)), le = K(() => r.showSuggestionCount && b.value.length > 0 ? `${b.value.length} suggestions` : r.tertiaryLabel), j = K(() => {
       switch (m.value) {
         case "verified":
           return "sl-text-green-600 dark:sl-text-green-400";
@@ -262,7 +264,7 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
         default:
           return "sl-text-gray-500 dark:sl-text-slate-400";
       }
-    }), le = E(() => {
+    }), ae = K(() => {
       switch (m.value) {
         case "verified":
           return "Verified";
@@ -273,47 +275,47 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
         default:
           return "Unverified";
       }
-    }), ae = E(() => {
+    }), oe = K(() => {
       switch (m.value) {
         case "verified":
-          return Me;
+          return Ue;
         case "error":
-          return Te;
+          return Me;
         case "pending":
           return Q;
         default:
           return Q;
       }
-    }), oe = X(async (l) => {
+    }), re = X(async (l) => {
       if (!l || l.length < 3) {
         b.value = [];
         return;
       }
-      B.value = !0;
+      D.value = !0;
       try {
-        const t = await Ze(l);
+        const t = await We(l);
         b.value = t;
       } catch (t) {
         console.error("[AddressInput] Error fetching suggestions:", t), b.value = [];
       } finally {
-        B.value = !1;
+        D.value = !1;
       }
     }, 300);
-    function re(l) {
+    function ne(l) {
       const t = l.target;
-      g.value = t.value, oe(t.value);
+      g.value = t.value, re(t.value);
     }
-    function ne(l) {
-      return l ? l.description : r.value?.formattedAddress ? r.value.formattedAddress : "";
+    function ie(l) {
+      return l ? l.description : n.value?.formattedAddress ? n.value.formattedAddress : "";
     }
-    async function ie(l) {
+    async function de(l) {
       if (l) {
         m.value = "pending", b.value = [];
         try {
-          const t = await Be(l.placeId);
+          const t = await je(l.placeId);
           if (t.status === "OK") {
             m.value = "verified";
-            const o = He(t);
+            const o = Qe(t);
             s.street = o.street, s.city = o.city, s.state = o.state, s.zipcode = o.zipcode, s.country = o.country;
             const w = {
               formattedAddress: t.formatted_address,
@@ -326,7 +328,7 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
               geocode: t,
               placeId: l.placeId
             };
-            r.value = w, A(w), i("update:modelValue", w), u.value = !0;
+            n.value = w, A(w), i("update:modelValue", w), u.value = !0;
           } else
             m.value = "error", console.warn("[AddressInput] Geocoding failed:", t.message);
         } catch (t) {
@@ -334,15 +336,15 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
         }
       }
     }
-    const de = ["street", "city", "state", "zipcode", "country"], ce = X(async () => {
-      const l = We(s);
+    const ce = ["street", "city", "state", "zipcode", "country"], ue = X(async () => {
+      const l = Xe(s);
       if (!l || l.length < 10) {
         m.value = "unverified";
         return;
       }
       m.value = "pending";
       try {
-        const t = await je(l);
+        const t = await He(l);
         if (t.status === "OK") {
           m.value = "verified";
           const o = {
@@ -357,7 +359,7 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
             placeId: void 0
             // Clear placeId since we re-geocoded
           };
-          r.value = o, A(o), i("update:modelValue", o);
+          n.value = o, A(o), i("update:modelValue", o);
         } else
           m.value = "unverified";
       } catch (t) {
@@ -366,7 +368,7 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
     }, 600);
     function _(l) {
       const t = {
-        ...r.value,
+        ...n.value,
         street: s.street,
         suite: s.suite,
         city: s.city,
@@ -374,74 +376,75 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
         zipcode: s.zipcode,
         country: s.country
       };
-      de.includes(l) && (m.value = "unverified", t.geocode = void 0, ce()), r.value = t, A(t), i("update:modelValue", t);
+      ce.includes(l) && (m.value = "unverified", t.geocode = void 0, ue()), n.value = t, A(t), i("update:modelValue", t);
     }
-    function ue(l) {
+    function fe(l) {
       i("focus", l);
     }
-    function fe(l) {
+    function ge(l) {
       P(!0), i("blur", l);
     }
-    be(
-      () => n.modelValue,
+    he(
+      () => r.modelValue,
       (l) => {
-        l && (l.geocode?.status === "OK" ? m.value = "verified" : l.geocode?.status === "ERROR" && (m.value = "error"), l !== r.value && (r.value = l, l.street !== void 0 && (s.street = l.street), l.suite !== void 0 && (s.suite = l.suite), l.city !== void 0 && (s.city = l.city), l.state !== void 0 && (s.state = l.state), l.zipcode !== void 0 && (s.zipcode = l.zipcode), l.country !== void 0 && (s.country = l.country)));
+        l && (l.geocode?.status === "OK" ? m.value = "verified" : l.geocode?.status === "ERROR" && (m.value = "error"), l !== n.value && (n.value = l, l.street !== void 0 && (s.street = l.street), l.suite !== void 0 && (s.suite = l.suite), l.city !== void 0 && (s.city = l.city), l.state !== void 0 && (s.state = l.state), l.zipcode !== void 0 && (s.zipcode = l.zipcode), l.country !== void 0 && (s.country = l.country)));
       },
       { immediate: !0, deep: !0 }
     );
-    function ge() {
-      r.value = void 0, z.value = null, g.value = "", b.value = [], u.value = !1, m.value = "unverified", s.street = "", s.suite = "", s.city = "", s.state = "", s.zipcode = "", s.country = "";
+    function me() {
+      n.value = void 0, z.value = null, g.value = "", b.value = [], u.value = !1, m.value = "unverified", s.street = "", s.suite = "", s.city = "", s.state = "", s.zipcode = "", s.country = "";
     }
     return a({
-      resetInput: ge,
+      resetInput: me,
       geocodeStatus: m,
       meta: S,
       errorMessage: h
-    }), (l, t) => (x(), K("div", Qe, [
-      y(Ee, {
+    }), (l, t) => (x(), G("div", Je, [
+      y(Pe, {
         id: p(f),
         name: e.name,
         label: e.label,
-        "tertiary-label": se.value,
+        "tertiary-label": le.value,
         "error-message": p(h),
         "success-message": e.successMessage,
         "is-valid": p(S).valid,
         "is-touched": p(S).touched,
-        disabled: e.disabled
+        disabled: e.disabled,
+        optional: se.value
       }, {
         default: C(() => [
-          v("div", Xe, [
-            y(p(we), {
+          v("div", Ye, [
+            y(p(Ie), {
               modelValue: z.value,
               "onUpdate:modelValue": [
                 t[0] || (t[0] = (o) => z.value = o),
-                ie
+                de
               ],
               disabled: e.disabled,
               nullable: ""
             }, {
               default: C(() => [
-                v("div", Je, [
-                  y(p(Ce), {
+                v("div", qe, [
+                  y(p(Se), {
                     id: p(f),
-                    "display-value": ne,
+                    "display-value": ie,
                     placeholder: e.placeholder || "Search for an address...",
                     disabled: e.disabled,
                     class: I([
-                      "sl-block sl-w-full sl-rounded-lg sl-border sl-py-2.5 sl-pl-3 sl-pr-10 sl-text-sm focus:sl-outline-none",
-                      e.disabled ? "sl-border-gray-200 dark:sl-border-slate-700 sl-bg-gray-50 dark:sl-bg-slate-800 sl-text-gray-500 dark:sl-text-slate-400 sl-cursor-not-allowed" : "sl-border-gray-300 dark:sl-border-slate-600 sl-bg-white dark:sl-bg-slate-900 sl-text-gray-900 dark:sl-text-slate-100 placeholder:sl-text-gray-400 dark:placeholder:sl-text-slate-500 focus:sl-border-stachelock-500 focus:sl-ring-2 focus:sl-ring-stachelock-500"
+                      "sl-block sl-w-full sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset sl-py-1.5 sl-pl-3 sl-pr-10 sl-text-sm focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-inset focus:sl-ring-stachelock-600",
+                      e.disabled ? "sl-ring-gray-200 dark:sl-ring-slate-700 sl-bg-gray-50 dark:sl-bg-slate-800 sl-text-gray-500 dark:sl-text-slate-400 sl-cursor-not-allowed" : "sl-ring-gray-300 dark:sl-ring-slate-600 sl-bg-white dark:sl-bg-slate-800 sl-text-gray-900 dark:sl-text-slate-100 placeholder:sl-text-gray-400 dark:placeholder:sl-text-slate-500"
                     ]),
-                    onChange: re,
-                    onFocus: ue,
-                    onBlur: fe
+                    onChange: ne,
+                    onFocus: fe,
+                    onBlur: ge
                   }, null, 8, ["id", "placeholder", "disabled", "class"]),
-                  y(p(Ie), { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2" }, {
+                  y(p(Ae), { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2" }, {
                     default: C(() => [
-                      e.disabled ? (x(), O(p(ze), {
+                      e.disabled ? (x(), E(p($e), {
                         key: 0,
                         class: "sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-500",
                         "aria-hidden": "true"
-                      })) : (x(), O(p(_e), {
+                      })) : (x(), E(p(Ke), {
                         key: 1,
                         class: "sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-400",
                         "aria-hidden": "true"
@@ -455,12 +458,12 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
                     "leave-to": "sl-opacity-0"
                   }, {
                     default: C(() => [
-                      b.value.length > 0 ? (x(), O(p(Se), {
+                      b.value.length > 0 ? (x(), E(p(ze), {
                         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 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"
                       }, {
                         default: C(() => [
-                          (x(!0), K(he, null, xe(b.value, (o) => (x(), O(p(Ae), {
+                          (x(!0), G(xe, null, ke(b.value, (o) => (x(), E(p(_e), {
                             key: o.placeId,
                             value: o,
                             as: "template"
@@ -472,7 +475,7 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
                                   w ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900 dark:sl-text-slate-200"
                                 ])
                               }, [
-                                v("div", Ye, [
+                                v("div", et, [
                                   v("span", {
                                     class: I(["sl-block sl-truncate", Z ? "sl-font-medium" : "sl-font-normal"])
                                   }, N(o.mainText), 3),
@@ -480,14 +483,14 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
                                     class: I(["sl-text-xs", w ? "sl-text-stachelock-100" : "sl-text-gray-500 dark:sl-text-slate-400"])
                                   }, N(o.secondaryText), 3)
                                 ]),
-                                Z ? (x(), K("span", {
+                                Z ? (x(), G("span", {
                                   key: 0,
                                   class: I([
                                     "sl-absolute sl-inset-y-0 sl-left-0 sl-flex sl-items-center sl-pl-3",
                                     w ? "sl-text-white" : "sl-text-stachelock-600 dark:sl-text-stachelock-400"
                                   ])
                                 }, [
-                                  y(p($e), {
+                                  y(p(Ge), {
                                     class: "sl-h-5 sl-w-5",
                                     "aria-hidden": "true"
                                   })
@@ -506,31 +509,31 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
               ]),
               _: 1
             }, 8, ["modelValue", "disabled"]),
-            V.value && !e.disabled ? (x(), K("div", qe, [
-              v("div", et, [
+            V.value && !e.disabled ? (x(), G("div", tt, [
+              v("div", st, [
                 v("span", {
                   class: I(["sl-text-xs sl-uppercase sl-font-medium", j.value])
-                }, N(le.value), 3),
-                (x(), O(ke(ae.value), {
+                }, N(ae.value), 3),
+                (x(), E(we(oe.value), {
                   class: I(["sl-h-4 sl-w-4", j.value])
                 }, null, 8, ["class"]))
               ]),
-              u.value ? (x(), K("button", {
+              u.value ? (x(), G("button", {
                 key: 1,
                 type: "button",
                 onClick: t[2] || (t[2] = (o) => u.value = !1),
                 class: "sl-text-xs sl-text-gray-500 dark:sl-text-slate-400 hover:sl-underline sl-flex sl-items-center sl-gap-1"
               }, [
                 t[10] || (t[10] = H(" Collapse ", -1)),
-                y(p(Ge), { class: "sl-h-3 sl-w-3" })
-              ])) : (x(), K("button", {
+                y(p(Te), { class: "sl-h-3 sl-w-3" })
+              ])) : (x(), G("button", {
                 key: 0,
                 type: "button",
                 onClick: t[1] || (t[1] = (o) => u.value = !0),
                 class: "sl-text-xs sl-text-stachelock-600 dark:sl-text-stachelock-400 hover:sl-underline sl-flex sl-items-center sl-gap-1"
               }, [
                 t[9] || (t[9] = H(" Edit address ", -1)),
-                y(p(Ke), { class: "sl-h-3 sl-w-3" })
+                y(p(Oe), { class: "sl-h-3 sl-w-3" })
               ]))
             ])) : R("", !0),
             y(p(W), {
@@ -543,9 +546,9 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
               "leave-to": "sl-opacity-0 sl-transform sl--translate-y-2"
             }, {
               default: C(() => [
-                v("div", tt, [
-                  v("div", st, [
-                    y(G, {
+                v("div", lt, [
+                  v("div", at, [
+                    y(O, {
                       name: `${e.name}_street`,
                       label: "Street Address",
                       value: s.street,
@@ -558,7 +561,7 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
                     }, null, 8, ["name", "value", "disabled"])
                   ]),
                   v("div", null, [
-                    y(G, {
+                    y(O, {
                       name: `${e.name}_suite`,
                       label: "Suite / Apt",
                       value: s.suite,
@@ -572,7 +575,7 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
                     }, null, 8, ["name", "value", "disabled"])
                   ]),
                   v("div", null, [
-                    y(G, {
+                    y(O, {
                       name: `${e.name}_city`,
                       label: "City",
                       value: s.city,
@@ -585,7 +588,7 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
                     }, null, 8, ["name", "value", "disabled"])
                   ]),
                   v("div", null, [
-                    y(G, {
+                    y(O, {
                       name: `${e.name}_state`,
                       label: "State",
                       value: s.state,
@@ -598,7 +601,7 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
                     }, null, 8, ["name", "value", "disabled"])
                   ]),
                   v("div", null, [
-                    y(G, {
+                    y(O, {
                       name: `${e.name}_zipcode`,
                       label: "ZIP Code",
                       value: s.zipcode,
@@ -611,7 +614,7 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
                     }, null, 8, ["name", "value", "disabled"])
                   ]),
                   v("div", null, [
-                    y(G, {
+                    y(O, {
                       name: `${e.name}_country`,
                       label: "Country",
                       value: s.country,
@@ -630,10 +633,10 @@ const Qe = { class: "sl-address-input" }, Xe = { class: "sl-space-y-3" }, Je = {
           ])
         ]),
         _: 1
-      }, 8, ["id", "name", "label", "tertiary-label", "error-message", "success-message", "is-valid", "is-touched", "disabled"])
+      }, 8, ["id", "name", "label", "tertiary-label", "error-message", "success-message", "is-valid", "is-touched", "disabled", "optional"])
     ]));
   }
-}), pt = /* @__PURE__ */ Le(lt, [["__scopeId", "data-v-d65320d7"]]);
+}), bt = /* @__PURE__ */ Ne(ot, [["__scopeId", "data-v-b3950b26"]]);
 export {
-  pt as default
+  bt as default
 };