@thenamespace/ens-components 0.8.0 → 0.10.0

package/dist/index.css

@@ -2530,23 +2530,29 @@ html{
   display:flex;
   justify-content:center;
   left:0;
+  overflow-y:auto;
   padding:20px;
   position:fixed;
   right:0;
+  scroll-behavior:smooth;
   top:0;
   z-index:1000;
+  -webkit-overflow-scrolling:touch;
 }
 .ns-onchain-register-card{
   animation:fadeIn .4s ease;
   background:#f9f8f9;
   border-radius:20px;
   box-shadow:0 4px 16px rgba(0,0,0,.1);
-  max-width:420px;
-  min-width:420px;
+  box-sizing:border-box;
+  max-width:420px !important;
+  min-width:420px !important;
+  overflow:visible;
   padding:20px;
   position:relative;
   text-align:center;
-  width:420px;
+  transition:all .3s cubic-bezier(.4, 0, .2, 1);
+  width:420px !important;
 }
 .ns-onchain-register-card .ns-onchain-register-duration-section,.ns-onchain-register-card .ns-onchain-register-owner-section,.ns-onchain-register-card .ns-onchain-register-profile-card,.ns-onchain-register-card .ns-onchain-register-toggle{
   text-align:left;
@@ -2584,7 +2590,7 @@ html{
   display:flex;
   gap:8px;
   margin-bottom:12px;
-  padding:12px;
+  padding:8px;
 }
 .ns-onchain-register-search-icon{
   color:#9ca3af;
@@ -2609,7 +2615,13 @@ html{
   pointer-events:none;
 }
 .ns-onchain-register-checkmark.available{
-  background:transparent;
+  align-items:center;
+  background:#000;
+  border-radius:50%;
+  display:flex;
+  height:14px;
+  justify-content:center;
+  width:14px;
 }
 @keyframes scaleIn{
   0%{
@@ -2622,8 +2634,8 @@ html{
   }
 }
 .ns-onchain-register-checkmark .ns-icon{
-  height:16px;
-  width:16px;
+  height:12px;
+  width:12px;
 }
 .ns-onchain-register-clear-btn{
   align-items:center;
@@ -2667,11 +2679,11 @@ html{
 }
 .ns-onchain-register-domain-suffix{
   border-left:1px solid #e5e7eb;
-  color:#374151;
-  font-size:16px;
+  color:#6b7280;
+  font-size:14px;
   font-weight:800;
-  margin-left:8px;
-  padding-left:8px;
+  margin-left:4px;
+  padding-left:12px;
   white-space:nowrap;
 }
 .ns-onchain-register-actions{
@@ -2745,16 +2757,12 @@ html{
     transform:translateY(0);
   }
 }
-.ns-onchain-register-mint-title{
-  margin-bottom:6px;
-  text-align:center;
-}
-.ns-onchain-register-name-display{
+.ns-onchain-register-mint-title,.ns-onchain-register-name-display{
   margin-bottom:16px;
   text-align:center;
 }
 .ns-onchain-register-owner-section{
-  background:#f4f4f4;
+  background:#fff;
   border-radius:10px;
   margin-bottom:16px;
   overflow:hidden;
@@ -2768,7 +2776,7 @@ html{
   transition:background .2s ease;
 }
 .ns-onchain-register-owner-header:hover{
-  background:#e8e8e8;
+  background:#f5f5f5;
 }
 .ns-onchain-register-owner-left{
   align-items:center;
@@ -2791,30 +2799,41 @@ html{
   border-radius:8px;
   width:100%;
 }
-@keyframes slideDown{
-  0%{
-    opacity:0;
-    transform:translateY(-10px);
-  }
-  to{
-    opacity:1;
-    transform:translateY(0);
-  }
-}
 .ns-onchain-register-duration-section{
   background:#fff;
   border-radius:12px;
   margin-bottom:16px;
+  overflow:hidden;
   padding:14px;
+  transition:all .3s cubic-bezier(.4, 0, .2, 1);
 }
 .ns-onchain-register-duration-controls{
   align-items:center;
   display:flex;
   justify-content:space-between;
-  margin-bottom:16px;
+  margin-bottom:0;
   padding:2px;
   width:100% !important;
 }
+.ns-onchain-register-duration-text{
+  align-items:center;
+  cursor:pointer;
+  display:flex;
+  gap:8px;
+  transition:opacity .2s ease;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+}
+.ns-onchain-register-duration-text:hover{
+  opacity:.7;
+}
+.ns-onchain-register-duration-chevron{
+  align-items:center;
+  color:#6b7280;
+  display:flex;
+  transition:transform .2s ease;
+}
 .ns-onchain-register-card .ns-onchain-register-duration-controls:has(>:only-child){
   justify-content:center;
 }
@@ -2839,8 +2858,31 @@ html{
   opacity:.5;
 }
 .ns-onchain-register-cost-breakdown{
+  animation:slideDown .5s cubic-bezier(.25, .46, .45, .94);
   border-top:1px solid #e5e7eb;
+  margin-top:16px;
+  max-height:500px;
+  opacity:1;
+  overflow:hidden;
   padding-top:14px;
+  transform-origin:top;
+  will-change:max-height, opacity, transform;
+}
+@keyframes slideDown{
+  0%{
+    margin-top:0;
+    max-height:0;
+    opacity:0;
+    padding-top:0;
+    transform:translateY(-8px) scaleY(.95);
+  }
+  to{
+    margin-top:16px;
+    max-height:500px;
+    opacity:1;
+    padding-top:14px;
+    transform:translateY(0) scaleY(1);
+  }
 }
 .ns-onchain-register-cost-row{
   align-items:center;
@@ -2970,17 +3012,40 @@ html{
   gap:14px;
   justify-content:space-between;
   margin-bottom:16px;
+  overflow:hidden;
   padding:14px;
+  transition:all .3s cubic-bezier(.4, 0, .2, 1);
 }
-.ns-onchain-register-toggle-text{
+.ns-onchain-register-toggle-content{
   flex:1;
+  overflow:hidden;
   text-align:left;
 }
-.ns-onchain-register-toggle-text .ns-text:first-child{
-  margin-bottom:8px;
+.ns-onchain-register-toggle-title{
+  display:block;
+  margin-bottom:0;
 }
-.ns-onchain-register-toggle-text strong{
-  font-weight:600;
+.ns-onchain-register-toggle-description{
+  animation:expandDescription .4s cubic-bezier(.25, .46, .45, .94);
+  margin-top:8px;
+  max-height:200px;
+  opacity:1;
+  overflow:hidden;
+  will-change:max-height, opacity;
+}
+@keyframes expandDescription{
+  0%{
+    margin-top:0;
+    max-height:0;
+    opacity:0;
+    transform:translateY(-5px);
+  }
+  to{
+    margin-top:8px;
+    max-height:200px;
+    opacity:1;
+    transform:translateY(0);
+  }
 }
 .toggle-switch{
   flex-shrink:0;
@@ -3020,8 +3085,14 @@ html{
   transform:translateX(18px);
 }
 .ns-onchain-register-success{
+  overflow:hidden;
+  position:relative;
   text-align:center;
 }
+.ns-onchain-register-success>*{
+  position:relative;
+  z-index:1;
+}
 .ns-onchain-register-success-title-section{
   margin-bottom:20px;
   text-align:center;
@@ -3029,7 +3100,15 @@ html{
 .ns-onchain-register-success-message{
   color:#333;
   display:block;
-  margin-bottom:8px;
+  margin-bottom:16px;
+}
+.ns-onchain-register-success-name{
+  color:#333;
+  display:block;
+  margin:0;
+}
+.ns-onchain-register-success .ns-onchain-register-actions{
+  margin-top:20px;
 }
 .ns-onchain-register-success-subtitle{
   color:#666;
@@ -3122,7 +3201,7 @@ html{
   display:flex;
   gap:8px;
   margin-bottom:12px;
-  padding:12px;
+  padding:8px;
 }
 .ns-offchain-register-search-icon{
   color:#9ca3af;
@@ -3147,7 +3226,13 @@ html{
   pointer-events:none;
 }
 .ns-offchain-register-checkmark.available{
-  background:transparent;
+  align-items:center;
+  background:#000;
+  border-radius:50%;
+  display:flex;
+  height:14px;
+  justify-content:center;
+  width:14px;
 }
 @keyframes scaleIn{
   0%{
@@ -3160,8 +3245,8 @@ html{
   }
 }
 .ns-offchain-register-checkmark .ns-icon{
-  height:16px;
-  width:16px;
+  height:12px;
+  width:12px;
 }
 .ns-offchain-register-clear-btn{
   align-items:center;
@@ -3215,11 +3300,11 @@ html{
 }
 .ns-offchain-register-domain-suffix{
   border-left:1px solid #e5e7eb;
-  color:#374151;
-  font-size:16px;
+  color:#6b7280;
+  font-size:14px;
   font-weight:800;
-  margin-left:8px;
-  padding-left:8px;
+  margin-left:4px;
+  padding-left:12px;
   white-space:nowrap;
 }
 .ns-offchain-register-name-exist{
@@ -3644,17 +3729,18 @@ html{
   text-align:center;
 }
 .ns-offchain-register-success-title-section{
-  margin-bottom:24px;
+  margin-bottom:20px;
   text-align:center;
 }
 .ns-offchain-register-success-message{
   color:#333;
   display:block;
-  margin-bottom:8px;
+  margin-bottom:16px;
 }
-.ns-offchain-register-success-subtitle{
-  color:#666;
+.ns-offchain-register-success-name{
+  color:#333;
   display:block;
+  margin:0;
 }
 .ns-offchain-register-finish-banner{
   align-items:center;
@@ -3775,17 +3861,17 @@ html{
   background:#f7f7f7;
   border-radius:20px;
   box-shadow:0 4px 16px rgba(0,0,0,.1);
-  max-width:420px;
-  min-width:420px;
-  padding:24px;
+  max-width:420px !important;
+  min-width:420px !important;
+  padding:20px;
   position:relative;
-  width:420px;
+  width:420px !important;
 }
 .ens-names-register-header{
   align-items:center;
   display:flex;
   justify-content:space-between;
-  margin-bottom:16px;
+  margin-bottom:12px;
 }
 .ens-names-register-back-btn,.ens-names-register-close-btn{
   align-items:center;
@@ -3805,7 +3891,7 @@ html{
   transform:scale(1.05);
 }
 .ens-names-register-banner{
-  margin-bottom:20px;
+  margin-bottom:12px;
 }
 .ens-names-register-banner img{
   border-radius:16px;
@@ -3815,7 +3901,7 @@ html{
   width:100%;
 }
 .ens-names-register-title-section{
-  margin-bottom:24px;
+  margin-bottom:16px;
   text-align:center;
 }
 .ens-names-register-title{
@@ -3827,6 +3913,14 @@ html{
   color:#666;
   display:block;
 }
+.ens-names-register-mint-title{
+  margin-bottom:12px;
+  text-align:center;
+}
+.ens-names-register-name-display{
+  margin-bottom:16px;
+  text-align:center;
+}
 .ens-names-register-input-row{
   align-items:center;
   background-color:#fff;
@@ -3834,8 +3928,8 @@ html{
   border-radius:12px;
   display:flex;
   gap:8px;
-  margin-bottom:20px;
-  padding:12px;
+  margin-bottom:12px;
+  padding:8px;
 }
 .ens-names-register-search-icon{
   color:#9ca3af;
@@ -3853,51 +3947,138 @@ html{
 }
 .ens-names-register-domain-suffix{
   border-left:1px solid #e5e7eb;
-  color:#374151;
-  font-size:16px;
+  color:#6b7280;
+  font-size:14px;
   font-weight:800;
-  margin-left:8px;
-  padding-left:8px;
+  margin-left:4px;
+  padding-left:12px;
   white-space:nowrap;
 }
-.ens-names-register-cost-section{
+.ens-names-register-checkmark{
+  align-items:center;
+  animation:scaleIn .2s ease;
+  display:flex;
+  flex-shrink:0;
+  justify-content:center;
+  pointer-events:none;
+}
+.ens-names-register-checkmark.available{
+  align-items:center;
+  background:#000;
+  border-radius:50%;
+  display:flex;
+  height:14px;
+  justify-content:center;
+  width:14px;
+}
+@keyframes scaleIn{
+  0%{
+    opacity:0;
+    transform:scale(0);
+  }
+  to{
+    opacity:1;
+    transform:scale(1);
+  }
+}
+.ens-names-register-checkmark .ns-icon{
+  height:12px;
+  width:12px;
+}
+.ens-names-register-clear-btn{
+  align-items:center;
+  animation:scaleIn .2s ease;
+  background:#000;
+  border:none;
+  border-radius:50%;
+  cursor:pointer;
+  display:flex;
+  flex-shrink:0;
+  height:22px;
+  justify-content:center;
+  padding:0;
+  transition:all .2s ease;
+  width:22px;
+}
+.ens-names-register-clear-btn:hover{
+  background:#333;
+  transform:scale(1.1);
+}
+.ens-names-register-clear-btn:active{
+  transform:scale(.95);
+}
+.ens-names-register-clear-btn .ns-icon{
+  height:12px;
+  width:12px;
+}
+.ens-names-register-duration-section{
   background:#fff;
   border-radius:12px;
-  margin-bottom:20px;
-  padding:20px;
+  margin-bottom:16px;
+  overflow:hidden;
+  padding:14px;
+  transition:all .3s cubic-bezier(.4, 0, .2, 1);
 }
-.ens-names-register-duration{
+.ens-names-register-duration-controls{
   align-items:center;
-  background:#fff;
-  border:1px solid #ddd;
-  border-radius:8px;
   display:flex;
   justify-content:space-between;
-  margin-bottom:20px;
-  padding:12px 16px;
+  margin-bottom:0;
+  padding:2px;
+  width:100% !important;
+}
+.ens-names-register-duration-text{
+  align-items:center;
+  cursor:pointer;
+  display:flex;
+  gap:8px;
+  transition:opacity .2s ease;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+}
+.ens-names-register-duration-text:hover{
+  opacity:.7;
+}
+.ens-names-register-duration-chevron{
+  align-items:center;
+  color:#6b7280;
+  display:flex;
+  transition:transform .2s ease;
+}
+.ens-names-register-card .ens-names-register-duration-controls:has(>:only-child){
+  justify-content:center;
 }
 .ens-names-register-duration-btn{
   align-items:center;
-  background-color:#000;
+  background:#000;
   border:none;
   border-radius:50%;
   color:#fff;
   cursor:pointer;
   display:flex;
-  font-size:18px;
-  font-weight:700;
-  height:32px;
+  height:25px;
   justify-content:center;
   transition:all .2s ease;
-  width:32px;
+  width:25px;
 }
-.ens-names-register-duration-btn:hover{
-  background-color:#333;
+.ens-names-register-duration-btn:hover:not(:disabled){
+  background:#333;
 }
-.ens-names-register-duration-text{
-  color:#222;
-  flex:1;
-  text-align:center;
+.ens-names-register-duration-btn:disabled{
+  cursor:not-allowed;
+  opacity:.5;
+}
+.ens-names-register-cost-breakdown{
+  animation:slideDown .5s cubic-bezier(.25, .46, .45, .94);
+  border-top:1px solid #e5e7eb;
+  margin-top:16px;
+  max-height:500px;
+  opacity:1;
+  overflow:hidden;
+  padding-top:14px;
+  transform-origin:top;
+  will-change:max-height, opacity, transform;
 }
 .ens-names-register-summary{
   display:flex;
@@ -3932,8 +4113,8 @@ html{
   cursor:pointer;
   display:flex;
   justify-content:space-between;
-  margin-bottom:20px;
-  padding:16px;
+  margin-bottom:16px;
+  padding:14px;
   transition:all .2s ease;
 }
 .ens-names-register-profile-card:hover{
@@ -4055,8 +4236,12 @@ html{
   justify-content:center;
 }
 .ens-names-register-step-content{
+  align-items:center;
   animation:slideDown .3s ease;
-  padding:0 16px 16px 60px;
+  display:flex;
+  flex-direction:column;
+  padding:0 16px 16px;
+  text-align:center;
 }
 @keyframes slideDown{
   0%{
@@ -4072,12 +4257,14 @@ html{
   color:#333;
   display:block;
   margin-bottom:8px;
+  text-align:center;
 }
 .ens-names-register-step-content-description{
   color:#666;
   display:block;
   line-height:1.5;
   margin-bottom:20px;
+  text-align:center;
 }
 .ens-names-register-open-wallet-btn{
   background-color:#000 !important;
@@ -4087,6 +4274,8 @@ html{
   cursor:pointer;
   font-size:16px;
   font-weight:600;
+  margin:0 auto;
+  max-width:100%;
   padding:14px 0;
   transition:all .2s ease;
   width:100%;
@@ -4096,7 +4285,7 @@ html{
 }
 .ens-names-register-footer-link{
   cursor:pointer;
-  margin-top:24px;
+  margin-top:16px;
   text-align:center;
   transition:color .2s ease;
 }
@@ -4107,40 +4296,57 @@ html{
   text-decoration:underline;
 }
 .ens-names-register-progress-container{
+  display:flex;
+  justify-content:center;
   margin-top:20px;
+  width:100%;
 }
 .ens-names-register-progress-bar{
-  background-color:#e5e7eb;
-  border:1px solid #d1d5db;
-  border-radius:10px;
-  height:25px;
+  background-color:#000;
+  border-radius:4px;
+  height:24px;
   overflow:hidden;
+  padding:4px;
   position:relative;
   width:100%;
 }
 .ens-names-register-progress-fill{
   align-items:center;
-  background-color:#000;
-  border-radius:4px;
+  background-color:#fff;
+  border-radius:0 12px 12px 0;
   display:flex;
   height:100%;
   justify-content:flex-end;
-  padding-right:4px;
+  overflow:visible;
+  padding-right:8px;
   position:relative;
   transition:width .1s linear;
 }
-.ens-names-register-progress-sparkle{
-  animation:sparkle 1.5s ease-in-out infinite;
-  color:#fff;
+.ens-names-register-progress-star-wrapper{
+  align-items:center;
+  display:flex;
+  height:100%;
+  justify-content:center;
+  pointer-events:none;
+  position:absolute;
+  right:2;
+  top:0;
+  width:25px;
 }
-@keyframes sparkle{
-  0%,to{
-    opacity:1;
-    transform:scale(1);
+.ens-names-register-progress-star{
+  animation:rotate-star 2s linear infinite;
+  display:block;
+  height:100%;
+  transform-origin:center center;
+  width:100%;
+  will-change:transform;
+}
+@keyframes rotate-star{
+  0%{
+    transform:rotate(0deg);
   }
-  50%{
-    opacity:.7;
-    transform:scale(1.1);
+  to{
+    transform:rotate(1turn);
   }
 }
 .ens-names-register-timer-container{
@@ -4211,10 +4417,10 @@ html{
   transform:scale(.98);
 }
 .ens-names-register-success-card{
-  max-width:420px;
-  min-width:420px;
+  max-width:420px !important;
+  min-width:420px !important;
   text-align:center;
-  width:420px;
+  width:420px !important;
 }
 .ens-names-register-success-header{
   align-items:center;
@@ -4226,7 +4432,7 @@ html{
   align-items:center;
   display:flex;
   justify-content:center;
-  margin-bottom:24px;
+  margin-bottom:20px;
 }
 .ens-names-register-success-illustration img{
   height:auto;
@@ -4236,12 +4442,12 @@ html{
   width:100%;
 }
 .ens-names-register-success-title-section{
-  margin-bottom:24px;
+  margin-bottom:20px;
 }
 .ens-names-register-success-message{
   color:#333;
   display:block;
-  margin-bottom:8px;
+  margin-bottom:16px;
 }
 .ens-names-register-success-name{
   color:#000;
@@ -4251,8 +4457,8 @@ html{
 .ens-names-register-success-summary{
   background:#fff;
   border-radius:12px;
-  margin-bottom:24px;
-  padding:20px;
+  margin-bottom:20px;
+  padding:14px;
   text-align:left;
 }
 .ens-names-register-success-summary-row{
@@ -4280,6 +4486,7 @@ html{
 .ens-names-register-success-actions{
   display:flex;
   gap:12px;
+  margin-top:0;
   width:100%;
 }
 .ens-names-register-register-another-btn{