@ticketmaster/tm-global-address 0.4.0 → 0.6.0

package/dist/components/AddressForm/AddressForm.js

@@ -2,23 +2,24 @@ 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 L } from "../../data/countryData.js";
-import { FIELD_CONSTRAINTS as C } from "../../validation/constants.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 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`
+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`
   display: flex;
   flex-direction: column;
   gap: ${e.space4};
-`, le = c.h2`
+`, ie = c.h2`
   margin: 0 0 ${e.space2};
   font-size: ${e.fontSizeHeading};
   font-weight: ${e.fontWeightBold};
   color: ${e.colorTextPrimary};
-`, M = c.div`
+`, _ = c.div`
   display: grid;
   grid-template-columns: 1fr;
   gap: ${e.space4};
@@ -27,7 +28,7 @@ const ne = c.form`
   display: flex;
   flex-direction: column;
   gap: ${e.space1};
-`, $ = c.label`
+`, y = c.label`
   font-size: ${e.fontSizeLabel};
   font-weight: ${e.fontWeightNormal};
   color: ${e.colorTextPrimary};
@@ -39,7 +40,7 @@ const ne = c.form`
       aria-hidden: true;
     }
   `}
-`, N = c.input`
+`, C = c.input`
   width: 100%;
   padding: ${e.space2} ${e.space3};
   font-size: ${e.fontSizeInput};
@@ -98,18 +99,18 @@ const ne = c.form`
     border-color: ${e.colorBorderInputDisabled};
     cursor: not-allowed;
   }
-`, g = c.p`
+`, v = c.p`
   margin: 0;
   font-size: ${e.fontSizeError};
   color: ${e.colorTextError};
   display: flex;
   align-items: center;
   gap: ${e.space1};
-`, ie = c.div`
+`, ce = c.div`
   display: flex;
   align-items: center;
   gap: ${e.space2};
-`, ce = c.input`
+`, ue = c.input`
   width: 18px;
   height: 18px;
   cursor: pointer;
@@ -118,17 +119,17 @@ const ne = c.form`
   &:disabled {
     cursor: not-allowed;
   }
-`, ue = c.label`
+`, pe = c.label`
   font-size: ${e.fontSizeBody};
   color: ${e.colorTextPrimary};
   cursor: pointer;
-`, pe = c.div`
+`, me = c.div`
   display: flex;
   justify-content: flex-end;
   gap: ${e.space3};
   flex-wrap: wrap;
   margin-block-start: ${e.space2};
-`, me = c.button`
+`, fe = c.button`
   appearance: none;
   padding: ${e.space2} ${e.space6};
   font-size: ${e.fontSizeBody};
@@ -154,7 +155,7 @@ const ne = c.form`
     opacity: 0.6;
     cursor: not-allowed;
   }
-`, fe = c.button`
+`, he = c.button`
   appearance: none;
   padding: ${e.space2} ${e.space6};
   font-size: ${e.fontSizeBody};
@@ -183,29 +184,14 @@ const ne = c.form`
     opacity: 0.6;
     cursor: not-allowed;
   }
-`, he = c.div`
-  display: flex;
-  gap: ${e.space2};
 `, be = c.div`
