@ticketmaster/tm-global-address 0.5.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;

package/dist/components/PhoneField/PhoneField.js

@@ -0,0 +1,119 @@
+import { jsxs as r, jsx as c } from "react/jsx-runtime";
+import e from "styled-components";
+import { tokens as o } from "../../styles/tokens.js";
+const f = e.div`
+  display: flex;
+  gap: ${o.space2};
+  align-items: flex-start;
+`, m = e.div`
+  display: flex;
+  align-items: center;
+  gap: ${o.space1};
+  padding: ${o.space2} ${o.space3};
+  background: ${o.colorSurfaceSecondary};
+  border: ${o.borderWidthInput} solid ${o.colorBorderInput};
+  border-radius: ${o.borderRadiusInput};
+  font-size: ${o.fontSizeBody};
+  color: ${o.colorTextPrimary};
+  white-space: nowrap;
+  flex-shrink: 0;
+  /* Align vertically with the input */
+  height: fit-content;
+`, x = e.input`
+  flex: 1;
+  width: 100%;
+  padding: ${o.space2} ${o.space3};
+  font-size: ${o.fontSizeInput};
+  font-family: ${o.fontFamily};
+  color: ${o.colorTextPrimary};
+  background: ${o.colorSurfacePrimary};
+  border: ${o.borderWidthInput} solid
+    ${(t) => t.$hasError ? o.colorBorderInputError : o.colorBorderInput};
+  border-radius: ${o.borderRadiusInput};
+  box-sizing: border-box;
+  transition: border-color ${o.transitionFast};
+
+  &::placeholder {
+    color: ${o.colorTextPlaceholder};
+  }
+
+  &:hover:not(:disabled) {
+    border-color: ${o.colorBorderInputFocus};
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${o.colorBorderInputFocus};
+    box-shadow: 0 0 0 ${o.borderWidthInputFocus} ${o.colorBorderInputFocus};
+  }
+
+  &:disabled {
+    background: ${o.colorSurfaceDisabled};
+    color: ${o.colorTextDisabled};
+    border-color: ${o.colorBorderInputDisabled};
+    cursor: not-allowed;
+  }
+`, g = e.p`
+  margin: ${o.space1} 0 0;
+  font-size: ${o.fontSizeError};
+  color: ${o.colorTextError};
+  display: flex;
+  align-items: center;
+  gap: ${o.space1};
+`, v = ({
+  value: t,
+  dialCode: i,
+  flagEmoji: s,
+  countryCode: p,
+  onChange: u,
+  onBlur: $,
+  disabled: b = !1,
+  hasError: a = !1,
+  errorMessage: d,
+  screenReaderErrorPrefix: h,
+  id: l = "field-phoneNumber"
+}) => {
+  const n = `${l}-error`;
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ r(f, { children: [
+      i && /* @__PURE__ */ r(
+        m,
+        {
+          "aria-label": `Dial code ${i}`,
+          "data-testid": `dial-code-${p}`,
+          children: [
+            s,
+            " ",
+            i
+          ]
+        }
+      ),
+      /* @__PURE__ */ c(
+        x,
+        {
+          id: l,
+          type: "tel",
+          autoComplete: "tel",
+          value: t,
+          onChange: u,
+          onBlur: $,
+          maxLength: 20,
+          disabled: b,
+          $hasError: a,
+          "aria-invalid": a,
+          "aria-describedby": d ? n : void 0,
+          "data-testid": "phone-input"
+        }
+      )
+    ] }),
+    d && /* @__PURE__ */ r(g, { id: n, role: "alert", children: [
+      /* @__PURE__ */ c("span", { "aria-hidden": "true", children: "⚠" }),
+      h,
+      " ",
+      d
+    ] })
+  ] });
+};
+export {
+  v as PhoneField
+};

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { GlobalAddress } from './components/GlobalAddress/GlobalAddress';
 export { AddressForm } from './components/AddressForm/AddressForm';
 export type { AddressFormProps } from './components/AddressForm/AddressForm';
+export { PhoneField } from './components/PhoneField/PhoneField';
+export type { PhoneFieldProps } from './components/PhoneField/PhoneField';
 export { AddressCard, formatAddressSummary } from './components/AddressCard/AddressCard';
 export type { AddressCardProps } from './components/AddressCard/AddressCard';
 export { AddressSummary } from './components/AddressSummary/AddressSummary';

package/dist/index.js

@@ -1,45 +1,47 @@
 import { GlobalAddress as e } from "./components/GlobalAddress/GlobalAddress.js";
 import { AddressForm as m } from "./components/AddressForm/AddressForm.js";
