@coinbase/cdp-react 0.0.20 → 0.0.22

package/dist/assets/AmountInput.css

@@ -0,0 +1 @@
+.AmountInput-module__amount-input___24NlC{--cdp-web-amount-input-text-size: 3.75em;--cdp-web-amount-input-scale: 1;--cdp-web-amount-input-width: 1em;box-sizing:border-box;color:var(--cdp-web-colors-page-text-default);font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.2;display:flex;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;position:relative;width:100%}.AmountInput-module__input___Af-R1{appearance:textfield;background-color:transparent;color:var(--cdp-web-colors-page-text-default);border:0;font-weight:600;margin:0;outline:0;padding:0;width:var(--cdp-web-amount-input-width)}.AmountInput-module__input___Af-R1::placeholder{color:var(--cdp-web-colors-page-text-muted)}.AmountInput-module__amount-unit___48d60{font-size:var(--cdp-web-amount-input-text-size);font-weight:600;display:flex;align-items:center;justify-content:flex-start}.AmountInput-module__amount-unit___48d60.AmountInput-module__visible___qmvT0{cursor:text;transform:scale(var(--cdp-web-amount-input-scale));transform-origin:left center}.AmountInput-module__hidden___cO0sQ{visibility:hidden;position:absolute;pointer-events:none}.AmountInput-module__unit___-zmGz{color:var(--cdp-web-colors-page-text-muted)}

package/dist/assets/ExchangeAmountInput.css

@@ -0,0 +1 @@
+.ExchangeAmountInput-module__flex-row___ZKB-Q{display:flex;flex-direction:row;font-size:var(--cdp-web-font-size-base);align-items:center;justify-content:flex-start}.ExchangeAmountInput-module__gap-1___vuNQW{gap:.5em}.ExchangeAmountInput-module__gap-2___4-s-b{gap:.25em}.ExchangeAmountInput-module__swap-button___i9lSz{background-color:transparent;border:none;display:flex;align-items:center;justify-content:center;padding:0;margin:0;cursor:pointer}.ExchangeAmountInput-module__icon___b5JpF{width:auto;height:1.25em}

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

@@ -0,0 +1,3 @@
+import { InputHTMLAttributes } from 'react';
+import { AmountInputProps } from './types';
+export declare const AmountInput: import('react').ForwardRefExoticComponent<AmountInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "inputMode" | "onChange" | "max" | "min"> & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,92 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { forwardRef as g, useRef as u, useCallback as j, useEffect as f } from "react";
+import { useAmountInput as q } from "./useAmountInput.js";
+import { useInputScale as z } from "./useInputScale.js";
+import '../../../assets/AmountInput.css';const w = "AmountInput-module__input___Af-R1", E = "AmountInput-module__visible___qmvT0", G = "AmountInput-module__hidden___cO0sQ", M = "AmountInput-module__unit___-zmGz", n = {
+  "amount-input": "AmountInput-module__amount-input___24NlC",
+  input: w,
+  "amount-unit": "AmountInput-module__amount-unit___48d60",
+  visible: E,
+  hidden: G,
+  unit: M
+}, O = g(
+  ({
+    amount: h,
+    className: I = "",
+    unit: t,
+    decimalPlaces: p = 2,
+    locale: A,
+    max: R,
+    min: v,
+    setAmount: N,
+    onBlur: y,
+    onPaste: C,
+    placeholder: r = "0",
+    ...$
+  }, e) => {
+    const o = u(null), l = u(null), c = u(null), m = u(null), d = u(null), { handleBlur: b, handleChange: x, handleBeforeInput: B, handlePaste: k, inputValue: i } = q(
+      {
+        amount: h,
+        decimalPlaces: p,
+        locale: A,
+        max: R,
+        min: v,
+        setAmount: N,
+        onBlur: y,
+        onPaste: C
+      }
+    ), { updateScale: _ } = z({
+      containerRef: l,
+      measureRef: c,
+      valueRef: m,
+      inputRef: o,
+      scaleWrapperRef: d
+    }), S = j(() => {
+      l.current?.querySelector("input[type='text']")?.focus();
+    }, []);
+    return f(() => {
+      _();
+    }, [i, t, p, _]), f(() => {
+      e && (typeof e == "function" ? e(o.current) : e.current = o.current);
+    }, [e]), /* @__PURE__ */ s("span", { ref: l, className: n["amount-input"], children: [
+      /* @__PURE__ */ s("span", { ref: d, className: `${n["amount-unit"]} ${n.visible}`, children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            className: `${n.input} ${I}`,
+            inputMode: "decimal",
+            onBlur: b,
+            onChange: x,
+            onBeforeInput: B,
+            onPaste: k,
+            placeholder: r,
+            ref: o,
+            type: "text",
+            value: i,
+            ...$
+          }
+        ),
+        t && /* @__PURE__ */ a("span", { className: n.unit, onClick: S, children: t })
+      ] }),
+      /* @__PURE__ */ s(
+        "span",
+        {
+          ref: c,
+          "aria-hidden": "true",
+          className: `${n["amount-unit"]} ${n.hidden}`,
+          children: [
+            /* @__PURE__ */ s("span", { ref: m, children: [
+              i || r,
+              " "
+            ] }),
+            t && /* @__PURE__ */ a("span", { children: t })
+          ]
+        }
+      )
+    ] });
+  }
+);
+O.displayName = "AmountInput";
+export {
+  O as AmountInput
+};

