@coinbase/cdp-react 0.0.19 → 0.0.20

package/dist/assets/Button.css

@@ -1 +1 @@
-.Button-module__btn___Fx11X{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;box-sizing:border-box;box-shadow:inset 0 0 0 var(--cdp-web-button-ring-inset-width) var(--cdp-web-button-ring-inset-color),0 0 0 var(--cdp-web-button-ring-width) var(--cdp-web-button-ring-color);display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1em;border-radius:9999em;border:0;background-color:transparent;color:var(--cdp-web-colors-page-text-default);font-size:var(--cdp-web-font-size-base);font-family:var(--cdp-web-font-family-sans);font-weight:500;line-height:1.5;text-decoration:none;cursor:pointer;transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.Button-module__size-lg___2sR8u{padding:1em}.Button-module__size-md___HBcrV{padding:.75em}.Button-module__size-sm___yph5g{padding:.5em}.Button-module__link-primary___wROmv,.Button-module__link-secondary___5VErP{padding:0 .25em}.Button-module__primary___s1sM6{background-color:var(--cdp-web-colors-cta-primary-bg-default);color:var(--cdp-web-colors-cta-primary-text-default)}.Button-module__primary___s1sM6:hover{background-color:var(--cdp-web-colors-cta-primary-bg-hover);color:var(--cdp-web-colors-cta-primary-text-hover)}.Button-module__primary___s1sM6:focus{outline:none}.Button-module__primary___s1sM6:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-primary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__secondary___R0waJ{background-color:var(--cdp-web-colors-cta-secondary-bg-default);color:var(--cdp-web-colors-cta-secondary-text-default)}.Button-module__secondary___R0waJ:hover{background-color:var(--cdp-web-colors-cta-secondary-bg-hover);color:var(--cdp-web-colors-cta-secondary-text-hover)}.Button-module__secondary___R0waJ:focus{outline:none}.Button-module__secondary___R0waJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-secondary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__link-primary___wROmv,.Button-module__transparent-primary___Ah0yM{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__link-primary___wROmv:hover,.Button-module__transparent-primary___Ah0yM:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__link-primary___wROmv:focus,.Button-module__transparent-primary___Ah0yM:focus{outline:none}.Button-module__link-primary___wROmv:focus-visible,.Button-module__transparent-primary___Ah0yM:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__link-secondary___5VErP,.Button-module__transparent-secondary___kk5sZ{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__link-secondary___5VErP:hover,.Button-module__transparent-secondary___kk5sZ:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__link-secondary___5VErP:focus,.Button-module__transparent-secondary___kk5sZ:focus{outline:none}.Button-module__link-secondary___5VErP:focus-visible,.Button-module__transparent-secondary___kk5sZ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-secondary-text-default);outline:none}
+.Button-module__btn___Wj6Dr{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;box-sizing:border-box;box-shadow:inset 0 0 0 var(--cdp-web-button-ring-inset-width) var(--cdp-web-button-ring-inset-color),0 0 0 var(--cdp-web-button-ring-width) var(--cdp-web-button-ring-color);display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1em;border-radius:9999em;border:0;background-color:transparent;color:var(--cdp-web-colors-page-text-default);font-size:var(--cdp-web-font-size-base);font-family:var(--cdp-web-font-family-sans);font-weight:500;line-height:1.5;text-decoration:none;cursor:pointer;transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.Button-module__size-lg___WlcVE{padding:1em}.Button-module__size-md___-SMmD{padding:.75em}.Button-module__size-sm___Vnrq6{padding:.5em}.Button-module__link-primary___6Zgkh,.Button-module__link-secondary___S0Qdo{padding:0 .25em}.Button-module__primary___WGT--{background-color:var(--cdp-web-colors-cta-primary-bg-default);color:var(--cdp-web-colors-cta-primary-text-default)}.Button-module__primary___WGT--:hover{background-color:var(--cdp-web-colors-cta-primary-bg-hover);color:var(--cdp-web-colors-cta-primary-text-hover)}.Button-module__primary___WGT--:focus{outline:none}.Button-module__primary___WGT--:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-primary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__secondary___Fx0LJ{background-color:var(--cdp-web-colors-cta-secondary-bg-default);color:var(--cdp-web-colors-cta-secondary-text-default)}.Button-module__secondary___Fx0LJ:hover{background-color:var(--cdp-web-colors-cta-secondary-bg-hover);color:var(--cdp-web-colors-cta-secondary-text-hover)}.Button-module__secondary___Fx0LJ:focus{outline:none}.Button-module__secondary___Fx0LJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-secondary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__link-primary___6Zgkh,.Button-module__transparent-primary___iwWv5{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__link-primary___6Zgkh:hover,.Button-module__transparent-primary___iwWv5:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__link-primary___6Zgkh:focus,.Button-module__transparent-primary___iwWv5:focus{outline:none}.Button-module__link-primary___6Zgkh:focus-visible,.Button-module__transparent-primary___iwWv5:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__link-secondary___S0Qdo,.Button-module__transparent-secondary___GfRXu{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__link-secondary___S0Qdo:hover,.Button-module__transparent-secondary___GfRXu:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__link-secondary___S0Qdo:focus,.Button-module__transparent-secondary___GfRXu:focus{outline:none}.Button-module__link-secondary___S0Qdo:focus-visible,.Button-module__transparent-secondary___GfRXu:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-secondary-text-default);outline:none}

package/dist/assets/EmailForm.css

@@ -1 +1 @@
-.EmailForm-module__form___MD6xv{display:flex;flex-direction:column;gap:1em}.EmailForm-module__server-error___uRzUG{justify-content:center}
+.EmailForm-module__form___L0wVX{display:flex;flex-direction:column;gap:1em}.EmailForm-module__server-error___0TSPx{justify-content:center}

package/dist/assets/Error.css

@@ -1 +1 @@
-.Error-module__error___mRFLG{color:var(--cdp-web-colors-fg-negative);line-height:1.25em;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);display:flex;align-items:center;gap:.25em;margin:0}.Error-module__error___mRFLG span{font-size:.875em}.Error-module__icon___web4F{width:auto;height:.875em;flex-grow:0;flex-shrink:0}
+.Error-module__error___zeTQt{color:var(--cdp-web-colors-fg-negative);line-height:1.25em;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);display:flex;align-items:center;gap:.25em;margin:0}.Error-module__error___zeTQt span{font-size:.875em}.Error-module__icon___uwkis{width:auto;height:.875em;flex-grow:0;flex-shrink:0}