-import { AddressCard as a, formatAddressSummary as f } from "./components/AddressCard/AddressCard.js";
-import { AddressSummary as p } from "./components/AddressSummary/AddressSummary.js";
-import { AddressList as S } from "./components/AddressList/AddressList.js";
-import { COUNTRIES as l, getCountryByCode as C } from "./data/countries.js";
-import { SUBDIVISIONS as N, getSubdivisions as A } from "./data/states.js";
-import { POSTAL_PATTERNS as I, getPostalPattern as n } from "./data/postalPatterns.js";
-import { STATE_REQUIRED_CODES as E } from "./data/countryConfig.js";
-import { COUNTRY_CONFIGS as R, COUNTRY_OPTIONS as g, getCountryConfig as v, getCountryName as y } from "./data/countryData.js";
-import { FIELD_CONSTRAINTS as F } from "./validation/constants.js";
-import { HelloWorld as D } from "./components/HelloWorld/HelloWorld.js";
-import { sanitize as L } from "./validation/sanitize.js";
-import { validateForm as G } from "./validation/validateForm.js";
-import { validatePhoneNumber as h } from "./validation/validatePhoneNumber.js";
-import { validatePostalCode as H } from "./validation/validatePostalCode.js";
-import { validateState as V } from "./validation/validateState.js";
-import { validateTextField as c } from "./validation/validateTextField.js";
+import { PhoneField as a } from "./components/PhoneField/PhoneField.js";
+import { AddressCard as x, formatAddressSummary as p } from "./components/AddressCard/AddressCard.js";
+import { AddressSummary as S } from "./components/AddressSummary/AddressSummary.js";
+import { AddressList as l } from "./components/AddressList/AddressList.js";
+import { COUNTRIES as T, getCountryByCode as N } from "./data/countries.js";
+import { SUBDIVISIONS as O, getSubdivisions as n } from "./data/states.js";
+import { POSTAL_PATTERNS as P, getPostalPattern as u } from "./data/postalPatterns.js";
+import { STATE_REQUIRED_CODES as R } from "./data/countryConfig.js";
+import { COUNTRY_CONFIGS as v, COUNTRY_OPTIONS as y, getCountryConfig as F, getCountryName as _ } from "./data/countryData.js";
+import { FIELD_CONSTRAINTS as D } from "./validation/constants.js";
+import { HelloWorld as L } from "./components/HelloWorld/HelloWorld.js";
+import { sanitize as B } from "./validation/sanitize.js";
+import { validateForm as Y } from "./validation/validateForm.js";
+import { validatePhoneNumber as H } from "./validation/validatePhoneNumber.js";
+import { validatePostalCode as V } from "./validation/validatePostalCode.js";
+import { validateState as c } from "./validation/validateState.js";
+import { validateTextField as k } from "./validation/validateTextField.js";
 export {
-  a as AddressCard,
+  x as AddressCard,
   m as AddressForm,
-  S as AddressList,
-  p as AddressSummary,
-  l as COUNTRIES,
-  R as COUNTRY_CONFIGS,
-  g as COUNTRY_OPTIONS,
-  F as FIELD_CONSTRAINTS,
+  l as AddressList,
+  S as AddressSummary,
+  T as COUNTRIES,
+  v as COUNTRY_CONFIGS,
+  y as COUNTRY_OPTIONS,
+  D as FIELD_CONSTRAINTS,
   e as GlobalAddress,
-  D as HelloWorld,
-  I as POSTAL_PATTERNS,
-  E as STATE_REQUIRED_CODES,
-  N as SUBDIVISIONS,
-  f as formatAddressSummary,
-  C as getCountryByCode,
-  v as getCountryConfig,
-  y as getCountryName,
-  n as getPostalPattern,
-  A as getSubdivisions,
-  L as sanitize,
-  G as validateForm,
-  h as validatePhoneNumber,
-  H as validatePostalCode,
-  V as validateState,
-  c as validateTextField
+  L as HelloWorld,
+  P as POSTAL_PATTERNS,
+  a as PhoneField,
+  R as STATE_REQUIRED_CODES,
+  O as SUBDIVISIONS,
+  p as formatAddressSummary,
+  N as getCountryByCode,
+  F as getCountryConfig,
+  _ as getCountryName,
+  u as getPostalPattern,
+  n as getSubdivisions,
+  B as sanitize,
+  Y as validateForm,
+  H as validatePhoneNumber,
+  V as validatePostalCode,
+  c as validateState,
+  k as validateTextField
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketmaster/tm-global-address",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Shared React UI Library for Global Address Management",
   "main": "dist/index.js",
   "module": "dist/index.js",