package/dist/components/forms/AmountInput/types.d.ts

@@ -0,0 +1,19 @@
+import { ChangeEvent, ClipboardEvent, FocusEvent, InputEvent, InputHTMLAttributes } from 'react';
+export interface AmountInputProps {
+    amount: number | undefined;
+    unit?: string;
+    decimalPlaces?: number;
+    locale?: string;
+    max?: number;
+    min?: number;
+    setAmount: (amount: number) => void;
+}
+export type UseAmoutInputParams = Pick<AmountInputProps, "amount" | "decimalPlaces" | "locale" | "max" | "min" | "setAmount"> & Pick<InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onPaste">;
+export interface UseAmoutInputReturn {
+    handleBeforeInput: (e: InputEvent<HTMLInputElement>) => void;
+    handleBlur: (e: FocusEvent<HTMLInputElement>) => void;
+    handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+    inputValue: string;
+    numberValue: number;
+}

package/dist/components/forms/AmountInput/types.js

@@ -0,0 +1 @@
+import "react";

package/dist/components/forms/AmountInput/useAmountInput.d.ts

@@ -0,0 +1,2 @@
+import { UseAmoutInputParams, UseAmoutInputReturn } from './types';
+export declare const useAmountInput: ({ amount, decimalPlaces, locale, max, min, setAmount, onBlur, onPaste, }: UseAmoutInputParams) => UseAmoutInputReturn;

package/dist/components/forms/AmountInput/useAmountInput.js

@@ -0,0 +1,113 @@
+import { NumberFormatter as k } from "@internationalized/number";
+import { useState as L, useCallback as n, useEffect as w, useMemo as S } from "react";
+import { DEFAULT_LOCALE as T } from "../../../data/locale.js";
+import { clamp as z } from "../../../utils/clamp.js";
+import { useNumberParseAndFormat as B } from "./useNumberParseAndFormat.js";
+const j = ({
+  amount: i,
+  decimalPlaces: p,
+  locale: b = T,
+  max: a,
+  min: r,
+  setAmount: g,
+  onBlur: D,
+  onPaste: F
+}) => {
+  const [s, m] = L(
+    i === void 0 || isNaN(i) ? NaN : +i
+  ), d = n(
+    (t) => {
+      m(t), g(t);
+    },
+    [g]
+  ), [u, c] = L(
+    () => isNaN(s) ? "" : new k(b, {
+      maximumFractionDigits: p,
+      minimumFractionDigits: 0
+    }).format(s)
+  ), v = n(
+    (t) => r !== void 0 && a !== void 0 ? z(t, r, a) : r !== void 0 && a === void 0 ? Math.max(t, r) : r === void 0 && a !== void 0 ? Math.min(t, a) : t,
+    [r, a]
+  ), { parser: o, formatter: f } = B({
+    inputValue: u,
+    locale: b,
+    options: {
+      maximumFractionDigits: p,
+      minimumFractionDigits: 0
+    }
+  }), l = n(
+    (t) => {
+      if (o.isValidPartialNumber(t, r, a)) {
+        const e = o.parse(t);
+        d(e), c(t);
+      }
+    },
+    [a, r, o, d]
+  ), h = n(
+    (t) => {
+      l(t.target.value);
+    },
+    [l]
+  ), C = n(
+    (t) => {
+      const e = t.currentTarget;
+      if ("data" in t) {
+        if (!t.data) return;
+        if (t.data === " ") {
+          t.preventDefault();
+          return;
+        }
+        const V = e.selectionStart || 0, N = e.selectionEnd || 0, A = e.value, M = A.slice(0, V) + t.data + A.slice(N);
+        o.isValidPartialNumber(M, r, a) || t.preventDefault();
+      }
+    },
+    [o, r, a]
+  ), E = n(
+    (t) => {
+      if (D?.(t), !u.length) {
+        d(NaN), c("");
+        return;
+      }
+      const e = o.parse(u);
+      if (isNaN(e)) {
+        c(f.format(s));
+        return;
+      }
+      const V = v(e), N = Number(V.toFixed(p));
+      d(N), c(f.format(N));
+    },
+    [
+      p,
+      v,
+      u,
+      f,
+      o,
+      s,
+      D,
+      d
+    ]
+  ), I = n(
+    (t) => {
+      F?.(t);
+      let e = t.clipboardData?.getData("text").replace(/\s/g, "");
+      r !== void 0 && r >= 0 && (e = e.replace(/-/g, "")), l(e), t.preventDefault();
+    },
+    [r, F, l]
+  );
+  return w(() => {
+    (i === void 0 || isNaN(i)) && isNaN(s) || i === s || (i === void 0 || isNaN(i) ? (m(NaN), c("")) : (m(i), c(f.format(i))));
+  }, [i, f, s]), S(
+    () => ({
+      numberValue: s,
+      inputValue: u,
+      handleBlur: E,
+      handleChange: h,
+      handleBeforeInput: C,
+      handlePaste: I
+    }),
+    [E, h, C, I, u, s]
+  );
+};
+export {
+  j as useAmountInput
+};

