@rolster/react-components 18.14.0 → 18.15.1

package/dist/cjs/assets/{index-L7r-Teuk.css → index-xOmRdBnF.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%;
@@ -1652,12 +1614,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 +1635,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 +1657,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 +1672,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 +1687,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 +1703,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 +1737,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);
@@ -1856,6 +1821,66 @@
   border-radius: var(--rls-sizing-x2);
 }
 
+.rls-modal {
+  --pvt-component-transform: translateY(80rem) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+}
+.rls-modal--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-modal__component {
+  position: absolute;
+  width: auto;
+  max-width: calc(100% - var(--rls-sizing-x8));
+  height: var(--pvt-component-height);
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--rls-z-index-2);
+  overflow: hidden;
+  border-radius: var(--rls-sizing-x4);
+  background: var(--rls-app-background-500);
+  will-change: transform;
+  transform: var(--pvt-component-transform);
+  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
+    transform 125ms 0ms var(--rls-deceleration-curve),
+    visibility 125ms 0ms var(--rls-deceleration-curve);
+}
+.rls-modal__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: 1;
+  will-change: opacity;
+  background: var(--rls-theme-backdrop-900);
+  backdrop-filter: blur(2px);
+  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
+}
+
 .rls-picker-date {
   position: relative;
   display: flex;
@@ -1937,66 +1962,6 @@
   width: 100%;
 }
 
-.rls-modal {
-  --pvt-component-transform: translateY(80rem) scale(0.6);
-  --pvt-component-height: 0rem;
-  --pvt-component-opacity: 0;
-  --pvt-component-visibility: hidden;
-  --pvt-backdrop-opacity: 0;
-  --pvt-backdrop-bottom: initial;
-  position: fixed;
-  display: flex;
-  top: 0rem;
-  left: 0rem;
-  width: 100%;
-  height: 100%;
-  z-index: var(--rls-z-index-24);
-  visibility: hidden;
-  align-items: center;
-  justify-content: center;
-}
-.rls-modal--visible {
-  --pvt-component-visibility: visible;
-  --pvt-component-height: auto;
-  --pvt-component-opacity: 1;
-  --pvt-component-transform: translateY(0) scale(1);
-  --pvt-backdrop-bottom: 0rem;
-  --pvt-backdrop-opacity: 1;
-  visibility: visible;
-}
-.rls-modal__component {
-  position: absolute;
-  width: auto;
-  max-width: calc(100% - var(--rls-sizing-x8));
-  height: var(--pvt-component-height);
-  opacity: var(--pvt-component-opacity);
-  visibility: var(--pvt-component-visibility);
-  z-index: var(--rls-z-index-2);
-  overflow: hidden;
-  border-radius: var(--rls-sizing-x4);
-  background: var(--rls-app-background-500);
-  will-change: transform;
-  transform: var(--pvt-component-transform);
-  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
-    transform 125ms 0ms var(--rls-deceleration-curve),
-    visibility 125ms 0ms var(--rls-deceleration-curve);
-}
-.rls-modal__backdrop {
-  position: absolute;
-  display: block;
-  top: 0rem;
-  left: 0rem;
-  right: 0rem;
-  bottom: var(--pvt-backdrop-bottom);
-  opacity: var(--pvt-backdrop-opacity);
-  z-index: 1;
-  will-change: opacity;
-  background: var(--rls-theme-backdrop-900);
-  backdrop-filter: blur(2px);
-  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
-    bottom 120ms 0ms var(--rls-deceleration-curve);
-}
-
 .rls-field-date {
   --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
   position: relative;