@coinbase/cdp-react 0.0.18 → 0.0.19

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:1em;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__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___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}

package/dist/assets/EmailForm.css

@@ -0,0 +1 @@
+.EmailForm-module__form___MD6xv{display:flex;flex-direction:column;gap:1em}.EmailForm-module__server-error___uRzUG{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;display:flex;align-items:center;gap:.25em;margin:0}.Error-module__error___mRFLG span{font-size:.875em}.Error-module__icon___web4F{width:1em;height:1em;flex-grow:0;flex-shrink:0}
+.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}

package/dist/assets/Field.css

@@ -1 +1 @@
-.Field-module__field-wrapper___0p4i7{display:flex;flex-direction:column;gap:.375em}.Field-module__label___LAQio{font-size:.875em;line-height:1.43;font-weight:500;color:var(--cdp-web-colors-input-label-default)}
+.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}

package/dist/assets/FlowEmailOTP.css

@@ -0,0 +1 @@
+.FlowEmailOTP-module__step-wrapper___Cdk60{display:flex;flex-direction:column}

package/dist/assets/FlowPhoneNumberOTP.css

@@ -0,0 +1 @@
+.FlowPhoneNumberOTP-module__step-wrapper___TtbeW{display:flex;flex-direction:column}

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-size:1em;line-height:1.5;padding:1em .75em;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:all .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{--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)}

package/dist/assets/Label.css

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

package/dist/assets/OTP.css

@@ -1 +1 @@
-.OTP-module__otp___EUcSo{--cdp-web-otp-input-width: 25%}.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__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}

package/dist/assets/OTPForm.css

@@ -0,0 +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}

package/dist/assets/PhoneNumberForm.css

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

package/dist/assets/PhoneNumberInput.css

@@ -0,0 +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}

package/dist/assets/SignIn.css

@@ -1 +1 @@
-.SignIn-module__sign-in___cYpee{border-radius:.75em;box-sizing:border-box;font:var(--cdp-web-font-size-base) / 1.5 var(--cdp-web-font-family-sans);background-color:var(--cdp-web-colors-page-bg-default);color:var(--cdp-web-colors-page-text-default);display:flex;flex-direction:column;gap:1em;max-width:38.25em;padding:1em 2em;width:100%}.SignIn-module__sign-in___cYpee *{box-sizing:border-box}
+.SignIn-module__sign-in___cYpee{border-radius:.75em;box-sizing:border-box;font:var(--cdp-web-font-size-base) / 1.5 var(--cdp-web-font-family-sans);font-optical-sizing:auto;background-color:var(--cdp-web-colors-page-bg-default);color:var(--cdp-web-colors-page-text-default);display:flex;flex-direction:column;max-width:38.25em;padding:.75em 2em 1em;overflow:hidden;width:100%}.SignIn-module__title-desc-wrapper___VpPcA{display:flex;flex-direction:column;gap:1.5em;margin:1.5em 0}.SignIn-module__sign-in___cYpee *{box-sizing:border-box}.SignIn-module__back-button___bmE-y{align-self:flex-start}.SignIn-module__back-button-wrapper___Q9FA1{min-height:3em}.SignIn-module__footer___3Gkbc{margin-top:1.5em}

package/dist/assets/SignInAuthMethodButtons.css

@@ -0,0 +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}

package/dist/assets/SignInBackButton.css

@@ -0,0 +1 @@
+.SignInBackButton-module__icon___stNFS{width:1.5em;height:auto}

package/dist/assets/SignInCredentials.css

@@ -0,0 +1 @@
+.SignInCredentials-module__credentials___LE04y{font-weight:500;overflow-wrap:break-word;word-wrap:break-word}

package/dist/assets/SignInDescription.css

@@ -1 +1 @@
-.SignInDescription-module__description___jZLc6{color:var(--cdp-web-colors-page-text-muted);margin:0}.SignInDescription-module__medium___NGpLf{font-weight:500}
+.SignInDescription-module__description___jZLc6{text-align:center;margin:0}

package/dist/assets/SignInFooter.css

@@ -0,0 +1 @@
+.SignInFooter-module__footer___DLNrl{color:var(--cdp-web-colors-page-text-muted);display:flex;align-items:center;justify-content:center;gap:.5em;line-height:1;padding:1em 2em 0}.SignInFooter-module__footer___DLNrl:first-child{border-top:0}.SignInFooter-module__footer___DLNrl p{display:flex;align-items:center;font-size:.75em;gap:.25em;margin:0}.SignInFooter-module__icon___hFhfx{height:auto;width:.75em}.SignInFooter-module__coinbase-icon___NeFOp{height:1em;width:auto}