package/dist/components/forms/AmountInput/useInputScale.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+interface UseInputScaleParams {
+    minScale?: number;
+    containerRef: RefObject<HTMLElement | null>;
+    valueRef: RefObject<HTMLElement | null>;
+    measureRef: RefObject<HTMLElement | null>;
+    inputRef: RefObject<HTMLInputElement | null>;
+    scaleWrapperRef: RefObject<HTMLElement | null>;
+}
+export declare const useInputScale: ({ minScale, containerRef, measureRef, inputRef, scaleWrapperRef, valueRef, }: UseInputScaleParams) => {
+    updateScale: () => void;
+};
+export {};

package/dist/components/forms/AmountInput/useInputScale.js

@@ -0,0 +1,35 @@
+import { useCallback as W, useEffect as m } from "react";
+const x = ({
+  minScale: c = 0.1,
+  containerRef: r,
+  measureRef: o,
+  inputRef: i,
+  scaleWrapperRef: l,
+  valueRef: u
+}) => {
+  const n = W(() => {
+    const t = r.current, e = i.current, a = o.current, d = u.current, s = l.current;
+    if (!t || !a || !d || !e || !s)
+      return;
+    const h = a.clientWidth, b = t.clientWidth;
+    if (e.style.width = `${d.clientWidth}px`, h > b) {
+      const p = b / h;
+      s.style.transform = `scale(${Math.max(p, c)})`;
+    } else
+      s.style.transform = "scale(1)";
+  }, [c, r, o, u, i, l]);
+  return m(() => {
+    const t = r.current;
+    if (!t)
+      return;
+    const e = new ResizeObserver(n);
+    return e.observe(t), () => {
+      e.disconnect();
+    };
+  }, [r, n]), {
+    updateScale: n
+  };
+};
+export {
+  x as useInputScale
+};

package/dist/components/forms/AmountInput/useNumberParseAndFormat.d.ts

@@ -0,0 +1,11 @@
+import { NumberParser, NumberFormatter } from '@internationalized/number';
+export interface UseNumberParseAndFormatParams {
+    inputValue?: string;
+    locale?: string;
+    options?: Intl.NumberFormatOptions;
+}
+export interface UseNumberParseAndFormatReturn {
+    parser: NumberParser;
+    formatter: NumberFormatter;
+}
+export declare const useNumberParseAndFormat: (params?: UseNumberParseAndFormatParams) => UseNumberParseAndFormatReturn;

package/dist/components/forms/AmountInput/useNumberParseAndFormat.js

@@ -0,0 +1,22 @@
+import { NumberParser as a, NumberFormatter as i } from "@internationalized/number";
+import { useMemo as o } from "react";
+import { DEFAULT_LOCALE as p } from "../../../data/locale.js";
+const N = (u) => {
+  const { inputValue: m, locale: r = p, options: e } = u || {}, t = o(() => new a(r, e), [r, e]), n = o(
+    () => t.getNumberingSystem(m || ""),
+    [t, m]
+  ), s = o(
+    () => new i(r, { ...e, numberingSystem: n }),
+    [r, n, e]
+  );
+  return o(
+    () => ({
+      formatter: s,
+      parser: t
+    }),
+    [s, t]
+  );
+};
+export {
+  N as useNumberParseAndFormat
+};

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

