@coinbase/cdp-react 0.0.18 → 0.0.20

package/dist/components/SignInModal/index.js

@@ -1,50 +1,62 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { Dialog as m, DialogTrigger as g, DialogPortal as _, DialogOverlay as d, DialogContent as c, DialogClose as p, DialogTitle as I, DialogDescription as u } from "@radix-ui/react-dialog";
+import { jsxs as o, jsx as n, Fragment as m } from "react/jsx-runtime";
 import "react";
-import { IconXMark as h } from "../../icons/IconXMark.js";
-import { Button as e } from "../Button/index.js";
-import { SignIn as S } from "../SignIn/index.js";
-import "@coinbase/cdp-hooks";
-import { useTheme as f } from "../ThemeProvider/index.js";
-import { SignInImage as M } from "../SignIn/SignInImage.js";
-import { SignInTitle as D } from "../SignIn/SignInTitle.js";
-import { SignInDescription as v } from "../SignIn/SignInDescription.js";
-import { SignInForm as N } from "../SignIn/SignInForm.js";
-import '../../assets/SignInModal.css';const y = "SignInModal-module__trigger___IcJ8x", C = "SignInModal-module__modal___PErrT", x = "SignInModal-module__overlay___-0rmi", b = "SignInModal-module__spacer___x-lRH", n = {
-  trigger: y,
-  modal: C,
+import { useAppConfig as f } from "../CDPReactProvider/index.js";
+import { SignIn as u } from "../SignIn/index.js";
+import { Button as c } from "../ui/Button/index.js";
+import { Modal as I, ModalTrigger as S, ModalContent as M, ModalClose as b, ModalTitle as v, ModalDescription as C } from "../ui/Modal/index.js";
+import { VisuallyHidden as t } from "../ui/VisuallyHidden/index.js";
+import { IconXMark as N } from "../../icons/IconXMark.js";
+import { SignInBackButton as k } from "../SignIn/SignInBackButton.js";
+import { SignInImage as x } from "../SignIn/SignInImage.js";
+import { SignInForm as B } from "../SignIn/SignInForm.js";
+import { SignInTitle as l } from "../SignIn/SignInTitle.js";
+import { SignInDescription as a } from "../SignIn/SignInDescription.js";
+import { SignInAuthMethodButtons as w } from "../SignIn/SignInAuthMethodButtons.js";
+import { SignInFooter as y } from "../SignIn/SignInFooter.js";
+import '../../assets/SignInModal.css';const D = "SignInModal-module__trigger___IcJ8x", F = "SignInModal-module__footer___6qEo2", T = "SignInModal-module__buttons___jhaVn", i = {
+  trigger: D,
   "sign-in": "SignInModal-module__sign-in___n05-5",
-  "sign-in-image": "SignInModal-module__sign-in-image___DGg7B",
-  "sign-in-title": "SignInModal-module__sign-in-title___cju2s",
-  "sign-in-description": "SignInModal-module__sign-in-description___-Oi9q",
+  "no-footer": "SignInModal-module__no-footer___meSt1",
+  "title-desc-wrapper": "SignInModal-module__title-desc-wrapper___--XLa",
   "sign-in-form": "SignInModal-module__sign-in-form___Jzx1-",
-  "close-button": "SignInModal-module__close-button___k1I5Q",
-  overlay: x,
-  spacer: b
-}, H = ({ children: l, open: a, setIsOpen: s, onSuccess: r }) => {
-  const { cssVariables: t } = f();
-  return /* @__PURE__ */ o(m, { open: a, onOpenChange: s, children: [
-    /* @__PURE__ */ i(g, { asChild: !0, children: l || /* @__PURE__ */ i(e, { variant: "primary", className: n.trigger, children: "Sign In" }) }),
-    /* @__PURE__ */ i(_, { children: /* @__PURE__ */ o(d, { className: n.overlay, style: t, children: [
-      /* @__PURE__ */ i("div", { className: n.spacer }),
-      /* @__PURE__ */ i(c, { className: n.modal, children: /* @__PURE__ */ o(S, { onSuccess: r, className: n["sign-in"], children: [
-        /* @__PURE__ */ i(p, { asChild: !0, children: /* @__PURE__ */ i(
-          e,
-          {
-            "aria-label": "Close",
-            variant: "transparentSecondary",
-            className: `${n["close-button"]}`,
-            children: /* @__PURE__ */ i(h, {})
-          }
-        ) }),
-        /* @__PURE__ */ i("div", { className: n["sign-in-image"], children: /* @__PURE__ */ i(M, {}) }),
-        /* @__PURE__ */ i("div", { className: n["sign-in-title"], children: /* @__PURE__ */ i(I, { asChild: !0, children: /* @__PURE__ */ i(D, {}) }) }),
-        /* @__PURE__ */ i(u, { asChild: !0, children: /* @__PURE__ */ i(v, { className: n["sign-in-description"] }) }),
-        /* @__PURE__ */ i(N, { className: n["sign-in-form"], onSuccess: r })
-      ] }) })
-    ] }) })
+  "sign-in-image": "SignInModal-module__sign-in-image___DGg7B",
+  footer: F,
+  buttons: T,
+  "back-button": "SignInModal-module__back-button___nMh2-",
+  "close-icon": "SignInModal-module__close-icon___b-gMh"
+}, R = ({ children: _, open: g, setIsOpen: p, onSuccess: s }) => {
+  const { showCoinbaseFooter: d } = f();
+  return /* @__PURE__ */ o(I, { open: g, onOpenChange: p, children: [
+    /* @__PURE__ */ n(S, { asChild: !0, children: _ || /* @__PURE__ */ n(c, { variant: "primary", className: i.trigger, children: "Sign in" }) }),
+    /* @__PURE__ */ n(M, { children: /* @__PURE__ */ n(
+      u,
+      {
+        onSuccess: s,
+        className: `${i["sign-in"]} ${d ? "" : i["no-footer"]}`,
+        children: /* @__PURE__ */ o(m, { children: [
+          /* @__PURE__ */ n(j, {}),
+          /* @__PURE__ */ o("div", { className: i.buttons, children: [
+            /* @__PURE__ */ n(k, { className: i["back-button"] }),
+            /* @__PURE__ */ n(b, { asChild: !0, children: /* @__PURE__ */ n(c, { "aria-label": "Close", size: "md", variant: "transparentSecondary", children: /* @__PURE__ */ n(N, { className: i["close-icon"] }) }) })
+          ] }),
+          /* @__PURE__ */ n("div", { className: i["sign-in-image"], children: /* @__PURE__ */ n(x, {}) }),
+          /* @__PURE__ */ n(B, { onSuccess: s, children: ({ authMethod: r, step: e, Form: h }) => /* @__PURE__ */ o(m, { children: [
+            /* @__PURE__ */ o("div", { className: i["title-desc-wrapper"], children: [
+              e === "verification" ? /* @__PURE__ */ n(t, { as: "div", children: /* @__PURE__ */ n(l, {}) }) : /* @__PURE__ */ n(l, {}),
+              e === "credentials" ? /* @__PURE__ */ n(t, { as: "div", children: /* @__PURE__ */ n(a, { authMethod: r }) }) : /* @__PURE__ */ n(a, { authMethod: r })
+            ] }),
+            /* @__PURE__ */ n("div", { className: i["sign-in-form"], children: h }),
+            e === "credentials" && /* @__PURE__ */ n(w, { activeMethod: r })
+          ] }) }),
+          d && /* @__PURE__ */ n(y, { className: i.footer })
+        ] })
+      }
+    ) })
   ] });
-};
+}, j = () => /* @__PURE__ */ o(t, { children: [
+  /* @__PURE__ */ n(v, { asChild: !0, children: /* @__PURE__ */ n(l, { as: "span" }) }),
+  /* @__PURE__ */ n(C, { asChild: !0, children: /* @__PURE__ */ n(a, { as: "span" }) })
+] });
 export {
-  H as SignInModal
+  R as SignInModal
 };

package/dist/components/SignOutButton/index.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { useSignOut as r } from "@coinbase/cdp-hooks";
 import "react";
-import { Button as m } from "../Button/index.js";
+import { Button as m } from "../ui/Button/index.js";
 import "../../theme/theme.js";
 import '../../assets/SignOutButton.css';const e = {
   "sign-out-button": "SignOutButton-module__sign-out-button___qiybe"

package/dist/components/ThemeProvider/index.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { createContext as p, useMemo as s, useContext as u } from "react";
+import { createContext as p, useContext as u, useMemo as s } from "react";
 import { theme as n } from "../../theme/theme.js";
 import { themeToCssVariables as l } from "../../theme/utils.js";
 import '../../assets/ThemeProvider.css';const w = "ThemeProvider-module__wrapper___aXwhZ", d = {

package/dist/components/forms/EmailForm/index.d.ts

@@ -0,0 +1,11 @@
+import { APIError } from '@coinbase/cdp-hooks';
+import { FormHTMLAttributes } from 'react';
+export interface EmailFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
+    email?: string;
+    error?: string | APIError;
+    isPending?: boolean;
+    onClearServerErrors?: () => void;
+    onEmailChange?: (value: string) => void;
+    submitLabel?: string;
+}
+export declare const EmailForm: ({ className, email, error, onEmailChange, isPending, submitLabel, ...props }: EmailFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/EmailForm/index.js

@@ -0,0 +1,56 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import "@coinbase/cdp-hooks";
+import { Form as c, FormSubmit as v } from "@radix-ui/react-form";
+import "react";
+import { Field as f } from "../Field/index.js";
+import { withValidityState as h } from "../Input/index.js";
+import { Button as _ } from "../../ui/Button/index.js";
+import { ServerError as E } from "../../ui/ServerError/index.js";
+import { isEmailInvalid as F } from "../../../utils/isEmailInvalid.js";
+import '../../../assets/EmailForm.css';const x = "EmailForm-module__form___L0wVX", o = {
+  form: x,
+  "server-error": "EmailForm-module__server-error___0TSPx"
+}, N = ({
+  className: a = "",
+  email: t,
+  error: e,
+  onEmailChange: m,
+  isPending: l,
+  submitLabel: s = "Continue",
+  ...d
+}) => {
+  const i = {
+    autoComplete: "email",
+    type: "email",
+    placeholder: "name@example.com",
+    required: !0
+  }, n = (p) => {
+    m?.(p.target.value?.trim());
+  };
+  return /* @__PURE__ */ u(c, { className: `${o.form} ${a}`, ...d, children: [
+    /* @__PURE__ */ r(
+      f,
+      {
+        label: "Email address",
+        name: "email",
+        validators: [
+          ["valueMissing", "Email is required"],
+          ["typeMismatch", "Use a valid email address"],
+          [F, "Use a valid email address"]
+        ],
+        children: h(
+          m !== void 0 ? {
+            ...i,
+            value: t,
+            onChange: n
+          } : i
+        )
+      }
+    ),
+    e && /* @__PURE__ */ r(E, { error: e, className: o["server-error"] }),
+    /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ r(_, { type: "submit", isPending: l, children: s }) })
+  ] });
+};
+export {
+  N as EmailForm
+};

package/dist/components/{Field → forms/Field}/index.d.ts

@@ -3,9 +3,10 @@ import { CSSProperties, JSX, ReactNode } from 'react';
 export interface FormFieldProps {
     children?: FormValidityStateProps["children"];
     className?: string;
+    inlineError?: string;
     label: string;
     name: string;
     style?: CSSProperties;
     validators?: [FormMessageProps["match"], ReactNode][];
 }
-export declare const Field: ({ children, className, label, name, style, validators, }: FormFieldProps) => JSX.Element;
+export declare const Field: ({ children, className, inlineError, label, name, style, validators, }: FormFieldProps) => JSX.Element;

package/dist/components/forms/Field/index.js

@@ -0,0 +1,24 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { FormField as F, FormLabel as f, FormValidityState as u, FormControl as C, FormMessage as d } from "@radix-ui/react-form";
+import "react";
+import { Label as _ } from "../Label/index.js";
+import { Error as o } from "../../ui/Error/index.js";
+import '../../../assets/Field.css';const b = {
+  "field-wrapper": "Field-module__field-wrapper___SCcbl"
+}, S = ({
+  children: l,
+  className: t = "",
+  inlineError: i,
+  label: m,
+  name: a,
+  style: s,
+  validators: p
+}) => /* @__PURE__ */ n(F, { name: a, className: `${t} ${b["field-wrapper"]}`, style: s, children: [
+  /* @__PURE__ */ r(f, { asChild: !0, children: /* @__PURE__ */ r(_, { children: m }) }),
+  /* @__PURE__ */ r(u, { children: (e) => l && /* @__PURE__ */ r(C, { asChild: !0, children: l(e) }) }),
+  p?.map(([e, c], h) => /* @__PURE__ */ r(d, { match: e, asChild: !0, children: /* @__PURE__ */ r(o, { children: c }) }, h)),
+  i && /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r(o, { children: i }) })
+] });
+export {
+  S as Field
+};

package/dist/components/{Input → forms/Input}/index.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import "@radix-ui/react-form";
 import { forwardRef as p } from "react";
-import '../../assets/Input.css';const u = "Input-module__input___WjT81", e = {
+import '../../../assets/Input.css';const u = "Input-module__input___-mK8z", e = {
   input: u
 }, r = p(
   ({ className: i = "", ...n }, t) => /* @__PURE__ */ a("input", { ref: t, className: `${e.input} ${i}`, ...n })

package/dist/components/forms/Label/index.d.ts

@@ -0,0 +1,7 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+    as?: ElementType;
+    children?: ReactNode;
+}
+export declare const Label: ({ as: Component, children, className, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/forms/Label/index.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import '../../../assets/Label.css';const t = "Label-module__label___jDumT", b = {
+  label: t
+}, _ = ({
+  as: l = "label",
+  children: e,
+  className: a = "",
+  ...s
+}) => /* @__PURE__ */ o(l, { className: `${b.label} ${a}`, ...s, children: e });
+export {
+  _ as Label
+};

package/dist/components/{OTP → forms/OTP}/index.d.ts

@@ -1,6 +1,9 @@
 import { OneTimePasswordFieldProps } from '@radix-ui/react-one-time-password-field';
+import { ReactNode } from 'react';
 type OTPProps = {
     error?: string | null;
+    successMessage?: string | null;
+    label?: ReactNode;
     passwordLength?: number;
 } & OneTimePasswordFieldProps;
 export declare const OTP: import('react').ForwardRefExoticComponent<Omit<OTPProps, "ref"> & import('react').RefAttributes<HTMLInputElement[]>>;

package/dist/components/forms/OTP/index.js

@@ -0,0 +1,65 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { OneTimePasswordField as T, OneTimePasswordFieldInput as y, OneTimePasswordFieldHiddenInput as I } from "@radix-ui/react-one-time-password-field";
+import { forwardRef as N, useId as s, useMemo as v, useRef as w, useEffect as $ } from "react";
+import { Input as j } from "../Input/index.js";
+import { Label as R } from "../Label/index.js";
+import { Error as F } from "../../ui/Error/index.js";
+import { SuccessMessage as x } from "../../ui/SuccessMessage/index.js";
+import '../../../assets/OTP.css';const A = "OTP-module__otp___UjnM8", B = "OTP-module__input___Vbd5m", E = "OTP-module__label___cK41n", o = {
+  otp: A,
+  "group-container": "OTP-module__group-container___hNqnB",
+  "input-container": "OTP-module__input-container___snmj7",
+  input: B,
+  label: E
+}, q = N(
+  ({ error: n, successMessage: i, passwordLength: d = 6, className: b = "", label: l, ...m }, r) => {
+    const c = s(), p = s(), _ = s(), h = v(() => {
+      if (n)
+        return c;
+      if (i)
+        return p;
+    }, [n, c, i, p]), u = w(/* @__PURE__ */ new Map()), O = (e, a) => {
+      e ? u.current.set(a, e) : u.current.delete(a);
+    };
+    return $(() => {
+      const e = Array.from(u.current.values());
+      typeof r == "function" ? r(e) : r && (r.current = e);
+    }, [d, r]), /* @__PURE__ */ f("div", { className: `${o.otp} ${b}`, children: [
+      l && /* @__PURE__ */ t(R, { as: "p", id: _, className: o.label, "data-part": "label", children: l }),
+      /* @__PURE__ */ f(
+        T,
+        {
+          ...m,
+          className: o["group-container"],
+          "data-part": "input-group",
+          "aria-invalid": !!n,
+          "aria-describedby": h,
+          "aria-labelledby": l ? _ : void 0,
+          style: {
+            "--cdp-web-otp-input-width": `${Math.floor(100 / d)}%`
+          },
+          children: [
+            Array.from({ length: d }, (e, a) => /* @__PURE__ */ t("div", { className: o["input-container"], "data-part": "input-container", children: /* @__PURE__ */ t(y, { asChild: !0, children: /* @__PURE__ */ t(
+              j,
+              {
+                name: `${m.name || "otp"}-${a}`,
+                ref: (P) => O(P, a),
+                className: o.input,
+                "aria-invalid": !!n,
+                "data-part": "input",
+                "data-success": !!i
+              }
+            ) }) }, a)),
+            /* @__PURE__ */ t(I, {})
+          ]
+        }
+      ),
+      !!n && /* @__PURE__ */ t(F, { id: c, "data-part": "error", children: n }),
+      !!i && /* @__PURE__ */ t(x, { id: p, "data-part": "success", children: i })
+    ] });
+  }
+);
+q.displayName = "OTP";
+export {
+  q as OTP
+};

package/dist/components/forms/OTPForm/index.d.ts

@@ -0,0 +1,16 @@
+import { APIError } from '@coinbase/cdp-hooks';
+import { FormHTMLAttributes, Ref } from 'react';
+export interface OTPFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
+    canResetOTP?: boolean;
+    error?: string | APIError;
+    isPending?: boolean;
+    onClearServerErrors?: () => void;
+    onOTPChange?: (value: string) => void;
+    onResendOTP?: () => void;
+    otp?: string;
+    otpInputsRef?: Ref<HTMLInputElement[]>;
+    passwordLength?: number;
+    resendCountdown?: number | null;
+    successMessage?: string;
+}
+export declare const OTPForm: ({ canResetOTP, error, isPending, onOTPChange, onResendOTP, otp, otpInputsRef, passwordLength, resendCountdown, successMessage, ...props }: OTPFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/OTPForm/index.js

@@ -0,0 +1,76 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "@coinbase/cdp-hooks";
+import { Form as u, FormSubmit as h } from "@radix-ui/react-form";
+import "react";
+import { OTP as v } from "../OTP/index.js";
+import { Button as F } from "../../ui/Button/index.js";
+import { LoadingSpinner as N } from "../../ui/LoadingSpinner/index.js";
+import { VisuallyHidden as g } from "../../ui/VisuallyHidden/index.js";
+import { isApiError as b } from "../../../utils/isApiError.js";
+import '../../../assets/OTPForm.css';const o = {
+  "otp-form": "OTPForm-module__otp-form___G1-63",
+  "form-footer": "OTPForm-module__form-footer___ybmdd",
+  "server-state-wrapper": "OTPForm-module__server-state-wrapper___R5j5k",
+  "loading-spinner": "OTPForm-module__loading-spinner___8N9XU",
+  "resend-wrapper": "OTPForm-module__resend-wrapper___aZUAz",
+  "reset-timer": "OTPForm-module__reset-timer___7ElWj"
+}, S = ({
+  canResetOTP: m,
+  error: a,
+  isPending: t,
+  onOTPChange: s,
+  onResendOTP: l,
+  otp: p,
+  otpInputsRef: d,
+  passwordLength: n,
+  resendCountdown: i,
+  successMessage: _,
+  ...c
+}) => /* @__PURE__ */ r(u, { ...c, children: [
+  /* @__PURE__ */ e(
+    v,
+    {
+      ref: d,
+      name: "otp",
+      "aria-label": "Enter code",
+      autoSubmit: !0,
+      passwordLength: n || 6,
+      value: p,
+      error: b(a) ? a.message : a,
+      onChange: (f) => f.preventDefault(),
+      onValueChange: s,
+      className: o["otp-form"],
+      successMessage: _
+    }
+  ),
+  /* @__PURE__ */ r("div", { className: o["form-footer"], children: [
+    t && !m && /* @__PURE__ */ e("div", { className: o["server-state-wrapper"], children: t && !m && /* @__PURE__ */ e(N, { className: o["loading-spinner"] }) }),
+    /* @__PURE__ */ r("div", { className: o["resend-wrapper"], children: [
+      m && /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(
+        F,
+        {
+          type: "button",
+          onClick: l,
+          isPending: t,
+          variant: "linkPrimary",
+          children: "Resend code"
+        }
+      ) }),
+      !m && i !== null && /* @__PURE__ */ e("div", { className: o["reset-timer"], children: /* @__PURE__ */ r("p", { children: [
+        "Resend code in ",
+        /* @__PURE__ */ r("span", { "aria-hidden": "true", children: [
+          i,
+          "s"
+        ] }),
+        /* @__PURE__ */ r(g, { children: [
+          i,
+          " ",
+          i === 1 ? "second" : "seconds"
+        ] })
+      ] }) })
+    ] })
+  ] })
+] });
+export {
+  S as OTPForm
+};

package/dist/components/forms/PhoneNumberForm/index.d.ts

@@ -0,0 +1,14 @@
+import { APIError } from '@coinbase/cdp-hooks';
+import { FormHTMLAttributes, ReactNode } from 'react';
+import { PhoneNumberInputProps } from '../PhoneNumberInput/PhoneNumberInput';
+export interface PhoneNumberFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
+    countryCode: PhoneNumberInputProps["countryCode"];
+    error?: string | APIError;
+    isPending?: boolean;
+    onClearServerErrors?: () => void;
+    onCountryCodeChange: PhoneNumberInputProps["onCountryCodeChange"];
+    onPhoneNumberChange: PhoneNumberInputProps["onPhoneNumberChange"];
+    phoneNumber: PhoneNumberInputProps["phoneNumber"];
+    submitLabel?: ReactNode;
+}
+export declare const PhoneNumberForm: ({ className, countryCode, error, isPending, onCountryCodeChange, onPhoneNumberChange, phoneNumber, submitLabel, ...props }: PhoneNumberFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/PhoneNumberForm/index.js

@@ -0,0 +1,68 @@
+import { jsxs as _, jsx as e } from "react/jsx-runtime";
+import "@coinbase/cdp-hooks";
+import { Form as g, FormSubmit as F } from "@radix-ui/react-form";
+import { useMemo as I } from "react";
+import { Field as E } from "../Field/index.js";
+import { PhoneNumberInput as S } from "../PhoneNumberInput/index.js";
+import { Button as x } from "../../ui/Button/index.js";
+import { ServerError as C } from "../../ui/ServerError/index.js";
+import { usePhoneNumberValidators as M } from "../../../hooks/usePhoneNumberValidators.js";
+import '../../../assets/PhoneNumberForm.css';const U = "PhoneNumberForm-module__form___ExO8G", s = {
+  form: U,
+  "server-error": "PhoneNumberForm-module__server-error___AQcMg"
+}, G = ({
+  className: t = "",
+  countryCode: n = "US",
+  error: r,
+  isPending: u,
+  onCountryCodeChange: l,
+  onPhoneNumberChange: a,
+  phoneNumber: h,
+  submitLabel: d = "Continue",
+  ...p
+}) => {
+  const {
+    isInvalidCountry: v,
+    isInvalidLength: b,
+    isInvalidNumber: c,
+    isInvalidTooShort: f,
+    isInvalidTooLong: P,
+    isInvalidPhoneNumberError: i
+  } = M({ countryCode: n }), o = I(() => r && i(r) ? "Use a valid phone number" : "", [r, i]), N = !!r && !o;
+  return /* @__PURE__ */ _(g, { className: `${s.form} ${t}`, ...p, children: [
+    /* @__PURE__ */ e(
+      E,
+      {
+        label: "Phone number",
+        name: "phone",
+        inlineError: o,
+        validators: [
+          ["valueMissing", "Phone number is required"],
+          ["typeMismatch", "Use a valid phone number"],
+          [c, "Use a valid phone number"],
+          [v, "Country is not supported"],
+          [f, "Phone number is too short"],
+          [P, "Phone number is too long"],
+          [b, "Phone number is the wrong length"]
+        ],
+        children: (m) => /* @__PURE__ */ e(
+          S,
+          {
+            "aria-invalid": !(m === void 0 || m.valid) || !!o,
+            autoComplete: "tel-national",
+            phoneNumber: h,
+            onPhoneNumberChange: a,
+            countryCode: n,
+            onCountryCodeChange: l,
+            required: !0
+          }
+        )
+      }
+    ),
+    N && /* @__PURE__ */ e(C, { error: r, className: s["server-error"] }),
+    /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ e(x, { type: "submit", isPending: u, children: d }) })
+  ] });
+};
+export {
+  G as PhoneNumberForm
+};