package/dist/assets/Field.css

@@ -1 +1 @@
-.Field-module__field-wrapper___0p4i7{display:flex;flex-direction:column;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);gap:.25em}
+.Field-module__field-wrapper___SCcbl{display:flex;flex-direction:column;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);gap:.25em}

package/dist/assets/Input.css

@@ -1 +1 @@
-.Input-module__input___WjT81{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.5;padding:1em;border-radius:.5em;border:0;background-color:var(--cdp-web-colors-input-bg-default);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color) inset;color:var(--cdp-web-colors-input-text-default);transition:box-shadow .15s ease-in-out;width:100%}.Input-module__input___WjT81::placeholder{color:var(--cdp-web-colors-input-placeholder-default)}.Input-module__input___WjT81:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.Input-module__input___WjT81[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}.Input-module__input___WjT81[data-success=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-success)}
+.Input-module__input___-mK8z{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.5;padding:1em;border-radius:.5em;border:0;background-color:var(--cdp-web-colors-input-bg-default);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color) inset;color:var(--cdp-web-colors-input-text-default);transition:box-shadow .15s ease-in-out;width:100%}.Input-module__input___-mK8z::placeholder{color:var(--cdp-web-colors-input-placeholder-default)}.Input-module__input___-mK8z:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.Input-module__input___-mK8z[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}.Input-module__input___-mK8z[data-success=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-success)}

package/dist/assets/Label.css

@@ -1 +1 @@
-.Label-module__label___RaRvM{font-size:.875em;line-height:1.43;font-weight:500;color:var(--cdp-web-colors-input-label-default)}
+.Label-module__label___jDumT{font-size:.875em;line-height:1.43;font-weight:500;color:var(--cdp-web-colors-input-label-default)}

package/dist/assets/LoadingSkeleton.css

@@ -1 +1 @@
-.LoadingSkeleton-module__loading___ezIkq{animation:LoadingSkeleton-module__pulse___a9tGO 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--cdp-web-colors-bg-skeleton);cursor:progress}@keyframes LoadingSkeleton-module__pulse___a9tGO{50%{opacity:.5}}
+.LoadingSkeleton-module__loading___kqndV{animation:LoadingSkeleton-module__pulse___x86cJ 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--cdp-web-colors-bg-skeleton);cursor:progress}@keyframes LoadingSkeleton-module__pulse___x86cJ{50%{opacity:.5}}

package/dist/assets/LoadingSpinner.css

@@ -1 +1 @@
-.LoadingSpinner-module__spinner___X3Bl3{transform-origin:center;animation:LoadingSpinner-module__spinner___X3Bl3 2s linear infinite}.LoadingSpinner-module__spinner-circle___NCrsp{stroke-linecap:round;animation:LoadingSpinner-module__spinner-circle___NCrsp 1.5s ease-in-out infinite}@keyframes LoadingSpinner-module__spinner___X3Bl3{to{transform:rotate(360deg)}}@keyframes LoadingSpinner-module__spinner-circle___NCrsp{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,to{stroke-dasharray:42 150;stroke-dashoffset:-59}}
+.LoadingSpinner-module__spinner___-zo6Y{transform-origin:center;animation:LoadingSpinner-module__spinner___-zo6Y 2s linear infinite}.LoadingSpinner-module__spinner-circle___9Jfm7{stroke-linecap:round;animation:LoadingSpinner-module__spinner-circle___9Jfm7 1.5s ease-in-out infinite}@keyframes LoadingSpinner-module__spinner___-zo6Y{to{transform:rotate(360deg)}}@keyframes LoadingSpinner-module__spinner-circle___9Jfm7{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,to{stroke-dasharray:42 150;stroke-dashoffset:-59}}

package/dist/assets/Modal.css

