@ticketmaster/tm-global-address 0.6.0 → 0.8.0

package/dist/components/AddressForm/AddressForm.js

@@ -1,34 +1,36 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-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 A } from "../../data/countryData.js";
-import { FIELD_CONSTRAINTS as x } from "../../validation/constants.js";
-import { PhoneField as te } from "../PhoneField/PhoneField.js";
-import { validateTextField as S } from "../../validation/validateTextField.js";
-import { validatePostalCode as ae } from "../../validation/validatePostalCode.js";
-import { validateState as de } from "../../validation/validateState.js";
-import { validatePhoneNumber as se } from "../../validation/validatePhoneNumber.js";
-import { validateForm as ne } from "../../validation/validateForm.js";
-const le = c.form`
+import { jsxs as s, jsx as d } from "react/jsx-runtime";
+import { useState as q, useRef as de, useEffect as se, useCallback as L } from "react";
+import u from "styled-components";
+import { tokens as e, atDesktop as ne } from "../../styles/tokens.js";
+import { getCountryConfig as D, getSubdivisions as le, COUNTRY_OPTIONS as R } from "../../data/countryData.js";
+import { FIELD_CONSTRAINTS as F } from "../../validation/constants.js";
+import { PhoneField as ie } from "../PhoneField/PhoneField.js";
+import { useLabels as ce } from "../../i18n/index.js";
+import { validateTextField as k } from "../../validation/validateTextField.js";
+import { validatePostalCode as ue } from "../../validation/validatePostalCode.js";
+import { validateState as pe } from "../../validation/validateState.js";
+import { validatePhoneNumber as me } from "../../validation/validatePhoneNumber.js";
+import { validateForm as fe } from "../../validation/validateForm.js";
+const he = u.form`
   display: flex;
   flex-direction: column;
   gap: ${e.space4};
-`, ie = c.h2`
+  direction: ${(r) => r.$rtl ? "rtl" : "ltr"};
+`, be = u.h2`
   margin: 0 0 ${e.space2};
   font-size: ${e.fontSizeHeading};
   font-weight: ${e.fontWeightBold};
   color: ${e.colorTextPrimary};
-`, _ = c.div`
+`, H = u.div`
   display: grid;
   grid-template-columns: 1fr;
   gap: ${e.space4};
-  ${re("grid-template-columns: 1fr 1fr;")}
-`, p = c.div`
+  ${ne("grid-template-columns: 1fr 1fr;")}
+`, m = u.div`
   display: flex;
   flex-direction: column;
   gap: ${e.space1};
-`, y = c.label`
+`, $ = u.label`
   font-size: ${e.fontSizeLabel};
   font-weight: ${e.fontWeightNormal};
   color: ${e.colorTextPrimary};
@@ -40,7 +42,7 @@ const le = c.form`
       aria-hidden: true;
     }
   `}
-`, C = c.input`
+`, I = u.input`
   width: 100%;
   padding: ${e.space2} ${e.space3};
   font-size: ${e.fontSizeInput};
@@ -73,7 +75,7 @@ const le = c.form`
     border-color: ${e.colorBorderInputDisabled};
     cursor: not-allowed;
   }
-`, O = c.select`
+`, O = u.select`
   width: 100%;
   padding: ${e.space2} ${e.space3};
   font-size: ${e.fontSizeInput};
@@ -99,18 +101,18 @@ const le = c.form`
     border-color: ${e.colorBorderInputDisabled};
     cursor: not-allowed;
   }
-`, v = c.p`
+`, N = u.p`
   margin: 0;
   font-size: ${e.fontSizeError};
   color: ${e.colorTextError};
   display: flex;
   align-items: center;
   gap: ${e.space1};
-`, ce = c.div`
+`, ye = u.div`
   display: flex;
   align-items: center;
   gap: ${e.space2};
-`, ue = c.input`
+`, $e = u.input`
   width: 18px;
   height: 18px;
   cursor: pointer;