@@ -0,0 +1,3 @@
+import { InputHTMLAttributes } from 'react';
+import { ExchangeAmountInputProps } from './types';
+export declare const ExchangeAmountInput: import('react').ForwardRefExoticComponent<ExchangeAmountInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "inputMode" | "onChange" | "max" | "min"> & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,87 @@
+import { jsxs as o, Fragment as C, jsx as n } from "react/jsx-runtime";
+import { forwardRef as L, useCallback as z } from "react";
+import { AmountInput as D } from "../AmountInput/index.js";
+import { DEFAULT_LOCALE as F } from "../../../data/locale.js";
+import { IconArrowsUpDown as V } from "../../../icons/IconArrowsUpDown.js";
+import { useExchangeAmountInput as j } from "./useExchangeAmountInput.js";
+import '../../../assets/ExchangeAmountInput.css';const k = "ExchangeAmountInput-module__icon___b5JpF", t = {
+  "flex-row": "ExchangeAmountInput-module__flex-row___ZKB-Q",
+  "gap-1": "ExchangeAmountInput-module__gap-1___vuNQW",
+  "gap-2": "ExchangeAmountInput-module__gap-2___4-s-b",
+  "swap-button": "ExchangeAmountInput-module__swap-button___i9lSz",
+  icon: k
+}, v = L(
+  ({
+    cryptoAmount: c,
+    cryptoCurrency: u,
+    cryptoDecimalPlaces: s,
+    fiatAmount: l,
+    fiatCurrency: e,
+    fiatDecimalPlaces: r,
+    exchangeRate: i,
+    inputType: a,
+    locale: p = F,
+    setCryptoAmount: _,
+    setFiatAmount: d,
+    setInputType: m,
+    ...g
+  }, h) => {
+    const f = a === "fiat" ? `switch input to ${u}` : `switch input to ${e}`, {
+      inputValue: x,
+      inputCurrency: w,
+      inputDecimalPlaces: A,
+      formatOutputValue: b,
+      outputValue: E,
+      outputCurrency: I,
+      handleChange: N
+    } = j({
+      cryptoAmount: c,
+      cryptoCurrency: u,
+      cryptoDecimalPlaces: s,
+      exchangeRate: i,
+      fiatAmount: l,
+      fiatCurrency: e,
+      fiatDecimalPlaces: r,
+      inputType: a,
+      locale: p,
+      setCryptoAmount: _,
+      setFiatAmount: d
+    }), $ = z(() => {
+      m(a === "fiat" ? "crypto" : "fiat");
+    }, [a, m]);
+    return /* @__PURE__ */ o(C, { children: [
+      /* @__PURE__ */ n(
+        D,
+        {
+          ref: h,
+          amount: x,
+          unit: w,
+          decimalPlaces: A,
+          locale: p,
+          setAmount: N,
+          ...g
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: `${t["flex-row"]} ${t["gap-1"]}`, children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            "aria-label": f,
+            className: t["swap-button"],
+            onClick: $,
+            type: "button",
+            children: /* @__PURE__ */ n(V, { className: t.icon })
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: `${t["flex-row"]} ${t["gap-2"]}`, children: [
+          /* @__PURE__ */ n("span", { "data-part": "amount-input-unsized-value", children: b(E ?? 0) }),
+          /* @__PURE__ */ n("span", { "data-part": "amount-input-unsized-currency", children: I })
+        ] })
+      ] })
+    ] });
+  }
+);
+v.displayName = "ExchangeAmountInput";
+export {
+  v as ExchangeAmountInput
+};

package/dist/components/forms/ExchangeAmountInput/types.d.ts

