@coinbase/cdp-react 0.0.18 → 0.0.20

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

@@ -0,0 +1,61 @@
+import "libphonenumber-js";
+import { nonThrowingGetCountryCallingCode as e } from "../../../data/countries.js";
+const n = (r) => r.startsWith("1") ? r.slice(1) : r, i = {
+  234: {
+    /**
+     * libphonenumber-js bug:
+     *
+     * Nigerial phone numbers require a 0 prefix for the mask to work.
+     */
+    prefix: "0"
+  },
+  33: {
+    /**
+     * libphonenumber-js bug:
+     *
+     * French phone numbers require a 0 prefix for the mask to work.
+     * On top of that, libphonenumber does not take that 0 into account on maxLength.
+     * This means that if the user types a number with the 0, the number will be cropped short.
+     *
+     * Example: 01 23 45 67 89 would be cropped to 01 23 45 67 8.
+     * Users could overcome this by omiting the 0, but this would mean the mask formatting would
+     * not work, and the input would look plain 123456789.
+     */
+    prefix: "0",
+    maxLength: 10
+  },
+  1: {
+    /**
+     * libphonenumber-js bug:
+     *
+     * Calling code 1 Phone numbers cannot start with 1.
+     * If we allow them to, the masks will show 1 (234) 567-890, and limit the length to 10
+     * The above is an invalid US number though, as phone numbers need to have 10 digits EXCLUDING
+     * the internation code 1.
+     *
+     * This does not introduce a bug because we already have the Country Code picker, so adding
+     * the international code to the Phone input is a user mistake.
+     */
+    normalizer: n
+  },
+  44: {
+    /**
+     * libphonenumber-js bug:
+     *
+     * GB has max 10 digit phone numbers AFTER A LEADING 0 (so actually 11)
+     * On top of that, the libphonenumber-js mask does not work without the leading 0.
+     *
+     * This will enforce adding the leading 0, and override the max length to 11 instead of 10.
+     */
+    prefix: "0",
+    maxLength: 11
+  }
+}, a = (r) => {
+  if (!r)
+    return {};
+  const t = e(r);
+  return t ? i[t] ?? {} : {};
+};
+export {
+  a as getMaskOverride
+};

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

@@ -0,0 +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;
+    placeholder: string | undefined;
+    formattedDisplayNumber: string;
+};

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

@@ -0,0 +1,52 @@
+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 { 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) => {
+  const s = S(() => {
+    if (!G.numberingPlan || !r)
+      return 20;
+    const { maxLength: e } = L(r);
+    return e || (Math.max(...G.numberingPlan.possibleLengths()) ?? 20);
+  }, [r]), m = S(
+    (e, t) => {
+      const { prefix: M, normalizer: a } = L(t);
+      if (M && e && !e.startsWith(M))
+        return M + e;
+      const E = a ? a(e) : e;
+      return I(E);
+    },
+    []
+  ), T = S(
+    (e) => {
+      const t = s(), a = m(e, r).slice(0, t);
+      return B(a, r);
+    },
+    [r, s, m]
+  ), A = S(
+    (e) => {
+      G.selectNumberingPlan(e);
+      const t = s(), M = n.slice(0, t), a = m(M, e);
+      return B(a, e);
+    },
+    [n, s, m]
+  ), o = N(() => r ? l(r ?? "US", i)?.formatNational().replace(/\d/g, "0") : "", [r]), P = N(() => r ? new K(r).input(n) : n, [r, n]);
+  return N(
+    () => ({
+      formatBeforePhoneNumberChange: T,
+      formatBeforeCountryCodeChange: A,
+      placeholder: o,
+      formattedDisplayNumber: P
+    }),
+    [
+      A,
+      T,
+      P,
+      o
+    ]
+  );
+};
+export {
+  u as usePhoneNumberFormatter
+};

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

@@ -1,8 +1,9 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { ButtonVariant } from '../../theme/theme';
+import { ButtonSize, ButtonVariant } from '../../../theme/theme';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     isPending?: boolean;
     pendingLabel?: ReactNode;
+    size?: ButtonSize;
     variant?: ButtonVariant;
 }
 export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,75 @@