@@ -119,17 +121,17 @@ const le = c.form`
   &:disabled {
     cursor: not-allowed;
   }
-`, pe = c.label`
+`, ge = u.label`
   font-size: ${e.fontSizeBody};
   color: ${e.colorTextPrimary};
   cursor: pointer;
-`, me = c.div`
+`, ve = u.div`
   display: flex;
   justify-content: flex-end;
   gap: ${e.space3};
   flex-wrap: wrap;
   margin-block-start: ${e.space2};
-`, fe = c.button`
+`, Ne = u.button`
   appearance: none;
   padding: ${e.space2} ${e.space6};
   font-size: ${e.fontSizeBody};
@@ -155,7 +157,7 @@ const le = c.form`
     opacity: 0.6;
     cursor: not-allowed;
   }
-`, he = c.button`
+`, Be = u.button`
   appearance: none;
   padding: ${e.space2} ${e.space6};
   font-size: ${e.fontSizeBody};
@@ -184,14 +186,14 @@ const le = c.form`
     opacity: 0.6;
     cursor: not-allowed;
   }
-`, be = c.div`
+`, xe = u.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};
-`, ye = c.span`
+`, Fe = u.span`
   display: inline-block;
   width: 16px;
   height: 16px;
@@ -206,13 +208,13 @@ const le = c.form`
     }
   }
 `;
