@rolster/react-components 18.14.1 → 18.15.2

package/dist/cjs/assets/{index--xgdaD5z.css → index-Dbh6DUCn.css}

@@ -1,15 +1,18 @@
 .rls-tabular-text {
+  display: flex;
   width: auto;
+  justify-content: var(--rlc-tabulartext-text-align);
+}
+.rls-tabular-text span {
+  font-size: var(--rlc-tabulartext-font-size);
 }
 .rls-tabular-text__char {
   display: block;
-  float: left;
   text-align: center;
   width: var(--rlc-tabulartext-char-width);
 }
 .rls-tabular-text__pointer {
   display: block;
-  float: left;
   text-align: center;
   width: var(--rlc-tabulartext-pointer-width);
 }
@@ -36,7 +39,7 @@
   border-radius: var(--rlc-avatar-border-radius);
 }
 .rls-avatar--skeleton {
-  background: var(--rls-theme-color-100);
+  background: var(--rls-theme-color-200);
 }
 .rls-avatar--skeleton > * {
   display: none;
@@ -503,6 +506,8 @@
 }
 
 .rls-input-money {
+  --rlc-tabulartext-font-size: var(--rls-input-font-size);
+  --rlc-tabulartext-char-width: 5.25rem;
   position: relative;
   width: 100%;
   box-sizing: border-box;
@@ -551,6 +556,17 @@
   opacity: 0.5;
 }
 
