@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/phone-number/PhoneNumberInput.js

@@ -1,331 +1,214 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as J, useState as K, useRef as Q, useImperativeHandle as X } from "react";
-import { uyTv as Y } from "@payfit/unity-themes";
-import { useFilter as Z, Autocomplete as _ } from "react-aria-components/Autocomplete";
-import { Button as ee } from "react-aria-components/Button";
-import { Group as re } from "react-aria-components/Group";
-import { Input as te } from "react-aria-components/Input";
-import { ListBox as ae } from "react-aria-components/ListBox";
-import { Popover as oe } from "react-aria-components/Popover";
-import { Select as ue } from "react-aria-components/Select";
-import { Separator as de } from "react-aria-components/Separator";
-import { Virtualizer as ie, ListLayout as ne } from "react-aria-components/Virtualizer";
-import { defaultCountries as m, usePhoneInput as le, FlagImage as se, parseCountry as ye } from "react-international-phone";
-import { useIntl as ce } from "react-intl";
-import { CircularIconButton as me } from "../icon-button/CircularIconButton.js";
-import { Icon as f } from "../icon/Icon.js";
-import { Search as fe } from "../search/Search.js";
-import { PhoneNumberItem as be } from "./parts/PhoneNumberItem.js";
-import pe from "./unknownFlag.svg.js";
-const ge = Y({
-  slots: {
-    base: [
-      "uy:group",
-      // common
-      "uy:flex uy:w-full uy:border uy:border-border-form-enabled uy:bg-surface-form-enabled uy:border-solid uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
-      // common hover
-      'uy:data-[active="true"]:data-[hovered="true"]:border-border-form-hover uy:data-[active="true"]:data-[hovered="true"]:bg-surface-form-hover uy:data-[active="true"]:data-[hovered="true"]:text-content-form-hover',
-      // common pressed
-      'uy:data-[active="true"]:data-[pressed="true"]:border-border-form-pressed uy:data-[active="true"]:data-[pressed="true"]:bg-surface-form-pressed uy:data-[active="true"]:data-[pressed="true"]:text-content-form-pressed',
-      // common active
-      'uy:data-[active="true"]:border-border-form-active',
-      // common focus-visible
-      'uy:data-[focus-visible="true"]:outline-none uy:data-[focus-visible="true"]:ring-2 uy:data-[focus-visible="true"]:ring-utility-focus-ring uy:data-[focus-visible="true"]:ring-offset-2',
-      // common invalid
-      'uy:data-[invalid="true"]:border-border-form-error uy:data-[invalid="true"]:bg-surface-form-error uy:data-[invalid="true"]:text-content-form-danger-enabled',
-      // common disabled
-      'uy:data-[disabled="true"]:border-border-form-disabled uy:data-[disabled="true"]:bg-surface-form-disabled uy:data-[disabled="true"]:text-content-form-disabled uy:data-[disabled="true"]:cursor-not-allowed',
-      //mobile
-      "uy:h-5.5 uy:rounded-100",
-      // desktop
-      "uy:sm:h-500 uy:sm:rounded-75 "
-    ],
-    prefix: [
-      // common
-      "uy:border-r uy:border-solid uy:border-border-form-enabled uy:text-content-form-enabled uy:flex-grow-0 uy:pl-150 uy:pr-100   uy:group-data-[active=true]:border-border-form-active  uy:cursor-pointer",
-      // common invalid
-      'uy:group-data-[invalid="true"]:border-border-form-error',
-      // common disabled
-      'uy:group-data-[disabled="true"]:border-border-form-disabled uy:group-data-[disabled="true"]:text-content-form-disabled uy:data-[disabled="true"]:cursor-not-allowed',
-      //mobile
-      "uy:py-125",
-      // desktop
-      "uy:sm:py-100"
-    ],
-    inputWrapper: [
-      // common
-      "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:px-150 uy:max-w-full uy:justify-between",
-      // common invalid
-      'uy:group-data-[invalid="true"]:bg-surface-form-error',
-      // common disabled
-      'uy:group-data-[disabled="true"]:bg-surface-form-disabled uy:data-[disabled="true"]:cursor-not-allowed',
-      // mobile
-      "uy:py-125 uy:rounded-100",
-      // desktop
-      "uy:sm:py-100 uy:sm:rounded-75"
-    ],
-    input: [
-      // common
-      "uy:text-content-form-enabled uy:bg-surface-form-enabled uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full uy:min-h-300",
-      // common invalid
-      'uy:group-data-[invalid="true"]:bg-surface-form-error uy:group-data-[invalid="true"]:text-content-danger-enabled',
-      // common disabled
-      'uy:group-data-[disabled="true"]:bg-surface-form-disabled uy:group-data-[disabled="true"]:text-content-form-disabled uy:data-[disabled="true"]:cursor-not-allowed'
-    ],
-    state: [
-      // common
-      "uy:flex uy:gap-50 uy:items-center uy:shrink-0"
-    ],
-    selectIcon: [
-      //common
-      ""
-    ],
-    selectButton: [
-      //common
-      "uy:cursor-pointer uy:flex uy:gap-50 uy:items-center uy:outline-none",
-      // common disabled
-      'uy:data-[disabled="true"]:cursor-not-allowed'
-    ],
-    selectPopover: [
-      //common
-      "uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral-enabled uy:shadow-300",
-      // mobile
-      "uy:rounded-100",
-      // desktop
-      "uy:sm:rounded-75"
-    ],
-    selectListbox: [
-      //common
-      "uy:overflow-y-auto uy:overflow-x-hidden uy:max-h-[296px]"
-    ]
-  }
-}), he = J(
-  (b, p) => {
-    const i = ce(), {
-      onChange: g,
-      value: n,
-      defaultCountry: h = "unknown",
-      onClearButtonPress: v,
-      isInvalid: o = !1,
-      isDisabled: u = !1,
-      prefix: x = "+",
-      "aria-label": s,
-      defaultMask: w,
-      charAfterDialCode: C,
-      historySaveDebounceMS: N,
-      disableCountryGuess: I,
-      forceDialCode: P,
-      disableDialCodeAndPrefix: k,
-      disableFormatting: S,
-      searchInputAriaLabel: M,
-      ...B
-    } = b, [D, L] = K(!1), { contains: O } = Z({ sensitivity: "base" }), d = Q(null);
-    X(p, () => d.current, [d]);
-    const R = [["", "unknown", "", ""], ...m], {
-      inputRef: y,
-      inputValue: c,
-      handlePhoneValueChange: j,
-      country: t,
-      setCountry: A,
-      phone: F
-    } = le({
-      prefix: x,
-      defaultCountry: h,
-      value: n,
-      countries: R,
-      disableDialCodePrefill: !0,
-      defaultMask: w,
-      charAfterDialCode: C,
-      historySaveDebounceMS: N,
-      disableCountryGuess: I,
-      forceDialCode: P,
-      disableDialCodeAndPrefix: k,
-      disableFormatting: S,
-      onChange: (r) => {
-        g?.(t.iso2 === "unknown" ? "" : r.phone);
-      }
-    }), {
-      base: W,
-      prefix: $,
-      inputWrapper: V,
-      input: z,
-      selectPopover: G,
-      selectListbox: T,
-      selectIcon: U,
-      selectButton: E,
-      state: H
-    } = ge(), q = c.replace(F, "").trim() !== "" && !u;
-    return /* @__PURE__ */ e("div", { ref: d, children: /* @__PURE__ */ a(
-      re,
-      {
-        className: W(),
-        "aria-label": `${s}${n ? `, ${n}` : ""}`,
-        "aria-invalid": o,
-        "data-invalid": o,
-        "data-disabled": u,
-        "aria-disabled": u,
-        children: [
-          /* @__PURE__ */ a(
-            ue,
-            {
-              onOpenChange: (r) => {
-                L(r), r || setTimeout(() => {
-                  y.current?.focus();
-                }, 0);
-              },
-              isDisabled: u,
-              value: t.iso2,
-              onChange: (r) => {
-                A(r);
-              },
-              className: $(),
-              isInvalid: o,
-              children: [
-                /* @__PURE__ */ a(
-                  ee,
-                  {
-                    "data-dd-privacy": "mask",
-                    className: E(),
-                    "aria-label": i.formatMessage(
-                      {
-                        id: "unity:component:phone-number:country-selector:label",
-                        defaultMessage: "Select country code, {country} {dialCode}"
-                      },
-                      {
-                        country: t.name,
-                        dialCode: t.dialCode
-                      }
-                    ),
-                    children: [
-                      t.iso2 !== "unknown" ? /* @__PURE__ */ e(
-                        se,
-                        {
-                          iso2: t.iso2,
-                          alt: t.name,
-                          size: 24,
-                          "aria-hidden": "true",
-                          "data-dd-privacy": "mask"
-                        }
-                      ) : /* @__PURE__ */ e(
-                        "img",
-                        {
-                          "aria-hidden": "true",
-                          src: pe,
-                          alt: "",
-                          "data-dd-privacy": "mask",
-                          className: "react-international-phone-flag-emoji",
-                          width: 24,
-                          height: 24
-                        }
-                      ),
-                      /* @__PURE__ */ e(
-                        f,
-                        {
-                          className: U(),
-                          "aria-hidden": "true",
-                          src: D ? "CaretUpOutlined" : "CaretDownOutlined"
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  oe,
-                  {
-                    style: {
-                      "--trigger-width": `${d.current?.offsetWidth}px`
-                    },
-                    triggerRef: d,
-                    offset: 1,
-                    containerPadding: 8,
-                    className: G(),
-                    children: /* @__PURE__ */ a(_, { filter: O, children: [
-                      /* @__PURE__ */ e("div", { className: "uy:m-100", children: /* @__PURE__ */ e(fe, { label: M, "data-dd-privacy": "mask" }) }),
-                      /* @__PURE__ */ e(de, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
-                      /* @__PURE__ */ e(
-                        ie,
-                        {
-                          layout: ne,
-                          layoutOptions: {
-                            padding: 8
-                          },
-                          children: /* @__PURE__ */ e(
-                            ae,
-                            {
-                              className: T(),
-                              items: m,
-                              children: (r) => {
-                                const l = ye(r);
-                                return /* @__PURE__ */ e(
-                                  be,
-                                  {
-                                    country: l,
-                                    id: l.iso2
-                                  },
-                                  l.iso2
-                                );
-                              }
-                            }
-                          )
-                        }
-                      )
-                    ] })
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ a("div", { className: V(), children: [
-            /* @__PURE__ */ e(
-              te,
-              {
-                ref: y,
-                ...B,
-                className: z(),
-                type: "tel",
-                onChange: j,
-                value: c,
-                "data-dd-privacy": "mask",
-                "aria-invalid": o,
-                disabled: u,
-                "aria-label": s
-              }
-            ),
-            /* @__PURE__ */ a("div", { className: H(), children: [
-              o && /* @__PURE__ */ e(
-                f,
-                {
-                  src: "WarningCircleOutlined",
-                  color: "content.form.invalid",
-                  role: "img",
-                  "aria-label": i.formatMessage({
-                    id: "unity:component:form-field:form-input:error:alt",
-                    defaultMessage: "Error"
-                  })
-                }
-              ),
-              q && /* @__PURE__ */ e(
-                me,
-                {
-                  title: i.formatMessage({
-                    id: "unity:component:common:clear:title",
-                    defaultMessage: "Clear"
-                  }),
-                  color: "content.neutral.low",
-                  icon: "CloseOutlined",
-                  onPress: () => {
-                    v?.();
-                  }
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    ) });
-  }
-);
-he.displayName = "PhoneNumberInput";
-export {
-  he as PhoneNumberInput
-};
+import { Icon as e } from "../icon/Icon.js";
+import { CircularIconButton as t } from "../icon-button/CircularIconButton.js";
+import { Search as n } from "../search/Search.js";
+import { PhoneNumberItem as r } from "./parts/PhoneNumberItem.js";
+import i from "./unknownFlag.js";
+import { forwardRef as a, useImperativeHandle as o, useRef as s, useState as c } from "react";
+import { uyTv as l } from "@payfit/unity-themes";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Group as f } from "react-aria-components/Group";
+import { useIntl as p } from "react-intl";
+import { Button as m } from "react-aria-components/Button";
+import { Separator as h } from "react-aria-components/Separator";
+import { ListBox as g } from "react-aria-components/ListBox";
+import { Popover as _ } from "react-aria-components/Popover";
+import { Input as v } from "react-aria-components/Input";
+import { Autocomplete as y, useFilter as b } from "react-aria-components/Autocomplete";
+import { Select as x } from "react-aria-components/Select";
+import { ListLayout as S, Virtualizer as C } from "react-aria-components/Virtualizer";
+import { FlagImage as w, defaultCountries as T, parseCountry as E, usePhoneInput as D } from "react-international-phone";
+//#region src/components/phone-number/PhoneNumberInput.tsx
+var O = l({ slots: {
+	base: [
+		"uy:group",
+		"uy:flex uy:w-full uy:border uy:border-border-form-enabled uy:bg-surface-form-enabled uy:border-solid uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
+		"uy:data-[active=\"true\"]:data-[hovered=\"true\"]:border-border-form-hover uy:data-[active=\"true\"]:data-[hovered=\"true\"]:bg-surface-form-hover uy:data-[active=\"true\"]:data-[hovered=\"true\"]:text-content-form-hover",
+		"uy:data-[active=\"true\"]:data-[pressed=\"true\"]:border-border-form-pressed uy:data-[active=\"true\"]:data-[pressed=\"true\"]:bg-surface-form-pressed uy:data-[active=\"true\"]:data-[pressed=\"true\"]:text-content-form-pressed",
+		"uy:data-[active=\"true\"]:border-border-form-active",
+		"uy:data-[focus-visible=\"true\"]:outline-none uy:data-[focus-visible=\"true\"]:ring-2 uy:data-[focus-visible=\"true\"]:ring-utility-focus-ring uy:data-[focus-visible=\"true\"]:ring-offset-2",
+		"uy:data-[invalid=\"true\"]:border-border-form-error uy:data-[invalid=\"true\"]:bg-surface-form-error uy:data-[invalid=\"true\"]:text-content-form-danger-enabled",
+		"uy:data-[disabled=\"true\"]:border-border-form-disabled uy:data-[disabled=\"true\"]:bg-surface-form-disabled uy:data-[disabled=\"true\"]:text-content-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed",
+		"uy:h-5.5 uy:rounded-100",
+		"uy:sm:h-500 uy:sm:rounded-75 "
+	],
+	prefix: [
+		"uy:border-r uy:border-solid uy:border-border-form-enabled uy:text-content-form-enabled uy:flex-grow-0 uy:pl-150 uy:pr-100   uy:group-data-[active=true]:border-border-form-active  uy:cursor-pointer",
+		"uy:group-data-[invalid=\"true\"]:border-border-form-error",
+		"uy:group-data-[disabled=\"true\"]:border-border-form-disabled uy:group-data-[disabled=\"true\"]:text-content-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed",
+		"uy:py-125",
+		"uy:sm:py-100"
+	],
+	inputWrapper: [
+		"uy:border-border-form-enabled uy:bg-surface-form-enabled uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:px-150 uy:max-w-full uy:justify-between",
+		"uy:group-data-[invalid=\"true\"]:bg-surface-form-error",
+		"uy:group-data-[disabled=\"true\"]:bg-surface-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed",
+		"uy:py-125 uy:rounded-100",
+		"uy:sm:py-100 uy:sm:rounded-75"
+	],
+	input: [
+		"uy:text-content-form-enabled uy:bg-surface-form-enabled uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full uy:min-h-300",
+		"uy:group-data-[invalid=\"true\"]:bg-surface-form-error uy:group-data-[invalid=\"true\"]:text-content-danger-enabled",
+		"uy:group-data-[disabled=\"true\"]:bg-surface-form-disabled uy:group-data-[disabled=\"true\"]:text-content-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed"
+	],
+	state: ["uy:flex uy:gap-50 uy:items-center uy:shrink-0"],
+	selectIcon: [""],
+	selectButton: ["uy:cursor-pointer uy:flex uy:gap-50 uy:items-center uy:outline-none", "uy:data-[disabled=\"true\"]:cursor-not-allowed"],
+	selectPopover: [
+		"uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral-enabled uy:shadow-300",
+		"uy:rounded-100",
+		"uy:sm:rounded-75"
+	],
+	selectListbox: ["uy:overflow-y-auto uy:overflow-x-hidden uy:max-h-[296px]"]
+} }), k = a((a, l) => {
+	let k = p(), { onChange: A, value: j, defaultCountry: M = "unknown", onClearButtonPress: N, isInvalid: P = !1, isDisabled: F = !1, prefix: I = "+", "aria-label": L, defaultMask: R, charAfterDialCode: z, historySaveDebounceMS: B, disableCountryGuess: ee, forceDialCode: V, disableDialCodeAndPrefix: H, disableFormatting: U, searchInputAriaLabel: W, ...G } = a, [K, q] = c(!1), { contains: J } = b({ sensitivity: "base" }), Y = s(null);
+	o(l, () => Y.current, [Y]);
+	let { inputRef: X, inputValue: Z, handlePhoneValueChange: Q, country: $, setCountry: te, phone: ne } = D({
+		prefix: I,
+		defaultCountry: M,
+		value: j,
+		countries: [[
+			"",
+			"unknown",
+			"",
+			""
+		], ...T],
+		disableDialCodePrefill: !0,
+		defaultMask: R,
+		charAfterDialCode: z,
+		historySaveDebounceMS: B,
+		disableCountryGuess: ee,
+		forceDialCode: V,
+		disableDialCodeAndPrefix: H,
+		disableFormatting: U,
+		onChange: (e) => {
+			A?.($.iso2 === "unknown" ? "" : e.phone);
+		}
+	}), { base: re, prefix: ie, inputWrapper: ae, input: oe, selectPopover: se, selectListbox: ce, selectIcon: le, selectButton: ue, state: de } = O(), fe = Z.replace(ne, "").trim() !== "" && !F;
+	return /* @__PURE__ */ u("div", {
+		ref: Y,
+		children: /* @__PURE__ */ d(f, {
+			className: re(),
+			"aria-label": `${L}${j ? `, ${j}` : ""}`,
+			"aria-invalid": P,
+			"data-invalid": P,
+			"data-disabled": F,
+			"aria-disabled": F,
+			children: [/* @__PURE__ */ d(x, {
+				onOpenChange: (e) => {
+					q(e), e || setTimeout(() => {
+						X.current?.focus();
+					}, 0);
+				},
+				isDisabled: F,
+				value: $.iso2,
+				onChange: (e) => {
+					te(e);
+				},
+				className: ie(),
+				isInvalid: P,
+				children: [/* @__PURE__ */ d(m, {
+					"data-dd-privacy": "mask",
+					className: ue(),
+					"aria-label": k.formatMessage({
+						id: "unity:component:phone-number:country-selector:label",
+						defaultMessage: "Select country code, {country} {dialCode}"
+					}, {
+						country: $.name,
+						dialCode: $.dialCode
+					}),
+					children: [$.iso2 === "unknown" ? /* @__PURE__ */ u("img", {
+						"aria-hidden": "true",
+						src: i,
+						alt: "",
+						"data-dd-privacy": "mask",
+						className: "react-international-phone-flag-emoji",
+						width: 24,
+						height: 24
+					}) : /* @__PURE__ */ u(w, {
+						iso2: $.iso2,
+						alt: $.name,
+						size: 24,
+						"aria-hidden": "true",
+						"data-dd-privacy": "mask"
+					}), /* @__PURE__ */ u(e, {
+						className: le(),
+						"aria-hidden": "true",
+						src: K ? "CaretUpOutlined" : "CaretDownOutlined"
+					})]
+				}), /* @__PURE__ */ u(_, {
+					style: { "--trigger-width": `${Y.current?.offsetWidth}px` },
+					triggerRef: Y,
+					offset: 1,
+					containerPadding: 8,
+					className: se(),
+					children: /* @__PURE__ */ d(y, {
+						filter: J,
+						children: [
+							/* @__PURE__ */ u("div", {
+								className: "uy:m-100",
+								children: /* @__PURE__ */ u(n, {
+									label: W,
+									"data-dd-privacy": "mask"
+								})
+							}),
+							/* @__PURE__ */ u(h, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
+							/* @__PURE__ */ u(C, {
+								layout: S,
+								layoutOptions: { padding: 8 },
+								children: /* @__PURE__ */ u(g, {
+									className: ce(),
+									items: T,
+									children: (e) => {
+										let t = E(e);
+										return /* @__PURE__ */ u(r, {
+											country: t,
+											id: t.iso2
+										}, t.iso2);
+									}
+								})
+							})
+						]
+					})
+				})]
+			}), /* @__PURE__ */ d("div", {
+				className: ae(),
+				children: [/* @__PURE__ */ u(v, {
+					ref: X,
+					...G,
+					className: oe(),
+					type: "tel",
+					onChange: Q,
+					value: Z,
+					"data-dd-privacy": "mask",
+					"aria-invalid": P,
+					disabled: F,
+					"aria-label": L
+				}), /* @__PURE__ */ d("div", {
+					className: de(),
+					children: [P && /* @__PURE__ */ u(e, {
+						src: "WarningCircleOutlined",
+						color: "content.form.invalid",
+						role: "img",
+						"aria-label": k.formatMessage({
+							id: "unity:component:form-field:form-input:error:alt",
+							defaultMessage: "Error"
+						})
+					}), fe && /* @__PURE__ */ u(t, {
+						title: k.formatMessage({
+							id: "unity:component:common:clear:title",
+							defaultMessage: "Clear"
+						}),
+						color: "content.neutral.low",
+						icon: "CloseOutlined",
+						onPress: () => {
+							N?.();
+						}
+					})]
+				})]
+			})]
+		})
+	});
+});
+k.displayName = "PhoneNumberInput";
+//#endregion
+export { k as PhoneNumberInput };

package/dist/esm/components/phone-number/TanstackPhoneNumberInput.js

@@ -1,33 +1,30 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as b } from "../form-field/TanstackFormField.context.js";
-import { PhoneNumberInput as h } from "./PhoneNumberInput.js";
-const C = c(({ onChange: r, onBlur: n, onClearButtonPress: i, isDisabled: l, ...s }, d) => {
-  const e = f(), t = b(), m = e.state.meta.isTouched && !e.state.meta.isValid, o = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
-  return /* @__PURE__ */ u(
-    h,
-    {
-      ref: d,
-      ...s,
-      value: e.state.value ?? "",
-      onChange: (a) => {
-        e.handleChange(a), r?.(a);
-      },
-      onBlur: (a) => {
-        e.handleBlur(), n?.(a);
-      },
-      onClearButtonPress: () => {
-        e.setValue(""), i?.();
-      },
-      isDisabled: l,
-      isInvalid: m,
-      "aria-labelledby": t.labelId,
-      "aria-describedby": o.length > 0 ? o : void 0,
-      "aria-details": t.contextualLinkId
-    }
-  );
+import { PhoneNumberInput as e } from "./PhoneNumberInput.js";
+import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/phone-number/TanstackPhoneNumberInput.tsx
+var a = r(({ onChange: r, onBlur: a, onClearButtonPress: o, isDisabled: s, ...c }, l) => {
+	let u = t(), d = n(), f = u.state.meta.isTouched && !u.state.meta.isValid, p = [d.helperTextId, d.feedbackTextId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i(e, {
+		ref: l,
+		...c,
+		value: u.state.value ?? "",
+		onChange: (e) => {
+			u.handleChange(e), r?.(e);
+		},
+		onBlur: (e) => {
+			u.handleBlur(), a?.(e);
+		},
+		onClearButtonPress: () => {
+			u.setValue(""), o?.();
+		},
+		isDisabled: s,
+		isInvalid: f,
+		"aria-labelledby": d.labelId,
+		"aria-describedby": p.length > 0 ? p : void 0,
+		"aria-details": d.contextualLinkId
+	});
 });
-export {
-  C as TanstackPhoneNumberInput
-};
+//#endregion
+export { a as TanstackPhoneNumberInput };