@coinbase/cdp-react 0.0.18 → 0.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (148) hide show
  1. package/dist/assets/Button.css +1 -1
  2. package/dist/assets/EmailForm.css +1 -0
  3. package/dist/assets/Error.css +1 -1
  4. package/dist/assets/Field.css +1 -1
  5. package/dist/assets/Input.css +1 -1
  6. package/dist/assets/Label.css +1 -0
  7. package/dist/assets/LoadingSkeleton.css +1 -1
  8. package/dist/assets/LoadingSpinner.css +1 -1
  9. package/dist/assets/Modal.css +1 -0
  10. package/dist/assets/OTP.css +1 -1
  11. package/dist/assets/OTPForm.css +1 -0
  12. package/dist/assets/PhoneNumberForm.css +1 -0
  13. package/dist/assets/PhoneNumberInput.css +1 -0
  14. package/dist/assets/SignIn.css +1 -1
  15. package/dist/assets/SignInAuthMethodButtons.css +1 -0
  16. package/dist/assets/SignInBackButton.css +1 -0
  17. package/dist/assets/SignInCredentials.css +1 -0
  18. package/dist/assets/SignInDescription.css +1 -1
  19. package/dist/assets/SignInFooter.css +1 -0
  20. package/dist/assets/SignInForm.css +1 -1
  21. package/dist/assets/SignInImage.css +1 -1
  22. package/dist/assets/SignInModal.css +1 -1
  23. package/dist/assets/SignInTitle.css +1 -1
  24. package/dist/assets/SuccessMessage.css +1 -0
  25. package/dist/assets/SwitchFadeTransition.css +1 -0
  26. package/dist/assets/SwitchSlideTransition.css +1 -0
  27. package/dist/assets/SwitchTransition.css +1 -0
  28. package/dist/assets/ThemeProvider.css +1 -1
  29. package/dist/assets/VisuallyHidden.css +1 -1
  30. package/dist/chunks/index.BzllgVaP.js +12 -0
  31. package/dist/components/AuthButton/index.js +7 -7
  32. package/dist/components/CDPReactProvider/index.d.ts +3 -0
  33. package/dist/components/CDPReactProvider/index.js +20 -13
  34. package/dist/components/SendTransactionButton/index.js +1 -1
  35. package/dist/components/SignIn/SignInAuthMethodButtons.d.ts +13 -0
  36. package/dist/components/SignIn/SignInAuthMethodButtons.js +59 -0
  37. package/dist/components/SignIn/SignInBackButton.d.ts +9 -0
  38. package/dist/components/SignIn/SignInBackButton.js +38 -0
  39. package/dist/components/SignIn/SignInCredentials.d.ts +2 -0
  40. package/dist/components/SignIn/SignInCredentials.js +8 -0
  41. package/dist/components/SignIn/SignInDescription.d.ts +4 -3
  42. package/dist/components/SignIn/SignInDescription.js +16 -23
  43. package/dist/components/SignIn/SignInFooter.d.ts +2 -0
  44. package/dist/components/SignIn/SignInFooter.js +18 -0
  45. package/dist/components/SignIn/SignInForm.d.ts +12 -4
  46. package/dist/components/SignIn/SignInForm.js +30 -195
  47. package/dist/components/SignIn/SignInImage.d.ts +2 -2
  48. package/dist/components/SignIn/SignInImage.js +11 -14
  49. package/dist/components/SignIn/SignInProvider.d.ts +1 -1
  50. package/dist/components/SignIn/SignInProvider.js +24 -16
  51. package/dist/components/SignIn/SignInTitle.d.ts +4 -3
  52. package/dist/components/SignIn/SignInTitle.js +18 -13
  53. package/dist/components/SignIn/flows/SignInWithEmail.d.ts +6 -0
  54. package/dist/components/SignIn/flows/SignInWithEmail.js +88 -0
  55. package/dist/components/SignIn/flows/SignInWithSms.d.ts +8 -0
  56. package/dist/components/SignIn/flows/SignInWithSms.js +3011 -0
  57. package/dist/components/SignIn/hooks/useEmailForm.d.ts +13 -0
  58. package/dist/components/SignIn/hooks/useEmailForm.js +42 -0
  59. package/dist/components/SignIn/hooks/useOTPForm.d.ts +16 -0
  60. package/dist/components/SignIn/hooks/useOTPForm.js +59 -0
  61. package/dist/components/SignIn/hooks/usePhoneNumberForm.d.ts +13 -0
  62. package/dist/components/SignIn/hooks/usePhoneNumberForm.js +42 -0
  63. package/dist/components/SignIn/index.d.ts +5 -2
  64. package/dist/components/SignIn/index.js +42 -24
  65. package/dist/components/SignIn/types.d.ts +106 -0
  66. package/dist/components/SignIn/types.js +3 -0
  67. package/dist/components/SignIn/useSignInReducer.d.ts +1 -57
  68. package/dist/components/SignIn/useSignInReducer.js +62 -20
  69. package/dist/components/SignInModal/index.d.ts +2 -2
  70. package/dist/components/SignInModal/index.js +56 -44
  71. package/dist/components/SignOutButton/index.js +1 -1
  72. package/dist/components/ThemeProvider/index.js +1 -1
  73. package/dist/components/forms/EmailForm/index.d.ts +11 -0
  74. package/dist/components/forms/EmailForm/index.js +56 -0
  75. package/dist/components/{Field → forms/Field}/index.d.ts +2 -1
  76. package/dist/components/forms/Field/index.js +24 -0
  77. package/dist/components/{Input → forms/Input}/index.js +1 -1
  78. package/dist/components/forms/Label/index.d.ts +7 -0
  79. package/dist/components/forms/Label/index.js +13 -0
  80. package/dist/components/{OTP → forms/OTP}/index.d.ts +3 -0
  81. package/dist/components/forms/OTP/index.js +65 -0
  82. package/dist/components/forms/OTPForm/index.d.ts +16 -0
  83. package/dist/components/forms/OTPForm/index.js +76 -0
  84. package/dist/components/forms/PhoneNumberForm/index.d.ts +14 -0
  85. package/dist/components/forms/PhoneNumberForm/index.js +68 -0
  86. package/dist/components/forms/PhoneNumberInput/PhoneNumberMetadata.d.ts +2 -0
  87. package/dist/components/forms/PhoneNumberInput/PhoneNumberMetadata.js +5 -0
  88. package/dist/components/forms/PhoneNumberInput/index.d.ts +10 -0
  89. package/dist/components/forms/PhoneNumberInput/index.js +76 -0
  90. package/dist/components/forms/PhoneNumberInput/maskOverride.d.ts +8 -0
  91. package/dist/components/forms/PhoneNumberInput/maskOverride.js +61 -0
  92. package/dist/components/forms/PhoneNumberInput/usePhoneNumberFormatter.d.ts +7 -0
  93. package/dist/components/forms/PhoneNumberInput/usePhoneNumberFormatter.js +52 -0
  94. package/dist/components/{Button → ui/Button}/index.d.ts +2 -1
  95. package/dist/components/ui/Button/index.js +75 -0
  96. package/dist/components/{Error → ui/Error}/index.d.ts +2 -2
  97. package/dist/components/ui/Error/index.js +16 -0
  98. package/dist/components/ui/LoadingSkeleton/index.js +19 -0
  99. package/dist/components/{LoadingSpinner → ui/LoadingSpinner}/index.js +6 -6
  100. package/dist/components/ui/Modal/index.d.ts +11 -0
  101. package/dist/components/ui/Modal/index.js +27 -0
  102. package/dist/components/{ServerError → ui/ServerError}/index.js +4 -4
  103. package/dist/components/ui/SuccessMessage/index.d.ts +7 -0
  104. package/dist/components/ui/SuccessMessage/index.js +16 -0
  105. package/dist/components/ui/SwitchFadeTransition/index.d.ts +5 -0
  106. package/dist/components/ui/SwitchFadeTransition/index.js +24 -0
  107. package/dist/components/ui/SwitchSlideTransition/index.d.ts +7 -0
  108. package/dist/components/ui/SwitchSlideTransition/index.js +27 -0
  109. package/dist/components/ui/SwitchTransition/index.d.ts +25 -0
  110. package/dist/components/ui/SwitchTransition/index.js +155 -0
  111. package/dist/components/{VisuallyHidden → ui/VisuallyHidden}/index.js +2 -2
  112. package/dist/data/countries.d.ts +12 -0
  113. package/dist/data/countries.js +25 -0
  114. package/dist/data/countryNames.d.ts +1 -0
  115. package/dist/data/countryNames.js +6 -0
  116. package/dist/hooks/usePhoneNumberValidators.d.ts +14 -0
  117. package/dist/hooks/usePhoneNumberValidators.js +36 -0
  118. package/dist/hooks/useTimer.d.ts +5 -0
  119. package/dist/hooks/useTimer.js +24 -0
  120. package/dist/icons/IconArrowLeft.d.ts +2 -0
  121. package/dist/icons/IconArrowLeft.js +14 -0
  122. package/dist/icons/IconCheckCircle.js +2 -3
  123. package/dist/icons/IconCoinbaseWordmark.js +5 -5
  124. package/dist/icons/IconEnvelope.d.ts +2 -0
  125. package/dist/icons/IconEnvelope.js +7 -0
  126. package/dist/icons/IconExclamationCircle.js +3 -4
  127. package/dist/icons/IconPhone.d.ts +2 -0
  128. package/dist/icons/IconPhone.js +7 -0
  129. package/dist/icons/IconXMark.js +6 -5
  130. package/dist/icons/index.d.ts +3 -0
  131. package/dist/icons/index.js +14 -8
  132. package/dist/index.js +66 -53
  133. package/dist/theme/theme.d.ts +11 -2
  134. package/dist/theme/tokens.d.ts +30 -6
  135. package/dist/theme/tokens.js +7 -3
  136. package/dist/utils/parseValuesFromPhoneNumber.d.ts +6 -0
  137. package/dist/utils/parseValuesFromPhoneNumber.js +16 -0
  138. package/package.json +23 -7
  139. package/dist/components/Button/index.js +0 -50
  140. package/dist/components/Error/index.js +0 -16
  141. package/dist/components/Field/index.js +0 -22
  142. package/dist/components/LoadingSkeleton/index.js +0 -19
  143. package/dist/components/OTP/index.js +0 -50
  144. /package/dist/components/{Input → forms/Input}/index.d.ts +0 -0
  145. /package/dist/components/{LoadingSkeleton → ui/LoadingSkeleton}/index.d.ts +0 -0
  146. /package/dist/components/{LoadingSpinner → ui/LoadingSpinner}/index.d.ts +0 -0
  147. /package/dist/components/{ServerError → ui/ServerError}/index.d.ts +0 -0
  148. /package/dist/components/{VisuallyHidden → ui/VisuallyHidden}/index.d.ts +0 -0
