@coinbase/cdp-react 0.0.11 → 0.0.13

package/README.md

@@ -67,10 +67,10 @@ const appConfig = {
 
 // You can customize the theme by overriding theme variables
 const themeOverrides: Partial<Theme> = {
-  "colors-background": "black",
-  "colors-backgroundOverlay": "rgba(0,0,0,0.5)",
-  "colors-text": "white",
-  "colors-textSecondary": "#999999",
+  "colors-bg-default": "black",
+  "colors-bg-alternate": "#121212",
+  "colors-fg-default": "white",
+  "colors-fg-muted": "#999999",
 }
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

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-text);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__primary___s1sM6{background-color:var(--cdp-web-colors-primary);color:var(--cdp-web-colors-primaryText)}.Button-module__primary___s1sM6:hover{background-color:var(--cdp-web-colors-primaryHoverBackground);color:var(--cdp-web-colors-primaryHoverText)}.Button-module__primary___s1sM6:focus{outline:none}.Button-module__primary___s1sM6:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-primaryFocusRing);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-background);outline:none}.Button-module__secondary___R0waJ{background-color:var(--cdp-web-colors-secondary);color:var(--cdp-web-colors-secondaryText)}.Button-module__secondary___R0waJ:hover{background-color:var(--cdp-web-colors-secondaryHoverBackground);color:var(--cdp-web-colors-secondaryHoverText)}.Button-module__secondary___R0waJ:focus{outline:none}.Button-module__secondary___R0waJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-secondaryFocusRing);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-background);outline:none}.Button-module__transparentPrimary___o7JPs{background-color:transparent;color:var(--cdp-web-colors-linkText)}.Button-module__transparentPrimary___o7JPs:hover{color:var(--cdp-web-colors-linkHover)}.Button-module__transparentPrimary___o7JPs:focus{outline:none}.Button-module__transparentPrimary___o7JPs:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-linkText);outline:none}.Button-module__transparentSecondary___4ehOz{background-color:transparent;color:var(--cdp-web-colors-linkSecondaryText)}.Button-module__transparentSecondary___4ehOz:hover{color:var(--cdp-web-colors-linkSecondaryHover)}.Button-module__transparentSecondary___4ehOz:focus{outline:none}.Button-module__transparentSecondary___4ehOz:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-linkSecondaryText);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: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__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__transparent-primary___Ah0yM{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__transparent-primary___Ah0yM:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__transparent-primary___Ah0yM:focus{outline:none}.Button-module__transparent-primary___Ah0yM:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__transparent-secondary___kk5sZ{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__transparent-secondary___kk5sZ:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__transparent-secondary___kk5sZ:focus{outline:none}.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/Error.css

@@ -1 +1 @@
-.Error-module__error___mRFLG{color:var(--cdp-web-colors-error);font-size:.875em;line-height:1.43;display:flex;align-items:center;gap:.25em;margin:0}.Error-module__icon___web4F{width:1em;height:1em}
+.Error-module__error___mRFLG{color:var(--cdp-web-colors-fg-negative);font-size:.875em;line-height:1.43;display:flex;align-items:center;gap:.25em;margin:0}.Error-module__icon___web4F{width:1em;height:1em}

package/dist/assets/Field.css

@@ -1 +1 @@
-.Field-module__fieldWrapper___K-oJB{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-inputLabel)}
+.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)}

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-inputBorder);box-sizing:border-box;font-size:1em;padding:.75em;border-radius:.5em;border:1px solid transparent;background-color:var(--cdp-web-colors-inputBackground);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color);color:var(--cdp-web-colors-inputText);transition:all .15s ease-in-out;width:100%}.Input-module__input___WjT81::placeholder{color:var(--cdp-web-colors-inputPlaceholder)}.Input-module__input___WjT81:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-inputFocusBorder);--cdp-web-input-ring-width: 2px}.Input-module__input___WjT81[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-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-size:1em;padding:.75em;border-radius:.5em;border:1px solid transparent;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);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)}

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-backgroundSkeleton);cursor:progress}@keyframes LoadingSkeleton-module__pulse___a9tGO{50%{opacity:.5}}
+.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}}

package/dist/assets/LoadingSpinner.css