@@ -0,0 +1,30 @@
+import { AmountInputProps } from '../AmountInput/types';
+export type InputType = "crypto" | "fiat";
+export type ExchangeAmountInputProps = {
+    cryptoAmount: AmountInputProps["amount"];
+    cryptoDecimalPlaces?: AmountInputProps["decimalPlaces"];
+    cryptoCurrency: NonNullable<AmountInputProps["unit"]>;
+    exchangeRate: string;
+    fiatAmount: AmountInputProps["amount"];
+    fiatCurrency: NonNullable<AmountInputProps["unit"]>;
+    fiatDecimalPlaces?: AmountInputProps["decimalPlaces"];
+    inputType: InputType;
+    locale?: string;
+    max?: number;
+    min?: number;
+    setCryptoAmount: AmountInputProps["setAmount"];
+    setFiatAmount: AmountInputProps["setAmount"];
+    setInputType: (inputType: InputType) => void;
+};
+export type UseExchangeAmountInputParams = Omit<ExchangeAmountInputProps, "max" | "min" | "setInputType">;
+export interface UseExchangeAmountInputReturn {
+    formatInputValue: (value: number) => string;
+    formatOutputValue: (value: number) => string;
+    handleChange: (value: number, onChange?: (value: number) => void) => void;
+    inputCurrency: string;
+    inputDecimalPlaces: number;
+    inputValue: AmountInputProps["amount"];
+    outputCurrency: string;
+    outputDecimalPlaces: number;
+    outputValue: AmountInputProps["amount"];
+}

package/dist/components/forms/ExchangeAmountInput/types.js

@@ -0,0 +1 @@
+import "react";

package/dist/components/forms/ExchangeAmountInput/useExchangeAmountInput.d.ts

@@ -0,0 +1,2 @@
+import { UseExchangeAmountInputParams, UseExchangeAmountInputReturn } from './types';
+export declare const useExchangeAmountInput: ({ cryptoAmount, cryptoCurrency, cryptoDecimalPlaces, exchangeRate, fiatAmount, fiatCurrency, fiatDecimalPlaces, inputType, locale, setFiatAmount, setCryptoAmount, }: UseExchangeAmountInputParams) => UseExchangeAmountInputReturn;

package/dist/components/forms/ExchangeAmountInput/useExchangeAmountInput.js

@@ -0,0 +1,102 @@
+import { Big as h } from "big.js";
+import { useCallback as u, useMemo as _ } from "react";
+import { useNumberParseAndFormat as I } from "../AmountInput/useNumberParseAndFormat.js";
+import { DEFAULT_LOCALE as k } from "../../../data/locale.js";
+const O = (f) => {
+  try {
+    return h(f);
+  } catch {
+    return null;
+  }
+}, z = ({
+  cryptoAmount: f,
+  cryptoCurrency: F,
+  cryptoDecimalPlaces: n = 8,
+  exchangeRate: a,
+  fiatAmount: N,
+  fiatCurrency: V,
+  fiatDecimalPlaces: i = 2,
+  inputType: o,
+  locale: E = k,
+  setFiatAmount: m,
+  setCryptoAmount: d
+}) => {
+  const x = u(
+    (r) => {
+      m(r);
+      const t = O(r);
+      if (r === 0 || isNaN(r) || t === null) {
+        d(0);
+        return;
+      }
+      const s = t.times(a).round(n, h.roundDown);
+      d(s.eq(0) ? 0 : +s.toFixed());
+    },
+    [a, m, d, n]
+  ), L = u(
+    (r) => {
+      d(r);
+      const t = O(r);
+      if (r === 0 || isNaN(r) || t === null) {
+        m(0);
+        return;
+      }
+      const s = t.div(a).round(i, h.roundDown);
+      m(s.eq(0) ? 0 : +s.toFixed());
+    },
+    [a, m, d, i]
+  ), b = u(
+    (r, t) => {
+      o === "fiat" ? x(r) : L(r), t?.(r);
+    },
+    [x, L, o]
+  ), { formatter: g } = I({
+    inputValue: "",
+    locale: E,
+    options: {
+      maximumFractionDigits: i,
+      minimumFractionDigits: 0
+    }
+  }), { formatter: B } = I({
+    inputValue: "",
+    locale: E,
+    options: {
+      maximumFractionDigits: n,
+      minimumFractionDigits: 0
+    }
+  }), q = u(
+    (r) => o === "fiat" ? g.format(r) : B.format(r),
+    [B, g, o]
+  ), w = u(
+    (r) => o === "fiat" ? B.format(r) : g.format(r),
+    [B, g, o]
+  );
+  return _(
+    () => ({
+      inputCurrency: o === "fiat" ? V : F,
+      inputDecimalPlaces: o === "fiat" ? i : n,
+      inputValue: o === "fiat" ? N : f,
+      formatInputValue: q,
+      formatOutputValue: w,
+      handleChange: b,
+      outputCurrency: o === "fiat" ? F : V,
+      outputDecimalPlaces: o === "fiat" ? n : i,
+      outputValue: o === "fiat" ? f : N
+    }),
+    [
+      f,
+      F,
+      n,
+      N,
+      V,
+      i,
+      q,
+      w,
+      b,
+      o
+    ]
+  );
+};
+export {
+  z as useExchangeAmountInput
+};

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