+.rls-input-search {
+  --rlc-input-height: var(--rls-sizing-x14);
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
+  box-sizing: border-box;
+  border: var(--rls-app-border-1-300);
+  border-radius: var(--rls-sizing-x4);
+}
+
 .rls-input-text {
   position: relative;
   width: 100%;
@@ -574,12 +590,13 @@
 
 .rls-poster {
   position: relative;
-  float: left;
   width: auto;
-  height: var(--rlc-poster-height);
+  font-weight: inherit;
+  font-size: var(--rlc-poster-font-size);
+  letter-spacing: var(--rlc-poster-letter-spacing);
   line-height: var(--rlc-poster-height);
   padding: var(--rlc-poster-padding);
-  box-sizing: border-box;
+  text-align: var(--rlc-poster-text-align);
   border-radius: var(--rls-sizing-x2);
   color: var(--rls-light-color-500);
   background: var(--rls-theme-gradient-500);
@@ -588,11 +605,10 @@
 .rls-progress-bar {
   --pvt-component-display: block;
   position: relative;
-  float: left;
   width: 100%;
   height: var(--rls-sizing-x2);
   overflow: hidden;
-  background: var(--rls-theme-color-100);
+  background: var(--rls-theme-color-200);
 }
 .rls-progress-bar--indeterminate {
   --pvt-component-display: none;
@@ -700,7 +716,6 @@
 .rls-radiobutton {
   --pvt-component-transform: scale(0);
   position: relative;
-  float: left;
   display: flex;
   outline: none;
   width: var(--rls-sizing-x12);
@@ -731,21 +746,8 @@
   transition: all 160ms 0ms var(--rls-standard-curve);
 }
 
-.rls-search-input {
-  --rlc-input-height: var(--rls-sizing-x14);
-  position: relative;
-  float: left;
-  display: flex;
-  align-items: center;
-  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
-  box-sizing: border-box;
-  border: var(--rls-app-border-1-300);
-  border-radius: var(--rls-sizing-x4);
-}
-
 .rls-skeleton {
   position: relative;
-  float: left;
   width: 100%;
   max-height: inherit;
   min-height: inherit;
@@ -766,10 +768,10 @@
   transform: translateX(-100%);
   background-image: linear-gradient(
     90deg,
-    var(--rls-theme-skeleton-100) 0%,
-    var(--rls-theme-skeleton-100) 20%,
+    var(--rls-theme-skeleton-200) 0%,
+    var(--rls-theme-skeleton-200) 20%,
     var(--rls-theme-skeleton-300) 60%,
-    var(--rls-theme-skeleton-100)
+    var(--rls-theme-skeleton-200)
   );
   animation: skeleton-animation 1600ms infinite;
 }
@@ -781,61 +783,21 @@
 }
 
 .rls-skeleton-text {
-  --pvt-value-visibility: visible;
+  --rlc-skeleton-height: var(--rlc-skeleton-text-height);
   position: relative;
-  width: 100%;
-  max-height: inherit;
-  min-height: inherit;
-  height: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  overflow: hidden;
-}
-.rls-skeleton-text--active {
-  --pvt-value-visibility: hidden;
-  background: var(--rls-theme-color-100);
-  border-radius: var(--rls-sizing-x2);
-}
-.rls-skeleton-text--active::after {
-  animation: skeleton-text-animation 1600ms infinite;
-}
-.rls-skeleton-text::after {
-  position: absolute;
-  content: '';
-  top: 0rem;
-  right: 0rem;
-  bottom: 0rem;
-  left: 0rem;
-  transform: translateX(-100%);
-  background-image: linear-gradient(
-    90deg,
-    var(--rls-theme-skeleton-100) 0%,
-    var(--rls-theme-skeleton-100) 20%,
-    var(--rls-theme-skeleton-300) 60%,
-    var(--rls-theme-skeleton-100)
-  );
+  display: block;
+  font-size: var(--rlc-skeleton-text-font-size);
+  letter-spacing: var(--rlc-skeleton-text-letter-spacing);
+  line-height: var(--rlc-skeleton-text-height);
+  font-weight: inherit;
 }
 .rls-skeleton-text__value {
-  position: relative;
   display: block;
-  width: 100%;
-  height: inherit;
-  max-height: inherit;
-  min-height: inherit;
+  font-weight: inherit;
+  font-size: inherit;
   line-height: inherit;
-  color: inherit;
-  text-align: inherit;
   letter-spacing: inherit;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  visibility: var(--pvt-value-visibility);
-}
-
-@keyframes skeleton-text-animation {
-  100% {
-    transform: translateX(100%);
-  }
 }
 
 .rls-switch {
@@ -907,7 +869,7 @@
 }
 .rls-ballot--bordered {
   border-radius: var(--rls-sizing-x4);
-  border: var(--rls-app-border-1-300);
+  border: var(--rls-app-border-1-100);
 }
 .rls-ballot--skeleton {
   --rls-subtitle-width: 60%;
@@ -1264,14 +1226,15 @@
   margin-bottom: var(--rls-sizing-x4);
   background: var(--rls-app-background-100);
   color: var(--rls-app-color-500);
-  border-radius: var(--rls-sizing-x2);
+  border-radius: var(--rls-sizing-x4);
 }
 .rls-picker-day__label {
   padding: var(--rls-sizing-x6) 0rem;
   text-align: center;
   width: 100%;
-  font-size: var(--rls-sizing-x6);
-  font-weight: var(--rls-font-weight-bold);
+  font-size: 5.75rem;
+  font-weight: var(--rls-font-weight-semibold);
+  letter-spacing: 0.0375em;
 }
 .rls-picker-day__week {
   display: flex;
@@ -1291,6 +1254,7 @@
   height: var(--rls-sizing-x18);
   line-height: var(--rls-sizing-x18);
   box-sizing: border-box;
+  letter-spacing: 0.0475em;
 }
 .rls-picker-day__element__span:not(:hover) {
   color: var(--pvt-span-font-color);
@@ -1470,11 +1434,11 @@
 .rls-picker-month-title {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 .rls-picker-month-title span {
   color: var(--rls-app-color-300);
   cursor: default;
-  margin: auto 0rem;
   height: var(--rls-sizing-x14);
   line-height: var(--rls-sizing-x14);
   font-size: var(--rls-sizing-x10);
@@ -1486,7 +1450,7 @@
 
 .rls-picker-year {
   --pvt-component-background: transparent;
-  --pvt-component-font-color: var(--rls-app-color-500);
+  --pvt-component-font-color: var(--rls-app-color-300);
   --pvt-component-border: var(--rls-border-1) solid transparent;
   position: relative;
   width: 100%;
@@ -1505,6 +1469,11 @@
   background: var(--rls-app-background-100);
   border-radius: var(--rls-sizing-x4);
 }
+.rls-picker-year__header > label {
+  font-weight: var(--rls-font-weight-semibold);
+  font-size: 8.75rem;
+  letter-spacing: 0.325rem;
+}
 .rls-picker-year__action {
   width: var(--rls-sizing-x16);
   height: var(--rls-sizing-x16);
@@ -1568,8 +1537,8 @@
   pointer-events: none;
 }
 .rls-picker-year__year__span {
-  font-weight: var(--rls-font-weight-semibold);
-  font-size: var(--rls-sizing-x8);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: 7.5rem;
   cursor: default;
   pointer-events: none;
   letter-spacing: 0.325rem;
@@ -1652,12 +1621,12 @@
   --pvt-backdrop-bottom: initial;
   position: fixed;
   display: flex;
-  justify-content: center;
-  align-items: center;
   top: 0rem;
   left: 0rem;
   width: 100vw;
   height: 100vh;
+  justify-content: center;
+  align-items: center;
   z-index: var(--rls-z-index-24);
   visibility: hidden;
 }
@@ -1673,11 +1642,11 @@
 .rls-confirmation__component {
   position: absolute;
   display: flex;
-  flex-direction: column;
-  row-gap: var(--rls-sizing-x8);
   width: calc(100% - var(--rls-sizing-x16));
   max-width: 280rem;
   height: var(--pvt-component-height);
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
   padding: var(--rls-sizing-x8) 0rem;
@@ -1695,13 +1664,13 @@
 .rls-confirmation__header {
   position: relative;
   display: flex;
-  flex-direction: column;
-  row-gap: var(--rls-sizing-x2);
   width: 100%;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
   padding: 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
 }
-.rls-confirmation__header__title {
+.rls-confirmation__title {
   text-align: center;
   color: var(--rls-app-color-500);
   font-weight: var(--rls-font-weight-bold);
@@ -1710,7 +1679,7 @@
   letter-spacing: var(--pvt-title-letter-spacing);
   text-transform: var(--pvt-title-text-transform);
 }
-.rls-confirmation__header__subtitle {
+.rls-confirmation__subtitle {
   text-align: center;
   color: var(--rls-theme-color-300);
   font-weight: var(--rls-font-weight-bold);
@@ -1725,11 +1694,11 @@
   padding: 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
 }
-.rls-confirmation__body__content {
+.rls-confirmation__message {
   color: var(--rls-app-color-300);
   text-align: center;
 }
-.rls-confirmation__body__content p {
+.rls-confirmation__message p {
   font-weight: var(--rls-font-weight-medium);
   font-size: var(--pvt-content-font-size);
   line-height: var(--pvt-content-line-height);
@@ -1741,7 +1710,7 @@
   padding: var(--rls-sizing-x4) var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
 }
-.rls-confirmation__footer__actions {
+.rls-confirmation__actions {
   position: relative;
   width: 100%;
   display: flex;
@@ -1775,7 +1744,10 @@
     --pvt-subtitle-line-height: var(--rls-smalltext-line-height);
     --pvt-content-font-size: 7.325rem;
   }
-  .rls-confirmation__footer__actions {
+  .rls-confirmation__header {
+    row-gap: var(--rls-sizing-x2);
+  }
+  .rls-confirmation__actions {
     flex-direction: column-reverse;
     column-gap: 0rem;
     row-gap: var(--rls-sizing-x8);
@@ -1931,6 +1903,7 @@
   padding: var(--rls-sizing-x4);
   box-sizing: border-box;
   background: var(--rls-theme-color-100);
+  border-radius: var(--rls-sizing-x4);
 }
 .rls-picker-date__header .rls-picker-month-title {
   padding: 0rem var(--rls-sizing-x6);
@@ -1959,9 +1932,6 @@
 .rls-picker-date__component {
   display: flex;
   justify-content: center;
-  width: 150rem;
-  padding: 0rem var(--rls-sizing-x2);
-  box-sizing: border-box;
 }
 .rls-picker-date__component > * {
   display: none;