@@ -0,0 +1 @@
+.Modal-module__modal___MUsZA{--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);box-sizing:border-box;box-shadow:var(--shadow-md);width:100%;max-width:28.125em;min-width:0;background:var(--cdp-web-colors-page-bg-default);border-radius:.5em;outline:1px solid var(--cdp-web-colors-page-border-default);position:relative}.Modal-module__modal___MUsZA[data-state=open]{animation:Modal-module__slide-in___p-A8u .2s ease-out,Modal-module__fade-in___NfUjS .2s ease-out}.Modal-module__modal___MUsZA[data-state=closed]{animation:Modal-module__slide-out___hrRK1 .2s ease-in,Modal-module__fade-out___LpBNV .2s ease-in}.Modal-module__overlay___-RqGQ{background:var(--cdp-web-colors-bg-overlay);box-sizing:border-box;-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);display:grid;grid-template-rows:auto 1fr;inset:0;overflow-y:auto;place-items:end center;position:fixed;z-index:1000}.Modal-module__overlay___-RqGQ[data-state=open]{animation:Modal-module__fade-in___NfUjS .2s ease-out}.Modal-module__overlay___-RqGQ[data-state=closed]{animation:Modal-module__fade-out___LpBNV .2s ease-in}.Modal-module__spacer___dIfOA{height:1em}@keyframes Modal-module__fade-in___NfUjS{0%{opacity:0}to{opacity:1}}@keyframes Modal-module__fade-out___LpBNV{0%{opacity:1}to{opacity:0}}@keyframes Modal-module__slide-in___p-A8u{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes Modal-module__slide-out___hrRK1{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.Modal-module__overlay___-RqGQ{padding:.5rem}}@media (min-width: 450px){.Modal-module__overlay___-RqGQ{place-items:center;padding:1rem;grid-template-rows:1fr}.Modal-module__modal___MUsZA{height:auto}.Modal-module__spacer___dIfOA{display:none}@keyframes Modal-module__slide-in___p-A8u{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes Modal-module__slide-out___hrRK1{0%{transform:translateY(0)}to{transform:translateY(10%)}}}

package/dist/assets/OTP.css

@@ -1 +1 @@
-.OTP-module__otp___EUcSo{--cdp-web-otp-input-width: 25%;display:flex;flex-direction:column;gap:.25em}.OTP-module__group-container___rfrCo{display:flex;gap:.5em}.OTP-module__input-container___-yRBL{width:var(--cdp-web-otp-input-width)}.OTP-module__input___MEBPV{text-align:center}.OTP-module__label___71Oaw{margin:0 0 .43em}
+.OTP-module__otp___UjnM8{--cdp-web-otp-input-width: 25%;display:flex;flex-direction:column;gap:.25em}.OTP-module__group-container___hNqnB{display:flex;gap:.5em}.OTP-module__input-container___snmj7{width:var(--cdp-web-otp-input-width)}.OTP-module__input___Vbd5m{text-align:center}.OTP-module__label___cK41n{margin:0 0 .43em}

package/dist/assets/OTPForm.css

@@ -1 +1 @@
-.OTPForm-module__otp-form___jQN4H [data-part=input-group]{padding-bottom:1.5em}.OTPForm-module__otp-form___jQN4H [data-part=success],.OTPForm-module__otp-form___jQN4H [data-part=error]{margin-top:-1.5em}.OTPForm-module__form-footer___JhfLr{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;min-height:1.5em;padding-top:1.5em;padding-bottom:.5em}.OTPForm-module__server-state-wrapper___PS7UP{margin-top:-1.5em;min-height:1.5em;position:relative;top:-.25em}.OTPForm-module__loading-spinner___fJRqe{color:var(--cdp-web-colors-link-primary-text-default);display:block;margin:0 auto}.OTPForm-module__resend-wrapper___HeIR2{display:flex;align-items:center;justify-content:center;text-align:center;min-height:1.5em}.OTPForm-module__reset-timer___MEkQh{color:var(--cdp-web-colors-page-text-muted);font-weight:500;line-height:1em;min-height:1em;display:flex;align-items:center;justify-content:center}.OTPForm-module__reset-timer___MEkQh p{font-size:.875em;line-height:1;margin:0}
+.OTPForm-module__otp-form___G1-63 [data-part=input-group]{padding-bottom:1.5em}.OTPForm-module__otp-form___G1-63 [data-part=success],.OTPForm-module__otp-form___G1-63 [data-part=error]{margin-top:-1.5em}.OTPForm-module__form-footer___ybmdd{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;min-height:1.5em;padding-top:1.5em;padding-bottom:.5em}.OTPForm-module__server-state-wrapper___R5j5k{margin-top:-1.5em;min-height:1.5em;position:relative;top:-.25em}.OTPForm-module__loading-spinner___8N9XU{color:var(--cdp-web-colors-link-primary-text-default);display:block;margin:0 auto}.OTPForm-module__resend-wrapper___aZUAz{display:flex;align-items:center;justify-content:center;text-align:center;min-height:1.5em}.OTPForm-module__reset-timer___7ElWj{color:var(--cdp-web-colors-page-text-muted);font-weight:500;line-height:1em;min-height:1em;display:flex;align-items:center;justify-content:center}.OTPForm-module__reset-timer___7ElWj p{font-size:.875em;line-height:1;margin:0}

package/dist/assets/PhoneNumberForm.css

@@ -1 +1 @@
-.PhoneNumberForm-module__form___xIcYN{display:flex;flex-direction:column;gap:1em}.PhoneNumberForm-module__server-error___-98Dt{justify-content:center}
+.PhoneNumberForm-module__form___ExO8G{display:flex;flex-direction:column;gap:1em}.PhoneNumberForm-module__server-error___AQcMg{justify-content:center}

package/dist/assets/PhoneNumberInput.css

@@ -1 +1 @@
-.PhoneNumberInput-module__phone-number-input___c7QxX{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;display:flex;align-items:stretch;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.5;padding-left:1em;border-radius:.5em;border:0;background-color:var(--cdp-web-colors-input-bg-default);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color) inset;color:var(--cdp-web-colors-input-text-default);transition:box-shadow .15s ease-in-out;width:100%}.PhoneNumberInput-module__phone-number-input___c7QxX.PhoneNumberInput-module__invalid___qs2M2,.PhoneNumberInput-module__phone-number-input___c7QxX:focus-within.PhoneNumberInput-module__invalid___qs2M2{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}.PhoneNumberInput-module__phone-number-input___c7QxX.PhoneNumberInput-module__success___awnfm{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-success)}.PhoneNumberInput-module__phone-number-input___c7QxX:focus-within{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.PhoneNumberInput-module__phone-number-input___c7QxX .PhoneNumberInput-module__input___ZkUYh{--cdp-web-input-ring-width: 0px;background-color:transparent;padding-left:.75em}.PhoneNumberInput-module__country-calling-code___xUjx5{display:flex;align-items:center;gap:.25rem}
+.PhoneNumberInput-module__phone-number-input___mYty2{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;display:flex;align-items:stretch;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.5;padding-left:1em;border-radius:.5em;border:0;background-color:var(--cdp-web-colors-input-bg-default);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color) inset;color:var(--cdp-web-colors-input-text-default);transition:box-shadow .15s ease-in-out;width:100%}.PhoneNumberInput-module__phone-number-input___mYty2.PhoneNumberInput-module__invalid___zDA2p,.PhoneNumberInput-module__phone-number-input___mYty2:focus-within.PhoneNumberInput-module__invalid___zDA2p{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}.PhoneNumberInput-module__phone-number-input___mYty2.PhoneNumberInput-module__success___uPjMx{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-success)}.PhoneNumberInput-module__phone-number-input___mYty2:focus-within{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.PhoneNumberInput-module__phone-number-input___mYty2 .PhoneNumberInput-module__input___H-XG-{--cdp-web-input-ring-width: 0px;background-color:transparent;padding-left:.75em}.PhoneNumberInput-module__country-calling-code___N6zDW{display:flex;align-items:center;gap:.25rem}

package/dist/assets/SignInAuthMethodButtons.css

@@ -1 +1 @@
-.SignInAuthMethodButtons-module__auth-method-buttons___jYEH7{display:flex;flex-direction:column;gap:.5em}.SignInAuthMethodButtons-module__auth-btn-icon___VjvFY{flex-shrink:0;flex-grow:0;height:1.25em;padding-left:2em;width:auto}.SignInAuthMethodButtons-module__auth-btn-label___mEWd3{flex-grow:1;padding-right:2em}.SignInAuthMethodButtons-module__divider___zphEh{position:relative;text-align:center;margin:1em 0 .5em}.SignInAuthMethodButtons-module__divider___zphEh hr{border:0;border-top:1px solid var(--cdp-web-colors-page-border-default);margin:0;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.SignInAuthMethodButtons-module__divider___zphEh span{background-color:var(--cdp-web-colors-page-bg-default);text-transform:uppercase;font-weight:500;padding:0 .125em;position:relative}
+.SignInAuthMethodButtons-module__auth-method-buttons___jYEH7{display:flex;flex-direction:column;gap:.5em}.SignInAuthMethodButtons-module__auth-btn___o1a09{padding-left:2em;padding-right:2em;gap:0}.SignInAuthMethodButtons-module__auth-btn-icon___VjvFY{flex-shrink:0;flex-grow:0;height:1.25em;width:auto}.SignInAuthMethodButtons-module__auth-btn-label___mEWd3{flex-grow:1;padding:0 1.75em 0 .5em}.SignInAuthMethodButtons-module__divider___zphEh{position:relative;text-align:center;margin:1em 0 .5em}.SignInAuthMethodButtons-module__divider___zphEh hr{border:0;border-top:1px solid var(--cdp-web-colors-page-border-default);margin:0;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.SignInAuthMethodButtons-module__divider___zphEh span{background-color:var(--cdp-web-colors-page-bg-default);color:var(--cdp-web-colors-page-text-muted);text-transform:uppercase;font-size:.875em;font-weight:500;padding:0 .5em;position:relative}

package/dist/assets/SignInModal.css

@@ -1 +1 @@
-.SignInModal-module__trigger___IcJ8x{padding-left:2em;padding-right:2em}.SignInModal-module__modal___PErrT{--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);box-sizing:border-box;box-shadow:var(--shadow-md);width:100%;max-width:28.125em;min-width:0;background:var(--cdp-web-colors-page-bg-default);border-radius:.5em;outline:1px solid var(--cdp-web-colors-page-border-default);position:relative}.SignInModal-module__modal___PErrT[data-state=open]{animation:SignInModal-module__slide-in___eayZg .2s ease-out,SignInModal-module__fade-in___YW32x .2s ease-out}.SignInModal-module__modal___PErrT[data-state=closed]{animation:SignInModal-module__slide-out___fY2xG .2s ease-in,SignInModal-module__fade-out___WE6g4 .2s ease-in}.SignInModal-module__sign-in___n05-5{height:100%;overflow:hidden}.SignInModal-module__sign-in___n05-5.SignInModal-module__no-footer___meSt1{padding-bottom:2em}.SignInModal-module__title-desc-wrapper___--XLa{display:flex;flex-direction:column;gap:1.5em;margin:1.5em 0}.SignInModal-module__title-desc-wrapper___--XLa:first-child{margin-top:0}.SignInModal-module__sign-in-form___Jzx1-,.SignInModal-module__sign-in-form___Jzx1- form{flex-grow:1}.SignInModal-module__sign-in-image___DGg7B{flex-grow:1;margin:2em 0}.SignInModal-module__footer___6qEo2{margin-top:1.5em}.SignInModal-module__buttons___jhaVn{display:flex;justify-content:flex-end;align-items:center;margin-left:-.75em;margin-right:-.75em;width:calc(100% + 1.5em)}.SignInModal-module__back-button___nMh2-{margin-left:0;margin-right:auto}.SignInModal-module__close-icon___b-gMh{height:auto;width:1.5em}.SignInModal-module__overlay___-0rmi{background:var(--cdp-web-colors-bg-overlay);box-sizing:border-box;-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);display:grid;grid-template-rows:auto 1fr;inset:0;overflow-y:auto;place-items:end center;position:fixed;z-index:1000}.SignInModal-module__overlay___-0rmi[data-state=open]{animation:SignInModal-module__fade-in___YW32x .2s ease-out}.SignInModal-module__overlay___-0rmi[data-state=closed]{animation:SignInModal-module__fade-out___WE6g4 .2s ease-in}.SignInModal-module__spacer___x-lRH{height:1em}@keyframes SignInModal-module__fade-in___YW32x{0%{opacity:0}to{opacity:1}}@keyframes SignInModal-module__fade-out___WE6g4{0%{opacity:1}to{opacity:0}}@keyframes SignInModal-module__slide-in___eayZg{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slide-out___fY2xG{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.SignInModal-module__overlay___-0rmi{padding:.5rem}}@media (min-width: 450px){.SignInModal-module__overlay___-0rmi{place-items:center;padding:1rem;grid-template-rows:1fr}.SignInModal-module__modal___PErrT{height:auto}.SignInModal-module__spacer___x-lRH{display:none}.SignInModal-module__sign-in-image___DGg7B{flex-grow:0;margin:0}.SignInModal-module__sign-in-image___DGg7B:empty{display:none}@keyframes SignInModal-module__slide-in___eayZg{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slide-out___fY2xG{0%{transform:translateY(0)}to{transform:translateY(10%)}}}
+.SignInModal-module__trigger___IcJ8x{padding-left:2em;padding-right:2em}.SignInModal-module__sign-in___n05-5{height:100%;overflow:hidden}.SignInModal-module__sign-in___n05-5.SignInModal-module__no-footer___meSt1{padding-bottom:2em}.SignInModal-module__title-desc-wrapper___--XLa{display:flex;flex-direction:column;gap:1.5em;margin-bottom:1.5em}.SignInModal-module__sign-in-form___Jzx1-,.SignInModal-module__sign-in-form___Jzx1- form{flex-grow:1}.SignInModal-module__sign-in-image___DGg7B{flex-grow:1;margin:2em 0}.SignInModal-module__footer___6qEo2{margin-top:1.5em}.SignInModal-module__buttons___jhaVn{display:flex;justify-content:flex-end;align-items:center;margin-left:-.75em;margin-right:-.75em;width:calc(100% + 1.5em)}.SignInModal-module__back-button___nMh2-{margin-left:0;margin-right:auto}.SignInModal-module__close-icon___b-gMh{height:auto;width:1.5em}@media (min-width: 450px){.SignInModal-module__sign-in-image___DGg7B{flex-grow:0;margin:0 0 1.5em}.SignInModal-module__sign-in-image___DGg7B:empty{display:none}}

package/dist/assets/SuccessMessage.css

@@ -1 +1 @@
-.SuccessMessage-module__success___ifqoT{color:var(--cdp-web-colors-fg-positive);font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.25em;display:flex;align-items:center;gap:.25em;margin:0}.SuccessMessage-module__success___ifqoT span{font-size:.875em}.SuccessMessage-module__icon___ClY26{width:auto;height:.875em;flex-grow:0;flex-shrink:0}
+.SuccessMessage-module__success___ZOELg{color:var(--cdp-web-colors-fg-positive);font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.25em;display:flex;align-items:center;gap:.25em;margin:0}.SuccessMessage-module__success___ZOELg span{font-size:.875em}.SuccessMessage-module__icon___QpPW-{width:auto;height:.875em;flex-grow:0;flex-shrink:0}

package/dist/assets/SwitchFadeTransition.css

@@ -1 +1 @@
-.SwitchFadeTransition-module__switch-fade-transition___0ACbj[data-transition=fade]{position:relative}.SwitchFadeTransition-module__switch-fade-transition___0ACbj [data-transition=fade][data-status]{transition:opacity var(--cdp-web-transition-timeout, .2s);width:100%}.SwitchFadeTransition-module__switch-fade-transition___0ACbj [data-transition=fade][data-status=preEnter]{opacity:0}.SwitchFadeTransition-module__switch-fade-transition___0ACbj [data-transition=fade][data-status=exiting],.SwitchFadeTransition-module__switch-fade-transition___0ACbj [data-transition=fade][data-status=exited]{opacity:0;position:absolute;top:0;left:0}
+.SwitchFadeTransition-module__switch-fade-transition___--lbT[data-transition=fade]{position:relative}.SwitchFadeTransition-module__switch-fade-transition___--lbT [data-transition=fade][data-status]{transition:opacity var(--cdp-web-transition-timeout, .2s);width:100%}.SwitchFadeTransition-module__switch-fade-transition___--lbT [data-transition=fade][data-status=preEnter]{opacity:0}.SwitchFadeTransition-module__switch-fade-transition___--lbT [data-transition=fade][data-status=exiting],.SwitchFadeTransition-module__switch-fade-transition___--lbT [data-transition=fade][data-status=exited]{opacity:0;position:absolute;top:0;left:0}

package/dist/assets/SwitchSlideTransition.css

@@ -1 +1 @@
-.SwitchSlideTransition-module__switch-slide-transition___iPQKq [data-transition=slide-left][data-status],.SwitchSlideTransition-module__switch-slide-transition___iPQKq [data-transition=slide-right][data-status]{width:100%;transition:opacity var(--cdp-web-transition-timeout, .2s),transform var(--cdp-web-transition-timeout, .2s)}.SwitchSlideTransition-module__switch-slide-transition___iPQKq[data-transition=slide-left],.SwitchSlideTransition-module__switch-slide-transition___iPQKq[data-transition=slide-right],.SwitchSlideTransition-module__switch-slide-transition___iPQKq[data-transition=slide-left][data-animate-height=true]>div,.SwitchSlideTransition-module__switch-slide-transition___iPQKq[data-transition=slide-right][data-animate-height=true]>div{display:flex;position:relative;width:100%}.SwitchSlideTransition-module__switch-slide-transition___iPQKq[data-transition=slide-left][data-animate-height=true]>div,.SwitchSlideTransition-module__switch-slide-transition___iPQKq[data-transition=slide-right][data-animate-height=true]>div{align-items:flex-start}.SwitchSlideTransition-module__switch-slide-transition___iPQKq [data-transition=slide-left][data-status=preEnter]{opacity:0;transform:translate(200%)}.SwitchSlideTransition-module__switch-slide-transition___iPQKq [data-transition=slide-left][data-status=exiting],.SwitchSlideTransition-module__switch-slide-transition___iPQKq [data-transition=slide-left][data-status=exited]{position:absolute;opacity:0;transform:translate(-200%)}.SwitchSlideTransition-module__switch-slide-transition___iPQKq [data-transition=slide-right][data-status=preEnter]{opacity:0;transform:translate(-200%)}.SwitchSlideTransition-module__switch-slide-transition___iPQKq [data-transition=slide-right][data-status=exiting],.SwitchSlideTransition-module__switch-slide-transition___iPQKq [data-transition=slide-right][data-status=exited]{position:absolute;opacity:0;transform:translate(200%)}
+.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status],.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status]{width:100%;transition:opacity var(--cdp-web-transition-timeout, .2s),transform var(--cdp-web-transition-timeout, .2s)}.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-left],.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-right],.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-left][data-animate-height=true]>div,.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-right][data-animate-height=true]>div{display:flex;position:relative;width:100%}.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-left][data-animate-height=true]>div,.SwitchSlideTransition-module__switch-slide-transition___FykQG[data-transition=slide-right][data-animate-height=true]>div{align-items:flex-start}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status=preEnter]{opacity:0;transform:translate(200%)}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status=exiting],.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-left][data-status=exited]{position:absolute;opacity:0;transform:translate(-200%)}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status=preEnter]{opacity:0;transform:translate(-200%)}.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status=exiting],.SwitchSlideTransition-module__switch-slide-transition___FykQG [data-transition=slide-right][data-status=exited]{position:absolute;opacity:0;transform:translate(200%)}