package/dist/assets/SignInForm.css

@@ -1 +1 @@
-.SignInForm-module__form-wrapper___SlQkZ{display:flex;flex-direction:column}.SignInForm-module__form___8Mc3V{display:flex;flex-direction:column;gap:1em;padding-bottom:2em}.SignInForm-module__form-footer___PqM2J{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;min-height:1.5em;padding-top:1.5em}.SignInForm-module__server-state-wrapper___QVsXy{margin-top:-1.5em;min-height:1.5em;position:relative;top:-.25em}.SignInForm-module__loading-spinner___W6gZo{color:var(--cdp-web-colors-link-primary-text-default);display:block;margin:0 auto}.SignInForm-module__server-error___dD9VE{justify-content:center}.SignInForm-module__resend-wrapper___ODSQA{display:flex;align-items:center;justify-content:center;text-align:center;min-height:1.5em}.SignInForm-module__reset-timer___Ms2YZ{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}.SignInForm-module__reset-timer___Ms2YZ p{font-size:.875em;line-height:1;margin:0}.SignInForm-module__footer___6Lo9w{color:var(--cdp-web-colors-page-text-muted);display:flex;align-items:center;justify-content:center;gap:.5em;line-height:1;padding:1em 2em 1.5em}.SignInForm-module__coinbase-icon___vGv7u{height:1em;width:auto}.SignInForm-module__footer___6Lo9w p{display:flex;align-items:center;font-size:.75em;gap:.25em;margin:0}.SignInForm-module__hr___fOcy4{border:0;border-top:1px solid var(--cdp-web-colors-page-border-default);width:100%}.SignInForm-module__icon___qkJnq{height:auto;width:.75em}
+.SignInForm-module__auth-method-wrapper___uIOAB{display:flex;flex-direction:column;gap:1em}

package/dist/assets/SignInImage.css

@@ -1 +1 @@
-.SignInImage-module__logo___rlzt-{display:block;margin:0;width:64px;height:64px;border-radius:9999em;object-fit:cover}.SignInImage-module__success-icon___avUF9{color:var(--cdp-web-colors-fg-positive);display:block;height:4em;width:4em}
+.SignInImage-module__logo___rlzt-{display:block;margin:0 auto;width:auto;height:64px;object-fit:cover}

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:29.375em;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%;padding:2em 0 0}.SignInModal-module__sign-in-image___DGg7B,.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q,.SignInModal-module__sign-in-form___Jzx1->form,.SignInModal-module__sign-in-form___Jzx1->div{padding-left:2em;padding-right:2em}.SignInModal-module__sign-in-form___Jzx1-,.SignInModal-module__sign-in-form___Jzx1- form{flex-grow:1}.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q{text-align:center}.SignInModal-module__sign-in-image___DGg7B{display:flex;justify-content:center;align-items:center;flex-grow:1;margin:2em 0}.SignInModal-module__close-button___k1I5Q{position:absolute;top:1.5em;right:1.5em;width:3em}.SignInModal-module__close-button___k1I5Q svg{height:1em;width:1em}.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: 470px){.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___n05-5{padding-top:2.5em}.SignInModal-module__sign-in-image___DGg7B,.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q,.SignInModal-module__sign-in-form___Jzx1->form,.SignInModal-module__sign-in-form___Jzx1->div{padding-left:2.5em;padding-right:2.5em}.SignInModal-module__sign-in-image___DGg7B{align-self:flex-start;margin:0}.SignInModal-module__sign-in-image___DGg7B:empty{display:none}.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q{text-align:left}@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__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%)}}}

package/dist/assets/SignInTitle.css

@@ -1 +1 @@
-.SignInTitle-module__heading___QJ071{font-size:1.75em;line-height:1.29;margin:0}
+.SignInTitle-module__heading___QJ071{font-size:1.25em;font-weight:500;line-height:1.4;text-align:center;margin:0}

package/dist/assets/SuccessMessage.css

@@ -0,0 +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}

package/dist/assets/SwitchFadeTransition.css

@@ -0,0 +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}

package/dist/assets/SwitchSlideTransition.css