@@ -0,0 +1,25 @@
1
+ import { getCountries as e, getCountryCallingCode as a } from "libphonenumber-js";
2
+ import { countryNames as r } from "./countryNames.js";
3
+ const l = ["CU", "ET", "IR", "KP", "KZ", "MM", "RU", "SY"], i = "US", o = {
4
+ US: "🇺🇸"
5
+ }, s = (n) => {
6
+ try {
7
+ return a(n);
8
+ } catch {
9
+ return;
10
+ }
11
+ }, u = e().map((n) => {
12
+ const t = l.includes(n);
13
+ return {
14
+ callingCode: a(n),
15
+ code: n,
16
+ flag: t || !o[n] ? "" : o[n],
17
+ name: t || !r[`language${n}`] ? "" : r[`language${n}`]
18
+ };
19
+ }).filter((n) => !!n.flag && !!n.name);
20
+ export {
21
+ i as DEFAULT_COUNTRY_CODE,
22
+ l as OFAC_BLOCKED_COUNTRIES,
23
+ u as countries,
24
+ s as nonThrowingGetCountryCallingCode
25
+ };
@@ -0,0 +1 @@
1
+ export declare const countryNames: Record<string, string>;
@@ -0,0 +1,6 @@
1
+ const t = {
2
+ languageUS: "United States"
3
+ };
4
+ export {
5
+ t as countryNames
6
+ };
@@ -0,0 +1,14 @@
1
+ import { APIError } from '@coinbase/cdp-hooks';
2
+ import { CountryCode } from '../data/countries';
3
+ interface UsePhoneNumberValidatorsProps {
4
+ countryCode?: CountryCode;
5
+ }
6
+ export declare const usePhoneNumberValidators: ({ countryCode }: UsePhoneNumberValidatorsProps) => {
7
+ isInvalidCountry: (v: string) => boolean;
8
+ isInvalidLength: (v: string) => boolean;
9
+ isInvalidNumber: (v: string) => boolean;
10
+ isInvalidTooShort: (v: string) => boolean;
11
+ isInvalidTooLong: (v: string) => boolean;
12
+ isInvalidPhoneNumberError: (error: string | APIError) => boolean;
13
+ };
14
+ export {};
@@ -0,0 +1,36 @@
1
+ import "@coinbase/cdp-hooks";
2
+ import { validatePhoneNumberLength as t } from "libphonenumber-js";
3
+ import { useCallback as n } from "react";
4
+ import "../data/countries.js";
5
+ const h = ({ countryCode: i = "US" }) => {
6
+ const a = n(
7
+ (s) => t(s, i) === "INVALID_COUNTRY",
8
+ [i]
9
+ ), m = n(
10
+ (s) => t(s, i) === "INVALID_LENGTH",
11
+ [i]
12
+ ), e = n(
13
+ (s) => t(s, i) === "NOT_A_NUMBER",
14
+ [i]
15
+ ), l = n(
16
+ (s) => t(s, i) === "TOO_SHORT",
17
+ [i]
18
+ ), N = n(
19
+ (s) => t(s, i) === "TOO_LONG",
20
+ [i]
21
+ ), I = n((s) => {
22
+ const o = typeof s == "string" ? s : s.message;
23
+ return /invalid phone number/i.test(o);
24
+ }, []);
25
+ return {
26
+ isInvalidCountry: a,
27
+ isInvalidLength: m,
28
+ isInvalidNumber: e,
29
+ isInvalidTooShort: l,
30
+ isInvalidTooLong: N,
31
+ isInvalidPhoneNumberError: I
32
+ };
33
+ };
34
+ export {
35
+ h as usePhoneNumberValidators
36
+ };
@@ -0,0 +1,5 @@
1
+ export declare const useTimer: () => {
2
+ timeRemaining: number | null;
3
+ start: (durationSeconds: number) => void;
4
+ reset: () => void;
5
+ };
@@ -0,0 +1,24 @@
1
+ import { useState as f, useRef as l, useCallback as c, useEffect as o } from "react";
2
+ const I = () => {
3
+ const [i, r] = f(null), e = l(null), n = l(null), u = c(() => {
4
+ if (!n.current) {
5
+ r(null);
6
+ return;
7
+ }
8
+ const t = n.current - Date.now();
9
+ t <= 0 ? (r(0), e.current && clearInterval(e.current)) : r(Math.ceil(t / 1e3));
10
+ }, []), a = c(
11
+ (t) => {
12
+ e.current && clearInterval(e.current), n.current = Date.now() + t * 1e3, r(t), e.current = setInterval(u, 1e3);
13
+ },
14
+ [u]
15
+ ), s = c(() => {
16
+ e.current && clearInterval(e.current), r(null), n.current = null;
17
+ }, []);
18
+ return o(() => () => {
19
+ e.current && clearInterval(e.current);
20
+ }, []), { timeRemaining: i, start: a, reset: s };
21
+ };
22
+ export {
23
+ I as useTimer
24
+ };
@@ -0,0 +1,2 @@
1
+ import { SVGProps } from 'react';
2
+ export declare const IconArrowLeft: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,14 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import "react";
3
+ import { SvgIcon as e } from "./SvgIcon.js";
4
+ const n = (r) => /* @__PURE__ */ o(e, { viewBox: "0 0 24 24", fill: "currentColor", width: "24", height: "24", ...r, children: /* @__PURE__ */ o(
5
+ "path",
6
+ {
7
+ fillRule: "evenodd",
8
+ d: "M11.03 3.97a.75.75 0 0 1 0 1.06l-6.22 6.22H21a.75.75 0 0 1 0 1.5H4.81l6.22 6.22a.75.75 0 1 1-1.06 1.06l-7.5-7.5a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 0 1 1.06 0Z",
9
+ clipRule: "evenodd"
10
+ }
11
+ ) });
12
+ export {
13
+ n as IconArrowLeft
14
+ };
@@ -1,12 +1,11 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
2
  import "react";