@@ -1 +1 @@
-.LoadingSpinner-module__spinner___X3Bl3{transform-origin:center;animation:LoadingSpinner-module__spinner___X3Bl3 2s linear infinite}.LoadingSpinner-module__spinnerCircle___ZQ0yQ{stroke-linecap:round;animation:LoadingSpinner-module__spinnerCircle___ZQ0yQ 1.5s ease-in-out infinite}@keyframes LoadingSpinner-module__spinner___X3Bl3{to{transform:rotate(360deg)}}@keyframes LoadingSpinner-module__spinnerCircle___ZQ0yQ{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___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}}

package/dist/assets/OTP.css

@@ -1 +1 @@
-.OTP-module__groupContainer___cVyAa{display:flex;gap:.5em}.OTP-module__inputContainer___39Wld{width:var(--cdp-web-otp-input-width)}.OTP-module__input___MEBPV{text-align:center}
+.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}

package/dist/assets/SignIn.css

@@ -1 +1 @@
-.SignIn-module__signIn___cS7KU{border-radius:.75em;box-sizing:border-box;font:var(--cdp-web-fontSizeBase) / 1.5 var(--cdp-web-fontFamily-sans);background-color:var(--cdp-web-colors-background);color:var(--cdp-web-colors-text);display:flex;flex-direction:column;gap:1em;max-width:38.25em;padding:1em 2em;width:100%}.SignIn-module__signIn___cS7KU *{box-sizing:border-box}.SignIn-module__heading___nzF-H{font-size:1.75em;line-height:1.29;margin:0}.SignIn-module__description___6bRpF{color:var(--cdp-web-colors-textSecondary);margin:0}.SignIn-module__medium___rfGKj{font-weight:500}.SignIn-module__form___MXCq6{display:flex;flex-direction:column;gap:1em}.SignIn-module__logo___9j5Y-{display:block;margin:0;width:64px;height:64px;border-radius:9999em;object-fit:cover}.SignIn-module__formFooter___Rasrs{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;gap:.5em;min-height:1.5em}.SignIn-module__serverStateWrapper___GML6w{min-height:1.5em}.SignIn-module__loadingSpinner___JnMDX{color:var(--cdp-web-colors-linkText);display:block;margin:0 auto}.SignIn-module__formFooter___Rasrs button{width:100%}.SignIn-module__serverError___p4Z3K{justify-content:center}.SignIn-module__resetTimer___s-bUu{color:var(--cdp-web-colors-textSecondary);font-size:.875em;font-weight:500;line-height:1em;padding:1.5em 0;text-align:center}.SignIn-module__resetTimer___s-bUu p{margin:0}.SignIn-module__successIcon___2a7me{color:var(--cdp-web-colors-success);display:block;height:4em;width:4em}.SignIn-module__footer___3Gkbc{color:var(--cdp-web-colors-textSecondary);display:flex;align-items:center;justify-content:center;gap:.5em;font-size:.75em;line-height:1;padding:.5em 2em 1em}.SignIn-module__coinbaseIcon___cOnQb{color:var(--cdp-web-colors-linkText);height:1em;width:auto}.SignIn-module__footer___3Gkbc p{display:flex;align-items:center;gap:.25em;margin:0}.SignIn-module__hr___WFRgK{border:0;border-top:1px solid var(--cdp-web-colors-border);width:100%}
+.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}

package/dist/assets/SignInDescription.css

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

package/dist/assets/SignInForm.css

@@ -0,0 +1 @@
+.SignInForm-module__form___8Mc3V{display:flex;flex-direction:column;gap:1em}.SignInForm-module__form-footer___PqM2J{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;gap:.5em;min-height:1.5em}.SignInForm-module__server-state-wrapper___QVsXy{min-height:1.5em}.SignInForm-module__loading-spinner___W6gZo{color:var(--cdp-web-colors-link-primary-text-default);display:block;margin:0 auto}.SignInForm-module__form-footer___PqM2J button{width:100%}.SignInForm-module__server-error___dD9VE{justify-content:center}.SignInForm-module__reset-timer___Ms2YZ{color:var(--cdp-web-colors-page-text-muted);font-size:.875em;font-weight:500;line-height:1em;padding:1.5em 0;text-align:center}.SignInForm-module__reset-timer___Ms2YZ p{margin:0}.SignInForm-module__footer___6Lo9w{color:var(--cdp-web-colors-page-text-muted);display:flex;align-items:center;justify-content:center;gap:.5em;font-size:.75em;line-height:1;padding:.5em 2em 1em}.SignInForm-module__coinbase-icon___vGv7u{height:1em;width:auto}.SignInForm-module__footer___6Lo9w p{display:flex;align-items:center;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:1em}