-  display: flex;
-  align-items: center;
-  gap: ${e.space1};
-  padding: ${e.space2} ${e.space3};
-  background: ${e.colorSurfaceSecondary};
-  border: ${e.borderWidthInput} solid ${e.colorBorderInput};
-  border-radius: ${e.borderRadiusInput};
-  font-size: ${e.fontSizeBody};
-  color: ${e.colorTextPrimary};
-  white-space: nowrap;
-  flex-shrink: 0;
-`, 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};
-`, $e = c.span`
+`, ye = c.span`
   display: inline-block;
   width: 16px;
   height: 16px;
@@ -220,13 +206,13 @@ const ne = c.form`
     }
   }
 `;
-function ge(r) {
+function $e(r) {
   const m = {};
-  for (const x of r)
-    m[x.field] || (m[x.field] = x.message);
+  for (const N of r)
+    m[N.field] || (m[N.field] = N.message);
   return m;
 }
-function ve(r) {
+function ge(r) {
   return {
     firstName: (r == null ? void 0 : r.firstName) ?? "",
     lastName: (r == null ? void 0 : r.lastName) ?? "",
@@ -243,18 +229,18 @@ function ve(r) {
 const Te = ({
   mode: r,
   initialValues: m,
-  countryWhitelist: x,
+  countryWhitelist: N,
   showPhoneNumber: F = !1,
   screenReaderErrorPrefix: f,
-  addressLabel: A,
+  addressLabel: L,
   isLoading: P = !1,
   disabled: j = !1,
   serverErrors: E = [],
   onCancel: G,
   onSubmit: H
 }) => {
-  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;
+  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;
     const t = {};
@@ -265,34 +251,34 @@ const Te = ({
   }, [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;
+    W((i) => ({ ...i, country: n, state: "" })), I((i) => {
+      const { country: l, state: g, ...B } = i;
       return B;
     });
-  }, []), b = T(
+  }, []), h = 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;
+      W((l) => ({ ...l, [t]: i })), I((l) => {
+        const { [t]: g, ...B } = l;
         return B;
       });
     },
     []
-  ), y = T(
+  ), b = T(
     (t) => () => {
       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;
+      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;
       });
     },
     [d, F]
   ), Z = (t) => {
-    var v;
+    var g;
     t.preventDefault(), R("");
     const n = {
       mode: r,
@@ -307,11 +293,11 @@ const Te = ({
       country: d.country,
       ...d.state ? { state: d.state } : {},
       ...F && d.phoneNumber ? { phoneNumber: d.phoneNumber.trim() } : {}
-    }, i = q(d.country), l = se(n, i, { showPhoneNumber: F });
+    }, i = q(d.country), l = ne(n, i, { showPhoneNumber: F });
     if (!l.valid) {
-      const B = ge(l.errors);
+      const B = $e(l.errors);
       I(B);
-      const k = (v = l.errors[0]) == null ? void 0 : v.field;
+      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);
@@ -320,25 +306,25 @@ const Te = ({
     }
     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: [
+  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,
       " ",
-      W
+      D
     ] }),
-    /* @__PURE__ */ s(M, { children: [
+    /* @__PURE__ */ s(_, { children: [
       /* @__PURE__ */ s(p, { children: [
-        /* @__PURE__ */ a($, { htmlFor: "field-firstName", $required: !0, children: "First Name" }),
+        /* @__PURE__ */ a(y, { htmlFor: "field-firstName", $required: !0, children: "First Name" }),
         /* @__PURE__ */ a(
-          N,
+          C,
           {
             id: "field-firstName",
             type: "text",
             autoComplete: "given-name",
             value: d.firstName,
-            onChange: b("firstName"),
-            onBlur: y("firstName"),
+            onChange: h("firstName"),
+            onBlur: b("firstName"),
             maxLength: 30,
             disabled: u,
             $hasError: !!o("firstName"),
@@ -347,7 +333,7 @@ const Te = ({
             "aria-describedby": o("firstName") ? "err-firstName" : void 0
           }
         ),
-        o("firstName") && /* @__PURE__ */ s(g, { id: "err-firstName", role: "alert", children: [
+        o("firstName") && /* @__PURE__ */ s(v, { id: "err-firstName", role: "alert", children: [
           /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
           f,
           " ",
@@ -355,16 +341,16 @@ const Te = ({
         ] })
       ] }),
       /* @__PURE__ */ s(p, { children: [
-        /* @__PURE__ */ a($, { htmlFor: "field-lastName", $required: !0, children: "Last Name" }),
+        /* @__PURE__ */ a(y, { htmlFor: "field-lastName", $required: !0, children: "Last Name" }),
         /* @__PURE__ */ a(
-          N,
+          C,
           {
             id: "field-lastName",
             type: "text",
             autoComplete: "family-name",
             value: d.lastName,
-            onChange: b("lastName"),
-            onBlur: y("lastName"),
+            onChange: h("lastName"),
+            onBlur: b("lastName"),
             maxLength: 40,
             disabled: u,
             $hasError: !!o("lastName"),
@@ -373,7 +359,7 @@ const Te = ({
             "aria-describedby": o("lastName") ? "err-lastName" : void 0
           }
         ),
-        o("lastName") && /* @__PURE__ */ s(g, { id: "err-lastName", role: "alert", children: [
+        o("lastName") && /* @__PURE__ */ s(v, { id: "err-lastName", role: "alert", children: [
           /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
           f,
           " ",
@@ -382,14 +368,14 @@ const Te = ({
       ] })
     ] }),
     /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ a($, { htmlFor: "field-country", $required: !0, children: "Country" }),
+      /* @__PURE__ */ a(y, { htmlFor: "field-country", $required: !0, children: "Country" }),
       /* @__PURE__ */ s(
         O,
         {
           id: "field-country",
           value: d.country,
           onChange: X,
-          onBlur: y("country"),
+          onBlur: b("country"),
           disabled: u,
           $hasError: !!o("country"),
           "aria-required": "true",
@@ -406,7 +392,7 @@ const Te = ({
           ]
         }
       ),
-      o("country") && /* @__PURE__ */ s(g, { id: "err-country", role: "alert", children: [
+      o("country") && /* @__PURE__ */ s(v, { id: "err-country", role: "alert", children: [
         /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
         f,
         " ",
@@ -414,16 +400,16 @@ const Te = ({
       ] })
     ] }),
     /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ a($, { htmlFor: "field-address1", $required: !0, children: "Address Line 1" }),
+      /* @__PURE__ */ a(y, { htmlFor: "field-address1", $required: !0, children: "Address Line 1" }),
       /* @__PURE__ */ a(
-        N,
+        C,
         {
           id: "field-address1",
           type: "text",
           autoComplete: "address-line1",
           value: d.address1,
-          onChange: b("address1"),
-          onBlur: y("address1"),
+          onChange: h("address1"),
+          onBlur: b("address1"),
           maxLength: 50,
           disabled: u,
           $hasError: !!o("address1"),
@@ -432,7 +418,7 @@ const Te = ({
           "aria-describedby": o("address1") ? "err-address1" : void 0
         }
       ),
-      o("address1") && /* @__PURE__ */ s(g, { id: "err-address1", role: "alert", children: [
+      o("address1") && /* @__PURE__ */ s(v, { id: "err-address1", role: "alert", children: [
         /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
         f,
         " ",
@@ -440,34 +426,34 @@ const Te = ({
       ] })
     ] }),
     /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ a($, { htmlFor: "field-address2", children: "Address Line 2 (Optional)" }),
+      /* @__PURE__ */ a(y, { htmlFor: "field-address2", children: "Address Line 2 (Optional)" }),
       /* @__PURE__ */ a(
-        N,
+        C,
         {
           id: "field-address2",
           type: "text",
           autoComplete: "address-line2",
           value: d.address2,
-          onChange: b("address2"),
-          onBlur: y("address2"),
+          onChange: h("address2"),
+          onBlur: b("address2"),
           maxLength: 50,
           disabled: u,
           $hasError: !1
         }
       )
     ] }),
-    /* @__PURE__ */ s(M, { children: [
+    /* @__PURE__ */ s(_, { children: [
       /* @__PURE__ */ s(p, { children: [
-        /* @__PURE__ */ a($, { htmlFor: "field-city", $required: !0, children: "City" }),
+        /* @__PURE__ */ a(y, { htmlFor: "field-city", $required: !0, children: "City" }),
         /* @__PURE__ */ a(
-          N,
+          C,
           {
             id: "field-city",
             type: "text",
             autoComplete: "address-level2",
             value: d.city,
-            onChange: b("city"),
-            onBlur: y("city"),
+            onChange: h("city"),
+            onBlur: b("city"),
             maxLength: 30,
             disabled: u,
             $hasError: !!o("city"),
@@ -476,7 +462,7 @@ const Te = ({
             "aria-describedby": o("city") ? "err-city" : void 0
           }
         ),
-        o("city") && /* @__PURE__ */ s(g, { id: "err-city", role: "alert", children: [
+        o("city") && /* @__PURE__ */ s(v, { id: "err-city", role: "alert", children: [
           /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
           f,
           " ",
@@ -484,18 +470,18 @@ const Te = ({
         ] })
       ] }),
       /* @__PURE__ */ s(p, { children: [
-        /* @__PURE__ */ a($, { htmlFor: "field-postal", $required: !0, children: "Postal Code" }),
+        /* @__PURE__ */ a(y, { htmlFor: "field-postal", $required: !0, children: "Postal Code" }),
         /* @__PURE__ */ a(
-          N,
+          C,
           {
             id: "field-postal",
             type: "text",
             autoComplete: "postal-code",
-            inputMode: h.postalInputMode,
-            placeholder: h.postalExamples,
+            inputMode: $.postalInputMode,
+            placeholder: $.postalExamples,
             value: d.postal,
-            onChange: b("postal"),
-            onBlur: y("postal"),
+            onChange: h("postal"),
+            onBlur: b("postal"),
             maxLength: 10,
             disabled: u,
             $hasError: !!o("postal"),
@@ -504,7 +490,7 @@ const Te = ({
             "aria-describedby": o("postal") ? "err-postal" : void 0
           }
         ),
-        o("postal") && /* @__PURE__ */ s(g, { id: "err-postal", role: "alert", children: [
+        o("postal") && /* @__PURE__ */ s(v, { id: "err-postal", role: "alert", children: [
           /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
           f,
           " ",
@@ -513,17 +499,17 @@ const Te = ({
       ] })
     ] }),
     J && /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ a($, { htmlFor: "field-state", $required: h.stateRequired, children: "State / Province" }),
+      /* @__PURE__ */ a(y, { htmlFor: "field-state", $required: $.stateRequired, children: "State / Province" }),
       /* @__PURE__ */ s(
         O,
         {
           id: "field-state",
           value: d.state,
-          onChange: b("state"),
-          onBlur: y("state"),
+          onChange: h("state"),
+          onBlur: b("state"),
           disabled: u,
           $hasError: !!o("state"),
-          "aria-required": h.stateRequired,
+          "aria-required": $.stateRequired,
           "aria-invalid": !!o("state"),
           "aria-describedby": o("state") ? "err-state" : void 0,
           autoComplete: "address-level1",
@@ -533,7 +519,7 @@ const Te = ({
           ]
         }
       ),
-      o("state") && /* @__PURE__ */ s(g, { id: "err-state", role: "alert", children: [
+      o("state") && /* @__PURE__ */ s(v, { id: "err-state", role: "alert", children: [
         /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
         f,
         " ",
@@ -541,54 +527,41 @@ const Te = ({
       ] })
     ] }),
     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) ?? "",
-          " ",
-          h.dialCode
-        ] }),
-        /* @__PURE__ */ a(
-          N,
-          {
-            id: "field-phoneNumber",
-            type: "tel",
-            autoComplete: "tel",
-            value: d.phoneNumber,
-            onChange: b("phoneNumber"),
-            onBlur: y("phoneNumber"),
-            maxLength: 20,
-            disabled: u,
-            $hasError: !!o("phoneNumber"),
-            "aria-invalid": !!o("phoneNumber"),
-            "aria-describedby": o("phoneNumber") ? "err-phoneNumber" : void 0
-          }
-        )
-      ] }),
-      o("phoneNumber") && /* @__PURE__ */ s(g, { id: "err-phoneNumber", role: "alert", children: [
-        /* @__PURE__ */ a("span", { "aria-hidden": "true", children: "⚠" }),
-        f,
-        " ",
-        o("phoneNumber")
-      ] })
+      /* @__PURE__ */ a(y, { htmlFor: "field-phoneNumber", children: "Phone Number" }),
+      /* @__PURE__ */ a(
+        te,
+        {
+          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,
+          hasError: !!o("phoneNumber"),
+          errorMessage: o("phoneNumber") || void 0,
+          screenReaderErrorPrefix: f
+        }
+      )
     ] }),
-    /* @__PURE__ */ a(p, { children: /* @__PURE__ */ s(ie, { children: [
+    /* @__PURE__ */ a(p, { children: /* @__PURE__ */ s(ce, { children: [
       /* @__PURE__ */ a(
-        ce,
+        ue,
         {
           id: "field-defaultAddress",
           type: "checkbox",
           checked: d.defaultAddress,
-          onChange: b("defaultAddress"),
+          onChange: h("defaultAddress"),
           disabled: u
         }
       ),
-      /* @__PURE__ */ a(ue, { htmlFor: "field-defaultAddress", children: "Make this my default address." })
+      /* @__PURE__ */ a(pe, { htmlFor: "field-defaultAddress", children: "Make this my default address." })
     ] }) }),
-    /* @__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" }),
+    /* @__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"
       ] })
     ] })

package/dist/components/PhoneField/PhoneField.d.ts

@@ -0,0 +1,57 @@
+import { default as React } from 'react';
+export interface PhoneFieldProps {
+    /** Current phone number value (local number, without dial code) */
+    value: string;
+    /** Dial code to display as non-editable prefix (e.g. '+1', '+44') */
+    dialCode: string;
+    /** Flag emoji for the selected country (e.g. '🇺🇸') */
+    flagEmoji: string;
+    /** ISO 3166-1 alpha-2 code used for aria-label on the dial code prefix */
+    countryCode: string;
+    /** Called when the input value changes */
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Called when the input loses focus */
+    onBlur: () => void;
+    /** Disable all interaction */
+    disabled?: boolean;
+    /** Whether the field is in an error state (red border) */
+    hasError?: boolean;
+    /** Error message to render below the field */
+    errorMessage?: string;
+    /** Screen reader prefix prepended to error messages (GDS requirement) */
+    screenReaderErrorPrefix?: string;
+    /** id attribute for the underlying <input> — used for label association */
+    id?: string;
+}
+/**
+ * PhoneField — a phone number input with a non-interactive country dial code prefix.
+ *
+ * The dial code is derived from the country selected in the parent `AddressForm` and
+ * is read-only — the fan selects their country in the country dropdown, which updates
+ * the dial code automatically. The fan only types the local number portion here.
+ *
+ * Phone is optional — empty value does not trigger validation. Validation occurs on
+ * blur when the field is non-empty, using `validatePhoneNumber` (libphonenumber-js/max).
+ *
+ * Usage in AddressForm:
+ * ```tsx
+ * <PhoneField
+ *   id="field-phoneNumber"
+ *   value={values.phoneNumber}
+ *   dialCode={countryConfig.dialCode}
+ *   flagEmoji={flag}
+ *   countryCode={values.country}
+ *   onChange={handleChange('phoneNumber')}
+ *   onBlur={handleBlur('phoneNumber')}
+ *   disabled={isDisabled}
+ *   hasError={Boolean(getFieldError('phoneNumber'))}
+ *   errorMessage={getFieldError('phoneNumber')}
+ *   screenReaderErrorPrefix={screenReaderErrorPrefix}
+ * />
+ * ```
+ *
+ * TODO(GDS swap): Replace with GDS PhoneNumber component. The GDS PhoneNumber
+ * component provides built-in dial code selection integrated with the CountryPicker.
+ */
+export declare const PhoneField: React.FC<PhoneFieldProps>;
+export default PhoneField;