@coinbase/cdp-react 0.0.19 → 0.0.21

package/dist/components/SignInModal/index.js

@@ -1,69 +1,62 @@
-import { jsxs as i, jsx as n, Fragment as m } from "react/jsx-runtime";
-import { Dialog as f, DialogTrigger as I, DialogPortal as S, DialogOverlay as M, DialogContent as v, DialogClose as b, DialogTitle as D, DialogDescription as N } from "@radix-ui/react-dialog";
+import { jsxs as o, jsx as n, Fragment as m } from "react/jsx-runtime";
 import "react";
-import { Button as c } from "../Button/index.js";
-import { useAppConfig as y } from "../CDPReactProvider/index.js";
-import { SignIn as C } from "../SignIn/index.js";
-import { useTheme as x } from "../ThemeProvider/index.js";
-import { VisuallyHidden as a } from "../VisuallyHidden/index.js";
-import { IconXMark as T } from "../../icons/IconXMark.js";
+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 B } from "../SignIn/SignInImage.js";
-import { SignInForm as w } from "../SignIn/SignInForm.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 t } from "../SignIn/SignInDescription.js";
-import { SignInAuthMethodButtons as F } from "../SignIn/SignInAuthMethodButtons.js";
-import { SignInFooter as j } from "../SignIn/SignInFooter.js";
-import '../../assets/SignInModal.css';const A = "SignInModal-module__trigger___IcJ8x", V = "SignInModal-module__modal___PErrT", z = "SignInModal-module__footer___6qEo2", E = "SignInModal-module__buttons___jhaVn", H = "SignInModal-module__overlay___-0rmi", J = "SignInModal-module__spacer___x-lRH", o = {
-  trigger: A,
-  modal: V,
+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",
   "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-",
   "sign-in-image": "SignInModal-module__sign-in-image___DGg7B",
-  footer: z,
-  buttons: E,
+  footer: F,
+  buttons: T,
   "back-button": "SignInModal-module__back-button___nMh2-",
-  "close-icon": "SignInModal-module__close-icon___b-gMh",
-  overlay: H,
-  spacer: J
-}, rn = ({ children: _, open: g, setIsOpen: p, onSuccess: s }) => {
-  const { cssVariables: h } = x(), { showCoinbaseFooter: d } = y();
-  return /* @__PURE__ */ i(f, { open: g, onOpenChange: p, children: [
-    /* @__PURE__ */ n(I, { asChild: !0, children: _ || /* @__PURE__ */ n(c, { variant: "primary", className: o.trigger, children: "Sign in" }) }),
-    /* @__PURE__ */ n(S, { children: /* @__PURE__ */ i(M, { className: o.overlay, style: h, children: [
-      /* @__PURE__ */ n("div", { className: o.spacer }),
-      /* @__PURE__ */ n(v, { className: o.modal, children: /* @__PURE__ */ n(
-        C,
-        {
-          onSuccess: s,
-          className: `${o["sign-in"]} ${d ? "" : o["no-footer"]}`,
-          children: /* @__PURE__ */ i(m, { children: [
-            /* @__PURE__ */ n(O, {}),
-            /* @__PURE__ */ i("div", { className: o.buttons, children: [
-              /* @__PURE__ */ n(k, { className: o["back-button"] }),
-              /* @__PURE__ */ n(b, { asChild: !0, children: /* @__PURE__ */ n(c, { "aria-label": "Close", size: "md", variant: "transparentSecondary", children: /* @__PURE__ */ n(T, { className: o["close-icon"] }) }) })
+  "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: o["sign-in-image"], children: /* @__PURE__ */ n(B, {}) }),
-            /* @__PURE__ */ n(w, { onSuccess: s, children: ({ authMethod: e, step: r, Form: u }) => /* @__PURE__ */ i(m, { children: [
-              /* @__PURE__ */ i("div", { className: o["title-desc-wrapper"], children: [
-                r === "verification" ? /* @__PURE__ */ n(a, { as: "div", children: /* @__PURE__ */ n(l, {}) }) : /* @__PURE__ */ n(l, {}),
-                r === "credentials" ? /* @__PURE__ */ n(a, { as: "div", children: /* @__PURE__ */ n(t, { authMethod: e }) }) : /* @__PURE__ */ n(t, { authMethod: e })
-              ] }),
-              /* @__PURE__ */ n("div", { className: o["sign-in-form"], children: u }),
-              r === "credentials" && /* @__PURE__ */ n(F, { activeMethod: e })
-            ] }) }),
-            d && /* @__PURE__ */ n(j, { className: o.footer })
-          ] })
-        }
-      ) })
-    ] }) })
+            /* @__PURE__ */ n("div", { className: i["sign-in-form"], children: h }),
+            e === "credentials" && /* @__PURE__ */ n(w, { activeMethod: r })
+          ] }) }),
+          d && /* @__PURE__ */ n(y, { className: i.footer })
+        ] })
+      }
+    ) })
   ] });