3
3
  import { SvgIcon as l } from "./SvgIcon.js";
4
- const c = (o) => /* @__PURE__ */ e(l, { viewBox: "0 0 24 24", width: "24", height: "24", ...o, children: /* @__PURE__ */ e(
4
+ const c = (o) => /* @__PURE__ */ e(l, { viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", ...o, children: /* @__PURE__ */ e(
5
5
  "path",
6
6
  {
7
- fill: "currentColor",
8
7
  fillRule: "evenodd",
9
- d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z",
8
+ d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z",
10
9
  clipRule: "evenodd"
11
10
  }
12
11
  ) });
@@ -1,16 +1,16 @@
1
- import { jsxs as H, jsx as C } from "react/jsx-runtime";
1
+ import { jsxs as r, jsx as C } from "react/jsx-runtime";
2
2
  import "react";
3
- import { SvgIcon as r } from "./SvgIcon.js";
4
- const V = (i) => /* @__PURE__ */ H(r, { width: "67", height: "13", viewBox: "0 0 67 13", fill: "none", ...i, children: [
3
+ import { SvgIcon as H } from "./SvgIcon.js";
4
+ const o = (i) => /* @__PURE__ */ r(H, { width: "67", height: "13", viewBox: "0 0 67 13", fill: "none", ...i, children: [
5
5
  /* @__PURE__ */ C("g", { clipPath: "url(#clip0_7507_87)", children: /* @__PURE__ */ C(
6
6
  "path",
7
7
  {
8
8
  d: "M13.5224 3.8526C11.0884 3.8526 9.18662 5.70351 9.18662 8.18134C9.18662 10.6592 11.0404 12.4942 13.5224 12.4942C16.0044 12.4942 17.8903 10.6275 17.8903 8.1655C17.8903 5.71935 16.0366 3.8526 13.5224 3.8526ZM13.5388 10.7085C12.1527 10.7085 11.1371 9.63014 11.1371 8.18195C11.1371 6.71731 12.1363 5.63954 13.5224 5.63954C14.9248 5.63954 15.9399 6.73376 15.9399 8.18195C15.9399 9.63014 14.9248 10.7085 13.5388 10.7085ZM18.4219 5.7358H19.631V12.334H21.565V4.01344H18.4219V5.7358ZM4.31932 5.63893C5.33499 5.63893 6.14083 6.26646 6.44675 7.19983H8.4939C8.12291 5.20453 6.47899 3.8526 4.33574 3.8526C1.90179 3.8526 0 5.70351 0 8.18195C0 10.6604 1.85375 12.4948 4.33574 12.4948C6.43094 12.4948 8.10709 11.1429 8.47809 9.13116H6.44675C6.15665 10.0645 5.3508 10.7085 4.33514 10.7085C2.93266 10.7085 1.94984 9.63014 1.94984 8.18195C1.95045 6.71731 2.91746 5.63893 4.31932 5.63893ZM55.1696 7.37713L53.7513 7.16815C53.0744 7.07189 52.5909 6.84647 52.5909 6.3152C52.5909 5.7358 53.2198 5.44641 54.0736 5.44641C55.0084 5.44641 55.6051 5.84851 55.734 6.50833H57.6035C57.3937 4.83472 56.1044 3.85321 54.1223 3.85321C52.0752 3.85321 50.7213 4.8993 50.7213 6.37978C50.7213 7.79568 51.6081 8.61695 53.3967 8.87406L54.815 9.08303C55.5084 9.17929 55.8952 9.45346 55.8952 9.96828C55.8952 10.6281 55.2182 10.9016 54.2835 10.9016C53.1389 10.9016 52.4942 10.435 52.3975 9.72701H50.4957C50.6733 11.3525 51.9462 12.4948 54.2671 12.4948C56.3787 12.4948 57.7805 11.5292 57.7805 9.8714C57.7805 8.39092 56.7655 7.61839 55.1696 7.37713ZM20.598 0.585792C19.8888 0.585792 19.3567 1.10061 19.3567 1.80856C19.3567 2.51651 19.8882 3.03133 20.598 3.03133C21.3071 3.03133 21.8393 2.51651 21.8393 1.80856C21.8393 1.10061 21.3071 0.585792 20.598 0.585792ZM48.9807 6.86231C48.9807 5.06014 47.8848 3.85321 45.5639 3.85321C43.372 3.85321 42.1472 4.96388 41.9051 6.66978H43.8233C43.92 6.00996 44.4358 5.46286 45.5317 5.46286C46.5151 5.46286 46.9986 5.89725 46.9986 6.42852C46.9986 7.12063 46.1119 7.29731 45.016 7.41003C43.5332 7.57087 41.6959 8.08569 41.6959 10.017C41.6959 11.5139 42.8083 12.479 44.5811 12.479C45.9672 12.479 46.8375 11.8996 47.2729 10.9821C47.3374 11.8027 47.9498 12.334 48.8043 12.334H49.9325V10.6123H48.9813V6.86231H48.9807ZM47.0789 8.95448C47.0789 10.0651 46.1119 10.8858 44.9351 10.8858C44.2095 10.8858 43.5971 10.58 43.5971 9.93659C43.5971 9.11593 44.5805 8.89051 45.483 8.79425C46.3534 8.71383 46.8369 8.52069 47.0789 8.15027V8.95448ZM36.8122 3.8526C35.732 3.8526 34.8295 4.30345 34.1848 5.05953V0.505371H32.2508V12.334H34.1526V11.2398C34.7973 12.0282 35.7162 12.4948 36.8122 12.4948C39.133 12.4948 40.89 10.6604 40.89 8.18195C40.89 5.70351 39.1008 3.8526 36.8122 3.8526ZM36.5221 10.7085C35.136 10.7085 34.1203 9.63014 34.1203 8.18195C34.1203 6.73376 35.1518 5.63954 36.5379 5.63954C37.9403 5.63954 38.9232 6.71792 38.9232 8.18195C38.9232 9.63014 37.9081 10.7085 36.5221 10.7085ZM27.6249 3.8526C26.3678 3.8526 25.5456 4.36742 25.062 5.09182V4.01344H23.1438V12.3334H25.0779V7.81152C25.0779 6.54001 25.8837 5.63893 27.0764 5.63893C28.1887 5.63893 28.8814 6.4273 28.8814 7.57026V12.334H30.8155V7.42587C30.8161 5.33308 29.7366 3.8526 27.6249 3.8526ZM67 7.90839C67 5.52683 65.2594 3.85321 62.9221 3.85321C60.4401 3.85321 58.6186 5.71996 58.6186 8.18195C58.6186 10.7731 60.5691 12.4948 62.9544 12.4948C64.9693 12.4948 66.5487 11.3038 66.9513 9.6143H64.9364C64.6463 10.3545 63.9372 10.7731 62.986 10.7731C61.7447 10.7731 60.8099 10.0006 60.6007 8.64863H66.9994V7.90839H67ZM60.7138 7.26441C61.0203 6.10562 61.8906 5.54267 62.8899 5.54267C63.9858 5.54267 64.8239 6.1702 65.0173 7.26441H60.7138Z",
9
- fill: "#0050ff"
9
+ fill: "currentColor"
10
10
  }
11
11
  ) }),
12
12
  /* @__PURE__ */ C("defs", { children: /* @__PURE__ */ C("clipPath", { id: "clip0_7507_87", children: /* @__PURE__ */ C("rect", { width: "67", height: "11.9895", fill: "white", transform: "translate(0 0.505371)" }) }) })
13
13
  ] });
14
14
  export {
15
- V as IconCoinbaseWordmark
15
+ o as IconCoinbaseWordmark
16
16
  };
@@ -0,0 +1,2 @@
1
+ import { SVGProps } from 'react';
2
+ export declare const IconEnvelope: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import "react";
3
+ import { SvgIcon as t } from "./SvgIcon.js";
4
+ const p = (r) => /* @__PURE__ */ o(t, { fill: "currentColor", width: "20", height: "14", viewBox: "1 0 20 14", ...r, children: /* @__PURE__ */ o("path", { d: "M0.98877 -0.00488281H20.9888V13.9951H0.98877V-0.00488281ZM18.9888 3.02648L10.9888 9.88362L2.98877 3.02648V11.9951H18.9888V3.02648ZM4.85869 1.99512L10.9888 7.24947L17.1188 1.99512H4.85869Z" }) });
5
+ export {
6
+ p as IconEnvelope
7
+ };
@@ -1,15 +1,14 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
2
  import "react";
3
3
  import { SvgIcon as r } from "./SvgIcon.js";
4
- const c = (e) => /* @__PURE__ */ o(r, { viewBox: "0 0 24 24", width: "24", height: "24", ...e, children: /* @__PURE__ */ o(
4
+ const n = (e) => /* @__PURE__ */ o(r, { viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", ...e, children: /* @__PURE__ */ o(
5
5
  "path",
6
6
  {
7
- fill: "currentColor",
8
7
  fillRule: "evenodd",
9
- d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",
8
+ d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
10
9
  clipRule: "evenodd"
11
10
  }
12
11
  ) });
13
12
  export {
14
- c as IconExclamationCircle
13
+ n as IconExclamationCircle
15
14
  };
@@ -0,0 +1,2 @@
1
+ import { SVGProps } from 'react';
2
+ export declare const IconPhone: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import "react";
3
+ import { SvgIcon as L } from "./SvgIcon.js";
4
+ const e = (r) => /* @__PURE__ */ o(L, { width: "20", height: "20", viewBox: "1 1 20 18", fill: "currentColor", ...r, children: /* @__PURE__ */ o("path", { d: "M1.1491 -0.00488281H8.45971L9.66658 6.37031L4.99795 10.1828C6.38698 12.6261 8.42293 14.6527 10.8728 16.0291L14.6205 11.4246L20.9883 12.6341V19.8006L19.7231 19.9414L19.7044 19.9428C19.2823 19.9737 18.8499 19.9951 18.4114 19.9951C8.78359 19.9951 0.988281 12.1853 0.988281 2.55472C0.988281 2.00318 1.00905 1.45404 1.06228 0.899562L1.1491 -0.00488281ZM12.7308 16.9147C14.4886 17.6119 16.4051 17.9951 18.4114 17.9951C18.6019 17.9951 18.794 17.9904 18.9883 17.982V14.2899L15.4189 13.612L12.7308 16.9147ZM4.10333 8.33119L7.48023 5.57357L6.8028 1.99512H2.99675C2.99096 2.17961 2.98828 2.36593 2.98828 2.55472C2.98828 4.59716 3.38415 6.54689 4.10333 8.33119Z" }) });
5
+ export {
6
+ e as IconPhone
7
+ };
@@ -1,11 +1,12 @@
1
- import { jsx as r } from "react/jsx-runtime";
1
+ import { jsx as o } from "react/jsx-runtime";
2
2
  import "react";
3
- import { SvgIcon as L } from "./SvgIcon.js";
4
- const n = (o) => /* @__PURE__ */ r(L, { width: "15", height: "14", viewBox: "0 0 15 14", ...o, children: /* @__PURE__ */ r(
3
+ import { SvgIcon as e } from "./SvgIcon.js";
4
+ const n = (r) => /* @__PURE__ */ o(e, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", ...r, children: /* @__PURE__ */ o(
5
5
  "path",
6
6
  {
7
- d: "M6.85395 6.99516L0.98877 1.12998L2.12364 -0.00488281L7.98881 5.86029L13.854 -0.00488281L14.9889 1.12998L9.12368 6.99516L14.9888 12.8602L13.8539 13.9951L7.98881 8.13003L2.12372 13.9951L0.988857 12.8602L6.85395 6.99516Z",
8
- fill: "currentColor"
7
+ fillRule: "evenodd",
8
+ d: "M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z",
9
+ clipRule: "evenodd"
9
10
  }
10
11
  ) });
11
12
  export {
@@ -1,4 +1,7 @@
1
+ export * from './IconArrowLeft';
1
2
  export * from './IconCheckCircle';
3
+ export * from './IconEnvelope';
2
4
  export * from './IconExclamationCircle';
3
5
  export * from './IconLock';
6
+ export * from './IconPhone';
4
7
  export * from './IconXMark';
@@ -1,10 +1,16 @@
1
- import { IconCheckCircle as c } from "./IconCheckCircle.js";
2
- import { IconExclamationCircle as m } from "./IconExclamationCircle.js";
3
- import { IconLock as t } from "./IconLock.js";
4
- import { IconXMark as f } from "./IconXMark.js";
1
+ import { IconArrowLeft as e } from "./IconArrowLeft.js";
2
+ import { IconCheckCircle as n } from "./IconCheckCircle.js";
3
+ import { IconEnvelope as f } from "./IconEnvelope.js";
4
+ import { IconExclamationCircle as p } from "./IconExclamationCircle.js";
5
+ import { IconLock as I } from "./IconLock.js";
6
+ import { IconPhone as a } from "./IconPhone.js";
7
+ import { IconXMark as k } from "./IconXMark.js";
5
8
  export {
6
- c as IconCheckCircle,
7
- m as IconExclamationCircle,
8
- t as IconLock,
9
- f as IconXMark
9
+ e as IconArrowLeft,
10
+ n as IconCheckCircle,
11
+ f as IconEnvelope,
12
+ p as IconExclamationCircle,
13
+ I as IconLock,
14
+ a as IconPhone,
15
+ k as IconXMark
10
16
  };
package/dist/index.js CHANGED
@@ -1,58 +1,71 @@
1
- import { CDPReactProvider as e, useAppConfig as t } from "./components/CDPReactProvider/index.js";
2
- import { AuthButton as m } from "./components/AuthButton/index.js";
3
- import { SendTransactionButton as f } from "./components/SendTransactionButton/index.js";
4
- import { SignIn as x } from "./components/SignIn/index.js";
5
- import { useSignInReducer as c } from "./components/SignIn/useSignInReducer.js";
6
- import { SignOutButton as l } from "./components/SignOutButton/index.js";
7
- import { SignInModal as g } from "./components/SignInModal/index.js";
8
- import { ThemeProvider as u, useTheme as C } from "./components/ThemeProvider/index.js";
9
- import { cssVariables as h } from "./theme/cssVariables.js";
10
- import { theme as T } from "./theme/theme.js";
11
- import { colors as E, colorsBase as b, colorsComponents as v, colorsSemantic as A, font as M, tokens as P } from "./theme/tokens.js";
12
- import { flattenTokensObject as F, themeToCssVariables as O } from "./theme/utils.js";
13
- import { IconCheckCircle as V } from "./icons/IconCheckCircle.js";
14
- import { IconExclamationCircle as w } from "./icons/IconExclamationCircle.js";
15
- import { IconLock as U } from "./icons/IconLock.js";
16
- import { IconXMark as q } from "./icons/IconXMark.js";
17
- import { getMessageFromUnknownError as z } from "./utils/getMessageFromUnknownError.js";
18
- import { isApiError as H } from "./utils/isApiError.js";
19
- import { isEmailInvalid as K } from "./utils/isEmailInvalid.js";
20
- import { SignInDescription as Q } from "./components/SignIn/SignInDescription.js";
21
- import { SignInForm as Y } from "./components/SignIn/SignInForm.js";
22
- import { SignInImage as _ } from "./components/SignIn/SignInImage.js";
23
- import { SignInTitle as oo } from "./components/SignIn/SignInTitle.js";
24
- import { useSignInContext as eo } from "./components/SignIn/SignInProvider.js";
1
+ import { AUTH_METHODS as e, CDPReactProvider as t, useAppConfig as n } from "./components/CDPReactProvider/index.js";
2
+ import { AuthButton as p } from "./components/AuthButton/index.js";
3
+ import { SendTransactionButton as x } from "./components/SendTransactionButton/index.js";
4
+ import { SignIn as s } from "./components/SignIn/index.js";
5
+ import { useSignInReducer as I } from "./components/SignIn/useSignInReducer.js";
6
+ import { SignOutButton as g } from "./components/SignOutButton/index.js";
7
+ import { SignInModal as S } from "./components/SignInModal/index.js";
8
+ import { ThemeProvider as h, useTheme as C } from "./components/ThemeProvider/index.js";
9
+ import { cssVariables as d } from "./theme/cssVariables.js";
10
+ import { theme as B } from "./theme/theme.js";
11
+ import { colors as E, colorsBase as M, colorsComponents as v, colorsSemantic as P, font as b, tokens as D } from "./theme/tokens.js";
12
+ import { flattenTokensObject as O, themeToCssVariables as w } from "./theme/utils.js";
13
+ import { IconArrowLeft as L } from "./icons/IconArrowLeft.js";
14
+ import { IconCheckCircle as U } from "./icons/IconCheckCircle.js";
15
+ import { IconEnvelope as j } from "./icons/IconEnvelope.js";
16
+ import { IconExclamationCircle as _ } from "./icons/IconExclamationCircle.js";
17
+ import { IconLock as y } from "./icons/IconLock.js";
18
+ import { IconPhone as G } from "./icons/IconPhone.js";
19
+ import { IconXMark as K } from "./icons/IconXMark.js";
20
+ import { getMessageFromUnknownError as Q } from "./utils/getMessageFromUnknownError.js";
21
+ import { isApiError as Y } from "./utils/isApiError.js";
22
+ import { isEmailInvalid as $ } from "./utils/isEmailInvalid.js";
23
+ import { SignInAuthMethodButtons as ro } from "./components/SignIn/SignInAuthMethodButtons.js";
24
+ import { SignInBackButton as to } from "./components/SignIn/SignInBackButton.js";
25
+ import { SignInDescription as mo } from "./components/SignIn/SignInDescription.js";
26
+ import { SignInFooter as fo } from "./components/SignIn/SignInFooter.js";
27
+ import { SignInForm as io } from "./components/SignIn/SignInForm.js";
28
+ import { SignInImage as co } from "./components/SignIn/SignInImage.js";
29
+ import { SignInTitle as ao } from "./components/SignIn/SignInTitle.js";
30
+ import { useSignInContext as lo } from "./components/SignIn/SignInProvider.js";
25
31
  export {
26
- m as AuthButton,
27
- e as CDPReactProvider,
28
- V as IconCheckCircle,
29
- w as IconExclamationCircle,
30
- U as IconLock,
31
- q as IconXMark,
32
- f as SendTransactionButton,
33
- x as SignIn,
34
- Q as SignInDescription,
35
- Y as SignInForm,
36
- _ as SignInImage,
37
- g as SignInModal,
38
- oo as SignInTitle,
39
- l as SignOutButton,
40
- u as ThemeProvider,
32
+ e as AUTH_METHODS,
33
+ p as AuthButton,
34
+ t as CDPReactProvider,
35
+ L as IconArrowLeft,
36
+ U as IconCheckCircle,
37
+ j as IconEnvelope,
38
+ _ as IconExclamationCircle,
39
+ y as IconLock,
40
+ G as IconPhone,
41
+ K as IconXMark,
42
+ x as SendTransactionButton,
43
+ s as SignIn,
44
+ ro as SignInAuthMethodButtons,
45
+ to as SignInBackButton,
46
+ mo as SignInDescription,
47
+ fo as SignInFooter,
48
+ io as SignInForm,
49
+ co as SignInImage,
50
+ S as SignInModal,
51
+ ao as SignInTitle,
52
+ g as SignOutButton,
53
+ h as ThemeProvider,
41
54
  E as colors,
42
- b as colorsBase,
55
+ M as colorsBase,
43
56
  v as colorsComponents,
44
- A as colorsSemantic,
45
- h as cssVariables,
46
- F as flattenTokensObject,
47
- M as font,
48
- z as getMessageFromUnknownError,
49
- H as isApiError,
50
- K as isEmailInvalid,
51
- T as theme,
52
- O as themeToCssVariables,
53
- P as tokens,
54
- t as useAppConfig,
55
- eo as useSignInContext,
56
- c as useSignInReducer,
57
+ P as colorsSemantic,
58
+ d as cssVariables,
59
+ O as flattenTokensObject,
60
+ b as font,
61
+ Q as getMessageFromUnknownError,
62
+ Y as isApiError,
63
+ $ as isEmailInvalid,
64
+ B as theme,
65
+ w as themeToCssVariables,
66
+ D as tokens,
67
+ n as useAppConfig,
68
+ lo as useSignInContext,
69
+ I as useSignInReducer,
57
70
  C as useTheme
58
71
  };
@@ -124,6 +124,9 @@ export declare const theme: Flattened<{
124
124
  readonly error: {
125
125
  readonly value: "{colors.line.negative}";
126
126
  };
127
+ readonly success: {
128
+ readonly value: "{colors.line.positive}";
129
+ };
127
130
  };
128
131
  readonly label: {
129
132
  readonly default: {
@@ -145,6 +148,11 @@ export declare const theme: Flattened<{
145
148
  readonly value: "{colors.fg.negative}";
146
149
  };
147
150
  };
151
+ readonly successText: {
152
+ readonly default: {
153
+ readonly value: "{colors.fg.positive}";
154
+ };
155
+ };
148
156
  };
149
157
  readonly bg: {
150
158
  readonly default: {
@@ -191,7 +199,7 @@ export declare const theme: Flattened<{
191
199
  readonly value: "#0a0b0d";
192
200
  };
193
201
  readonly positive: {
194
- readonly value: "#008531";
202
+ readonly value: "#098551";
195
203
  };
196
204
  readonly negative: {
197
205
  readonly value: "#cf202f";
@@ -218,7 +226,7 @@ export declare const theme: Flattened<{
218
226
  font: {
219
227
  readonly family: {
220
228
  readonly sans: {
221
- readonly value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
229
+ readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
222
230
  };
223
231
  };
224
232
  readonly size: {
@@ -240,3 +248,4 @@ export type FontTokens = Flattened<{
240
248
  export type ColorTokens = SemanticColors | ComponentColors;
241
249
  export type Theme = ColorTokens & FontTokens;
242
250
  export type ButtonVariant = "primary" | "secondary" | "linkPrimary" | "linkSecondary" | "transparentPrimary" | "transparentSecondary";
251
+ export type ButtonSize = "lg" | "md" | "sm";
@@ -10,7 +10,7 @@ export declare const colorsBase: {
10
10
  readonly gray700: "#5b616e";
11
11
  readonly gray900: "#1a1d21";
12
12
  readonly red500: "#cf202f";
13
- readonly green500: "#008531";
13
+ readonly green500: "#098551";
14
14
  };
15
15
  export declare const colorsSemantic: {
16
16
  readonly bg: {
@@ -58,7 +58,7 @@ export declare const colorsSemantic: {
58
58
  readonly value: "#0a0b0d";
59
59
  };
60
60
  readonly positive: {
61
- readonly value: "#008531";
61
+ readonly value: "#098551";
62
62
  };
63
63
  readonly negative: {
64
64
  readonly value: "#cf202f";
@@ -205,6 +205,9 @@ export declare const colorsComponents: {
205
205
  readonly error: {
206
206
  readonly value: "{colors.line.negative}";
207
207
  };
208
+ readonly success: {
209
+ readonly value: "{colors.line.positive}";
210
+ };
208
211
  };
209
212
  readonly label: {
210
213
  readonly default: {
@@ -226,6 +229,11 @@ export declare const colorsComponents: {
226
229
  readonly value: "{colors.fg.negative}";
227
230
  };
228
231
  };
232
+ readonly successText: {
233
+ readonly default: {
234
+ readonly value: "{colors.fg.positive}";
235
+ };
236
+ };
229
237
  };
230
238
  };
231
239
  export declare const colors: {
@@ -351,6 +359,9 @@ export declare const colors: {
351
359
  readonly error: {
352
360
  readonly value: "{colors.line.negative}";
353
361
  };
362
+ readonly success: {
363
+ readonly value: "{colors.line.positive}";
364
+ };
354
365
  };
355
366
  readonly label: {
356
367
  readonly default: {
@@ -372,6 +383,11 @@ export declare const colors: {
372
383
  readonly value: "{colors.fg.negative}";
373
384
  };
374
385
  };
386
+ readonly successText: {
387
+ readonly default: {
388
+ readonly value: "{colors.fg.positive}";
389
+ };
390
+ };
375
391
  };
376
392
  readonly bg: {
377
393
  readonly default: {
@@ -418,7 +434,7 @@ export declare const colors: {
418
434
  readonly value: "#0a0b0d";
419
435
  };
420
436
  readonly positive: {
421
- readonly value: "#008531";
437
+ readonly value: "#098551";
422
438
  };
423
439
  readonly negative: {
424
440
  readonly value: "#cf202f";
@@ -445,7 +461,7 @@ export declare const colors: {
445
461
  export declare const font: {
446
462
  readonly family: {
447
463
  readonly sans: {
448
- readonly value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
464
+ readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
449
465
  };
450
466
  };
451
467
  readonly size: {
@@ -578,6 +594,9 @@ export declare const tokens: {
578
594
  readonly error: {
579
595
  readonly value: "{colors.line.negative}";
580
596
  };
597
+ readonly success: {
598
+ readonly value: "{colors.line.positive}";
599
+ };
581
600
  };
582
601
  readonly label: {
583
602
  readonly default: {
@@ -599,6 +618,11 @@ export declare const tokens: {
599
618
  readonly value: "{colors.fg.negative}";
600
619
  };
601
620
  };
621
+ readonly successText: {
622
+ readonly default: {
623
+ readonly value: "{colors.fg.positive}";
624
+ };
625
+ };
602
626
  };
603
627
  readonly bg: {
604
628
  readonly default: {
@@ -645,7 +669,7 @@ export declare const tokens: {
645
669
  readonly value: "#0a0b0d";
646
670
  };
647
671
  readonly positive: {
648
- readonly value: "#008531";
672
+ readonly value: "#098551";
649
673
  };
650
674
  readonly negative: {
651
675
  readonly value: "#cf202f";
@@ -672,7 +696,7 @@ export declare const tokens: {
672
696
  font: {
673
697
  readonly family: {
674
698
  readonly sans: {
675
- readonly value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
699
+ readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
676
700
  };
677
701
  };
678
702
  readonly size: {
@@ -13,7 +13,7 @@ const e = {
13
13
  gray900: "#1a1d21",
14
14
  // contextual
15
15
  red500: "#cf202f",
16
- green500: "#008531"
16
+ green500: "#098551"
17
17
  }, a = {
18
18
  bg: {
19
19
  default: { value: e.white },
@@ -122,7 +122,8 @@ const e = {
122
122
  border: {
123
123
  default: { value: "{colors.line.heavy}" },
124
124
  focus: { value: "{colors.line.primary}" },
125
- error: { value: "{colors.line.negative}" }
125
+ error: { value: "{colors.line.negative}" },
126
+ success: { value: "{colors.line.positive}" }
126
127
  },
127
128
  label: {
128
129
  default: { value: "{colors.fg.default}" }
@@ -135,6 +136,9 @@ const e = {
135
136
  },
136
137
  errorText: {
137
138
  default: { value: "{colors.fg.negative}" }
139
+ },
140
+ successText: {
141
+ default: { value: "{colors.fg.positive}" }
138
142
  }
139
143
  }
140
144
  }, o = {
@@ -143,7 +147,7 @@ const e = {
143
147
  }, r = {
144
148
  family: {
145
149
  sans: {
146
- value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
150
+ value: '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
147
151
  }
148
152
  },
149
153
  size: {
@@ -0,0 +1,6 @@
1
+ import { CountryCode } from 'libphonenumber-js';
2
+ export interface PhoneNumber {
3
+ value: string;
4
+ e164: string;
5
+ }
6
+ export declare const parseValuesFromPhoneNumber: (phoneNumber: string, countryCode?: CountryCode) => PhoneNumber;
@@ -0,0 +1,16 @@
1
+ import { parsePhoneNumberWithError as n } from "libphonenumber-js";
2
+ const a = (r, o) => {
3
+ const e = {
4
+ value: r,
5
+ e164: ""
6
+ };
7
+ try {
8
+ const t = n(r, o);
9
+ e.e164 = t.number;
10
+ } catch {
11
+ }
12
+ return e;
13
+ };
14
+ export {
15
+ a as parseValuesFromPhoneNumber
16
+ };