@@ -7,6 +7,7 @@ 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 "libphonenumber-js";
 import '../../../assets/OTPForm.css';const o = {
   "otp-form": "OTPForm-module__otp-form___G1-63",
   "form-footer": "OTPForm-module__form-footer___ybmdd",
@@ -14,10 +15,10 @@ import '../../../assets/OTPForm.css';const o = {
   "loading-spinner": "OTPForm-module__loading-spinner___8N9XU",
   "resend-wrapper": "OTPForm-module__resend-wrapper___aZUAz",
   "reset-timer": "OTPForm-module__reset-timer___7ElWj"
-}, S = ({
+}, A = ({
   canResetOTP: m,
-  error: a,
-  isPending: t,
+  error: t,
+  isPending: a,
   onOTPChange: s,
   onResendOTP: l,
   otp: p,
@@ -36,7 +37,7 @@ import '../../../assets/OTPForm.css';const o = {
       autoSubmit: !0,
       passwordLength: n || 6,
       value: p,
-      error: b(a) ? a.message : a,
+      error: b(t) ? t.message : t,
       onChange: (f) => f.preventDefault(),
       onValueChange: s,
       className: o["otp-form"],
@@ -44,14 +45,14 @@ import '../../../assets/OTPForm.css';const o = {
     }
   ),
   /* @__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"] }) }),
+    a && !m && /* @__PURE__ */ e("div", { className: o["server-state-wrapper"], children: a && !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,
+          isPending: a,
           variant: "linkPrimary",
           children: "Resend code"
         }
@@ -72,5 +73,5 @@ import '../../../assets/OTPForm.css';const o = {
   ] })
 ] });
 export {
-  S as OTPForm
+  A as OTPForm
 };

package/dist/data/locale.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_LOCALE = "en-US";

package/dist/data/locale.js

@@ -0,0 +1,4 @@
+const L = "en-US";
+export {
+  L as DEFAULT_LOCALE
+};

package/dist/icons/IconArrowsUpDown.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const IconArrowsUpDown: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconArrowsUpDown.js

@@ -0,0 +1,14 @@
+import { jsx as l } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as r } from "./SvgIcon.js";
+const t = (o) => /* @__PURE__ */ l(r, { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, ...o, children: /* @__PURE__ */ l(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M2.24 6.8a.75.75 0 0 0 1.06-.04l1.95-2.1v8.59a.75.75 0 0 0 1.5 0V4.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L2.2 5.74a.75.75 0 0 0 .04 1.06Zm8 6.4a.75.75 0 0 0-.04 1.06l3.25 3.5a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02l-1.95 2.1V6.75a.75.75 0 0 0-1.5 0v8.59l-1.95-2.1a.75.75 0 0 0-1.06-.04Z",
+    clipRule: "evenodd"
+  }
+) });
+export {
+  t as IconArrowsUpDown
+};

package/dist/icons/index.d.ts

@@ -1,4 +1,5 @@
 export * from './IconArrowLeft';
+export * from './IconArrowsUpDown';
 export * from './IconCheckCircle';
 export * from './IconEnvelope';
 export * from './IconExclamationCircle';

package/dist/icons/index.js

@@ -1,16 +1,18 @@
 import { IconArrowLeft as e } from "./IconArrowLeft.js";
-import { IconCheckCircle as n } from "./IconCheckCircle.js";
-import { IconEnvelope as f } from "./IconEnvelope.js";
-import { IconExclamationCircle as p } from "./IconExclamationCircle.js";
-import { IconLock as I } from "./IconLock.js";
-import { IconPhone as a } from "./IconPhone.js";
-import { IconXMark as k } from "./IconXMark.js";
+import { IconArrowsUpDown as n } from "./IconArrowsUpDown.js";
+import { IconCheckCircle as t } from "./IconCheckCircle.js";
+import { IconEnvelope as m } from "./IconEnvelope.js";
+import { IconExclamationCircle as I } from "./IconExclamationCircle.js";
+import { IconLock as a } from "./IconLock.js";
+import { IconPhone as k } from "./IconPhone.js";
+import { IconXMark as C } from "./IconXMark.js";
 export {
   e as IconArrowLeft,
-  n as IconCheckCircle,
-  f as IconEnvelope,
-  p as IconExclamationCircle,
-  I as IconLock,
-  a as IconPhone,
-  k as IconXMark
+  n as IconArrowsUpDown,
+  t as IconCheckCircle,
+  m as IconEnvelope,
+  I as IconExclamationCircle,
+  a as IconLock,
+  k as IconPhone,
+  C as IconXMark
 };