-}, O = () => /* @__PURE__ */ i(a, { children: [
-  /* @__PURE__ */ n(D, { asChild: !0, children: /* @__PURE__ */ n(l, { as: "span" }) }),
-  /* @__PURE__ */ n(N, { asChild: !0, children: /* @__PURE__ */ n(t, { as: "span" }) })
+}, 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 {
-  rn 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/{EmailForm → forms/EmailForm}/index.js

@@ -2,14 +2,14 @@ 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 { Button as f } from "../Button/index.js";
-import { Field as h } from "../Field/index.js";
-import { withValidityState as _ } from "../Input/index.js";
-import { ServerError as E } from "../ServerError/index.js";
-import { isEmailInvalid as F } from "../../utils/isEmailInvalid.js";
-import '../../assets/EmailForm.css';const x = "EmailForm-module__form___MD6xv", o = {
+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___uRzUG"
+  "server-error": "EmailForm-module__server-error___0TSPx"
 }, N = ({
   className: a = "",
   email: t,
@@ -29,7 +29,7 @@ import '../../assets/EmailForm.css';const x = "EmailForm-module__form___MD6xv",
   };
   return /* @__PURE__ */ u(c, { className: `${o.form} ${a}`, ...d, children: [
     /* @__PURE__ */ r(
-      h,
+      f,
       {
         label: "Email address",
         name: "email",
@@ -38,7 +38,7 @@ import '../../assets/EmailForm.css';const x = "EmailForm-module__form___MD6xv",
           ["typeMismatch", "Use a valid email address"],
           [F, "Use a valid email address"]
         ],
-        children: _(
+        children: h(
           m !== void 0 ? {
             ...i,
             value: t,
@@ -48,7 +48,7 @@ import '../../assets/EmailForm.css';const x = "EmailForm-module__form___MD6xv",
       }
     ),
     e && /* @__PURE__ */ r(E, { error: e, className: o["server-error"] }),
-    /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ r(f, { type: "submit", isPending: l, children: s }) })
+    /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ r(_, { type: "submit", isPending: l, children: s }) })
   ] });
 };
 export {

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/{Label → forms/Label}/index.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import "react";
-import '../../assets/Label.css';const t = "Label-module__label___RaRvM", b = {
+import '../../../assets/Label.css';const t = "Label-module__label___jDumT", b = {
   label: t
 }, _ = ({
   as: l = "label",

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/{OTPForm → forms/OTPForm}/index.js

@@ -1,42 +1,42 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import "@coinbase/cdp-hooks";
-import { Form as h, FormSubmit as u } from "@radix-ui/react-form";
+import { Form as u, FormSubmit as h } from "@radix-ui/react-form";
 import "react";
-import { Button as v } from "../Button/index.js";
-import { LoadingSpinner as F } from "../LoadingSpinner/index.js";
-import { OTP as N } from "../OTP/index.js";
-import { VisuallyHidden as g } from "../VisuallyHidden/index.js";
-import { isApiError as P } from "../../utils/isApiError.js";
-import '../../assets/OTPForm.css';const o = {
-  "otp-form": "OTPForm-module__otp-form___jQN4H",
-  "form-footer": "OTPForm-module__form-footer___JhfLr",
-  "server-state-wrapper": "OTPForm-module__server-state-wrapper___PS7UP",
-  "loading-spinner": "OTPForm-module__loading-spinner___fJRqe",
-  "resend-wrapper": "OTPForm-module__resend-wrapper___HeIR2",
-  "reset-timer": "OTPForm-module__reset-timer___MEkQh"
-}, E = ({
+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: t,
-  isPending: a,
+  error: a,
+  isPending: t,
   onOTPChange: s,
   onResendOTP: l,
   otp: p,
-  otpInputsRef: n,
-  passwordLength: d,
+  otpInputsRef: d,
+  passwordLength: n,
   resendCountdown: i,
   successMessage: _,
   ...c
-}) => /* @__PURE__ */ r(h, { ...c, children: [
+}) => /* @__PURE__ */ r(u, { ...c, children: [
   /* @__PURE__ */ e(
-    N,
+    v,
     {
-      ref: n,
+      ref: d,
       name: "otp",
       "aria-label": "Enter code",
       autoSubmit: !0,
-      passwordLength: d || 6,
+      passwordLength: n || 6,
       value: p,
-      error: P(t) ? t.message : t,
+      error: b(a) ? a.message : a,
       onChange: (f) => f.preventDefault(),
       onValueChange: s,
       className: o["otp-form"],
@@ -44,14 +44,14 @@ import '../../assets/OTPForm.css';const o = {
     }
   ),
   /* @__PURE__ */ r("div", { className: o["form-footer"], children: [
-    a && !m && /* @__PURE__ */ e("div", { className: o["server-state-wrapper"], children: a && !m && /* @__PURE__ */ e(F, { className: o["loading-spinner"] }) }),
+    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(u, { asChild: !0, children: /* @__PURE__ */ e(
-        v,
+      m && /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(
+        F,
         {
           type: "button",
           onClick: l,
-          isPending: a,
+          isPending: t,
           variant: "linkPrimary",
           children: "Resend code"
         }
@@ -72,5 +72,5 @@ import '../../assets/OTPForm.css';const o = {
   ] })
 ] });
 export {
-  E as OTPForm
+  S as OTPForm
 };

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

@@ -1,17 +1,17 @@
 import { jsxs as _, jsx as e } from "react/jsx-runtime";
 import "@coinbase/cdp-hooks";
-import { Form as I, FormSubmit as F } from "@radix-ui/react-form";
-import { useMemo as g } from "react";
-import { Button as E } from "../Button/index.js";
-import { Field as S } from "../Field/index.js";
-import { PhoneNumberInput as x } from "../PhoneNumberInput/index.js";
-import { ServerError as C } from "../ServerError/index.js";
-import { usePhoneNumberValidators as U } from "../../hooks/usePhoneNumberValidators.js";
-import '../../assets/PhoneNumberForm.css';const y = "PhoneNumberForm-module__form___xIcYN", t = {
-  form: y,
-  "server-error": "PhoneNumberForm-module__server-error___-98Dt"
-}, V = ({
-  className: s = "",
+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,
@@ -28,10 +28,10 @@ import '../../assets/PhoneNumberForm.css';const y = "PhoneNumberForm-module__for
     isInvalidTooShort: f,
     isInvalidTooLong: P,
     isInvalidPhoneNumberError: i
-  } = U({ countryCode: n }), o = g(() => r && i(r) ? "Use a valid phone number" : "", [r, i]), N = !!r && !o;
-  return /* @__PURE__ */ _(I, { className: `${t.form} ${s}`, ...p, children: [
+  } = 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(
-      S,
+      E,
       {
         label: "Phone number",
         name: "phone",
@@ -46,7 +46,7 @@ import '../../assets/PhoneNumberForm.css';const y = "PhoneNumberForm-module__for
           [b, "Phone number is the wrong length"]
         ],
         children: (m) => /* @__PURE__ */ e(
-          x,
+          S,
           {
             "aria-invalid": !(m === void 0 || m.valid) || !!o,
             autoComplete: "tel-national",
@@ -59,10 +59,10 @@ import '../../assets/PhoneNumberForm.css';const y = "PhoneNumberForm-module__for
         )
       }
     ),
-    N && /* @__PURE__ */ e(C, { error: r, className: t["server-error"] }),
-    /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ e(E, { type: "submit", isPending: u, children: d }) })
+    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 {
-  V as PhoneNumberForm
+  G as PhoneNumberForm
 };

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

@@ -1,6 +1,6 @@
 import { CountryCode } from 'libphonenumber-js';
 import { InputHTMLAttributes } from 'react';
-import { PhoneNumber } from '../../utils/parseValuesFromPhoneNumber';
+import { PhoneNumber } from '../../../utils/parseValuesFromPhoneNumber';
 export interface PhoneNumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
     onCountryCodeChange: (newCountry: CountryCode) => void;
     countryCode?: CountryCode;

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/{PhoneNumberInput → forms/PhoneNumberInput}/maskOverride.js

@@ -1,5 +1,5 @@
 import "libphonenumber-js";
-import { nonThrowingGetCountryCallingCode as e } from "../../data/countries.js";
+import { nonThrowingGetCountryCallingCode as e } from "../../../data/countries.js";
 const n = (r) => r.startsWith("1") ? r.slice(1) : r, i = {
   234: {
     /**

package/dist/components/{PhoneNumberInput → forms/PhoneNumberInput}/usePhoneNumberFormatter.d.ts

@@ -1,7 +1,7 @@
 import { CountryCode } from 'libphonenumber-js';
 export declare const usePhoneNumberFormatter: (phoneNumber: string, countryCode: CountryCode | undefined) => {
-    formatBeforePhoneNumberChange: (inputPhoneNumber: string) => import('../../utils/parseValuesFromPhoneNumber').PhoneNumber;
-    formatBeforeCountryCodeChange: (newCountryCode: CountryCode) => import('../../utils/parseValuesFromPhoneNumber').PhoneNumber;
+    formatBeforePhoneNumberChange: (inputPhoneNumber: string) => import('../../../utils/parseValuesFromPhoneNumber').PhoneNumber;
+    formatBeforeCountryCodeChange: (newCountryCode: CountryCode) => import('../../../utils/parseValuesFromPhoneNumber').PhoneNumber;
     placeholder: string | undefined;
     formattedDisplayNumber: string;
 };

package/dist/components/{PhoneNumberInput → forms/PhoneNumberInput}/usePhoneNumberFormatter.js

@@ -1,6 +1,6 @@
 import { parseIncompletePhoneNumber as I, getExampleNumber as l, AsYouType as K } from "libphonenumber-js";
 import { useCallback as S, useMemo as N } from "react";
-import { parseValuesFromPhoneNumber as B } from "../../utils/parseValuesFromPhoneNumber.js";
+import { parseValuesFromPhoneNumber as B } from "../../../utils/parseValuesFromPhoneNumber.js";
 import { getMaskOverride as L } from "./maskOverride.js";
 import { PhoneNumberMetadata as G } from "./PhoneNumberMetadata.js";
 const i = { AC: "40123", AD: "312345", AE: "501234567", AF: "701234567", AG: "2684641234", AI: "2642351234", AL: "672123456", AM: "77123456", AO: "923123456", AR: "91123456789", AS: "6847331234", AT: "664123456", AU: "412345678", AW: "5601234", AX: "412345678", AZ: "401234567", BA: "61123456", BB: "2462501234", BD: "1812345678", BE: "470123456", BF: "70123456", BG: "43012345", BH: "36001234", BI: "79561234", BJ: "0195123456", BL: "690001234", BM: "4413701234", BN: "7123456", BO: "71234567", BQ: "3181234", BR: "11961234567", BS: "2423591234", BT: "17123456", BW: "71123456", BY: "294911911", BZ: "6221234", CA: "5062345678", CC: "412345678", CD: "991234567", CF: "70012345", CG: "061234567", CH: "781234567", CI: "0123456789", CK: "71234", CL: "221234567", CM: "671234567", CN: "13123456789", CO: "3211234567", CR: "83123456", CU: "51234567", CV: "9911234", CW: "95181234", CX: "412345678", CY: "96123456", CZ: "601123456", DE: "15123456789", DJ: "77831001", DK: "34412345", DM: "7672251234", DO: "8092345678", DZ: "551234567", EC: "991234567", EE: "51234567", EG: "1001234567", EH: "650123456", ER: "7123456", ES: "612345678", ET: "911234567", FI: "412345678", FJ: "7012345", FK: "51234", FM: "3501234", FO: "211234", FR: "612345678", GA: "06031234", GB: "7400123456", GD: "4734031234", GE: "555123456", GF: "694201234", GG: "7781123456", GH: "231234567", GI: "57123456", GL: "221234", GM: "3012345", GN: "601123456", GP: "690001234", GQ: "222123456", GR: "6912345678", GT: "51234567", GU: "6713001234", GW: "955012345", GY: "6091234", HK: "51234567", HN: "91234567", HR: "921234567", HT: "34101234", HU: "201234567", ID: "812345678", IE: "850123456", IL: "502345678", IM: "7924123456", IN: "8123456789", IO: "3801234", IQ: "7912345678", IR: "9123456789", IS: "6111234", IT: "3123456789", JE: "7797712345", JM: "8762101234", JO: "790123456", JP: "9012345678", KE: "712123456", KG: "700123456", KH: "91234567", KI: "72001234", KM: "3212345", KN: "8697652917", KP: "1921234567", KR: "1020000000", KW: "50012345", KY: "3453231234", KZ: "7710009998", LA: "2023123456", LB: "71123456", LC: "7582845678", LI: "660234567", LK: "712345678", LR: "770123456", LS: "50123456", LT: "61234567", LU: "628123456", LV: "21234567", LY: "912345678", MA: "650123456", MC: "612345678", MD: "62112345", ME: "67622901", MF: "690001234", MG: "321234567", MH: "2351234", MK: "72345678", ML: "65012345", MM: "92123456", MN: "88123456", MO: "66123456", MP: "6702345678", MQ: "696201234", MR: "22123456", MS: "6644923456", MT: "96961234", MU: "52512345", MV: "7712345", MW: "991234567", MX: "2221234567", MY: "123456789", MZ: "821234567", NA: "811234567", NC: "751234", NE: "93123456", NF: "381234", NG: "8021234567", NI: "81234567", NL: "612345678", NO: "40612345", NP: "9841234567", NR: "5551234", NU: "8884012", NZ: "211234567", OM: "92123456", PA: "61234567", PE: "912345678", PF: "87123456", PG: "70123456", PH: "9051234567", PK: "3012345678", PL: "512345678", PM: "551234", PR: "7872345678", PS: "599123456", PT: "912345678", PW: "6201234", PY: "961456789", QA: "33123456", RE: "692123456", RO: "712034567", RS: "601234567", RU: "9123456789", RW: "720123456", SA: "512345678", SB: "7421234", SC: "2510123", SD: "911231234", SE: "701234567", SG: "81234567", SH: "51234", SI: "31234567", SJ: "41234567", SK: "912123456", SL: "25123456", SM: "66661212", SN: "701234567", SO: "71123456", SR: "7412345", SS: "977123456", ST: "9812345", SV: "70123456", SX: "7215205678", SY: "944567890", SZ: "76123456", TA: "8999", TC: "6492311234", TD: "63012345", TG: "90112345", TH: "812345678", TJ: "917123456", TK: "7290", TL: "77212345", TM: "66123456", TN: "20123456", TO: "7715123", TR: "5012345678", TT: "8682911234", TV: "901234", TW: "912345678", TZ: "621234567", UA: "501234567", UG: "712345678", US: "2015550123", UY: "94231234", UZ: "912345678", VA: "3123456789", VC: "7844301234", VE: "4121234567", VG: "2843001234", VI: "3406421234", VN: "912345678", VU: "5912345", WF: "821234", WS: "7212345", XK: "43201234", YE: "712345678", YT: "639012345", ZA: "711234567", ZM: "955123456", ZW: "712345678" }, u = (n, r) => {

package/dist/components/{Button → ui/Button}/index.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { ButtonSize, ButtonVariant } from '../../theme/theme';
+import { ButtonSize, ButtonVariant } from '../../../theme/theme';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     isPending?: boolean;
     pendingLabel?: ReactNode;