@ticketmaster/tm-global-address 0.3.0 → 0.5.0

package/dist/components/AddressForm/AddressForm.js

@@ -1,27 +1,33 @@
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { useState as S, useRef as X, useEffect as Z, useCallback as w } from "react";
-import n from "styled-components";
-import { tokens as e, atDesktop as V } from "../../styles/tokens.js";
-import { getCountryConfig as q, getSubdivisions as ee, COUNTRY_OPTIONS as E } from "../../data/countryData.js";
-const re = n.form`
+import { useState as z, useRef as V, useEffect as ee, useCallback as T } from "react";
+import c from "styled-components";
+import { tokens as e, atDesktop as re } from "../../styles/tokens.js";
+import { getCountryConfig as q, getSubdivisions as oe, COUNTRY_OPTIONS as L } from "../../data/countryData.js";
+import { FIELD_CONSTRAINTS as C } from "../../validation/constants.js";
+import { validateTextField as S } from "../../validation/validateTextField.js";
+import { validatePostalCode as te } from "../../validation/validatePostalCode.js";
+import { validateState as ae } from "../../validation/validateState.js";
+import { validatePhoneNumber as de } from "../../validation/validatePhoneNumber.js";
+import { validateForm as se } from "../../validation/validateForm.js";
+const ne = c.form`
   display: flex;
   flex-direction: column;
   gap: ${e.space4};
-`, oe = n.h2`
+`, le = c.h2`
   margin: 0 0 ${e.space2};
   font-size: ${e.fontSizeHeading};
   font-weight: ${e.fontWeightBold};
   color: ${e.colorTextPrimary};
-`, W = n.div`
+`, M = c.div`
   display: grid;
   grid-template-columns: 1fr;
   gap: ${e.space4};
-  ${V("grid-template-columns: 1fr 1fr;")}
-`, h = n.div`
+  ${re("grid-template-columns: 1fr 1fr;")}
+`, p = c.div`
   display: flex;
   flex-direction: column;
   gap: ${e.space1};
-`, g = n.label`
+`, $ = c.label`
   font-size: ${e.fontSizeLabel};
   font-weight: ${e.fontWeightNormal};
   color: ${e.colorTextPrimary};
@@ -33,7 +39,7 @@ const re = n.form`
       aria-hidden: true;
     }
   `}
-`, x = n.input`
+`, N = c.input`
   width: 100%;
   padding: ${e.space2} ${e.space3};
   font-size: ${e.fontSizeInput};
@@ -66,7 +72,7 @@ const re = n.form`
     border-color: ${e.colorBorderInputDisabled};
     cursor: not-allowed;
   }
-`, D = n.select`
+`, O = c.select`
   width: 100%;
   padding: ${e.space2} ${e.space3};
   font-size: ${e.fontSizeInput};
@@ -92,18 +98,18 @@ const re = n.form`
     border-color: ${e.colorBorderInputDisabled};
     cursor: not-allowed;
   }
-`, N = n.p`
+`, g = c.p`
   margin: 0;
   font-size: ${e.fontSizeError};
   color: ${e.colorTextError};
   display: flex;
   align-items: center;
   gap: ${e.space1};
-`, te = n.div`
+`, ie = c.div`
   display: flex;
   align-items: center;
   gap: ${e.space2};
-`, ae = n.input`
+`, ce = c.input`
   width: 18px;
   height: 18px;
   cursor: pointer;
@@ -112,17 +118,17 @@ const re = n.form`
   &:disabled {
     cursor: not-allowed;
   }
-`, de = n.label`
+`, ue = c.label`
   font-size: ${e.fontSizeBody};
   color: ${e.colorTextPrimary};
   cursor: pointer;
-`, se = n.div`
+`, pe = c.div`
   display: flex;
   justify-content: flex-end;
   gap: ${e.space3};
   flex-wrap: wrap;
   margin-block-start: ${e.space2};
-`, ne = n.button`
+`, me = c.button`
   appearance: none;
   padding: ${e.space2} ${e.space6};
   font-size: ${e.fontSizeBody};
@@ -148,7 +154,7 @@ const re = n.form`
     opacity: 0.6;
     cursor: not-allowed;
   }
-`, le = n.button`
+`, fe = c.button`
   appearance: none;
   padding: ${e.space2} ${e.space6};
   font-size: ${e.fontSizeBody};