package/dist/components/forms/PhoneNumberInput/PhoneNumberMetadata.d.ts

@@ -0,0 +1,2 @@
+import { Metadata } from 'libphonenumber-js';
+export declare const PhoneNumberMetadata: Metadata;

package/dist/components/forms/PhoneNumberInput/PhoneNumberMetadata.js

@@ -0,0 +1,5 @@
+import { Metadata as t } from "libphonenumber-js";
+const e = new t();
+export {
+  e as PhoneNumberMetadata
+};

package/dist/components/forms/PhoneNumberInput/index.d.ts

@@ -0,0 +1,10 @@
+import { CountryCode } from 'libphonenumber-js';
+import { InputHTMLAttributes } from 'react';
+import { PhoneNumber } from '../../../utils/parseValuesFromPhoneNumber';
+export interface PhoneNumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+    onCountryCodeChange: (newCountry: CountryCode) => void;
+    countryCode?: CountryCode;
+    onPhoneNumberChange: (phoneNumber: PhoneNumber) => void;
+    phoneNumber: PhoneNumber;
+}
+export declare const PhoneNumberInput: ({ autoComplete, className, countryCode, onCountryCodeChange, onPhoneNumberChange, phoneNumber, ...props }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/PhoneNumberInput/index.js

@@ -0,0 +1,76 @@
+import { jsxs as o, jsx as c } from "react/jsx-runtime";
+import "libphonenumber-js";
+import { useCallback as f, useEffect as y } from "react";
+import { Input as C } from "../Input/index.js";
+import { VisuallyHidden as x } from "../../ui/VisuallyHidden/index.js";
+import { countries as D } from "../../../data/countries.js";
+import { usePhoneNumberFormatter as $ } from "./usePhoneNumberFormatter.js";
+import '../../../assets/PhoneNumberInput.css';const j = "PhoneNumberInput-module__invalid___zDA2p", V = "PhoneNumberInput-module__success___uPjMx", z = "PhoneNumberInput-module__input___H-XG-", l = {
+  "phone-number-input": "PhoneNumberInput-module__phone-number-input___mYty2",
+  invalid: j,
+  success: V,
+  input: z,
+  "country-calling-code": "PhoneNumberInput-module__country-calling-code___N6zDW"
+}, G = ({
+  autoComplete: a = "tel-national",
+  className: h = "",
+  countryCode: s = "US",
+  onCountryCodeChange: r,
+  onPhoneNumberChange: i,
+  phoneNumber: u,
+  ...t
+}) => {
+  const {
+    formatBeforePhoneNumberChange: m,
+    formatBeforeCountryCodeChange: d,
+    placeholder: v,
+    formattedDisplayNumber: b
+  } = $(u.value, s), g = f(
+    (e) => {
+      let n = e.target.value.replace(/\D/g, "");
+      n === u.value && (n = n.slice(0, -1));
+      const P = m(n);
+      i?.(P);
+    },
+    [m, i, u]
+  ), _ = f(
+    (e) => {
+      const n = d(e);
+      r(e), i?.(n);
+    },
+    [d, r, i]
+  ), p = D.find((e) => e.code === s), N = t["aria-invalid"] && t["aria-invalid"] !== "false", I = t["data-success"] && t["data-success"] !== "false";
+  return y(() => {
+    _(s);
+  }, [s, _]), /* @__PURE__ */ o(
+    "div",
+    {
+      className: `${l["phone-number-input"]} ${N ? l.invalid : ""} ${I ? l.success : ""} ${h}`,
+      children: [
+        p && /* @__PURE__ */ c(B, { country: p }),
+        /* @__PURE__ */ c(
+          C,
+          {
+            ...t,
+            className: l.input,
+            autoComplete: a,
+            onChange: g,
+            placeholder: v,
+            type: "tel",
+            value: b
+          }
+        )
+      ]
+    }
+  );
+}, B = ({ country: a }) => /* @__PURE__ */ o("span", { className: l["country-calling-code"], children: [
+  /* @__PURE__ */ c("span", { "aria-hidden": "true", children: a.flag }),
+  /* @__PURE__ */ c(x, { children: a.name }),
+  /* @__PURE__ */ o("span", { children: [
+    "+",
+    a.callingCode
+  ] })
+] });
+export {
+  G as PhoneNumberInput
+};

package/dist/components/forms/PhoneNumberInput/maskOverride.d.ts

@@ -0,0 +1,8 @@
+import { CountryCode } from 'libphonenumber-js';
+type MaskFormatOverride = {
+    prefix?: string;
+    maxLength?: number;
+    normalizer?: (value: string) => string;
+};
+export declare const getMaskOverride: (countryCode?: CountryCode) => MaskFormatOverride;
+export {};