@coinbase/cdp-react 0.0.58 → 0.0.61

package/dist/components/SignIn/hooks/useSignInWithOAuth.d.ts

@@ -1,6 +1,5 @@
 import { OAuth2ProviderType, APIError } from '@coinbase/cdp-hooks';
 import { RefObject } from 'react';
-export declare const OAUTH_PROVIDER_SESSION_STORAGE_KEY = "cdp-react-sign-in-with-oauth-provider-name";
 export type UseSignInWithOAuthReturnType = {
     error: string | APIError | null;
     isPending: boolean;

package/dist/components/SignIn/hooks/useSignInWithOAuth.js

@@ -1,30 +1,29 @@
-import { useSignInWithOAuth as l } from "@coinbase/cdp-hooks";
-import { useState as c, useRef as m, useCallback as I } from "react";
-import { useProviderName as f } from "../../CDPReactProvider/index.js";
-import { isApiError as A } from "../../../utils/isApiError.js";
-const O = "cdp-react-sign-in-with-oauth-provider-name", W = () => {
-  const { signInWithOAuth: t } = l(), [n, e] = c(!1), [g, s] = c(null), o = f(), i = m(null), a = "An error occurred while signing in. Please try again.";
+import { useSignInWithOAuth as g } from "@coinbase/cdp-hooks";
+import { useState as c, useRef as f, useCallback as m } from "react";
+import { useOauthStatusModal as A } from "../../OAuthStatusModal/index.js";
+import { isApiError as I } from "../../../utils/isApiError.js";
+const E = () => {
+  const { signInWithOAuth: n } = g(), [r, s] = c(!1), [l, e] = c(null), o = f(null), i = "An error occurred while signing in. Please try again.", { persistOAuthState: u } = A();
   return {
-    signInWithOAuth: I(
-      async (u) => {
-        if (!n) {
-          i.current = u, e(!0), s(null);
+    signInWithOAuth: m(
+      async (a) => {
+        if (!r) {
+          o.current = a, s(!0), e(null);
           try {
-            await t(u), sessionStorage.setItem(O, o);
-          } catch (r) {
-            const h = A(r) ? r : r instanceof Error && r.message || a;
-            s(h), e(!1), console.error(r);
+            await n(a), u(!1);
+          } catch (t) {
+            const h = I(t) ? t : t instanceof Error && t.message || i;
+            e(h), s(!1), console.error(t);
           }
         }
       },
-      [n, t, o]
+      [r, n, u]
     ),
-    oauthProvider: i,
-    isPending: n,
-    error: g
+    oauthProvider: o,
+    isPending: r,
+    error: l
   };
 };
 export {
-  O as OAUTH_PROVIDER_SESSION_STORAGE_KEY,
-  W as useSignInWithOAuth
+  E as useSignInWithOAuth
 };

package/dist/components/SignIn/index.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { AuthMethod } from '../CDPReactProvider';
 import { SignInAuthMethodButtons, SignInAuthMethodButtonsProps } from './SignInAuthMethodButtons';
 import { SignInBackButton, SignInBackButtonProps } from './SignInBackButton';
 import { SignInDescription, SignInDescriptionProps } from './SignInDescription';
@@ -11,6 +12,7 @@ import { SignInState, SignInAction } from './types';
 export interface SignInProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     children?: ReactNode | ((state: SignInState) => ReactNode);
     onSuccess?: () => void;
+    authMethods?: AuthMethod[];
 }
-export declare const SignIn: (props: SignInProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignIn: ({ authMethods, ...props }: SignInProps) => import("react/jsx-runtime").JSX.Element;
 export { SignInAuthMethodButtons, SignInBackButton, SignInDescription, SignInFooter, SignInForm, SignInImage, SignInTitle, useSignInContext, type SignInAuthMethodButtonsProps, type SignInBackButtonProps, type SignInDescriptionProps, type SignInFormProps, type SignInImageProps, type SignInTitleProps, type SignInState, type SignInAction, };

package/dist/components/SignIn/index.js

@@ -1,4 +1,4 @@
-import { jsx as n, jsxs as t, Fragment as c } from "react/jsx-runtime";
+import { jsx as n, jsxs as r, Fragment as c } from "react/jsx-runtime";
 import { u as d } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
 import "react";
 import { useAppConfig as u } from "../CDPReactProvider/index.js";
@@ -11,31 +11,36 @@ import { SignInImage as w } from "./SignInImage.js";
 import { SignInProvider as C, useSignInContext as h } from "./SignInProvider.js";
 import { SignInTitle as v } from "./SignInTitle.js";
 import "@coinbase/cdp-hooks";
-import '../../assets/SignIn.css';const F = "SignIn-module__footer___3Gkbc", o = {
+import '../../assets/SignIn.css';const F = "SignIn-module__footer___3Gkbc", t = {
   "sign-in": "SignIn-module__sign-in___cYpee",
   "title-desc-wrapper": "SignIn-module__title-desc-wrapper___VpPcA",
   "back-button": "SignIn-module__back-button___bmE-y",
   "back-button-wrapper": "SignIn-module__back-button-wrapper___Q9FA1",
   footer: F
-}, N = ({ className: r = "", children: e, onSuccess: p, ...a }) => {
-  const { state: _ } = h(), { showCoinbaseFooter: g } = u(), s = typeof e == "function" ? e(_) : e;
-  return /* @__PURE__ */ t("div", { className: `${o["sign-in"]} ${r}`, ...a, children: [
+}, N = ({
+  className: e = "",
+  children: o,
+  onSuccess: p,
+  ...a
+}) => {
+  const { state: _ } = h(), { showCoinbaseFooter: g } = u(), s = typeof o == "function" ? o(_) : o;
+  return /* @__PURE__ */ r("div", { className: `${t["sign-in"]} ${e}`, ...a, children: [
     s,
-    !s && /* @__PURE__ */ t(c, { children: [
-      /* @__PURE__ */ n("div", { className: o["back-button-wrapper"], children: /* @__PURE__ */ n(I, { className: o["back-button"] }) }),
+    !s && /* @__PURE__ */ r(c, { children: [
+      /* @__PURE__ */ n("div", { className: t["back-button-wrapper"], children: /* @__PURE__ */ n(I, { className: t["back-button"] }) }),
       /* @__PURE__ */ n(w, {}),
-      /* @__PURE__ */ n(k, { onSuccess: p, children: ({ authMethod: i, step: m, Form: l }) => /* @__PURE__ */ t(c, { children: [
-        /* @__PURE__ */ t("div", { className: o["title-desc-wrapper"], children: [
+      /* @__PURE__ */ n(k, { onSuccess: p, children: ({ authMethod: i, step: m, Form: l }) => /* @__PURE__ */ r(c, { children: [
+        /* @__PURE__ */ r("div", { className: t["title-desc-wrapper"], children: [
           /* @__PURE__ */ n(v, { step: m, authMethod: i }),
           /* @__PURE__ */ n(S, { step: m, authMethod: i })
         ] }),
         l,
         m === "credentials" && /* @__PURE__ */ n(f, { activeMethod: i })
       ] }) }),
-      g && /* @__PURE__ */ n(b, { className: o.footer })
+      g && /* @__PURE__ */ n(b, { className: t.footer })
     ] })
   ] });
-}, V = (r) => (d("sign_in"), /* @__PURE__ */ n(C, { children: /* @__PURE__ */ n(N, { ...r }) }));
+}, V = ({ authMethods: e, ...o }) => (d("sign_in"), /* @__PURE__ */ n(C, { authMethods: e, children: /* @__PURE__ */ n(N, { ...o }) }));
 export {
   V as SignIn,
   f as SignInAuthMethodButtons,

package/dist/components/SignIn/types.d.ts

@@ -7,6 +7,7 @@ export interface SignInTitleAndDescriptionProps {
 }
 export interface SignInState {
     authMethod: AuthMethod;
+    authMethods: AuthMethod[];
     canResetOTP: boolean;
     email: string;
     error: string | APIError | null;
@@ -93,6 +94,7 @@ export type SignInAction = {
 };
 export interface SignInFlowProps {
     step: SignInState["step"];
+    autoFocus?: boolean;
     onSuccess?: () => void;
     children?: (props: {
         step: SignInState["step"];

package/dist/components/SignIn/useSignInReducer.js

@@ -72,6 +72,7 @@ function l(e, r) {
     case "RESET_STATE":
       return {
         authMethod: e.authMethod,
+        authMethods: e.authMethods,
         canResetOTP: !1,
         error: null,
         isPending: !1,

package/dist/components/SignInModal/index.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { AuthMethod } from '../CDPReactProvider';
 import { ButtonProps } from '../ui/Button';
 import { ModalContentProps } from '../ui/Modal';
 export interface SignInModalTriggerProps extends Partial<Pick<ButtonProps, "className" | "fullWidth" | "size" | "style" | "variant">> {
@@ -9,6 +10,7 @@ export interface SignInModalContentProps extends ModalContentProps {
     onSuccess?: () => void;
 }
 export interface SignInModalProps {
+    authMethods?: AuthMethod[];
     children?: ReactNode;
     open?: boolean;
     setIsOpen?: (value: boolean) => void;
@@ -16,4 +18,4 @@ export interface SignInModalProps {
 }
 export declare const SignInModalTrigger: ({ children, className, label, ...props }: SignInModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SignInModalContent: (props: SignInModalContentProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SignInModal: ({ children, open, setIsOpen, onSuccess }: SignInModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignInModal: ({ authMethods, children, open, setIsOpen, onSuccess, }: SignInModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignInModal/index.js

@@ -1,86 +1,93 @@
-import { jsx as n, jsxs as t, Fragment as d } from "react/jsx-runtime";
-import { u as I } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
-import { createContext as C, useMemo as b, useContext as x } from "react";
-import { c as v } from "../../chunks/lite.1fxw3LjI.js";
-import { useAppConfig as N } from "../CDPReactProvider/index.js";
-import { SignIn as w } from "../SignIn/index.js";
+import { jsx as n, jsxs as t, Fragment as c } from "react/jsx-runtime";
+import { u as C } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
+import { createContext as b, useMemo as x, useContext as v } from "react";
+import { c as N } from "../../chunks/lite.1fxw3LjI.js";
+import { useAppConfig as w } from "../CDPReactProvider/index.js";
+import { SignIn as T } from "../SignIn/index.js";
 import "@coinbase/cdp-hooks";
-import { Button as p } from "../ui/Button/index.js";
-import { ModalTrigger as T, ModalContent as k, ModalClose as B, Modal as D, ModalTitle as F, ModalDescription as j } from "../ui/Modal/index.js";
-import { VisuallyHidden as m } from "../ui/VisuallyHidden/index.js";
-import { IconXMark as y } from "../../icons/IconXMark.js";
-import { childrenHasComponent as u } from "../../utils/childrenHasComponent.js";
-import { SignInBackButton as A } from "../SignIn/SignInBackButton.js";
-import { SignInImage as V } from "../SignIn/SignInImage.js";
-import { SignInForm as z } from "../SignIn/SignInForm.js";
-import { SignInTitle as g } from "../SignIn/SignInTitle.js";
-import { SignInDescription as _ } from "../SignIn/SignInDescription.js";
-import { SignInAuthMethodButtons as E } from "../SignIn/SignInAuthMethodButtons.js";
-import { SignInFooter as H } from "../SignIn/SignInFooter.js";
-import '../../assets/SignInModal.css';const J = "SignInModal-module__trigger___IcJ8x", O = "SignInModal-module__footer___6qEo2", X = "SignInModal-module__buttons___jhaVn", i = {
-  trigger: J,
+import { Button as h } from "../ui/Button/index.js";
+import { ModalTrigger as k, ModalContent as B, ModalClose as D, Modal as F, ModalTitle as j, ModalDescription as y } from "../ui/Modal/index.js";
+import { VisuallyHidden as g } from "../ui/VisuallyHidden/index.js";
+import { IconXMark as A } from "../../icons/IconXMark.js";
+import { childrenHasComponent as f } from "../../utils/childrenHasComponent.js";
+import { SignInBackButton as V } from "../SignIn/SignInBackButton.js";
+import { SignInImage as z } from "../SignIn/SignInImage.js";
+import { SignInForm as E } from "../SignIn/SignInForm.js";
+import { SignInTitle as _ } from "../SignIn/SignInTitle.js";
+import { SignInDescription as u } from "../SignIn/SignInDescription.js";
+import { SignInAuthMethodButtons as H } from "../SignIn/SignInAuthMethodButtons.js";
+import { SignInFooter as J } from "../SignIn/SignInFooter.js";
+import '../../assets/SignInModal.css';const O = "SignInModal-module__trigger___IcJ8x", X = "SignInModal-module__footer___6qEo2", $ = "SignInModal-module__buttons___jhaVn", e = {
+  trigger: O,
   "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: O,
-  buttons: X,
+  footer: X,
+  buttons: $,
   "back-button": "SignInModal-module__back-button___nMh2-",
   "close-icon": "SignInModal-module__close-icon___b-gMh"
-}, h = C(null), $ = () => {
-  const o = x(h);
-  if (!o)
+}, M = b(null), q = () => {
+  const i = v(M);
+  if (!i)
     throw new Error("useSignInModalContext must be used within a SignInModal");
-  return o;
-}, f = ({
-  children: o,
-  className: r = "",
-  label: l,
-  ...e
-}) => /* @__PURE__ */ n(T, { asChild: !0, children: o || /* @__PURE__ */ n(p, { className: v(i.trigger, r), ...e, children: l || "Sign in" }) }), c = (o) => {
-  const { showCoinbaseFooter: r } = N(), { onSuccess: l } = $();
-  return /* @__PURE__ */ n(k, { ...o, children: /* @__PURE__ */ n(
-    w,
+  return i;
+}, p = ({
+  children: i,
+  className: o = "",
+  label: s,
+  ...r
+}) => /* @__PURE__ */ n(k, { asChild: !0, children: i || /* @__PURE__ */ n(h, { className: N(e.trigger, o), ...r, children: s || "Sign in" }) }), m = (i) => {
+  const { showCoinbaseFooter: o } = w(), { authMethods: s, onSuccess: r } = q();
+  return /* @__PURE__ */ n(B, { ...i, children: /* @__PURE__ */ n(
+    T,
     {
-      onSuccess: l,
-      className: `${i["sign-in"]} ${r ? "" : i["no-footer"]}`,
-      ...o,
-      children: /* @__PURE__ */ t(d, { children: [
-        /* @__PURE__ */ n(q, {}),
-        /* @__PURE__ */ t("div", { className: i.buttons, children: [
-          /* @__PURE__ */ n(A, { className: i["back-button"] }),
-          /* @__PURE__ */ n(B, { asChild: !0, children: /* @__PURE__ */ n(p, { "aria-label": "Close", size: "md", variant: "transparentSecondary", children: /* @__PURE__ */ n(y, { className: i["close-icon"] }) }) })
+      authMethods: s,
+      onSuccess: r,
+      className: `${e["sign-in"]} ${o ? "" : e["no-footer"]}`,
+      ...i,
+      children: /* @__PURE__ */ t(c, { children: [
+        /* @__PURE__ */ n(G, {}),
+        /* @__PURE__ */ t("div", { className: e.buttons, children: [
+          /* @__PURE__ */ n(V, { className: e["back-button"] }),
+          /* @__PURE__ */ n(D, { asChild: !0, children: /* @__PURE__ */ n(h, { "aria-label": "Close", size: "md", variant: "transparentSecondary", children: /* @__PURE__ */ n(A, { className: e["close-icon"] }) }) })
         ] }),
-        /* @__PURE__ */ n("div", { className: i["sign-in-image"], children: /* @__PURE__ */ n(V, {}) }),
-        /* @__PURE__ */ n(z, { onSuccess: l, children: ({ authMethod: e, step: s, Form: a }) => /* @__PURE__ */ t(d, { children: [
-          /* @__PURE__ */ t("div", { className: i["title-desc-wrapper"], children: [
-            s === "verification" ? /* @__PURE__ */ n(m, { as: "div", children: /* @__PURE__ */ n(g, {}) }) : /* @__PURE__ */ n(g, {}),
-            s === "credentials" ? /* @__PURE__ */ n(m, { as: "div", children: /* @__PURE__ */ n(_, { authMethod: e }) }) : /* @__PURE__ */ n(_, { authMethod: e })
+        /* @__PURE__ */ n("div", { className: e["sign-in-image"], children: /* @__PURE__ */ n(z, {}) }),
+        /* @__PURE__ */ n(E, { onSuccess: r, children: ({ authMethod: l, step: a, Form: d }) => /* @__PURE__ */ t(c, { children: [
+          /* @__PURE__ */ t("div", { className: e["title-desc-wrapper"], children: [
+            a === "verification" ? /* @__PURE__ */ n(g, { as: "div", children: /* @__PURE__ */ n(_, {}) }) : /* @__PURE__ */ n(_, {}),
+            a === "credentials" ? /* @__PURE__ */ n(g, { as: "div", children: /* @__PURE__ */ n(u, { authMethod: l }) }) : /* @__PURE__ */ n(u, { authMethod: l })
           ] }),
-          /* @__PURE__ */ n("div", { className: i["sign-in-form"], children: a }),
-          s === "credentials" && /* @__PURE__ */ n(E, { activeMethod: e })
+          /* @__PURE__ */ n("div", { className: e["sign-in-form"], children: d }),
+          a === "credentials" && /* @__PURE__ */ n(H, { activeMethod: l })
         ] }) }),
-        r && /* @__PURE__ */ n(H, { className: i.footer })
+        o && /* @__PURE__ */ n(J, { className: e.footer })
       ] })
     }
   ) });
-}, cn = ({ children: o, open: r, setIsOpen: l, onSuccess: e }) => {
-  I("sign_in_modal");
-  const s = o ? u(o, f) : !1, a = o ? u(o, c) : !1, M = !s && !a, S = b(() => ({ onSuccess: e }), [e]);
-  return /* @__PURE__ */ n(h.Provider, { value: S, children: /* @__PURE__ */ n(D, { open: r, onOpenChange: l, children: M ? /* @__PURE__ */ t(d, { children: [
-    /* @__PURE__ */ n(f, { children: o }),
-    /* @__PURE__ */ n(c, {})
-  ] }) : /* @__PURE__ */ t(d, { children: [
+}, mn = ({
+  authMethods: i,
+  children: o,
+  open: s,
+  setIsOpen: r,
+  onSuccess: l
+}) => {
+  C("sign_in_modal");
+  const a = o ? f(o, p) : !1, d = o ? f(o, m) : !1, S = !a && !d, I = x(() => ({ authMethods: i, onSuccess: l }), [i, l]);
+  return /* @__PURE__ */ n(M.Provider, { value: I, children: /* @__PURE__ */ n(F, { open: s, onOpenChange: r, children: S ? /* @__PURE__ */ t(c, { children: [
+    /* @__PURE__ */ n(p, { children: o }),
+    /* @__PURE__ */ n(m, {})
+  ] }) : /* @__PURE__ */ t(c, { children: [
     o,
-    !a && /* @__PURE__ */ n(c, {})
+    !d && /* @__PURE__ */ n(m, {})
   ] }) }) });
-}, q = () => /* @__PURE__ */ t(m, { children: [
-  /* @__PURE__ */ n(F, { asChild: !0, children: /* @__PURE__ */ n(g, { as: "span" }) }),
-  /* @__PURE__ */ n(j, { asChild: !0, children: /* @__PURE__ */ n(_, { as: "span" }) })
+}, G = () => /* @__PURE__ */ t(g, { children: [
+  /* @__PURE__ */ n(j, { asChild: !0, children: /* @__PURE__ */ n(_, { as: "span" }) }),
+  /* @__PURE__ */ n(y, { asChild: !0, children: /* @__PURE__ */ n(u, { as: "span" }) })
 ] });
 export {
-  cn as SignInModal,
-  c as SignInModalContent,
-  f as SignInModalTrigger
+  mn as SignInModal,
+  m as SignInModalContent,
+  p as SignInModalTrigger
 };

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

@@ -1,5 +1,5 @@
-import { ElementType, HTMLAttributes, ReactNode } from 'react';
-interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+import { ElementType, LabelHTMLAttributes, ReactNode } from 'react';
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     as?: ElementType;
     children?: ReactNode;
 }

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

@@ -1,4 +1,4 @@
-import { jsxs as _, jsx as i } from "react/jsx-runtime";
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
 import "libphonenumber-js";
 import { forwardRef as R, useRef as S, useCallback as d, useMemo as w, useEffect as z } from "react";
 import { CountrySelect as B } from "../CountrySelect/index.js";
@@ -15,14 +15,14 @@ import '../../../assets/PhoneNumberInput.css';const A = "PhoneNumberInput-module
   "country-calling-code": "PhoneNumberInput-module__country-calling-code___N6zDW"
 }, T = R(
   ({
-    autoComplete: u = "tel-national",
-    className: h = "",
+    autoComplete: a = "tel-national",
+    className: _ = "",
     countryCode: n = "US",
     countryOptions: p = !0,
     onCountryCodeChange: g,
     onPhoneNumberChange: c,
     phoneNumber: f,
-    ...a
+    ...u
   }, o) => {
     const b = S(null), C = d(
       (e) => {
@@ -31,7 +31,7 @@ import '../../../assets/PhoneNumberInput.css';const A = "PhoneNumberInput-module
       [o]
     ), {
       formatBeforePhoneNumberChange: v,
-      formatBeforeCountryCodeChange: N,
+      formatBeforeCountryCodeChange: y,
       placeholder: P,
       formattedDisplayNumber: V
     } = k(f.value, n), j = d(
@@ -44,10 +44,10 @@ import '../../../assets/PhoneNumberInput.css';const A = "PhoneNumberInput-module
       [v, c, f]
     ), r = d(
       (e) => {
-        const t = N(e);
+        const t = y(e);
         g?.(e), c?.(t);
       },
-      [N, g, c]
+      [y, g, c]
     ), x = d(
       (e) => {
         r(e), setTimeout(() => {
@@ -55,28 +55,30 @@ import '../../../assets/PhoneNumberInput.css';const A = "PhoneNumberInput-module
         }, 0);
       },
       [r]
-    ), s = typeof p == "boolean" ? p : p.length > 0, m = !s && n ? W.find((e) => e.code === n) : void 0, y = a["aria-invalid"] && a["aria-invalid"] !== "false", I = a["data-success"] && a["data-success"] !== "false", D = w(() => {
-      const e = [l["phone-number-input"], h];
-      return y && e.push(l.invalid), I && e.push(l.success), !s && m && e.push(l["inline-country-calling-code"]), e.join(" ");
-    }, [y, I, h, m, s]);
+    ), i = typeof p == "boolean" ? p : p.length > 0, m = !i && n ? W.find((e) => e.code === n) : void 0, N = u["aria-invalid"] && u["aria-invalid"] !== "false", I = u["data-success"] && u["data-success"] !== "false", D = w(() => {
+      const e = [l["phone-number-input"], _];
+      return N && e.push(l.invalid), I && e.push(l.success), !i && m && e.push(l["inline-country-calling-code"]), e.join(" ");
+    }, [N, I, _, m, i]);
     return z(() => {
       r(n);
-    }, [n, r]), /* @__PURE__ */ _("div", { className: D, children: [
-      !s && m && /* @__PURE__ */ i(U, { country: m }),
-      s && /* @__PURE__ */ i(
+    }, [n, r]), /* @__PURE__ */ h("div", { className: D, children: [
+      !i && m && /* @__PURE__ */ s(U, { country: m }),
+      i && /* @__PURE__ */ s(
         B,
         {
+          "aria-label": "Country code",
           defaultValue: n,
           onValueChange: x
         }
       ),
-      /* @__PURE__ */ i(
+      /* @__PURE__ */ s(
         H,
         {
-          ...a,
+          ...u,
+          "aria-label": "Phone number",
           ref: C,
           className: l.input,
-          autoComplete: u,
+          autoComplete: a,
           onChange: j,
           placeholder: P,
           type: "tel",
@@ -87,12 +89,12 @@ import '../../../assets/PhoneNumberInput.css';const A = "PhoneNumberInput-module
   }
 );
 T.displayName = "PhoneNumberInput";
-const U = ({ country: u }) => /* @__PURE__ */ _("span", { className: l["country-calling-code"], children: [
-  /* @__PURE__ */ i("span", { "aria-hidden": "true", children: u.flag }),
-  /* @__PURE__ */ i(M, { children: u.name }),
-  /* @__PURE__ */ _("span", { children: [
+const U = ({ country: a }) => /* @__PURE__ */ h("span", { className: l["country-calling-code"], children: [
+  /* @__PURE__ */ s("span", { "aria-hidden": "true", children: a.flag }),
+  /* @__PURE__ */ s(M, { children: a.name }),
+  /* @__PURE__ */ h("span", { children: [
     "+",
-    u.callingCode
+    a.callingCode
   ] })
 ] });
 export {

package/dist/components/ui/Banner/index.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface BannerProps extends HTMLAttributes<HTMLElement> {
+    icon?: ReactNode;
+    variant?: "success" | "warning" | "error";
+}
+export declare const Banner: ({ className, children, icon, variant, ...props }: BannerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Banner/index.js

@@ -0,0 +1,27 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { c as l } from "../../../chunks/lite.1fxw3LjI.js";
+import "react";
+import { IconCheckCircle as _ } from "../../../icons/IconCheckCircle.js";
+import { IconExclamationCircle as x } from "../../../icons/IconExclamationCircle.js";
+import { IconExclamationTriangle as d } from "../../../icons/IconExclamationTriangle.js";
+import '../../../assets/Banner.css';const p = "Banner-module__banner___vODjX", f = "Banner-module__icon___wzB6C", u = "Banner-module__text___fTYC-", c = {
+  banner: p,
+  icon: f,
+  text: u
+}, B = {
+  error: x,
+  success: _,
+  warning: d
+}, N = ({ className: a = "", children: s, icon: n, variant: o, ...i }) => {
+  const r = o ? B[o] : void 0, m = n || r;
+  return /* @__PURE__ */ e("div", { "data-variant": o, className: l(c.banner, a), ...i, children: [
+    m && /* @__PURE__ */ e("span", { className: c.icon, children: [
+      n,
+      !n && r && /* @__PURE__ */ t(r, {})
+    ] }),
+    /* @__PURE__ */ t("div", { className: c.text, children: s })
+  ] });
+};
+export {
+  N as Banner
+};

package/dist/components/ui/IframeButton/index.d.ts

@@ -0,0 +1,11 @@
+import { IframeHTMLAttributes, ReactNode } from 'react';
+import { ButtonSize } from '../../../theme/theme';
+interface IframeButtonProps extends IframeHTMLAttributes<HTMLIFrameElement> {
+    isPending?: boolean;
+    label: ReactNode;
+    icon?: boolean;
+    fullWidth?: boolean;
+    size?: ButtonSize;
+}
+export declare const IframeButton: import('react').ForwardRefExoticComponent<IframeButtonProps & import('react').RefAttributes<HTMLIFrameElement>>;
+export {};

package/dist/components/ui/IframeButton/index.js

@@ -0,0 +1,50 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { c as t } from "../../../chunks/lite.1fxw3LjI.js";
+import { forwardRef as f } from "react";
+import { LoadingSkeleton as u } from "../LoadingSkeleton/index.js";
+import '../../../assets/IframeButton.css';const c = "IframeButton-module__label___Vvl8W", B = "IframeButton-module__iframe___0RBLL", I = "IframeButton-module__hidden___LcF1X", e = {
+  "iframe-button": "IframeButton-module__iframe-button___XeAhH",
+  "full-width": "IframeButton-module__full-width___lQWpM",
+  "size-lg": "IframeButton-module__size-lg___HCOiF",
+  "size-md": "IframeButton-module__size-md___p44a4",
+  "size-sm": "IframeButton-module__size-sm___U8ILi",
+  "size-xs": "IframeButton-module__size-xs___S2jGa",
+  "loading-skeleton": "IframeButton-module__loading-skeleton___fzBol",
+  label: c,
+  "with-icon": "IframeButton-module__with-icon___KBiq1",
+  iframe: B,
+  hidden: I
+}, h = {
+  xs: e["size-xs"],
+  sm: e["size-sm"],
+  md: e["size-md"],
+  lg: e["size-lg"]
+}, z = f(
+  ({ className: l = "", isPending: _, label: i, icon: a, fullWidth: s, size: m, ...n }, r) => /* @__PURE__ */ d(
+    "div",
+    {
+      className: t(
+        e["iframe-button"],
+        a && e["with-icon"],
+        s && e["full-width"],
+        m && h[m]
+      ),
+      children: [
+        /* @__PURE__ */ o("span", { className: e.label, children: i }),
+        _ && /* @__PURE__ */ o(u, { className: t(e["loading-skeleton"]) }),
+        /* @__PURE__ */ o(
+          "iframe",
+          {
+            ref: r,
+            className: t(e.iframe, _ ? e.hidden : void 0, l),
+            ...n
+          }
+        )
+      ]
+    }
+  )
+);
+z.displayName = "IframeButton";
+export {
+  z as IframeButton
+};

package/dist/components/ui/Modal/index.js

@@ -1,31 +1,31 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { Dialog as m, DialogTitle as n, DialogDescription as _, DialogPortal as p, DialogOverlay as g, DialogContent as M, DialogClose as D, DialogTrigger as f } from "@radix-ui/react-dialog";
-import { c as u } from "../../../chunks/lite.1fxw3LjI.js";
-import { forwardRef as y, useMemo as v } from "react";
-import { useTheme as C } from "../../ThemeProvider/index.js";
-import '../../../assets/Modal.css';const T = "Modal-module__modal___MUsZA", x = "Modal-module__overlay___-RqGQ", N = "Modal-module__spacer___dIfOA", a = {
-  modal: T,
-  overlay: x,
-  spacer: N
-}, h = y(
-  ({ children: e, overlayClassName: r = "", overlayStyle: l, ...t }, c) => {
-    const { cssVariables: s } = C(), i = v(
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { Dialog as _, DialogTitle as p, DialogDescription as g, DialogPortal as M, DialogOverlay as D, DialogContent as f, DialogClose as u, DialogTrigger as y } from "@radix-ui/react-dialog";
+import { c as e } from "../../../chunks/lite.1fxw3LjI.js";
+import { forwardRef as v, useMemo as C } from "react";
+import { useTheme as T } from "../../ThemeProvider/index.js";
+import '../../../assets/Modal.css';const x = "Modal-module__modal___MUsZA", N = "Modal-module__overlay___-RqGQ", h = "Modal-module__spacer___dIfOA", a = {
+  modal: x,
+  overlay: N,
+  spacer: h
+}, j = v(
+  ({ children: r, className: t = "", overlayClassName: c = "", overlayStyle: l, ...i }, d) => {
+    const { cssVariables: s } = T(), m = C(
       () => ({ ...s, ...l }),
       [s, l]
     );
-    return /* @__PURE__ */ o(p, { children: /* @__PURE__ */ d(g, { className: u(a.overlay, r), style: i, children: [
+    return /* @__PURE__ */ o(M, { children: /* @__PURE__ */ n(D, { className: e(a.overlay, c), style: m, children: [
       /* @__PURE__ */ o("div", { className: a.spacer }),
-      /* @__PURE__ */ o(M, { ...t, ref: c, className: a.modal, children: e })
+      /* @__PURE__ */ o(f, { ...i, ref: d, className: e(a.modal, t), children: r })
     ] }) });
   }
 );
-h.displayName = "ModalContent";
-const q = m, w = D, G = _, I = n, P = f;
+j.displayName = "ModalContent";
+const w = _, G = u, I = g, P = p, Q = y;
 export {
-  q as Modal,
-  w as ModalClose,
-  h as ModalContent,
-  G as ModalDescription,
-  I as ModalTitle,
-  P as ModalTrigger
+  w as Modal,
+  G as ModalClose,
+  j as ModalContent,
+  I as ModalDescription,
+  P as ModalTitle,
+  Q as ModalTrigger
 };

package/dist/components/ui/SwitchTransition/index.d.ts

@@ -1,5 +1,7 @@
 import { ElementType, HTMLAttributes, Key, ReactNode, Ref } from 'react';
-import { TransitionMapOptions, TransitionMapResult, TransitionState } from 'react-transition-state';
+import { TransitionMapOptions, TransitionMapResult } from '../../../hooks/useTransitionMap';
+import { TransitionState } from '../../../utils/transition';
+export { type TransitionMapOptions, type TransitionMapResult, type TransitionState };
 export interface SwitchTransitionRef<T extends Key> {
     transition: TransitionMapResult<T>;
 }

package/dist/components/ui/SwitchTransition/index.js

@@ -1,6 +1,6 @@
 import { jsx as b, Fragment as H } from "react/jsx-runtime";
 import { useRef as R, useId as J, useState as _, useImperativeHandle as P, useLayoutEffect as j, useEffect as Q } from "react";
-import { useTransitionMap as U } from "react-transition-state";
+import { useTransitionMap as U } from "../../../hooks/useTransitionMap.js";
 import '../../../assets/SwitchTransition.css';const V = {
   "transition-wrapper": "SwitchTransition-module__transition-wrapper___jrI35"
 }, W = (v) => {