-function $e(r) {
-  const m = {};
-  for (const N of r)
-    m[N.field] || (m[N.field] = N.message);
-  return m;
+function Ie(r) {
+  const f = {};
+  for (const B of r)
+    f[B.field] || (f[B.field] = B.message);
+  return f;
 }
-function ge(r) {
+function Ce(r) {
   return {
     firstName: (r == null ? void 0 : r.firstName) ?? "",
     lastName: (r == null ? void 0 : r.lastName) ?? "",
@@ -226,165 +228,167 @@ function ge(r) {
     defaultAddress: (r == null ? void 0 : r.defaultAddress) ?? !1
   };
 }
-const Te = ({
+const _e = ({
   mode: r,
-  initialValues: m,
-  countryWhitelist: N,
-  showPhoneNumber: F = !1,
-  screenReaderErrorPrefix: f,
-  addressLabel: L,
-  isLoading: P = !1,
-  disabled: j = !1,
-  serverErrors: E = [],
-  onCancel: G,
-  onSubmit: H
+  initialValues: f,
+  countryWhitelist: B,
+  showPhoneNumber: C = !1,
+  screenReaderErrorPrefix: h,
+  addressLabel: U,
+  locale: Q = "en-us",
+  labels: W,
+  isLoading: A = !1,
+  disabled: K = !1,
+  serverErrors: w = [],
+  onCancel: Y,
+  onSubmit: J
 }) => {
-  var M;
-  const [d, W] = z(() => ge(m)), [K, I] = z({}), [D, R] = z(""), U = V(null), $ = q(d.country), Y = oe(d.country), J = $.stateCodes.length > 0 || $.stateRequired, Q = N ? A.filter((t) => N.includes(t.code)) : A;
-  ee(() => {
-    if (E.length === 0) return;
+  var G;
+  const [a, P] = q(() => Ce(f)), [X, E] = q({}), [_, M] = q(""), Z = de(null), g = D(a.country), S = ce(Q, a.country), c = W ? { ...S.form, ...W } : S.form, V = S.isRTL, j = U ?? c.addressHeading, ee = le(a.country), re = g.stateCodes.length > 0 || g.stateRequired, oe = B ? R.filter((t) => B.includes(t.code)) : R;
+  se(() => {
+    if (w.length === 0) return;
     const t = {};
     let n = "";
-    E.forEach((i) => {
+    w.forEach((i) => {
       i.field ? t[i.field] = i.message : n = i.message;
-    }), I((i) => ({ ...i, ...t })), R(n);
-  }, [E]);
-  const X = T((t) => {
+    }), E((i) => ({ ...i, ...t })), M(n);
+  }, [w]);
+  const te = L((t) => {
     const n = t.target.value;
-    W((i) => ({ ...i, country: n, state: "" })), I((i) => {
-      const { country: l, state: g, ...B } = i;
-      return B;
+    P((i) => ({ ...i, country: n, state: "" })), E((i) => {
+      const { country: l, state: v, ...x } = i;
+      return x;
     });
-  }, []), h = T(
+  }, []), b = L(
     (t) => (n) => {
       const i = n.target.type === "checkbox" ? n.target.checked : n.target.value;
-      W((l) => ({ ...l, [t]: i })), I((l) => {
-        const { [t]: g, ...B } = l;
-        return B;
+      P((l) => ({ ...l, [t]: i })), E((l) => {
+        const { [t]: v, ...x } = l;
+        return x;
       });
     },
     []
-  ), b = T(
+  ), y = L(
     (t) => () => {
-      const n = d[t];
+      const n = a[t];
       if (typeof n != "string") return;
-      const i = q(d.country);
+      const i = D(a.country);
       let l = null;
-      t === "firstName" ? l = S("firstName", n, x.firstName) : t === "lastName" ? l = S("lastName", n, x.lastName) : t === "address1" ? l = S("address1", n, x.address1) : t === "address2" && n !== "" ? l = S("address2", n, x.address2) : t === "city" ? l = S("city", n, x.city) : t === "postal" && n !== "" ? l = ae(n, x.postal, i) : t === "state" ? l = de(n || void 0, i) : t === "phoneNumber" && n !== "" && F ? l = se(n, i) : t === "country" && n === "" && (l = { message: "Please select your country" }), I((g) => {
-        if (l) return { ...g, [t]: l.message };
-        const { [t]: B, ...k } = g;
-        return k;
+      t === "firstName" ? l = k("firstName", n, F.firstName) : t === "lastName" ? l = k("lastName", n, F.lastName) : t === "address1" ? l = k("address1", n, F.address1) : t === "address2" && n !== "" ? l = k("address2", n, F.address2) : t === "city" ? l = k("city", n, F.city) : t === "postal" && n !== "" ? l = ue(n, F.postal, i) : t === "state" ? l = pe(n || void 0, i) : t === "phoneNumber" && n !== "" && C ? l = me(n, i) : t === "country" && n === "" && (l = { message: S.validation.FIELD_REQUIRED.replace("{{field}}", c.country) }), E((v) => {
+        if (l) return { ...v, [t]: l.message };
+        const { [t]: x, ...T } = v;
+        return T;
       });
     },
-    [d, F]
-  ), Z = (t) => {
-    var g;
-    t.preventDefault(), R("");
+    [a, C, c.country, S.validation.FIELD_REQUIRED]
+  ), ae = (t) => {
+    var v;
+    t.preventDefault(), M("");
     const n = {
       mode: r,
-      ...r === "edit" && (m == null ? void 0 : m.addressId) !== void 0 ? { addressId: m.addressId } : {},
-      defaultAddress: d.defaultAddress,
-      firstName: d.firstName.trim(),
-      lastName: d.lastName.trim(),
-      address1: d.address1.trim(),
-      ...d.address2.trim() ? { address2: d.address2.trim() } : {},
-      city: d.city.trim(),
-      postal: d.postal.trim(),
-      country: d.country,
-      ...d.state ? { state: d.state } : {},
-      ...F && d.phoneNumber ? { phoneNumber: d.phoneNumber.trim() } : {}
-    }, i = q(d.country), l = ne(n, i, { showPhoneNumber: F });
+      ...r === "edit" && (f == null ? void 0 : f.addressId) !== void 0 ? { addressId: f.addressId } : {},
+      defaultAddress: a.defaultAddress,
+      firstName: a.firstName.trim(),
+      lastName: a.lastName.trim(),
+      address1: a.address1.trim(),
+      ...a.address2.trim() ? { address2: a.address2.trim() } : {},
+      city: a.city.trim(),
+      postal: a.postal.trim(),
+      country: a.country,
+      ...a.state ? { state: a.state } : {},
+      ...C && a.phoneNumber ? { phoneNumber: a.phoneNumber.trim() } : {}
+    }, i = D(a.country), l = fe(n, i, { showPhoneNumber: C });
     if (!l.valid) {
-      const B = $e(l.errors);
-      I(B);
-      const k = (g = l.errors[0]) == null ? void 0 : g.field;
-      if (k) {
-        const w = document.getElementById(`field-${k}`);
-        w && (w.focus(), U.current = w);
+      const x = Ie(l.errors);
+      E(x);
+      const T = (v = l.errors[0]) == null ? void 0 : v.field;
+      if (T) {
+        const z = document.getElementById(`field-${T}`);
+        z && (z.focus(), Z.current = z);
       }
       return;
     }
-    H(n);
-  }, u = j || P, o = (t) => K[t] ?? "";
-  return /* @__PURE__ */ s(le, { onSubmit: Z, noValidate: !0, "aria-label": L, children: [
-    /* @__PURE__ */ a(ie, { children: L }),
-    D && /* @__PURE__ */ s(be, { role: "alert", children: [
-      f,
+    J(n);
+  }, p = K || A, o = (t) => X[t] ?? "";
+  return /* @__PURE__ */ s(he, { onSubmit: ae, noValidate: !0, "aria-label": j, $rtl: V, children: [
+    /* @__PURE__ */ d(be, { children: j }),
+    _ && /* @__PURE__ */ s(xe, { role: "alert", children: [
+      h,
       " ",
-      D
+      _
     ] }),
-    /* @__PURE__ */ s(_, { children: [
-      /* @__PURE__ */ s(p, { children: [
-        /* @__PURE__ */ a(y, { htmlFor: "field-firstName", $required: !0, children: "First Name" }),
-        /* @__PURE__ */ a(
-          C,
+    /* @__PURE__ */ s(H, { children: [
+      /* @__PURE__ */ s(m, { children: [
+        /* @__PURE__ */ d($, { htmlFor: "field-firstName", $required: !0, children: c.firstName }),
+        /* @__PURE__ */ d(
+          I,
           {
             id: "field-firstName",
             type: "text",
             autoComplete: "given-name",
-            value: d.firstName,
-            onChange: h("firstName"),
-            onBlur: b("firstName"),
+            value: a.firstName,
+            onChange: b("firstName"),
+            onBlur: y("firstName"),
             maxLength: 30,
-            disabled: u,
+            disabled: p,
             $hasError: !!o("firstName"),
             "aria-required": "true",
             "aria-invalid": !!o("firstName"),
             "aria-describedby": o("firstName") ? "err-firstName" : void 0
           }
         ),
-        o("firstName") && /* @__PURE__ */ s(v, { id: "err-firstName", role: "alert", children: [
-          /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
-          f,
+        o("firstName") && /* @__PURE__ */ s(N, { id: "err-firstName", role: "alert", children: [
+          /* @__PURE__ */ d("span", { "aria-hidden": "true", children: "⚠" }),
+          h,
           " ",
           o("firstName")
         ] })
       ] }),
-      /* @__PURE__ */ s(p, { children: [
-        /* @__PURE__ */ a(y, { htmlFor: "field-lastName", $required: !0, children: "Last Name" }),
-        /* @__PURE__ */ a(
-          C,
+      /* @__PURE__ */ s(m, { children: [
+        /* @__PURE__ */ d($, { htmlFor: "field-lastName", $required: !0, children: c.lastName }),
+        /* @__PURE__ */ d(
+          I,
           {
             id: "field-lastName",
             type: "text",
             autoComplete: "family-name",
-            value: d.lastName,
-            onChange: h("lastName"),
-            onBlur: b("lastName"),
+            value: a.lastName,
+            onChange: b("lastName"),
+            onBlur: y("lastName"),
             maxLength: 40,
-            disabled: u,
+            disabled: p,
             $hasError: !!o("lastName"),
             "aria-required": "true",
             "aria-invalid": !!o("lastName"),
             "aria-describedby": o("lastName") ? "err-lastName" : void 0
           }
         ),
-        o("lastName") && /* @__PURE__ */ s(v, { id: "err-lastName", role: "alert", children: [
-          /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
-          f,
+        o("lastName") && /* @__PURE__ */ s(N, { id: "err-lastName", role: "alert", children: [
+          /* @__PURE__ */ d("span", { "aria-hidden": "true", children: "⚠" }),
+          h,
           " ",
           o("lastName")
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ a(y, { htmlFor: "field-country", $required: !0, children: "Country" }),
+    /* @__PURE__ */ s(m, { children: [
+      /* @__PURE__ */ d($, { htmlFor: "field-country", $required: !0, children: c.country }),
       /* @__PURE__ */ s(
         O,
         {
           id: "field-country",
-          value: d.country,
-          onChange: X,
-          onBlur: b("country"),
-          disabled: u,
+          value: a.country,
+          onChange: te,
+          onBlur: y("country"),
+          disabled: p,
           $hasError: !!o("country"),
           "aria-required": "true",
           "aria-invalid": !!o("country"),
           "aria-describedby": o("country") ? "err-country" : void 0,
           autoComplete: "country",
           children: [
-            /* @__PURE__ */ a("option", { value: "", children: "Please select" }),
-            Q.map((t) => /* @__PURE__ */ s("option", { value: t.code, children: [
+            /* @__PURE__ */ d("option", { value: "", children: c.countryPlaceholder }),
+            oe.map((t) => /* @__PURE__ */ s("option", { value: t.code, children: [
               t.flag,
               " ",
               t.name
@@ -392,181 +396,181 @@ const Te = ({
           ]
         }
       ),
-      o("country") && /* @__PURE__ */ s(v, { id: "err-country", role: "alert", children: [
-        /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
-        f,
+      o("country") && /* @__PURE__ */ s(N, { id: "err-country", role: "alert", children: [
+        /* @__PURE__ */ d("span", { "aria-hidden": "true", children: "⚠" }),
+        h,
         " ",
         o("country")
       ] })
     ] }),
-    /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ a(y, { htmlFor: "field-address1", $required: !0, children: "Address Line 1" }),
-      /* @__PURE__ */ a(
-        C,
+    /* @__PURE__ */ s(m, { children: [
+      /* @__PURE__ */ d($, { htmlFor: "field-address1", $required: !0, children: c.address1 }),
+      /* @__PURE__ */ d(
+        I,
         {
           id: "field-address1",
           type: "text",
           autoComplete: "address-line1",
-          value: d.address1,
-          onChange: h("address1"),
-          onBlur: b("address1"),
+          value: a.address1,
+          onChange: b("address1"),
+          onBlur: y("address1"),
           maxLength: 50,
-          disabled: u,
+          disabled: p,
           $hasError: !!o("address1"),
           "aria-required": "true",
           "aria-invalid": !!o("address1"),
           "aria-describedby": o("address1") ? "err-address1" : void 0
         }
       ),
-      o("address1") && /* @__PURE__ */ s(v, { id: "err-address1", role: "alert", children: [
-        /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
-        f,
+      o("address1") && /* @__PURE__ */ s(N, { id: "err-address1", role: "alert", children: [
+        /* @__PURE__ */ d("span", { "aria-hidden": "true", children: "⚠" }),
+        h,
         " ",
         o("address1")
       ] })
     ] }),
-    /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ a(y, { htmlFor: "field-address2", children: "Address Line 2 (Optional)" }),
-      /* @__PURE__ */ a(
-        C,
+    /* @__PURE__ */ s(m, { children: [
+      /* @__PURE__ */ d($, { htmlFor: "field-address2", children: c.address2 }),
+      /* @__PURE__ */ d(
+        I,
         {
           id: "field-address2",
           type: "text",
           autoComplete: "address-line2",
-          value: d.address2,
-          onChange: h("address2"),
-          onBlur: b("address2"),
+          value: a.address2,
+          onChange: b("address2"),
+          onBlur: y("address2"),
           maxLength: 50,
-          disabled: u,
+          disabled: p,
           $hasError: !1
         }
       )
     ] }),
-    /* @__PURE__ */ s(_, { children: [
-      /* @__PURE__ */ s(p, { children: [
-        /* @__PURE__ */ a(y, { htmlFor: "field-city", $required: !0, children: "City" }),
-        /* @__PURE__ */ a(
-          C,
+    /* @__PURE__ */ s(H, { children: [
+      /* @__PURE__ */ s(m, { children: [
+        /* @__PURE__ */ d($, { htmlFor: "field-city", $required: !0, children: c.city }),
+        /* @__PURE__ */ d(
+          I,
           {
             id: "field-city",
             type: "text",
             autoComplete: "address-level2",
-            value: d.city,
-            onChange: h("city"),
-            onBlur: b("city"),
+            value: a.city,
+            onChange: b("city"),
+            onBlur: y("city"),
             maxLength: 30,
-            disabled: u,
+            disabled: p,
             $hasError: !!o("city"),
             "aria-required": "true",
             "aria-invalid": !!o("city"),
             "aria-describedby": o("city") ? "err-city" : void 0
           }
         ),
-        o("city") && /* @__PURE__ */ s(v, { id: "err-city", role: "alert", children: [
-          /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
-          f,
+        o("city") && /* @__PURE__ */ s(N, { id: "err-city", role: "alert", children: [
+          /* @__PURE__ */ d("span", { "aria-hidden": "true", children: "⚠" }),
+          h,
           " ",
           o("city")
         ] })
       ] }),
-      /* @__PURE__ */ s(p, { children: [
-        /* @__PURE__ */ a(y, { htmlFor: "field-postal", $required: !0, children: "Postal Code" }),
-        /* @__PURE__ */ a(
-          C,
+      /* @__PURE__ */ s(m, { children: [
+        /* @__PURE__ */ d($, { htmlFor: "field-postal", $required: !0, children: c.postal }),
+        /* @__PURE__ */ d(
+          I,
           {
             id: "field-postal",
             type: "text",
             autoComplete: "postal-code",
-            inputMode: $.postalInputMode,
-            placeholder: $.postalExamples,
-            value: d.postal,
-            onChange: h("postal"),
-            onBlur: b("postal"),
+            inputMode: g.postalInputMode,
+            placeholder: g.postalExamples,
+            value: a.postal,
+            onChange: b("postal"),
+            onBlur: y("postal"),
             maxLength: 10,
-            disabled: u,
+            disabled: p,
             $hasError: !!o("postal"),
             "aria-required": "true",
             "aria-invalid": !!o("postal"),
             "aria-describedby": o("postal") ? "err-postal" : void 0
           }
         ),
-        o("postal") && /* @__PURE__ */ s(v, { id: "err-postal", role: "alert", children: [
-          /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
-          f,
+        o("postal") && /* @__PURE__ */ s(N, { id: "err-postal", role: "alert", children: [
+          /* @__PURE__ */ d("span", { "aria-hidden": "true", children: "⚠" }),
+          h,
           " ",
           o("postal")
         ] })
       ] })
     ] }),
-    J && /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ a(y, { htmlFor: "field-state", $required: $.stateRequired, children: "State / Province" }),
+    re && /* @__PURE__ */ s(m, { children: [
+      /* @__PURE__ */ d($, { htmlFor: "field-state", $required: g.stateRequired, children: c.stateCode }),
       /* @__PURE__ */ s(
         O,
         {
           id: "field-state",
-          value: d.state,
-          onChange: h("state"),
-          onBlur: b("state"),
-          disabled: u,
+          value: a.state,
+          onChange: b("state"),
+          onBlur: y("state"),
+          disabled: p,
           $hasError: !!o("state"),
-          "aria-required": $.stateRequired,
+          "aria-required": g.stateRequired,
           "aria-invalid": !!o("state"),
           "aria-describedby": o("state") ? "err-state" : void 0,
           autoComplete: "address-level1",
           children: [
-            /* @__PURE__ */ a("option", { value: "", children: "Please select" }),
-            Y.map((t) => /* @__PURE__ */ a("option", { value: t.code, children: t.name }, t.code))
+            /* @__PURE__ */ d("option", { value: "", children: c.stateCodePlaceholder }),
+            ee.map((t) => /* @__PURE__ */ d("option", { value: t.code, children: t.name }, t.code))
           ]
         }
       ),
-      o("state") && /* @__PURE__ */ s(v, { id: "err-state", role: "alert", children: [
-        /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
-        f,
+      o("state") && /* @__PURE__ */ s(N, { id: "err-state", role: "alert", children: [
+        /* @__PURE__ */ d("span", { "aria-hidden": "true", children: "⚠" }),
+        h,
         " ",
         o("state")
       ] })
     ] }),
-    F && /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ a(y, { htmlFor: "field-phoneNumber", children: "Phone Number" }),
-      /* @__PURE__ */ a(
-        te,
+    C && /* @__PURE__ */ s(m, { children: [
+      /* @__PURE__ */ d($, { htmlFor: "field-phoneNumber", children: c.phoneNumber }),
+      /* @__PURE__ */ d(
+        ie,
         {
           id: "field-phoneNumber",
-          value: d.phoneNumber,
-          dialCode: $.dialCode,
-          flagEmoji: ((M = A.find((t) => t.code === d.country)) == null ? void 0 : M.flag) ?? "",
-          countryCode: d.country,
-          onChange: h("phoneNumber"),
-          onBlur: b("phoneNumber"),
-          disabled: u,
+          value: a.phoneNumber,
+          dialCode: g.dialCode,
+          flagEmoji: ((G = R.find((t) => t.code === a.country)) == null ? void 0 : G.flag) ?? "",
+          countryCode: a.country,
+          onChange: b("phoneNumber"),
+          onBlur: y("phoneNumber"),
+          disabled: p,
           hasError: !!o("phoneNumber"),
           errorMessage: o("phoneNumber") || void 0,
-          screenReaderErrorPrefix: f
+          screenReaderErrorPrefix: h
         }
       )
     ] }),
-    /* @__PURE__ */ a(p, { children: /* @__PURE__ */ s(ce, { children: [
-      /* @__PURE__ */ a(
-        ue,
+    /* @__PURE__ */ d(m, { children: /* @__PURE__ */ s(ye, { children: [
+      /* @__PURE__ */ d(
+        $e,
         {
           id: "field-defaultAddress",
           type: "checkbox",
-          checked: d.defaultAddress,
-          onChange: h("defaultAddress"),
-          disabled: u
+          checked: a.defaultAddress,
+          onChange: b("defaultAddress"),
+          disabled: p
         }
       ),
-      /* @__PURE__ */ a(pe, { htmlFor: "field-defaultAddress", children: "Make this my default address." })
+      /* @__PURE__ */ d(ge, { htmlFor: "field-defaultAddress", children: c.makeDefault })
     ] }) }),
-    /* @__PURE__ */ s(me, { children: [
-      /* @__PURE__ */ a(fe, { type: "button", disabled: u, onClick: G, children: "Cancel" }),
-      /* @__PURE__ */ s(he, { type: "submit", disabled: u, children: [
-        P && /* @__PURE__ */ a(ye, { "aria-hidden": "true" }),
-        "Confirm Address"
+    /* @__PURE__ */ s(ve, { children: [
+      /* @__PURE__ */ d(Ne, { type: "button", disabled: p, onClick: Y, children: c.cancel }),
+      /* @__PURE__ */ s(Be, { type: "submit", disabled: p, children: [
+        A && /* @__PURE__ */ d(Fe, { "aria-hidden": "true" }),
+        c.confirm
       ] })
     ] })
   ] });
 };
 export {
-  Te as AddressForm
+  _e as AddressForm
 };