package/dist/index.js

@@ -2,70 +2,76 @@ import { AUTH_METHODS as e, CDPReactProvider as t, useAppConfig as n } from "./c
 import { AuthButton as p } from "./components/AuthButton/index.js";
 import { SendTransactionButton as x } from "./components/SendTransactionButton/index.js";
 import { SignIn as s } from "./components/SignIn/index.js";
-import { useSignInReducer as I } from "./components/SignIn/useSignInReducer.js";
-import { SignOutButton as g } from "./components/SignOutButton/index.js";
-import { SignInModal as S } from "./components/SignInModal/index.js";
+import { useSignInReducer as a } from "./components/SignIn/useSignInReducer.js";
+import { SignOutButton as l } from "./components/SignOutButton/index.js";
+import { SignInModal as u } from "./components/SignInModal/index.js";
 import { ThemeProvider as h, useTheme as C } from "./components/ThemeProvider/index.js";
 import { cssVariables as d } from "./theme/cssVariables.js";
-import { theme as B } from "./theme/theme.js";
-import { colors as E, colorsBase as M, colorsComponents as v, colorsSemantic as P, font as b, tokens as D } from "./theme/tokens.js";
-import { flattenTokensObject as O, themeToCssVariables as w } from "./theme/utils.js";
-import { IconArrowLeft as L } from "./icons/IconArrowLeft.js";
-import { IconCheckCircle as U } from "./icons/IconCheckCircle.js";
-import { IconEnvelope as j } from "./icons/IconEnvelope.js";
-import { IconExclamationCircle as _ } from "./icons/IconExclamationCircle.js";
-import { IconLock as y } from "./icons/IconLock.js";
-import { IconPhone as G } from "./icons/IconPhone.js";
-import { IconXMark as K } from "./icons/IconXMark.js";
-import { getMessageFromUnknownError as Q } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as Y } from "./utils/isApiError.js";
-import { isEmailInvalid as $ } from "./utils/isEmailInvalid.js";
-import { SignInAuthMethodButtons as ro } from "./components/SignIn/SignInAuthMethodButtons.js";
-import { SignInBackButton as to } from "./components/SignIn/SignInBackButton.js";
-import { SignInDescription as mo } from "./components/SignIn/SignInDescription.js";
-import { SignInFooter as fo } from "./components/SignIn/SignInFooter.js";
-import { SignInForm as io } from "./components/SignIn/SignInForm.js";
-import { SignInImage as co } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as ao } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as lo } from "./components/SignIn/SignInProvider.js";
+import { theme as A } from "./theme/theme.js";
+import { colors as E, colorsBase as M, colorsComponents as P, colorsSemantic as b, font as v, tokens as w } from "./theme/tokens.js";
+import { flattenTokensObject as F, themeToCssVariables as O } from "./theme/utils.js";
+import { IconArrowLeft as V } from "./icons/IconArrowLeft.js";
+import { IconArrowsUpDown as L } from "./icons/IconArrowsUpDown.js";
+import { IconCheckCircle as j } from "./icons/IconCheckCircle.js";
+import { IconEnvelope as X } from "./icons/IconEnvelope.js";
+import { IconExclamationCircle as q } from "./icons/IconExclamationCircle.js";
+import { IconLock as z } from "./icons/IconLock.js";
+import { IconPhone as J } from "./icons/IconPhone.js";
+import { IconXMark as Q } from "./icons/IconXMark.js";
+import { clamp as Y } from "./utils/clamp.js";
+import { getMessageFromUnknownError as $ } from "./utils/getMessageFromUnknownError.js";
+import { isApiError as ro } from "./utils/isApiError.js";
+import { isEmailInvalid as to } from "./utils/isEmailInvalid.js";
+import { parseValuesFromPhoneNumber as mo } from "./utils/parseValuesFromPhoneNumber.js";
+import { SignInAuthMethodButtons as fo } from "./components/SignIn/SignInAuthMethodButtons.js";
+import { SignInBackButton as io } from "./components/SignIn/SignInBackButton.js";
+import { SignInDescription as co } from "./components/SignIn/SignInDescription.js";
+import { SignInFooter as Io } from "./components/SignIn/SignInFooter.js";
+import { SignInForm as go } from "./components/SignIn/SignInForm.js";
+import { SignInImage as So } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as Co } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as ko } from "./components/SignIn/SignInProvider.js";
 export {
   e as AUTH_METHODS,
   p as AuthButton,
   t as CDPReactProvider,
-  L as IconArrowLeft,
-  U as IconCheckCircle,
-  j as IconEnvelope,
-  _ as IconExclamationCircle,
-  y as IconLock,
-  G as IconPhone,
-  K as IconXMark,
+  V as IconArrowLeft,
+  L as IconArrowsUpDown,
+  j as IconCheckCircle,
+  X as IconEnvelope,
+  q as IconExclamationCircle,
+  z as IconLock,
+  J as IconPhone,
+  Q as IconXMark,
   x as SendTransactionButton,
   s as SignIn,
-  ro as SignInAuthMethodButtons,
-  to as SignInBackButton,
-  mo as SignInDescription,
-  fo as SignInFooter,
-  io as SignInForm,
-  co as SignInImage,
-  S as SignInModal,
-  ao as SignInTitle,
-  g as SignOutButton,
+  fo as SignInAuthMethodButtons,
+  io as SignInBackButton,
+  co as SignInDescription,
+  Io as SignInFooter,
+  go as SignInForm,
+  So as SignInImage,
+  u as SignInModal,
+  Co as SignInTitle,
+  l as SignOutButton,
   h as ThemeProvider,
+  Y as clamp,
   E as colors,
   M as colorsBase,
-  v as colorsComponents,
-  P as colorsSemantic,
+  P as colorsComponents,
+  b as colorsSemantic,
   d as cssVariables,
-  O as flattenTokensObject,
-  b as font,
-  Q as getMessageFromUnknownError,
-  Y as isApiError,
-  $ as isEmailInvalid,
-  B as theme,
-  w as themeToCssVariables,
-  D as tokens,
+  F as flattenTokensObject,
+  v as font,
+  $ as getMessageFromUnknownError,
+  ro as isApiError,
+  to as isEmailInvalid,
+  mo as parseValuesFromPhoneNumber,
+  A as theme,
+  O as themeToCssVariables,
+  w as tokens,
   n as useAppConfig,
-  lo as useSignInContext,
-  I as useSignInReducer,
+  ko as useSignInContext,
+  a as useSignInReducer,
   C as useTheme
 };