package/dist/assets/SignInImage.css

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

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 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);box-sizing:border-box;box-shadow:var(--shadow-md);width:100%;max-width:38.25em;background:var(--cdp-web-colors-background);border-radius:.5em;outline:1px solid var(--cdp-web-colors-border);position:relative}.SignInModal-module__modal___PErrT[data-state=open]{animation:SignInModal-module__slideIn___7GyWR .2s ease-out,SignInModal-module__fadeIn___-TaAT .2s ease-out}.SignInModal-module__modal___PErrT[data-state=closed]{animation:SignInModal-module__slideOut___Ntrrb .2s ease-in,SignInModal-module__fadeOut___bzuhB .2s ease-in}.SignInModal-module__signIn___hQuJk{height:100%}.SignInModal-module__signInForm___6-UdI,.SignInModal-module__signInForm___6-UdI form{flex-grow:1}.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu{text-align:center}.SignInModal-module__signInImage___hMBda{display:flex;justify-content:center;align-items:center;flex-grow:1;margin:2em 0}.SignInModal-module__closeWrapper___cx8Zq{display:flex;justify-content:flex-end;align-items:center}.SignInModal-module__closeButton___yf-ZW{position:relative;left:1em;width:3em}.SignInModal-module__closeButton___yf-ZW svg{height:1em;width:1em}.SignInModal-module__overlay___-0rmi{background:var(--cdp-web-colors-backgroundOverlay);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__fadeIn___-TaAT .2s ease-out}.SignInModal-module__overlay___-0rmi[data-state=closed]{animation:SignInModal-module__fadeOut___bzuhB .2s ease-in}.SignInModal-module__spacer___x-lRH{height:1em}@keyframes SignInModal-module__fadeIn___-TaAT{0%{opacity:0}to{opacity:1}}@keyframes SignInModal-module__fadeOut___bzuhB{0%{opacity:1}to{opacity:0}}@keyframes SignInModal-module__slideIn___7GyWR{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slideOut___Ntrrb{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.SignInModal-module__overlay___-0rmi{padding:.5rem}}@media (min-width: 600px){.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__signIn___hQuJk{padding-left:0;padding-right:0}.SignInModal-module__closeWrapper___cx8Zq,.SignInModal-module__signInImage___hMBda,.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu,.SignInModal-module__signInForm___6-UdI>form,.SignInModal-module__signInForm___6-UdI>div{padding-left:2.5em;padding-right:2.5em}.SignInModal-module__signInImage___hMBda{align-self:flex-start;margin:0}.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu{text-align:left}@keyframes SignInModal-module__slideIn___7GyWR{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slideOut___Ntrrb{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:38.25em;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%}.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-wrapper___zuxDu{display:flex;justify-content:flex-end;align-items:center}.SignInModal-module__close-button___k1I5Q{position:relative;left:1em;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: 600px){.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-left:0;padding-right:0}.SignInModal-module__close-wrapper___zuxDu,.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-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%)}}}

package/dist/assets/SignInTitle.css

@@ -0,0 +1 @@
+.SignInTitle-module__heading___QJ071{font-size:1.75em;line-height:1.29;margin:0}

package/dist/assets/SignOutButton.css

@@ -1 +1 @@
-.SignOutButton-module__signOutButton___WNhmy{padding-left:2em;padding-right:2em}
+.SignOutButton-module__sign-out-button___qiybe{padding-left:2em;padding-right:2em}

package/dist/assets/VisuallyHidden.css

@@ -1 +1 @@
-.VisuallyHidden-module__visuallyHidden___KiAzg{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___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}

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

@@ -1,2 +1,8 @@
 import { HTMLAttributes } from 'react';