@@ -0,0 +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%)}

package/dist/assets/SwitchTransition.css

@@ -0,0 +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}

package/dist/assets/ThemeProvider.css

@@ -1 +1 @@
-.ThemeProvider-module__wrapper___aXwhZ{width:100%}
+@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%}

package/dist/chunks/index.BzllgVaP.js

@@ -0,0 +1,12 @@
+import "../components/CDPReactProvider/index.js";
+import { config as o } from "../components/SignIn/flows/SignInWithEmail.js";
+import { config as i } from "../components/SignIn/flows/SignInWithSms.js";
+import "@coinbase/cdp-hooks";
+import "react";
+const a = {
+  email: o,
+  sms: i
+};
+export {
+  a
+};

package/dist/components/AuthButton/index.js

@@ -7,7 +7,7 @@ import { SignOutButton as A } from "../SignOutButton/index.js";
 import '../../assets/AuthButton.css';const B = "AuthButton-module__loading___JpDqi", D = {
   loading: B
 }, L = ({
-  closeOnSuccessDelay: S = 0,
+  closeOnSuccessDelay: S = 800,
   onSignInSuccess: g,
   onSignInSuccessTransitionEnd: a,
   onSignOutSuccess: h,

package/dist/components/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/Button/index.js

@@ -1,27 +1,44 @@
-import { jsx as n, jsxs as d, Fragment as y } from "react/jsx-runtime";
-import { forwardRef as c, useMemo as p } from "react";
+import { jsx as e, jsxs as c, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as p, useMemo as s } from "react";
 import "../../theme/theme.js";
-import { LoadingSpinner as u } from "../LoadingSpinner/index.js";
-import { VisuallyHidden as l } from "../VisuallyHidden/index.js";
-import '../../assets/Button.css';const k = "Button-module__btn___Fx11X", B = "Button-module__primary___s1sM6", f = "Button-module__secondary___R0waJ", r = {
-  btn: k,
+import { LoadingSpinner as B } from "../LoadingSpinner/index.js";
+import { VisuallyHidden as k } from "../VisuallyHidden/index.js";
+import '../../assets/Button.css';const g = "Button-module__btn___Fx11X", z = "Button-module__primary___s1sM6", f = "Button-module__secondary___R0waJ", r = {
+  btn: g,
+  "size-lg": "Button-module__size-lg___2sR8u",
+  "size-md": "Button-module__size-md___HBcrV",
+  "size-sm": "Button-module__size-sm___yph5g",
   "link-primary": "Button-module__link-primary___wROmv",
   "link-secondary": "Button-module__link-secondary___5VErP",
-  primary: B,
+  primary: z,
   secondary: f,
   "transparent-primary": "Button-module__transparent-primary___Ah0yM",
   "transparent-secondary": "Button-module__transparent-secondary___kk5sZ"
-}, h = c(
+}, h = p(
   ({
-    children: t,
-    className: e = "",
-    isPending: o,
-    pendingLabel: s = "Loading...",
-    variant: a = "primary",
-    ...i
-  }, m) => {
-    const _ = p(() => {
-      switch (a) {
+    children: a,
+    className: o = "",
+    isPending: i,
+    pendingLabel: m = "Loading...",
+    size: t = "lg",
+    variant: n = "primary",
+    ..._
+  }, u) => {
+    const d = s(() => {
+      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 = s(() => {
+      switch (n) {
         case "primary":
           return r.primary;
         case "secondary":
@@ -37,11 +54,19 @@ import '../../assets/Button.css';const k = "Button-module__btn___Fx11X", B = "Bu
         default:
           return r.primary;
       }
-    }, [a]);
-    return /* @__PURE__ */ n("button", { className: `${r.btn} ${_} ${e}`, ref: m, ...i, children: o ? /* @__PURE__ */ d(y, { children: [
-      /* @__PURE__ */ n(u, { "aria-hidden": "true" }),
-      /* @__PURE__ */ n(l, { children: s })
-    ] }) : t });
+    }, [n]);
+    return /* @__PURE__ */ e(
+      "button",
+      {
+        className: `${r.btn} ${d} ${l} ${o}`,
+        ref: u,
+        ..._,
+        children: i ? /* @__PURE__ */ c(y, { children: [
+          /* @__PURE__ */ e(B, { "aria-hidden": "true" }),
+          /* @__PURE__ */ e(k, { children: m })
+        ] }) : a
+      }
+    );
   }
 );
 h.displayName = "Button";

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

@@ -1,9 +1,12 @@
 import { CDPHooksProviderProps } from '@coinbase/cdp-hooks';
 import { ThemeProviderProps } from '../ThemeProvider';
+export declare const AUTH_METHODS: readonly ["email", "sms"];
+export type AuthMethod = (typeof AUTH_METHODS)[number];
 export interface AppConfig {
     name: string;
     logoUrl?: string;
     showCoinbaseFooter?: boolean;
+    authMethods?: AuthMethod[];
 }
 export type CDPReactProviderProps = {
     app?: AppConfig;

package/dist/components/CDPReactProvider/index.js

@@ -1,32 +1,39 @@
 import { jsx as t } from "react/jsx-runtime";
 import { CDPContext as c, CDPHooksProvider as C } from "@coinbase/cdp-hooks";
-import { createContext as d, useContext as i, useMemo as u } from "react";
-import { ThemeProvider as m } from "../ThemeProvider/index.js";
-const g = ({ children: o, config: e, theme: r, app: s }) => {
-  const n = /* @__PURE__ */ t(x, { app: s, children: /* @__PURE__ */ t(m, { theme: r, children: o }) });
+import { createContext as d, useContext as i, useMemo as m } from "react";
+import { ThemeProvider as u } from "../ThemeProvider/index.js";
+const A = [
+  /** Email OTP method */
+  "email",
+  /** SMS OTP method */
+  "sms"
+], g = ({ children: o, config: e, theme: r, app: p }) => {
+  const n = /* @__PURE__ */ t(f, { app: p, children: /* @__PURE__ */ t(u, { theme: r, children: o }) });
   return i(c) ? n : /* @__PURE__ */ t(C, { config: e, children: n });
-}, p = d(void 0), f = {
+}, s = d(void 0), a = {
   name: "",
   logoUrl: "",
-  showCoinbaseFooter: !0
-}, x = ({ children: o, app: e }) => {
-  const r = u(
+  showCoinbaseFooter: !0,
+  authMethods: ["email"]
+}, f = ({ children: o, app: e }) => {
+  const r = m(
     () => ({
       app: {
-        ...f,
+        ...a,
         ...e
       }
     }),
     [e]
   );
-  return /* @__PURE__ */ t(p.Provider, { value: r, children: o });
-}, A = () => {
-  const o = i(p);
+  return /* @__PURE__ */ t(s.Provider, { value: r, children: o });
+}, D = () => {
+  const o = i(s);
   if (!o)
     throw new Error("useAppConfig must be used within an AppConfigProvider");
   return o.app;
 };
 export {
+  A as AUTH_METHODS,
   g as CDPReactProvider,
-  A as useAppConfig
+  D as useAppConfig
 };

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

@@ -0,0 +1,11 @@
+import { APIError } from '@coinbase/cdp-hooks';
+import { FormHTMLAttributes } from 'react';
+export interface EmailFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
+    email?: string;
+    error?: string | APIError;
+    isPending?: boolean;
+    onClearServerErrors?: () => void;
+    onEmailChange?: (value: string) => void;
+    submitLabel?: string;
+}
+export declare const EmailForm: ({ className, email, error, onEmailChange, isPending, submitLabel, ...props }: EmailFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmailForm/index.js

@@ -0,0 +1,56 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import "@coinbase/cdp-hooks";
+import { Form as c, FormSubmit as v } from "@radix-ui/react-form";
+import "react";
+import { Button as f } from "../Button/index.js";
+import { Field as h } from "../Field/index.js";
+import { withValidityState as _ } from "../Input/index.js";
+import { ServerError as E } from "../ServerError/index.js";
+import { isEmailInvalid as F } from "../../utils/isEmailInvalid.js";
+import '../../assets/EmailForm.css';const x = "EmailForm-module__form___MD6xv", o = {
+  form: x,
+  "server-error": "EmailForm-module__server-error___uRzUG"
+}, N = ({
+  className: a = "",
+  email: t,
+  error: e,
+  onEmailChange: m,
+  isPending: l,
+  submitLabel: s = "Continue",
+  ...d
+}) => {
+  const i = {
+    autoComplete: "email",
+    type: "email",
+    placeholder: "name@example.com",
+    required: !0
+  }, n = (p) => {
+    m?.(p.target.value?.trim());
+  };
+  return /* @__PURE__ */ u(c, { className: `${o.form} ${a}`, ...d, children: [
+    /* @__PURE__ */ r(
+      h,
+      {
+        label: "Email address",
+        name: "email",
+        validators: [
+          ["valueMissing", "Email is required"],
+          ["typeMismatch", "Use a valid email address"],
+          [F, "Use a valid email address"]
+        ],
+        children: _(
+          m !== void 0 ? {
+            ...i,
+            value: t,
+            onChange: n
+          } : i
+        )
+      }
+    ),
+    e && /* @__PURE__ */ r(E, { error: e, className: o["server-error"] }),
+    /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ r(f, { type: "submit", isPending: l, children: s }) })
+  ] });
+};
+export {
+  N as EmailForm
+};

package/dist/components/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/Error/index.js

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

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

@@ -3,9 +3,10 @@ import { CSSProperties, JSX, ReactNode } from 'react';
 export interface FormFieldProps {
     children?: FormValidityStateProps["children"];
     className?: string;
+    inlineError?: string;
     label: string;
     name: string;
     style?: CSSProperties;
     validators?: [FormMessageProps["match"], ReactNode][];
 }
-export declare const Field: ({ children, className, label, name, style, validators, }: FormFieldProps) => JSX.Element;
+export declare const Field: ({ children, className, inlineError, label, name, style, validators, }: FormFieldProps) => JSX.Element;

package/dist/components/Field/index.js

@@ -1,22 +1,24 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { FormField as n, FormLabel as _, FormValidityState as F, FormControl as h, FormMessage as f } from "@radix-ui/react-form";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { FormField as F, FormLabel as f, FormValidityState as u, FormControl as C, FormMessage as d } from "@radix-ui/react-form";
 import "react";
-import { Error as b } from "../Error/index.js";
-import '../../assets/Field.css';const u = "Field-module__label___LAQio", i = {
-  "field-wrapper": "Field-module__field-wrapper___0p4i7",
-  label: u
-}, y = ({
-  children: l,
-  className: o = "",
-  label: a,
-  name: d,
-  style: m,
-  validators: s
-}) => /* @__PURE__ */ c(n, { name: d, className: `${o} ${i["field-wrapper"]}`, style: m, children: [
-  /* @__PURE__ */ e(_, { className: i.label, children: a }),
-  /* @__PURE__ */ e(F, { children: (r) => l && /* @__PURE__ */ e(h, { asChild: !0, children: l(r) }) }),
-  s?.map(([r, t], p) => /* @__PURE__ */ e(f, { match: r, asChild: !0, children: /* @__PURE__ */ e(b, { children: t }) }, p))
+import { Error as o } from "../Error/index.js";
+import { Label as _ } from "../Label/index.js";
+import '../../assets/Field.css';const w = {
+  "field-wrapper": "Field-module__field-wrapper___0p4i7"
+}, $ = ({
+  children: i,
+  className: t = "",
+  inlineError: l,
+  label: m,
+  name: a,
+  style: s,
+  validators: p
+}) => /* @__PURE__ */ n(F, { name: a, className: `${t} ${w["field-wrapper"]}`, style: s, children: [
+  /* @__PURE__ */ r(f, { asChild: !0, children: /* @__PURE__ */ r(_, { children: m }) }),
+  /* @__PURE__ */ r(u, { children: (e) => i && /* @__PURE__ */ r(C, { asChild: !0, children: i(e) }) }),
+  p?.map(([e, h], c) => /* @__PURE__ */ r(d, { match: e, asChild: !0, children: /* @__PURE__ */ r(o, { children: h }) }, c)),
+  l && /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r(o, { children: l }) })
 ] });
 export {
-  y as Field
+  $ as Field
 };

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

@@ -0,0 +1,18 @@
+import { ReactNode, Ref } from 'react';
+import { EmailFormProps } from '../EmailForm/EmailForm';
+import { OTPFormProps } from '../OTPForm/OTPForm';
+import { SwitchSlideTransitionRef } from '../SwitchSlideTransition/SwitchSlideTransition';
+export type Step = "email" | "otp";
+export interface FlowEmailOTPProps extends Omit<EmailFormProps, "onSubmit">, Omit<OTPFormProps, "onSubmit"> {
+    animateHeight?: boolean;
+    children?: (props: {
+        step: Step;
+        Form: ReactNode;
+    }) => ReactNode;
+    className?: string;
+    onSubmitEmail: EmailFormProps["onSubmit"];
+    onSubmitOTP: OTPFormProps["onSubmit"];
+    step: Step;
+    transitionRef: Ref<SwitchSlideTransitionRef<Step>>;
+}
+export declare const FlowEmailOTP: ({ autoFocus, animateHeight, canResetOTP, className, children, email, error, isPending, successMessage, onEmailChange, onOTPChange, onResendOTP, onSubmitEmail, onSubmitOTP, otp, otpInputsRef, resendCountdown, step, transitionRef, }: FlowEmailOTPProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FlowEmailOTP/index.js

@@ -0,0 +1,70 @@
+import { jsx as r, Fragment as b } from "react/jsx-runtime";
+import "react";
+import { EmailForm as x } from "../EmailForm/index.js";
+import { OTPForm as P } from "../OTPForm/index.js";
+import { SwitchSlideTransition as g } from "../SwitchSlideTransition/index.js";
+import '../../assets/FlowEmailOTP.css';const j = {
+  "step-wrapper": "FlowEmailOTP-module__step-wrapper___Cdk60"
+}, A = ({
+  autoFocus: n = !0,
+  animateHeight: a = !0,
+  canResetOTP: u,
+  className: e = "",
+  children: m,
+  email: s,
+  error: l,
+  isPending: p,
+  successMessage: d,
+  onEmailChange: f,
+  onOTPChange: c,
+  onResendOTP: w,
+  onSubmitEmail: F,
+  onSubmitOTP: _,
+  otp: h,
+  otpInputsRef: E,
+  resendCountdown: S,
+  step: o,
+  transitionRef: T
+}) => /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
+  g,
+  {
+    autoFocus: n,
+    animateHeight: a,
+    items: ["email", "otp"],
+    initialEntered: !0,
+    direction: o === "otp" ? "left" : "right",
+    transitionRef: T,
+    children: ({ itemKey: i, ...O }) => {
+      let t = null;
+      return i === "email" && (t = /* @__PURE__ */ r(
+        x,
+        {
+          className: e,
+          email: s,
+          error: o === "email" ? l : "",
+          isPending: p,
+          onEmailChange: f,
+          onSubmit: F
+        }
+      )), i === "otp" && (t = /* @__PURE__ */ r(
+        P,
+        {
+          canResetOTP: u,
+          className: e,
+          error: o === "otp" ? l : "",
+          isPending: p,
+          onOTPChange: c,
+          onResendOTP: w,
+          onSubmit: _,
+          otp: h,
+          otpInputsRef: E,
+          resendCountdown: S,
+          successMessage: d
+        }
+      )), /* @__PURE__ */ r("div", { ...O, className: j["step-wrapper"], children: m ? m({ step: i, Form: t }) : t });
+    }
+  }
+) });
+export {
+  A as FlowEmailOTP
+};

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

@@ -0,0 +1,18 @@
+import { ReactNode, Ref } from 'react';
+import { OTPFormProps } from '../OTPForm/OTPForm';
+import { PhoneNumberFormProps } from '../PhoneNumberForm/PhoneNumberForm';
+import { SwitchSlideTransitionRef } from '../SwitchSlideTransition/SwitchSlideTransition';
+export type Step = "phoneNumber" | "otp";
+export interface FlowPhoneNumberOTPProps extends Omit<PhoneNumberFormProps, "onSubmit">, Omit<OTPFormProps, "onSubmit"> {
+    animateHeight?: boolean;
+    children?: (props: {
+        step: Step;
+        Form: ReactNode;
+    }) => ReactNode;
+    className?: string;
+    onSubmitPhoneNumber: PhoneNumberFormProps["onSubmit"];
+    onSubmitOTP: OTPFormProps["onSubmit"];
+    step: Step;
+    transitionRef: Ref<SwitchSlideTransitionRef<Step>>;
+}
+export declare const FlowPhoneNumberOTP: ({ animateHeight, autoFocus, canResetOTP, children, className, countryCode, error, isPending, onCountryCodeChange, onOTPChange, onPhoneNumberChange, onResendOTP, onSubmitOTP, onSubmitPhoneNumber, otp, otpInputsRef, phoneNumber, resendCountdown, step, successMessage, transitionRef, }: FlowPhoneNumberOTPProps) => import("react/jsx-runtime").JSX.Element;