package/dist/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/utils/clamp.js

@@ -0,0 +1,4 @@
+const n = (t, a, m) => Math.min(Math.max(t, a), m);
+export {
+  n as clamp
+};

package/dist/utils/index.d.ts

@@ -1,3 +1,5 @@
+export * from './clamp';
 export * from './getMessageFromUnknownError';
 export * from './isApiError';
 export * from './isEmailInvalid';
+export * from './parseValuesFromPhoneNumber';

package/dist/utils/index.js

@@ -1,8 +1,12 @@
-import { getMessageFromUnknownError as e } from "./getMessageFromUnknownError.js";
-import { isApiError as m } from "./isApiError.js";
-import { isEmailInvalid as p } from "./isEmailInvalid.js";
+import { clamp as e } from "./clamp.js";
+import { getMessageFromUnknownError as p } from "./getMessageFromUnknownError.js";
+import { isApiError as s } from "./isApiError.js";
+import { isEmailInvalid as f } from "./isEmailInvalid.js";
+import { parseValuesFromPhoneNumber as n } from "./parseValuesFromPhoneNumber.js";
 export {
-  e as getMessageFromUnknownError,
-  m as isApiError,
-  p as isEmailInvalid
+  e as clamp,
+  p as getMessageFromUnknownError,
+  s as isApiError,
+  f as isEmailInvalid,
+  n as parseValuesFromPhoneNumber
 };

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "dependencies": {
+    "@internationalized/number": "3.6.4",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-form": "^0.1.7",
     "@radix-ui/react-one-time-password-field": "^0.1.7",
-    "react-transition-state": "2.3.0",
-    "libphonenumber-js": "^1.12.10"
+    "big.js": "7.0.1",
+    "libphonenumber-js": "^1.12.10",
+    "react-transition-state": "2.3.0"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.20",
-    "@coinbase/cdp-hooks": "^0.0.20"
+    "@coinbase/cdp-core": "^0.0.22",
+    "@coinbase/cdp-hooks": "^0.0.22"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -23,6 +25,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/big.js": "6.2.2",
     "@types/glob": "^9.0.0",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
@@ -41,8 +44,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.20",
-    "@coinbase/cdp-hooks": "^0.0.20"
+    "@coinbase/cdp-core": "^0.0.22",
+    "@coinbase/cdp-hooks": "^0.0.22"
   },
   "size-limit": [
     {