-export declare const AuthButton: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export interface AuthButtonProps {
+    closeOnSuccessDelay?: null | number;
+    onSignInSuccess?: () => void;
+    onSignInSuccessTransitionEnd?: () => void;
+    onSignOutSuccess?: () => void;
+}
+export declare const AuthButton: ({ closeOnSuccessDelay, onSignInSuccess, onSignInSuccessTransitionEnd, onSignOutSuccess, ...props }: AuthButtonProps & HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AuthButton/index.js

@@ -1,38 +1,58 @@
-import { jsxs as I, jsx as i } from "react/jsx-runtime";
-import { useIsInitialized as O, useIsSignedIn as T, useEvmAddress as A } from "@coinbase/cdp-hooks";
-import { useMemo as _, useState as d, useRef as f, useCallback as w, useEffect as S } from "react";
-import { LoadingSkeleton as v } from "../LoadingSkeleton/index.js";
-import { SignInModal as x } from "../SignInModal/index.js";
-import { SignOutButton as B } from "../SignOutButton/index.js";
-import '../../assets/AuthButton.css';const M = "AuthButton-module__loading___JpDqi", R = {
-  loading: M
-}, y = (g) => {
-  const s = O(), c = T(), l = A(), o = _(() => c && !!l, [c, l]), [a, n] = d(o), [u, m] = d(!1), e = f(null), t = f(null), r = w(() => {
-    m(!1), e.current && clearTimeout(e.current), e.current = setTimeout(() => {
-      n(!0);
-    }, 200);
-  }, []), h = () => {
-    t.current && clearTimeout(t.current), t.current = setTimeout(() => {
-      r();
-    }, 300);
-  }, p = () => {
-    n(!1);
+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 '../../assets/AuthButton.css';const B = "AuthButton-module__loading___JpDqi", D = {
+  loading: B
+}, L = ({
+  closeOnSuccessDelay: S = 0,
+  onSignInSuccess: g,
+  onSignInSuccessTransitionEnd: a,
+  onSignOutSuccess: h,
+  ...p
+}) => {
+  const i = _(), u = v(), [m, s] = c(u), [t, d] = c(!1), [n, r] = c(void 0), o = w(!1), I = () => {
+    g?.(), r(S);
+  }, O = () => {
+    h?.(), s(!1);
   };
-  return S(() => {
-    if (o) {
-      if (e.current || t.current)
+  return f(() => {
+    if (n === void 0)
+      return;
+    if (n === null) {
+      o.current = !0;
+      return;
+    }
+    const e = setTimeout(() => {
+      o.current = !0, d(!1), r(void 0);
+    }, n);
+    return () => {
+      e && clearTimeout(e);
+    };
+  }, [n]), f(() => {
+    if (t)
+      return;
+    let e = null;
+    return o.current && (e = setTimeout(() => {
+      a?.(), o.current = !1, s(!0);
+    }, 200)), () => {
+      e && clearTimeout(e);
+    };
+  }, [t, a]), f(() => {
+    if (u) {
+      if (o.current)
         return;
-      u ? r() : n(!0);
+      t ? r((e) => e === void 0 ? 0 : e) : s(!0);
     } else
-      n(!1);
-  }, [o, u, r]), S(() => () => {
-    e.current && clearTimeout(e.current), t.current && clearTimeout(t.current);
-  }, []), /* @__PURE__ */ I("div", { ...g, children: [
-    !s && /* @__PURE__ */ i(v, { className: R.loading }),
-    s && a && /* @__PURE__ */ i(B, { onSuccess: p }),
-    s && !a && /* @__PURE__ */ i(x, { open: u, setIsOpen: m, onSuccess: h })
+      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 })
   ] });
 };
 export {
-  y as AuthButton
+  L as AuthButton
 };

package/dist/components/Button/index.js

@@ -1,28 +1,44 @@
-import { jsx as r, jsxs as i, Fragment as d } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
+import { jsx as n, jsxs as p, Fragment as _ } from "react/jsx-runtime";
+import { forwardRef as c, useMemo as y } from "react";
 import "../../theme/theme.js";
-import { LoadingSpinner as c } from "../LoadingSpinner/index.js";
-import { VisuallyHidden as u } from "../VisuallyHidden/index.js";
-import '../../assets/Button.css';const y = "Button-module__btn___Fx11X", l = "Button-module__primary___s1sM6", B = "Button-module__secondary___R0waJ", f = "Button-module__transparentPrimary___o7JPs", b = "Button-module__transparentSecondary___4ehOz", n = {
-  btn: y,
-  primary: l,
-  secondary: B,
-  transparentPrimary: f,
-  transparentSecondary: b
-}, h = p(
+import { LoadingSpinner as u } from "../LoadingSpinner/index.js";
+import { VisuallyHidden as l } from "../VisuallyHidden/index.js";
+import '../../assets/Button.css';const f = "Button-module__btn___Fx11X", B = "Button-module__primary___s1sM6", h = "Button-module__secondary___R0waJ", r = {
+  btn: f,
+  primary: B,
+  secondary: h,
+  "transparent-primary": "Button-module__transparent-primary___Ah0yM",
+  "transparent-secondary": "Button-module__transparent-secondary___kk5sZ"
+}, b = c(
   ({
-    children: t,
-    className: o = "",
-    isPending: a,
-    pendingLabel: e = "Loading...",
-    variant: s = "primary",
+    children: a,
+    className: e = "",
+    isPending: o,
+    pendingLabel: s = "Loading...",
+    variant: t = "primary",
     ...m
-  }, _) => /* @__PURE__ */ r("button", { className: `${n.btn} ${n[s]} ${o}`, ref: _, ...m, children: a ? /* @__PURE__ */ i(d, { children: [
-    /* @__PURE__ */ r(c, { "aria-hidden": "true", className: n.spinner }),
-    /* @__PURE__ */ r(u, { children: e })
-  ] }) : t })
+  }, i) => {
+    const d = y(() => {
+      switch (t) {
+        case "primary":
+          return r.primary;
+        case "secondary":
+          return r.secondary;
+        case "transparentPrimary":
+          return r["transparent-primary"];
+        case "transparentSecondary":
+          return r["transparent-secondary"];
+        default:
+          return r.primary;
+      }
+    }, [t]);
+    return /* @__PURE__ */ n("button", { className: `${r.btn} ${d} ${e}`, ref: i, ...m, children: o ? /* @__PURE__ */ p(_, { children: [
+      /* @__PURE__ */ n(u, { "aria-hidden": "true" }),
+      /* @__PURE__ */ n(l, { children: s })
+    ] }) : a });
+  }
 );
-h.displayName = "Button";
+b.displayName = "Button";
 export {
-  h as Button
+  b as Button
 };

package/dist/components/Field/index.js

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

package/dist/components/LoadingSpinner/index.js

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

package/dist/components/OTP/index.js

@@ -1,38 +1,39 @@
-import { jsxs as d, jsx as i } from "react/jsx-runtime";
-import { OneTimePasswordField as f, OneTimePasswordFieldInput as _, OneTimePasswordFieldHiddenInput as C } from "@radix-ui/react-one-time-password-field";
-import { forwardRef as P, useId as h, useRef as y, useEffect as O } from "react";
-import { Input as T } from "../Input/index.js";
-import { Error as I } from "../Error/index.js";
-import '../../assets/OTP.css';const v = "OTP-module__groupContainer___cVyAa", w = "OTP-module__inputContainer___39Wld", N = "OTP-module__input___MEBPV", u = {
-  groupContainer: v,
-  inputContainer: w,
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { OneTimePasswordField as _, OneTimePasswordFieldInput as f, OneTimePasswordFieldHiddenInput as P } from "@radix-ui/react-one-time-password-field";
+import { forwardRef as O, useId as T, useRef as h, useEffect as y } from "react";
+import { Input as I } from "../Input/index.js";
+import { Error as v } from "../Error/index.js";
+import '../../assets/OTP.css';const w = "OTP-module__otp___EUcSo", N = "OTP-module__input___MEBPV", r = {
+  otp: w,
+  "group-container": "OTP-module__group-container___rfrCo",
+  "input-container": "OTP-module__input-container___-yRBL",
   input: N
-}, R = P(
-  ({ error: r, passwordLength: o = 6, className: l = "", ...p }, n) => {
-    const a = h(), s = y(/* @__PURE__ */ new Map()), c = (e, t) => {
-      e ? s.current.set(t, e) : s.current.delete(t);
+}, R = O(
+  ({ error: i, passwordLength: s = 6, className: d = "", ...p }, t) => {
+    const u = T(), c = h(/* @__PURE__ */ new Map()), l = (e, n) => {
+      e ? c.current.set(n, e) : c.current.delete(n);
     };
-    return O(() => {
-      const e = Array.from(s.current.values());
-      typeof n == "function" ? n(e) : n && (n.current = e);
-    }, [o, n]), /* @__PURE__ */ d("div", { className: l, children: [
-      /* @__PURE__ */ d(
-        f,
+    return y(() => {
+      const e = Array.from(c.current.values());
+      typeof t == "function" ? t(e) : t && (t.current = e);
+    }, [s, t]), /* @__PURE__ */ a("div", { className: `${r.otp} ${d}`, children: [
+      /* @__PURE__ */ a(
+        _,
         {
           ...p,
-          className: u.groupContainer,
-          "aria-invalid": !!r,
-          "aria-describedby": r ? a : void 0,
+          className: r["group-container"],
+          "aria-invalid": !!i,
+          "aria-describedby": i ? u : void 0,
           style: {
-            "--cdp-web-otp-input-width": `${Math.floor(100 / o)}%`
+            "--cdp-web-otp-input-width": `${Math.floor(100 / s)}%`
           },
           children: [
-            Array.from({ length: o }, (e, t) => /* @__PURE__ */ i("div", { className: u.inputContainer, children: /* @__PURE__ */ i(_, { asChild: !0, children: /* @__PURE__ */ i(T, { ref: (m) => c(m, t), className: u.input }) }) }, t)),
-            /* @__PURE__ */ i(C, {})
+            Array.from({ length: s }, (e, n) => /* @__PURE__ */ o("div", { className: r["input-container"], children: /* @__PURE__ */ o(f, { asChild: !0, children: /* @__PURE__ */ o(I, { ref: (m) => l(m, n), className: r.input }) }) }, n)),
+            /* @__PURE__ */ o(P, {})
           ]
         }
       ),
-      r && /* @__PURE__ */ i(I, { id: a, children: r })
+      i && /* @__PURE__ */ o(v, { id: u, children: i })
     ] });
   }
 );

package/dist/components/SignIn/SignInDescription.js

@@ -1,27 +1,29 @@
-import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
 import "react";
-import { s as c } from "../../chunks/SignIn.module.Dl3CqKQ_.js";
-import { useSignInContext as p } from "./SignInProvider.js";
-const d = () => /* @__PURE__ */ e(s, { children: "We’ll send you a verification code via email." }), u = ({ email: i }) => /* @__PURE__ */ t(s, { children: [
+import { useSignInContext as l } from "./SignInProvider.js";
+import '../../assets/SignInDescription.css';const u = "SignInDescription-module__description___jZLc6", a = "SignInDescription-module__medium___NGpLf", o = {
+  description: u,
+  medium: a
+}, _ = () => /* @__PURE__ */ e(i, { children: "We’ll send you a verification code via email." }), g = ({ email: n }) => /* @__PURE__ */ t(i, { children: [
   "We’ve sent a 6 digit code to ",
-  /* @__PURE__ */ e("span", { className: c.medium, children: i }),
+  /* @__PURE__ */ e("span", { className: o.medium, children: n }),
   "."
-] }), f = () => /* @__PURE__ */ e(s, { children: "You’ve successfully signed in." }), D = ({
-  as: i = "p",
-  children: r,
-  className: o = "",
-  ...a
+] }), D = () => /* @__PURE__ */ e(i, { children: "You’ve successfully signed in." }), v = ({
+  as: n = "p",
+  children: c,
+  className: r = "",
+  ...m
 }) => {
-  const { state: l } = p(), { step: n, email: m } = l;
-  return /* @__PURE__ */ t(i, { className: `${c.description} ${o}`, ...a, children: [
-    r,
-    !r && /* @__PURE__ */ t(s, { children: [
-      n === "otp" && /* @__PURE__ */ e(u, { email: m }),
-      n === "success" && /* @__PURE__ */ e(f, {}),
-      n === "email" && /* @__PURE__ */ e(d, {})
+  const { state: d } = l(), { step: s, email: p } = d;
+  return /* @__PURE__ */ t(n, { className: `${o.description} ${r}`, ...m, children: [
+    c,
+    !c && /* @__PURE__ */ t(i, { children: [
+      s === "otp" && /* @__PURE__ */ e(g, { email: p }),
+      s === "success" && /* @__PURE__ */ e(D, {}),
+      s === "email" && /* @__PURE__ */ e(_, {})
     ] })
   ] });
 };
 export {
-  D as SignInDescription
+  v as SignInDescription
 };