package/dist/assets/SwitchTransition.css

@@ -1 +1 @@
-.SwitchTransition-module__transition-wrapper___UekKW[data-animate-height=true]{--cdp-web-transition-height: min-cotent;height:var(--cdp-web-transition-height);transition:height var(--cdp-web-transition-timeout, .2s) ease-in-out}
+.SwitchTransition-module__transition-wrapper___jrI35[data-animate-height=true]{--cdp-web-transition-height: min-cotent;height:var(--cdp-web-transition-height);transition:height var(--cdp-web-transition-timeout, .2s) ease-in-out}

package/dist/assets/ThemeProvider.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.ThemeProvider-module__wrapper___aXwhZ{width:100%}
+@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";.ThemeProvider-module__wrapper___aXwhZ{width:100%}

package/dist/assets/VisuallyHidden.css

@@ -1 +1 @@
-.VisuallyHidden-module__visually-hidden___qdUPg{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
+.VisuallyHidden-module__visually-hidden___tD5Vj{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

package/dist/components/AuthButton/index.js

@@ -1,9 +1,9 @@
 import { jsxs as T, jsx as l } from "react/jsx-runtime";
 import { useIsInitialized as _, useIsSignedIn as v } from "@coinbase/cdp-hooks";
 import { useState as c, useRef as w, useEffect as f } from "react";
-import { LoadingSkeleton as x } from "../LoadingSkeleton/index.js";
-import { SignInModal as y } from "../SignInModal/index.js";
-import { SignOutButton as A } from "../SignOutButton/index.js";
+import { SignInModal as x } from "../SignInModal/index.js";
+import { SignOutButton as y } from "../SignOutButton/index.js";
+import { LoadingSkeleton as A } from "../ui/LoadingSkeleton/index.js";
 import '../../assets/AuthButton.css';const B = "AuthButton-module__loading___JpDqi", D = {
   loading: B
 }, L = ({
@@ -48,9 +48,9 @@ import '../../assets/AuthButton.css';const B = "AuthButton-module__loading___JpD
     } else
       s(!1);
   }, [u, t]), /* @__PURE__ */ T("div", { ...p, children: [
-    !i && /* @__PURE__ */ l(x, { className: D.loading }),
-    i && m && /* @__PURE__ */ l(A, { onSuccess: O }),
-    i && !m && /* @__PURE__ */ l(y, { open: t, setIsOpen: d, onSuccess: I })
+    !i && /* @__PURE__ */ l(A, { className: D.loading }),
+    i && m && /* @__PURE__ */ l(y, { onSuccess: O }),
+    i && !m && /* @__PURE__ */ l(x, { open: t, setIsOpen: d, onSuccess: I })
   ] });
 };
 export {

package/dist/components/SendTransactionButton/index.js

@@ -1,7 +1,7 @@
 import { jsx as b } from "react/jsx-runtime";
 import { useSendEvmTransaction as y, APIError as T } from "@coinbase/cdp-hooks";
 import { useState as _, useCallback as v } from "react";
-import { Button as w } from "../Button/index.js";
+import { Button as w } from "../ui/Button/index.js";
 import "../../theme/theme.js";
 import { getMessageFromUnknownError as B } from "../../utils/getMessageFromUnknownError.js";
 import '../../assets/SendTransactionButton.css';const P = {

package/dist/components/SignIn/SignInAuthMethodButtons.js

@@ -1,26 +1,27 @@
 import { jsx as n, jsxs as i } from "react/jsx-runtime";
 import { useMemo as c } from "react";
-import { Button as d } from "../Button/index.js";
-import { useAppConfig as m } from "../CDPReactProvider/index.js";
-import { useSignInContext as p } from "./SignInProvider.js";
-import { IconEnvelope as _ } from "../../icons/IconEnvelope.js";
-import { IconPhone as b } from "../../icons/IconPhone.js";
-import '../../assets/SignInAuthMethodButtons.css';const f = "SignInAuthMethodButtons-module__divider___zphEh", e = {
+import { useAppConfig as d } from "../CDPReactProvider/index.js";
+import { useSignInContext as m } from "./SignInProvider.js";
+import { Button as _ } from "../ui/Button/index.js";
+import { IconEnvelope as b } from "../../icons/IconEnvelope.js";
+import { IconPhone as p } from "../../icons/IconPhone.js";
+import '../../assets/SignInAuthMethodButtons.css';const f = "SignInAuthMethodButtons-module__divider___zphEh", o = {
   "auth-method-buttons": "SignInAuthMethodButtons-module__auth-method-buttons___jYEH7",
+  "auth-btn": "SignInAuthMethodButtons-module__auth-btn___o1a09",
   "auth-btn-icon": "SignInAuthMethodButtons-module__auth-btn-icon___VjvFY",
   "auth-btn-label": "SignInAuthMethodButtons-module__auth-btn-label___mEWd3",
   divider: f
 }, r = {
   email: {
     label: "Continue with email",
-    icon: /* @__PURE__ */ n(_, {})
+    icon: /* @__PURE__ */ n(b, {})
   },
   sms: {
     label: "Continue with phone",
-    icon: /* @__PURE__ */ n(b, {})
+    icon: /* @__PURE__ */ n(p, {})
   }
-}, B = ({ activeMethod: l }) => {
-  const { authMethods: a } = m(), { dispatch: u } = p(), o = c(() => (a || ["email"]).map((t) => {
+}, S = ({ activeMethod: a }) => {
+  const { authMethods: u } = d(), { dispatch: l } = m(), e = c(() => (u || ["email"]).map((t) => {
     if (!r[t])
       return null;
     const { label: s, icon: h } = r[t];
@@ -28,24 +29,25 @@ import '../../assets/SignInAuthMethodButtons.css';const f = "SignInAuthMethodBut
       key: t,
       label: s,
       icon: h,
-      onClick: () => u({ type: "SET_AUTH_METHOD", payload: { authMethod: t } })
+      onClick: () => l({ type: "SET_AUTH_METHOD", payload: { authMethod: t } })
     };
-  }).filter((t) => t !== null), [a, u]);
-  return !o.length || o.length === 1 && o[0].key === l ? null : /* @__PURE__ */ i("div", { className: e["auth-method-buttons"], children: [
-    /* @__PURE__ */ i("div", { className: e.divider, children: [
+  }).filter((t) => t !== null), [u, l]);
+  return !e.length || e.length === 1 && e[0].key === a ? null : /* @__PURE__ */ i("div", { className: o["auth-method-buttons"], children: [
+    /* @__PURE__ */ i("div", { className: o.divider, children: [
       /* @__PURE__ */ n("hr", {}),
       /* @__PURE__ */ n("span", { children: "or" })
     ] }),
-    o.map((t) => t.key === l ? null : /* @__PURE__ */ i(
-      d,
+    e.map((t) => t.key === a ? null : /* @__PURE__ */ i(
+      _,
       {
         "aria-label": t.ariaLabel,
+        className: o["auth-btn"],
         type: "button",
         variant: "secondary",
         onClick: t.onClick,
         children: [
-          /* @__PURE__ */ n("span", { className: e["auth-btn-icon"], children: t.icon }),
-          /* @__PURE__ */ n("span", { className: e["auth-btn-label"], children: t.label })
+          /* @__PURE__ */ n("span", { className: o["auth-btn-icon"], children: t.icon }),
+          /* @__PURE__ */ n("span", { className: o["auth-btn-label"], children: t.label })
         ]
       },
       t.key
@@ -53,5 +55,5 @@ import '../../assets/SignInAuthMethodButtons.css';const f = "SignInAuthMethodBut
   ] });
 };
 export {
-  B as SignInAuthMethodButtons
+  S as SignInAuthMethodButtons
 };

package/dist/components/SignIn/SignInBackButton.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import { useMemo as f } from "react";
-import { Button as S } from "../Button/index.js";
+import { Button as S } from "../ui/Button/index.js";
 import { IconArrowLeft as d } from "../../icons/IconArrowLeft.js";
 import "../../theme/theme.js";
 import { useSignInContext as B } from "./SignInProvider.js";

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

@@ -11,4 +11,4 @@ export interface SignInFormProps extends Omit<HTMLAttributes<HTMLElement>, "chil
         Form: ReactNode;
     }) => ReactNode;
 }
-export declare const SignInForm: ({ onSuccess, step: stepFromProps, children }: SignInFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignInForm: ({ onSuccess, step: stepFromProps, children, ...props }: SignInFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInForm.js

@@ -1,31 +1,37 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useRef as s, useLayoutEffect as l } from "react";
-import { useAppConfig as g } from "../CDPReactProvider/index.js";
-import { SwitchFadeTransition as M } from "../SwitchFadeTransition/index.js";
-import { a as w } from "../../chunks/index.BzllgVaP.js";
-import { useSignInContext as _ } from "./SignInProvider.js";
+import { useRef as s, useLayoutEffect as g } from "react";
+import { useAppConfig as M } from "../CDPReactProvider/index.js";
+import { SwitchFadeTransition as w } from "../ui/SwitchFadeTransition/index.js";
+import { a as _ } from "../../chunks/index.BzllgVaP.js";
+import { useSignInContext as F } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
-import '../../assets/SignInForm.css';const F = {
+import '../../assets/SignInForm.css';const I = {
   "auth-method-wrapper": "SignInForm-module__auth-method-wrapper___uIOAB"
-}, E = ({ onSuccess: a, step: u, children: h }) => {
-  const { state: t } = _(), { authMethods: m } = g(), p = u || t.step, o = s(t.authMethod), r = s(null);
-  return l(() => {
+}, T = ({
+  onSuccess: a,
+  step: u,
+  children: h,
+  ...m
+}) => {
+  const { state: t } = F(), { authMethods: p } = M(), c = u || t.step, o = s(t.authMethod), r = s(null);
+  return g(() => {
     o.current !== t.authMethod && (r.current?.transition.toggle(t.authMethod), o.current = t.authMethod);
   }, [t.authMethod]), /* @__PURE__ */ e(
-    M,
+    w,
     {
       animateHeight: !0,
       timeout: 250,
-      items: m || ["email"],
+      items: p || ["email"],
       initialEntered: !0,
       transitionRef: r,
-      children: ({ itemKey: n, ...c }) => {
-        const d = w[n].forms;
-        return /* @__PURE__ */ e("div", { ...c, className: F["auth-method-wrapper"], children: /* @__PURE__ */ e(d, { step: p, onSuccess: a, children: ({ step: f, Form: i }) => h?.({ step: f, authMethod: n, Form: i }) || i }) });
+      ...m,
+      children: ({ itemKey: n, ...d }) => {
+        const f = _[n].forms;
+        return /* @__PURE__ */ e("div", { ...d, className: I["auth-method-wrapper"], children: /* @__PURE__ */ e(f, { step: c, onSuccess: a, children: ({ step: l, Form: i }) => h?.({ step: l, authMethod: n, Form: i }) || i }) });
       }
     }
   );
 };
 export {
-  E as SignInForm
+  T as SignInForm
 };

package/dist/components/SignIn/flows/SignInWithEmail.d.ts

@@ -1,4 +1,5 @@
 import { SignInFlowProps, SignInTitleAndDescriptionProps, SignInFlowConfig } from '../types';
+export type Step = "email" | "otp";
 export declare const SignInWithEmail: ({ step: stepFromProps, onSuccess, children }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SignInWithEmailTitle: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SignInWithEmailDescription: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/flows/SignInWithEmail.js

@@ -1,71 +1,88 @@
-import { jsx as p, jsxs as o, Fragment as r } from "react/jsx-runtime";
+import { jsx as o, jsxs as m, Fragment as a } from "react/jsx-runtime";
 import { useSignInWithEmail as x, useVerifyEmailOTP as y } from "@coinbase/cdp-hooks";
-import { useRef as f, useLayoutEffect as D } from "react";
-import { FlowEmailOTP as F } from "../../FlowEmailOTP/index.js";
-import "react-transition-state";
-import { useEmailForm as j } from "../hooks/useEmailForm.js";
-import { useOTPForm as L } from "../hooks/useOTPForm.js";
-import { SignInCredentials as H } from "../SignInCredentials.js";
-import { useSignInContext as g } from "../SignInProvider.js";
+import { useRef as g, useLayoutEffect as D } from "react";
+import { EmailForm as j } from "../../forms/EmailForm/index.js";
+import { OTPForm as L } from "../../forms/OTPForm/index.js";
+import { SwitchSlideTransition as H } from "../../ui/SwitchSlideTransition/index.js";
+import { useEmailForm as M } from "../hooks/useEmailForm.js";
+import { useOTPForm as V } from "../hooks/useOTPForm.js";
+import { SignInCredentials as k } from "../SignInCredentials.js";
+import { useSignInContext as S } from "../SignInProvider.js";
 import "../../CDPReactProvider/index.js";
-const M = ({ step: i, onSuccess: s, children: S }) => {
-  const a = f(null), h = 6, { state: e } = g(), { signInWithEmail: E } = x(), { verifyEmailOTP: P } = y(), c = i || e.step, n = c === "credentials" ? "email" : "otp", m = f(n), { setEmail: T, submitEmail: l } = j({
+const q = ["email", "otp"], z = ({ step: n, onSuccess: s, children: c }) => {
+  const l = g(null), h = 6, { state: e } = S(), { signInWithEmail: E } = x(), { verifyEmailOTP: P } = y(), u = n || e.step, i = u === "credentials" ? "email" : "otp", d = g(i), { setEmail: T, submitEmail: f } = M({
     submit: (t) => E({ email: t })
-  }), { resendCountdown: O, resetOTP: v, setOTP: I, startResendTimer: b, submitOtp: w } = L({
+  }), { resendCountdown: O, resetOTP: v, setOTP: I, startResendTimer: b, submitOtp: F } = V({
     passwordLength: h,
     submit: (t) => P({ flowId: e.flowId, otp: t })
-  }), u = () => {
+  }), p = () => {
     b(60);
   }, R = () => {
-    v(), l({ email: e.email, onSuccess: u });
+    v(), f({ email: e.email, onSuccess: p });
+  }, w = (t) => {
+    t.preventDefault(), f({ email: e.email, onSuccess: p });
   }, W = (t) => {
-    t.preventDefault(), l({ email: e.email, onSuccess: u });
-  }, C = (t) => {
-    t.preventDefault(), w({ otp: e.otp, onSuccess: s });
+    t.preventDefault(), F({ otp: e.otp, onSuccess: s });
   };
   return D(() => {
-    m.current !== n && (a.current?.transition.toggle(n), m.current = n);
-  }, [n]), /* @__PURE__ */ p(
-    F,
+    d.current !== i && (l.current?.transition.toggle(i), d.current = i);
+  }, [i]), /* @__PURE__ */ o(
+    H,
     {
+      autoFocus: !0,
       animateHeight: !1,
-      canResetOTP: e.canResetOTP,
-      email: e.email,
-      error: e.error || "",
-      isPending: e.isPending,
-      onEmailChange: T,
-      onOTPChange: I,
-      onResendOTP: R,
-      onSubmitEmail: W,
-      onSubmitOTP: C,
-      otp: e.otp,
-      resendCountdown: O,
-      step: n,
-      successMessage: e.isSuccess ? "Success!" : void 0,
-      transitionRef: a,
-      children: ({ step: t, Form: d }) => S?.({ step: c, Form: d }) || d
+      items: q,
+      initialEntered: !0,
+      direction: i === "otp" ? "left" : "right",
+      transitionRef: l,
+      children: ({ itemKey: t, ...C }) => {
+        let r = null;
+        return t === "email" && (r = /* @__PURE__ */ o(
+          j,
+          {
+            email: e.email,
+            error: i === "email" && e.error || "",
+            isPending: e.isPending,
+            onEmailChange: T,
+            onSubmit: w
+          }
+        )), t === "otp" && (r = /* @__PURE__ */ o(
+          L,
+          {
+            canResetOTP: e.canResetOTP,
+            error: i === "otp" && e.error || "",
+            isPending: e.isPending,
+            onOTPChange: I,
+            onResendOTP: R,
+            onSubmit: W,
+            otp: e.otp,
+            resendCountdown: O,
+            successMessage: e.isSuccess ? "Success!" : void 0
+          }
+        )), /* @__PURE__ */ o("div", { ...C, children: c ? c({ step: u, Form: r }) : r });
+      }
     }
   );
-}, V = ({ step: i }) => /* @__PURE__ */ o(r, { children: [
-  i === "credentials" && "Sign in",
-  i === "verification" && "Enter verification code"
-] }), _ = ({ step: i }) => {
-  const { state: s } = g();
-  return /* @__PURE__ */ o(r, { children: [
-    i === "credentials" && "We’ll send you a verification code via email.",
-    i === "verification" && /* @__PURE__ */ o(r, { children: [
+}, A = ({ step: n }) => /* @__PURE__ */ m(a, { children: [
+  n === "credentials" && "Sign in",
+  n === "verification" && "Enter verification code"
+] }), B = ({ step: n }) => {
+  const { state: s } = S();
+  return /* @__PURE__ */ m(a, { children: [
+    n === "credentials" && "We’ll send you a verification code via email.",
+    n === "verification" && /* @__PURE__ */ m(a, { children: [
       "Enter the 6 digit code sent to ",
-      /* @__PURE__ */ p(H, { children: s.email })
+      /* @__PURE__ */ o(k, { children: s.email })
     ] })
   ] });
-}, U = {
-  description: _,
-  forms: M,
-  title: V
+}, ee = {
+  description: B,
+  forms: z,
+  title: A
 };
 export {
-  M as SignInWithEmail,
-  _ as SignInWithEmailDescription,
-  V as SignInWithEmailTitle,
-  U as config
+  z as SignInWithEmail,
+  B as SignInWithEmailDescription,
+  A as SignInWithEmailTitle,
+  ee as config
 };

package/dist/components/SignIn/flows/SignInWithSms.d.ts

@@ -1,5 +1,8 @@
 import { SignInFlowProps, SignInTitleAndDescriptionProps, SignInFlowConfig } from '../types';
+declare const STEPS: readonly ["phoneNumber", "otp"];
+export type Step = (typeof STEPS)[number];
 export declare const SignInWithSms: ({ step: stepFromProps, onSuccess, children }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SignInWithSmsTitle: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SignInWithSmsDescription: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const config: SignInFlowConfig;
+export {};