+import { jsx as e, jsxs as c, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as p, useMemo as a } from "react";
+import { LoadingSpinner as B } from "../LoadingSpinner/index.js";
+import { VisuallyHidden as k } from "../VisuallyHidden/index.js";
+import "../../../theme/theme.js";
+import '../../../assets/Button.css';const f = "Button-module__btn___Wj6Dr", g = "Button-module__primary___WGT--", z = "Button-module__secondary___Fx0LJ", r = {
+  btn: f,
+  "size-lg": "Button-module__size-lg___WlcVE",
+  "size-md": "Button-module__size-md___-SMmD",
+  "size-sm": "Button-module__size-sm___Vnrq6",
+  "link-primary": "Button-module__link-primary___6Zgkh",
+  "link-secondary": "Button-module__link-secondary___S0Qdo",
+  primary: g,
+  secondary: z,
+  "transparent-primary": "Button-module__transparent-primary___iwWv5",
+  "transparent-secondary": "Button-module__transparent-secondary___GfRXu"
+}, h = p(
+  ({
+    children: s,
+    className: o = "",
+    isPending: i,
+    pendingLabel: m = "Loading...",
+    size: t = "lg",
+    variant: n = "primary",
+    ..._
+  }, d) => {
+    const u = a(() => {
+      if (n === "linkPrimary" || n === "linkSecondary")
+        return "";
+      switch (t) {
+        case "lg":
+          return r["size-lg"];
+        case "md":
+          return r["size-md"];
+        case "sm":
+          return r["size-sm"];
+        default:
+          return r["size-lg"];
+      }
+    }, [t, n]), l = a(() => {
+      switch (n) {
+        case "primary":
+          return r.primary;
+        case "secondary":
+          return r.secondary;
+        case "linkPrimary":
+          return r["link-primary"];
+        case "linkSecondary":
+          return r["link-secondary"];
+        case "transparentPrimary":
+          return r["transparent-primary"];
+        case "transparentSecondary":
+          return r["transparent-secondary"];
+        default:
+          return r.primary;
+      }
+    }, [n]);
+    return /* @__PURE__ */ e(
+      "button",
+      {
+        className: `${r.btn} ${u} ${l} ${o}`,
+        ref: d,
+        ..._,
+        children: i ? /* @__PURE__ */ c(y, { children: [
+          /* @__PURE__ */ e(B, { "aria-hidden": "true" }),
+          /* @__PURE__ */ e(k, { children: m })
+        ] }) : s
+      }
+    );
+  }
+);
+h.displayName = "Button";
+export {
+  h as Button
+};

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-export interface Props {
+import { HTMLAttributes, ReactNode } from 'react';
+export interface Props extends HTMLAttributes<HTMLParagraphElement> {
     children: ReactNode;
     id?: string;
     className?: string;

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

@@ -0,0 +1,16 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { IconExclamationCircle as a } from "../../../icons/IconExclamationCircle.js";
+import '../../../assets/Error.css';const _ = "Error-module__error___zeTQt", l = "Error-module__icon___uwkis", o = {
+  error: _,
+  icon: l
+}, p = t(
+  ({ children: e, id: s, className: c = "", ...n }, i) => /* @__PURE__ */ m("p", { id: s, className: `${o.error} ${c}`, ref: i, ...n, children: [
+    /* @__PURE__ */ r(a, { className: o.icon }),
+    /* @__PURE__ */ r("span", { children: e })
+  ] })
+);
+p.displayName = "Error";
+export {
+  p as Error
+};

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

@@ -0,0 +1,19 @@
+import { jsx as d } from "react/jsx-runtime";
+import "react";
+import '../../../assets/LoadingSkeleton.css';const e = "LoadingSkeleton-module__loading___kqndV", i = {
+  loading: e
+}, s = ({
+  as: o = "div",
+  className: n = "",
+  style: a
+}) => /* @__PURE__ */ d(
+  o,
+  {
+    "aria-hidden": "true",
+    className: `${i.loading} ${n}`,
+    style: a
+  }
+);
+export {
+  s as LoadingSkeleton
+};

package/dist/components/{LoadingSpinner → ui/LoadingSpinner}/index.js

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
-import '../../assets/LoadingSpinner.css';const i = "LoadingSpinner-module__spinner___X3Bl3", e = {
-  spinner: i,
-  "spinner-circle": "LoadingSpinner-module__spinner-circle___NCrsp"
-}, l = ({ className: r }) => /* @__PURE__ */ n(
+import '../../../assets/LoadingSpinner.css';const r = "LoadingSpinner-module__spinner___-zo6Y", e = {
+  spinner: r,
+  "spinner-circle": "LoadingSpinner-module__spinner-circle___9Jfm7"
+}, o = ({ className: i }) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12,7 +12,7 @@ import '../../assets/LoadingSpinner.css';const i = "LoadingSpinner-module__spinn
     width: "24",
     height: "24",
     stroke: "currentColor",
-    className: r,
+    className: i,
     children: /* @__PURE__ */ n("g", { className: e.spinner, children: /* @__PURE__ */ n(
       "circle",
       {
@@ -27,5 +27,5 @@ import '../../assets/LoadingSpinner.css';const i = "LoadingSpinner-module__spinn
   }
 );
 export {
-  l as LoadingSpinner
+  o as LoadingSpinner
 };

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

@@ -0,0 +1,11 @@
+import { DialogContentProps } from '@radix-ui/react-dialog';
+import { HTMLAttributes } from 'react';
+interface ModalContentProps extends DialogContentProps, HTMLAttributes<HTMLDivElement> {
+}
+export declare const ModalContent: import('react').ForwardRefExoticComponent<ModalContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Modal: import('react').FC<import('@radix-ui/react-dialog').DialogProps>;
+export declare const ModalClose: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const ModalDescription: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>>;
+export declare const ModalTitle: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const ModalTrigger: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

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

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

package/dist/components/{ServerError → ui/ServerError}/index.js

@@ -1,12 +1,12 @@
 import { jsx as s } from "react/jsx-runtime";
 import "@coinbase/cdp-hooks";
 import { forwardRef as t } from "react";
-import { isApiError as p } from "../../utils/isApiError.js";
-import { Error as f } from "../Error/index.js";
+import { Error as p } from "../Error/index.js";
+import { isApiError as f } from "../../../utils/isApiError.js";
 const a = t(
   ({ error: r, id: o, className: e = "" }, m) => {
-    const i = p(r) ? r.errorMessage : r;
-    return /* @__PURE__ */ s(f, { ref: m, id: o, className: e, children: i });
+    const i = f(r) ? r.errorMessage : r;
+    return /* @__PURE__ */ s(p, { ref: m, id: o, className: e, children: i });
   }
 );
 a.displayName = "ServerError";

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface Props extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+export declare const SuccessMessage: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLParagraphElement>>;

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

@@ -0,0 +1,16 @@
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { IconCheckCircle as i } from "../../../icons/IconCheckCircle.js";
+import '../../../assets/SuccessMessage.css';const t = "SuccessMessage-module__success___ZOELg", _ = "SuccessMessage-module__icon___QpPW-", c = {
+  success: t,
+  icon: _
+}, l = u(
+  ({ children: e, id: o, className: r = "", ...a }, n) => /* @__PURE__ */ m("p", { id: o, className: `${c.success} ${r}`, ref: n, ...a, children: [
+    /* @__PURE__ */ s(i, { className: c.icon }),
+    /* @__PURE__ */ s("span", { children: e })
+  ] })
+);
+l.displayName = "SuccessMessage";
+export {
+  l as SuccessMessage
+};

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

@@ -0,0 +1,5 @@
+import { Key } from 'react';
+import { SwitchTransitionProps, SwitchTransitionRef } from '../SwitchTransition/SwitchTransition';
+export type SwitchFadeTransitionProps<T extends Key> = Omit<SwitchTransitionProps<T>, "transitionName" | "unmountOnExit" | "mountOnEnter" | "preEnter">;
+export type SwitchFadeTransitionRef<T extends Key> = SwitchTransitionRef<T>;
+export declare const SwitchFadeTransition: <T extends Key>({ children, className, ...props }: SwitchFadeTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { SwitchTransition as e } from "../SwitchTransition/index.js";
+import '../../../assets/SwitchFadeTransition.css';const o = {
+  "switch-fade-transition": "SwitchFadeTransition-module__switch-fade-transition___--lbT"
+}, c = ({
+  children: t,
+  className: i = "",
+  ...n
+}) => /* @__PURE__ */ r(
+  e,
+  {
+    transitionName: "fade",
+    className: `${o["switch-fade-transition"]} ${i}`,
+    preEnter: !0,
+    mountOnEnter: !0,
+    unmountOnExit: !0,
+    ...n,
+    children: t
+  }
+);
+export {
+  c as SwitchFadeTransition
+};

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

@@ -0,0 +1,7 @@
+import { Key } from 'react';
+import { SwitchTransitionProps, SwitchTransitionRef } from '../SwitchTransition/SwitchTransition';
+export interface SwitchSlideTransitionProps<T extends Key> extends Omit<SwitchTransitionProps<T>, "transitionName" | "unmountOnExit" | "mountOnEnter" | "preEnter"> {
+    direction?: "left" | "right";
+}
+export type SwitchSlideTransitionRef<T extends Key> = SwitchTransitionRef<T>;
+export declare const SwitchSlideTransition: <T extends Key>({ children, className, direction, timeout, ...props }: SwitchSlideTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { SwitchTransition as o } from "../SwitchTransition/index.js";
+import '../../../assets/SwitchSlideTransition.css';const a = {
+  "switch-slide-transition": "SwitchSlideTransition-module__switch-slide-transition___FykQG"
+}, u = ({
+  children: t,
+  className: i = "",
+  direction: n = "left",
+  timeout: r = 300,
+  ...s
+}) => /* @__PURE__ */ e(
+  o,
+  {
+    transitionName: `slide-${n}`,
+    className: `${a["switch-slide-transition"]} ${i}`,
+    preEnter: !0,
+    mountOnEnter: !0,
+    unmountOnExit: !0,
+    timeout: r,
+    ...s,
+    children: t
+  }
+);
+export {
+  u as SwitchSlideTransition
+};

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

@@ -0,0 +1,25 @@
+import { ElementType, HTMLAttributes, Key, ReactNode, Ref } from 'react';
+import { TransitionMapOptions, TransitionMapResult, TransitionState } from 'react-transition-state';
+export interface SwitchTransitionRef<T extends Key> {
+    transition: TransitionMapResult<T>;
+}
+export interface SwitchTransitionProps<T extends Key> extends Omit<HTMLAttributes<HTMLElement>, "children">, TransitionMapOptions<T> {
+    animateHeight?: boolean;
+    autoFocus?: boolean;
+    as?: ElementType;
+    children: (props: {
+        "data-index": number;
+        inert?: boolean;
+        itemKey: T;
+        "data-transition": string;
+        "data-status": TransitionState["status"] | undefined;
+        "data-is-enter": TransitionState["isEnter"] | undefined;
+        "data-is-resolved": TransitionState["isResolved"] | undefined;
+        "data-parent": string;
+    }) => ReactNode;
+    className?: string;
+    items: readonly T[] | T[];
+    transitionName: "fade" | "slide-left" | "slide-right" | string;
+    transitionRef?: Ref<SwitchTransitionRef<T>>;
+}
+export declare const SwitchTransition: <T extends Key>({ allowMultiple, animateHeight, autoFocus, initialEntered, as: Component, children, className, enter, exit, items, mountOnEnter, onStateChange, preEnter, preExit, style, timeout, transitionName, transitionRef, unmountOnExit, ...props }: SwitchTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,155 @@
+import { jsx as m, Fragment as B } from "react/jsx-runtime";
+import { useId as D, useState as R, useRef as F, useImperativeHandle as G, useLayoutEffect as _, useEffect as H } from "react";
+import { useTransitionMap as J } from "react-transition-state";
+import '../../../assets/SwitchTransition.css';const P = {
+  "transition-wrapper": "SwitchTransition-module__transition-wrapper___jrI35"
+}, Q = (h) => {
+  const {
+    children: r,
+    index: d,
+    itemKey: i,
+    initialEntered: l,
+    setItem: u,
+    deleteItem: f,
+    stateMap: b,
+    transitionName: v,
+    parentKey: y
+  } = h;
+  H(() => (u(i, { initialEntered: l }), () => {
+    f(i);
+  }), [i, l, u, f]);
+  const { isEnter: p, isMounted: I, isResolved: w, status: x } = b.get(i) || {};
+  return I ? r({
+    "data-index": d,
+    inert: !p,
+    itemKey: i,
+    "data-transition": v,
+    "data-status": x,
+    "data-is-enter": p,
+    "data-is-resolved": w,
+    "data-parent": y
+  }) : null;
+}, X = ({
+  allowMultiple: h,
+  animateHeight: r,
+  autoFocus: d,
+  initialEntered: i,
+  as: l = "div",
+  children: u,
+  className: f = "",
+  enter: b,
+  exit: v,
+  items: y,
+  mountOnEnter: p,
+  onStateChange: I,
+  preEnter: w,
+  preExit: x,
+  style: j,
+  timeout: e = 200,
+  transitionName: T,
+  transitionRef: q,
+  unmountOnExit: z,
+  ...$
+}) => {
+  const L = D(), s = $.id || L, [E, N] = R(null), [S, C] = R(null), g = F(null), o = J({
+    allowMultiple: h,
+    initialEntered: !1,
+    mountOnEnter: p,
+    unmountOnExit: z,
+    preEnter: w,
+    preExit: x,
+    enter: b,
+    exit: v,
+    timeout: e,
+    onStateChange: I
+  });
+  G(q, () => ({
+    transition: r || d ? {
+      ...o,
+      toggle: (t) => {
+        o.toggle(t), N(t);
+      }
+    } : o
+  })), _(() => {
+    if (!r)
+      return;
+    let t = null;
+    const n = g.current;
+    if (!n)
+      return;
+    const c = setTimeout(() => {
+      const a = n.querySelector(
+        `[data-is-enter="true"][data-parent="${s}"]`
+      );
+      if (!a)
+        return;
+      const M = a?.scrollHeight ?? null;
+      M !== null && C(M), t = new ResizeObserver((O) => {
+        for (const k of O) {
+          const A = k.contentRect.height;
+          C(A);
+        }
+      }), t.observe(a);
+    }, 0);
+    return () => {
+      c && clearTimeout(c), t?.disconnect();
+    };
+  }, [r, E, s]), _(() => {
+    if (!d)
+      return;
+    const t = typeof e == "number" ? e : e.enter;
+    if (t === void 0)
+      return;
+    const n = setTimeout(() => {
+      const c = g.current?.querySelector(
+        `[data-is-enter="true"][data-parent="${s}"]`
+      );
+      if (!c)
+        return;
+      const a = c.querySelector(
+        'input, textarea, select, button, [tabindex]:not([tabindex="-1"])'
+      );
+      a && a.focus();
+    }, t);
+    return () => {
+      n && clearTimeout(n);
+    };
+  }, [d, E, s, e]);
+  const K = /* @__PURE__ */ m(B, { children: y.map((t, n) => /* @__PURE__ */ m(
+    Q,
+    {
+      index: n,
+      itemKey: t,
+      setItem: o.setItem,
+      deleteItem: o.deleteItem,
+      stateMap: o.stateMap,
+      initialEntered: i ? n === 0 : void 0,
+      transitionName: T,
+      parentKey: s,
+      children: u
+    },
+    n
+  )) });
+  return /* @__PURE__ */ m(
+    l,
+    {
+      ...$,
+      id: s,
+      ref: g,
+      "data-transition": T || void 0,
+      "data-animate-height": r,
+      className: `${P["transition-wrapper"]} ${f}`,
+      style: {
+        ...j,
+        "--cdp-web-transition-enter-timeout": typeof e == "object" ? `${e.enter ?? 200}ms` : void 0,
+        "--cdp-web-transition-exit-timeout": typeof e == "object" ? `${e.exit ?? 200}ms` : void 0,
+        "--cdp-web-transition-timeout": typeof e == "number" ? `${e}ms` : void 0,
+        "--cdp-web-transition-height": r && S ? `${S}px` : void 0
+      },
+      children: r ? /* @__PURE__ */ m("div", { children: K }) : K
+    }
+  );
+};
+export {
+  X as SwitchTransition
+};

package/dist/components/{VisuallyHidden → ui/VisuallyHidden}/index.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import "react";
-import '../../assets/VisuallyHidden.css';const d = {
-  "visually-hidden": "VisuallyHidden-module__visually-hidden___qdUPg"
+import '../../../assets/VisuallyHidden.css';const d = {
+  "visually-hidden": "VisuallyHidden-module__visually-hidden___tD5Vj"
 }, a = ({ as: s = "span", children: l }) => l ? /* @__PURE__ */ i(s, { className: d["visually-hidden"], children: l }) : null;
 export {
   a as VisuallyHidden

package/dist/data/countries.d.ts

@@ -0,0 +1,12 @@
+import { CountryCallingCode, CountryCode as ICountryCode } from 'libphonenumber-js';
+export type CountryCode = ICountryCode;
+export type CountryOption = {
+    callingCode: CountryCallingCode;
+    code: CountryCode;
+    flag: string;
+    name: string;
+};
+export declare const OFAC_BLOCKED_COUNTRIES: string[];
+export declare const DEFAULT_COUNTRY_CODE: CountryCode;
+export declare const nonThrowingGetCountryCallingCode: (countryCode: CountryCode) => CountryCallingCode | undefined;
+export declare const countries: CountryOption[];