@@ -177,10 +183,10 @@ const re = n.form`
     opacity: 0.6;
     cursor: not-allowed;
   }
-`, ie = n.div`
+`, he = c.div`
   display: flex;
   gap: ${e.space2};
-`, ce = n.div`
+`, be = c.div`
   display: flex;
   align-items: center;
   gap: ${e.space1};
@@ -192,14 +198,14 @@ const re = n.form`
   color: ${e.colorTextPrimary};
   white-space: nowrap;
   flex-shrink: 0;
-`, ue = n.div`
+`, ye = c.div`
   padding: ${e.space3} ${e.space4};
   background: ${e.colorFeedbackErrorSurface};
   border: ${e.borderWidthInput} solid ${e.colorFeedbackErrorBorder};
   border-radius: ${e.borderRadiusInput};
   font-size: ${e.fontSizeBody};
   color: ${e.colorTextError};
-`, pe = n.span`
+`, $e = c.span`
   display: inline-block;
   width: 16px;
   height: 16px;
@@ -209,17 +215,18 @@ const re = n.form`
   animation: spin 0.8s linear infinite;
 
   @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+      transform: rotate(360deg);
+    }
   }
 `;
-function m(r) {
-  return !r || r.trim() === "";
-}
-function he(r, v) {
-  const c = {};
-  return m(r.firstName) && (c.firstName = "Please enter your first name"), m(r.lastName) && (c.lastName = "Please enter your last name"), m(r.country) && (c.country = "Please select your country"), m(r.address1) && (c.address1 = "Please enter your address"), m(r.city) && (c.city = "Please enter your city"), m(r.postal) && (c.postal = "Please enter your postal code"), q(r.country).stateRequired && m(r.state) && (c.state = "Please select your state / province"), v && !m(r.phoneNumber) && r.phoneNumber.trim().length < 5 && (c.phoneNumber = "Please enter a valid phone number"), c;
+function ge(r) {
+  const m = {};
+  for (const x of r)
+    m[x.field] || (m[x.field] = x.message);
+  return m;
 }
-function me(r) {
+function ve(r) {
   return {
     firstName: (r == null ? void 0 : r.firstName) ?? "",
     lastName: (r == null ? void 0 : r.lastName) ?? "",
@@ -233,83 +240,63 @@ function me(r) {
     defaultAddress: (r == null ? void 0 : r.defaultAddress) ?? !1
   };
 }
-const ve = ({
+const Te = ({
   mode: r,
-  initialValues: v,
-  countryWhitelist: c,
-  showPhoneNumber: I = !1,
+  initialValues: m,
+  countryWhitelist: x,
+  showPhoneNumber: F = !1,
   screenReaderErrorPrefix: f,
-  addressLabel: z,
+  addressLabel: A,
   isLoading: P = !1,
-  disabled: O = !1,
-  serverErrors: k = [],
-  onCancel: j,
-  onSubmit: _
+  disabled: j = !1,
+  serverErrors: E = [],
+  onCancel: G,
+  onSubmit: H
 }) => {
-  var R;
-  const [d, T] = S(() => me(v)), [M, F] = S({}), [L, A] = S(""), G = X(null), b = q(d.country), H = ee(d.country), K = b.stateCodes.length > 0 || b.stateRequired, U = c ? E.filter((t) => c.includes(t.code)) : E;
-  Z(() => {
-    if (k.length === 0) return;
+  var _;
+  const [d, D] = z(() => ve(m)), [K, I] = z({}), [W, R] = z(""), U = V(null), h = q(d.country), Y = oe(d.country), J = h.stateCodes.length > 0 || h.stateRequired, Q = x ? L.filter((t) => x.includes(t.code)) : L;
+  ee(() => {
+    if (E.length === 0) return;
     const t = {};
-    let l = "";
-    k.forEach((i) => {
-      i.field ? t[i.field] = i.message : l = i.message;
-    }), F((i) => ({ ...i, ...t })), A(l);
-  }, [k]);
-  const Y = w(
-    (t) => {
-      const l = t.target.value;
-      T((i) => ({ ...i, country: l, state: "" })), F((i) => {
-        const { country: p, state: C, ...B } = i;
-        return B;
-      });
-    },
-    []
-  ), y = w(
-    (t) => (l) => {
-      const i = l.target.type === "checkbox" ? l.target.checked : l.target.value;
-      T((p) => ({ ...p, [t]: i })), F((p) => {
-        const { [t]: C, ...B } = p;
+    let n = "";
+    E.forEach((i) => {
+      i.field ? t[i.field] = i.message : n = i.message;
+    }), I((i) => ({ ...i, ...t })), R(n);
+  }, [E]);
+  const X = T((t) => {
+    const n = t.target.value;
+    D((i) => ({ ...i, country: n, state: "" })), I((i) => {
+      const { country: l, state: v, ...B } = i;
+      return B;
+    });
+  }, []), b = T(
+    (t) => (n) => {
+      const i = n.target.type === "checkbox" ? n.target.checked : n.target.value;
+      D((l) => ({ ...l, [t]: i })), I((l) => {
+        const { [t]: v, ...B } = l;
         return B;
       });
     },
     []
-  ), $ = w(
+  ), y = T(
     (t) => () => {
-      const l = d[t];
-      if (typeof l == "string") {
-        const i = q(d.country);
-        let p = "";
-        (t === "firstName" || t === "lastName" || t === "country" || t === "address1" || t === "city" || t === "postal") && m(l) ? p = `Please enter your ${{
-          firstName: "first name",
-          lastName: "last name",
-          country: "country",
-          address1: "address",
-          city: "city",
-          postal: "postal code"
-        }[t] ?? t}` : t === "state" && i.stateRequired && m(l) && (p = "Please select your state / province"), F((B) => {
-          if (p) return { ...B, [t]: p };
-          const { [t]: fe, ...Q } = B;
-          return Q;
-        });
-      }
+      const n = d[t];
+      if (typeof n != "string") return;
+      const i = q(d.country);
+      let l = null;
+      t === "firstName" ? l = S("firstName", n, C.firstName) : t === "lastName" ? l = S("lastName", n, C.lastName) : t === "address1" ? l = S("address1", n, C.address1) : t === "address2" && n !== "" ? l = S("address2", n, C.address2) : t === "city" ? l = S("city", n, C.city) : t === "postal" && n !== "" ? l = te(n, C.postal, i) : t === "state" ? l = ae(n || void 0, i) : t === "phoneNumber" && n !== "" && F ? l = de(n, i) : t === "country" && n === "" && (l = { message: "Please select your country" }), I((v) => {
+        if (l) return { ...v, [t]: l.message };
+        const { [t]: B, ...k } = v;
+        return k;
+      });
     },
-    [d]
-  ), J = (t) => {
-    t.preventDefault(), A("");
-    const l = he(d, I);
-    if (Object.keys(l).length > 0) {
-      F(l);
-      const p = Object.keys(l)[0];
-      if (p) {
-        const C = document.getElementById(`field-${p}`);
-        C && (C.focus(), G.current = C);
-      }
-      return;
-    }
-    const i = {
+    [d, F]
+  ), Z = (t) => {
+    var v;
+    t.preventDefault(), R("");
+    const n = {
       mode: r,
-      ...r === "edit" && (v == null ? void 0 : v.addressId) !== void 0 ? { addressId: v.addressId } : {},
+      ...r === "edit" && (m == null ? void 0 : m.addressId) !== void 0 ? { addressId: m.addressId } : {},
       defaultAddress: d.defaultAddress,
       firstName: d.firstName.trim(),
       lastName: d.lastName.trim(),
@@ -319,29 +306,39 @@ const ve = ({
       postal: d.postal.trim(),
       country: d.country,
       ...d.state ? { state: d.state } : {},
-      ...I && d.phoneNumber ? { phoneNumber: d.phoneNumber.trim() } : {}
-    };
-    _(i);
-  }, u = O || P, o = (t) => M[t] ?? "";
-  return /* @__PURE__ */ s(re, { onSubmit: J, noValidate: !0, "aria-label": z, children: [
-    /* @__PURE__ */ a(oe, { children: z }),
-    L && /* @__PURE__ */ s(ue, { role: "alert", children: [
+      ...F && d.phoneNumber ? { phoneNumber: d.phoneNumber.trim() } : {}
+    }, i = q(d.country), l = se(n, i, { showPhoneNumber: F });
+    if (!l.valid) {
+      const B = ge(l.errors);
+      I(B);
+      const k = (v = l.errors[0]) == null ? void 0 : v.field;
+      if (k) {
+        const w = document.getElementById(`field-${k}`);
+        w && (w.focus(), U.current = w);
+      }
+      return;
+    }
+    H(n);
+  }, u = j || P, o = (t) => K[t] ?? "";
+  return /* @__PURE__ */ s(ne, { onSubmit: Z, noValidate: !0, "aria-label": A, children: [
+    /* @__PURE__ */ a(le, { children: A }),
+    W && /* @__PURE__ */ s(ye, { role: "alert", children: [
       f,
       " ",
-      L
+      W
     ] }),
-    /* @__PURE__ */ s(W, { children: [
-      /* @__PURE__ */ s(h, { children: [
-        /* @__PURE__ */ a(g, { htmlFor: "field-firstName", $required: !0, children: "First Name" }),
+    /* @__PURE__ */ s(M, { children: [
+      /* @__PURE__ */ s(p, { children: [
+        /* @__PURE__ */ a($, { htmlFor: "field-firstName", $required: !0, children: "First Name" }),
         /* @__PURE__ */ a(
-          x,
+          N,
           {
             id: "field-firstName",
             type: "text",
             autoComplete: "given-name",
             value: d.firstName,
-            onChange: y("firstName"),
-            onBlur: $("firstName"),
+            onChange: b("firstName"),
+            onBlur: y("firstName"),
             maxLength: 30,
             disabled: u,
             $hasError: !!o("firstName"),
@@ -350,24 +347,24 @@ const ve = ({
             "aria-describedby": o("firstName") ? "err-firstName" : void 0
           }
         ),
-        o("firstName") && /* @__PURE__ */ s(N, { id: "err-firstName", role: "alert", children: [
+        o("firstName") && /* @__PURE__ */ s(g, { id: "err-firstName", role: "alert", children: [
           /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
           f,
           " ",
           o("firstName")
         ] })
       ] }),
-      /* @__PURE__ */ s(h, { children: [
-        /* @__PURE__ */ a(g, { htmlFor: "field-lastName", $required: !0, children: "Last Name" }),
+      /* @__PURE__ */ s(p, { children: [
+        /* @__PURE__ */ a($, { htmlFor: "field-lastName", $required: !0, children: "Last Name" }),
         /* @__PURE__ */ a(
-          x,
+          N,
           {
             id: "field-lastName",
             type: "text",
             autoComplete: "family-name",
             value: d.lastName,
-            onChange: y("lastName"),
-            onBlur: $("lastName"),
+            onChange: b("lastName"),
+            onBlur: y("lastName"),
             maxLength: 40,
             disabled: u,
             $hasError: !!o("lastName"),
@@ -376,7 +373,7 @@ const ve = ({
             "aria-describedby": o("lastName") ? "err-lastName" : void 0
           }
         ),
-        o("lastName") && /* @__PURE__ */ s(N, { id: "err-lastName", role: "alert", children: [
+        o("lastName") && /* @__PURE__ */ s(g, { id: "err-lastName", role: "alert", children: [
           /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
           f,
           " ",
@@ -384,15 +381,15 @@ const ve = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ s(h, { children: [
-      /* @__PURE__ */ a(g, { htmlFor: "field-country", $required: !0, children: "Country" }),
+    /* @__PURE__ */ s(p, { children: [
+      /* @__PURE__ */ a($, { htmlFor: "field-country", $required: !0, children: "Country" }),
       /* @__PURE__ */ s(
-        D,
+        O,
         {
           id: "field-country",
           value: d.country,
-          onChange: Y,
-          onBlur: $("country"),
+          onChange: X,
+          onBlur: y("country"),
           disabled: u,
           $hasError: !!o("country"),
           "aria-required": "true",
@@ -401,7 +398,7 @@ const ve = ({
           autoComplete: "country",
           children: [
             /* @__PURE__ */ a("option", { value: "", children: "Please select" }),
-            U.map((t) => /* @__PURE__ */ s("option", { value: t.code, children: [
+            Q.map((t) => /* @__PURE__ */ s("option", { value: t.code, children: [
               t.flag,
               " ",
               t.name
@@ -409,24 +406,24 @@ const ve = ({
           ]
         }
       ),
-      o("country") && /* @__PURE__ */ s(N, { id: "err-country", role: "alert", children: [
+      o("country") && /* @__PURE__ */ s(g, { id: "err-country", role: "alert", children: [
         /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
         f,
         " ",
         o("country")
       ] })
     ] }),
-    /* @__PURE__ */ s(h, { children: [
-      /* @__PURE__ */ a(g, { htmlFor: "field-address1", $required: !0, children: "Address Line 1" }),
+    /* @__PURE__ */ s(p, { children: [
+      /* @__PURE__ */ a($, { htmlFor: "field-address1", $required: !0, children: "Address Line 1" }),
       /* @__PURE__ */ a(
-        x,
+        N,
         {
           id: "field-address1",
           type: "text",
           autoComplete: "address-line1",
           value: d.address1,
-          onChange: y("address1"),
-          onBlur: $("address1"),
+          onChange: b("address1"),
+          onBlur: y("address1"),
           maxLength: 50,
           disabled: u,
           $hasError: !!o("address1"),
@@ -435,42 +432,42 @@ const ve = ({
           "aria-describedby": o("address1") ? "err-address1" : void 0
         }
       ),
-      o("address1") && /* @__PURE__ */ s(N, { id: "err-address1", role: "alert", children: [
+      o("address1") && /* @__PURE__ */ s(g, { id: "err-address1", role: "alert", children: [
         /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
         f,
         " ",
         o("address1")
       ] })
     ] }),
-    /* @__PURE__ */ s(h, { children: [
-      /* @__PURE__ */ a(g, { htmlFor: "field-address2", children: "Address Line 2 (Optional)" }),
+    /* @__PURE__ */ s(p, { children: [
+      /* @__PURE__ */ a($, { htmlFor: "field-address2", children: "Address Line 2 (Optional)" }),
       /* @__PURE__ */ a(
-        x,
+        N,
         {
           id: "field-address2",
           type: "text",
           autoComplete: "address-line2",
           value: d.address2,
-          onChange: y("address2"),
-          onBlur: $("address2"),
+          onChange: b("address2"),
+          onBlur: y("address2"),
           maxLength: 50,
           disabled: u,
           $hasError: !1
         }
       )
     ] }),
-    /* @__PURE__ */ s(W, { children: [
-      /* @__PURE__ */ s(h, { children: [
-        /* @__PURE__ */ a(g, { htmlFor: "field-city", $required: !0, children: "City" }),
+    /* @__PURE__ */ s(M, { children: [
+      /* @__PURE__ */ s(p, { children: [
+        /* @__PURE__ */ a($, { htmlFor: "field-city", $required: !0, children: "City" }),
         /* @__PURE__ */ a(
-          x,
+          N,
           {
             id: "field-city",
             type: "text",
             autoComplete: "address-level2",
             value: d.city,
-            onChange: y("city"),
-            onBlur: $("city"),
+            onChange: b("city"),
+            onBlur: y("city"),
             maxLength: 30,
             disabled: u,
             $hasError: !!o("city"),
@@ -479,26 +476,26 @@ const ve = ({
             "aria-describedby": o("city") ? "err-city" : void 0
           }
         ),
-        o("city") && /* @__PURE__ */ s(N, { id: "err-city", role: "alert", children: [
+        o("city") && /* @__PURE__ */ s(g, { id: "err-city", role: "alert", children: [
           /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
           f,
           " ",
           o("city")
         ] })
       ] }),
-      /* @__PURE__ */ s(h, { children: [
-        /* @__PURE__ */ a(g, { htmlFor: "field-postal", $required: !0, children: "Postal Code" }),
+      /* @__PURE__ */ s(p, { children: [
+        /* @__PURE__ */ a($, { htmlFor: "field-postal", $required: !0, children: "Postal Code" }),
         /* @__PURE__ */ a(
-          x,
+          N,
           {
             id: "field-postal",
             type: "text",
             autoComplete: "postal-code",
-            inputMode: b.postalInputMode,
-            placeholder: b.postalExamples,
+            inputMode: h.postalInputMode,
+            placeholder: h.postalExamples,
             value: d.postal,
-            onChange: y("postal"),
-            onBlur: $("postal"),
+            onChange: b("postal"),
+            onBlur: y("postal"),
             maxLength: 10,
             disabled: u,
             $hasError: !!o("postal"),
@@ -507,7 +504,7 @@ const ve = ({
             "aria-describedby": o("postal") ? "err-postal" : void 0
           }
         ),
-        o("postal") && /* @__PURE__ */ s(N, { id: "err-postal", role: "alert", children: [
+        o("postal") && /* @__PURE__ */ s(g, { id: "err-postal", role: "alert", children: [
           /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
           f,
           " ",
@@ -515,58 +512,51 @@ const ve = ({
         ] })
       ] })
     ] }),
-    K && /* @__PURE__ */ s(h, { children: [
-      /* @__PURE__ */ a(
-        g,
-        {
-          htmlFor: "field-state",
-          $required: b.stateRequired,
-          children: "State / Province"
-        }
-      ),
+    J && /* @__PURE__ */ s(p, { children: [
+      /* @__PURE__ */ a($, { htmlFor: "field-state", $required: h.stateRequired, children: "State / Province" }),
       /* @__PURE__ */ s(
-        D,
+        O,
         {
           id: "field-state",
           value: d.state,
-          onChange: y("state"),
-          onBlur: $("state"),
+          onChange: b("state"),
+          onBlur: y("state"),
           disabled: u,
           $hasError: !!o("state"),
-          "aria-required": b.stateRequired,
+          "aria-required": h.stateRequired,
           "aria-invalid": !!o("state"),
           "aria-describedby": o("state") ? "err-state" : void 0,
           autoComplete: "address-level1",
           children: [
             /* @__PURE__ */ a("option", { value: "", children: "Please select" }),
-            H.map((t) => /* @__PURE__ */ a("option", { value: t.code, children: t.name }, t.code))
+            Y.map((t) => /* @__PURE__ */ a("option", { value: t.code, children: t.name }, t.code))
           ]
         }
       ),
-      o("state") && /* @__PURE__ */ s(N, { id: "err-state", role: "alert", children: [
+      o("state") && /* @__PURE__ */ s(g, { id: "err-state", role: "alert", children: [
         /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
         f,
         " ",
         o("state")
       ] })
     ] }),
-    I && /* @__PURE__ */ s(h, { children: [
-      /* @__PURE__ */ a(g, { htmlFor: "field-phoneNumber", children: "Phone Number" }),
-      /* @__PURE__ */ s(ie, { children: [
-        b.dialCode && /* @__PURE__ */ s(ce, { "aria-label": `Dial code ${b.dialCode}`, children: [
-          ((R = E.find((t) => t.code === d.country)) == null ? void 0 : R.flag) ?? "",
+    F && /* @__PURE__ */ s(p, { children: [
+      /* @__PURE__ */ a($, { htmlFor: "field-phoneNumber", children: "Phone Number" }),
+      /* @__PURE__ */ s(he, { children: [
+        h.dialCode && /* @__PURE__ */ s(be, { "aria-label": `Dial code ${h.dialCode}`, children: [
+          ((_ = L.find((t) => t.code === d.country)) == null ? void 0 : _.flag) ?? "",
           " ",
-          b.dialCode
+          h.dialCode
         ] }),
         /* @__PURE__ */ a(
-          x,
+          N,
           {
             id: "field-phoneNumber",
             type: "tel",
             autoComplete: "tel",
             value: d.phoneNumber,
-            onChange: y("phoneNumber"),
-            onBlur: $("phoneNumber"),
+            onChange: b("phoneNumber"),
+            onBlur: y("phoneNumber"),
             maxLength: 20,
             disabled: u,
             $hasError: !!o("phoneNumber"),
@@ -575,43 +565,35 @@ const ve = ({
           }
         )
       ] }),
-      o("phoneNumber") && /* @__PURE__ */ s(N, { id: "err-phoneNumber", role: "alert", children: [
+      o("phoneNumber") && /* @__PURE__ */ s(g, { id: "err-phoneNumber", role: "alert", children: [
         /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
         f,
         " ",
         o("phoneNumber")
       ] })
     ] }),
-    /* @__PURE__ */ a(h, { children: /* @__PURE__ */ s(te, { children: [
+    /* @__PURE__ */ a(p, { children: /* @__PURE__ */ s(ie, { children: [
       /* @__PURE__ */ a(
-        ae,
+        ce,
         {
           id: "field-defaultAddress",
           type: "checkbox",
           checked: d.defaultAddress,
-          onChange: y("defaultAddress"),
+          onChange: b("defaultAddress"),
           disabled: u
         }
       ),
-      /* @__PURE__ */ a(de, { htmlFor: "field-defaultAddress", children: "Make this my default address." })
+      /* @__PURE__ */ a(ue, { htmlFor: "field-defaultAddress", children: "Make this my default address." })
     ] }) }),
-    /* @__PURE__ */ s(se, { children: [
-      /* @__PURE__ */ a(
-        ne,
-        {
-          type: "button",
-          disabled: u,
-          onClick: j,
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ s(le, { type: "submit", disabled: u, children: [
-        P && /* @__PURE__ */ a(pe, { "aria-hidden": "true" }),
+    /* @__PURE__ */ s(pe, { children: [
+      /* @__PURE__ */ a(me, { type: "button", disabled: u, onClick: G, children: "Cancel" }),
+      /* @__PURE__ */ s(fe, { type: "submit", disabled: u, children: [
+        P && /* @__PURE__ */ a($e, { "aria-hidden": "true" }),
         "Confirm Address"
       ] })
     ] })
   ] });
 };
 export {
-  ve as AddressForm
+  Te as AddressForm
 };