@rolster/react-components 1.5.7 → 18.9.0

package/dist/cjs/assets/{lib.cjs-c052832f.css → index-Fy0sGm5F.css}

@@ -17,9 +17,10 @@
 .rls-amount {
   display: flex;
   justify-content: var(--rls-amount-text-align);
+  column-gap: var(--sizing-4);
 }
-.rls-amount > span {
-  margin-right: var(--sizing-4);
+.rls-amount[rls-theme] {
+  color: var(--color-rolster-500);
 }
 
 .rls-avatar {
@@ -125,7 +126,7 @@
 }
 .rls-icon > i {
   display: var(--pvt-icon-display);
-  color: inherit;
+  color: var(--rls-icon-color);
   float: left;
   width: 100%;
   height: 100%;
@@ -149,7 +150,7 @@
   --pvt-outline-background: transparent;
   --pvt-outline-font-color: var(--color-theme-300);
   --pvt-outline-border: var(--border-1-theme-300);
-  --pvt-raised-background: var(--color-rolster-500);
+  --pvt-raised-background: var(--gradient-rolster-500);
   --pvt-raised-font-color: var(--color-light-500);
   --pvt-raised-border: none;
   position: relative;
@@ -407,7 +408,7 @@
   float: left;
   width: 100%;
 }
-.rls-input--active {
+.rls-input--focused {
   --pvt-component-font-color: var(--rls-input-font-color);
   --pvt-value-font-color: transparent;
 }
@@ -528,6 +529,19 @@
   box-sizing: border-box;
 }
 
+.rls-message-icon {
+  --rls-icon-color: var(--color-rolster-500);
+  --rls-icon-width: var(--sizing-16);
+  --rls-icon-height: var(--sizing-16);
+  --rls-icon-font-size: var(--sizing-16);
+  display: flex;
+  align-items: center;
+  column-gap: var(--sizing-4);
+}
+.rls-message-icon span {
+  color: var(--color-theme-300);
+}
+
 .rls-poster {
   position: relative;
   float: left;
@@ -752,39 +766,58 @@
 }
 
 .rls-switch {
-  --pvt-component-background: var(--border-theme-300);
-  --pvt-component-left: calc(var(--sizing-2) + 1px);
-  position: relative;
-  float: left;
-  outline: none;
-  box-sizing: border-box;
-  width: var(--sizing-40);
-  height: var(--sizing-24);
-  box-sizing: border-box;
-  border-radius: var(--sizing-12);
-  border: var(--border-1-theme-300);
+  --pvt-element-left: var(--sizing-2);
+  --pvt-element-background: var(--background-theme-500);
+  --pvt-bar-background: var(--background-theme-100);
+  max-width: var(--sizing-40);
 }
 .rls-switch:hover {
   cursor: pointer;
 }
 .rls-switch--checked {
-  --pvt-component-background: var(--gradient-rolster-500);
-  --pvt-component-left: 1.125rem;
-  border: var(--border-1-rolster-500);
+  --pvt-element-background: var(--gradient-rolster-500);
+  --pvt-element-left: calc(
+    100% - var(--rls-switch-element-size) - var(--sizing-2)
+  );
+  --pvt-bar-background: var(--color-rolster-300);
 }
 .rls-switch--disabled {
   opacity: 0.5;
   pointer-events: none;
 }
 .rls-switch__component {
+  position: relative;
+  width: 100%;
+  padding: var(--sizing-6) var(--sizing-2);
+  box-sizing: border-box;
+}
+.rls-switch__component__element {
   position: absolute;
-  top: calc(var(--sizing-2) + 1px);
-  left: var(--pvt-component-left);
-  width: var(--sizing-16);
-  height: var(--sizing-16);
-  background: var(--pvt-component-background);
-  transition: left 160ms 0ms var(--standard-curve);
-  border-radius: var(--sizing-12);
+  top: 0rem;
+  left: var(--pvt-element-left);
+  width: var(--rls-switch-element-size);
+  height: var(--rls-switch-element-size);
+  z-index: var(--z-index-2);
+  padding: var(--sizing-4);
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: var(--background-theme-500);
+  box-shadow: 0 0 0.25rem 0 rgba(37, 38, 65, 0.38);
+  transition: left 240ms var(--standard-curve);
+}
+.rls-switch__component__element::before {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: var(--pvt-element-background);
+}
+.rls-switch__component__bar {
+  background: var(--pvt-bar-background);
+  width: 100%;
+  height: var(--rls-switch-bar-height);
+  border-radius: var(--rls-switch-bar-radius);
 }
 
 .rls-ballot {
@@ -931,10 +964,8 @@
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
-  position: relative;
-  float: left;
-  width: 100%;
   display: flex;
+  column-gap: var(--sizing-8);
 }
 .rls-checkbox-label--disabled {
   --pvt-text-opacity: 0.5;
@@ -947,11 +978,9 @@
   --pvt-text-height: auto;
 }
 .rls-checkbox-label__component {
-  margin-right: var(--sizing-8);
   width: auto;
 }
 .rls-checkbox-label__text {
-  float: left;
   max-width: calc(100% - var(--sizing-32));
   height: var(--pvt-text-height);
   line-height: var(--sizing-24);
@@ -1303,10 +1332,8 @@
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
-  position: relative;
-  float: left;
-  width: 100%;
   display: flex;
+  column-gap: var(--sizing-8);
 }
 .rls-switch-label--disabled {
   --pvt-text-opacity: 0.5;
@@ -1319,8 +1346,7 @@
   --pvt-text-height: auto;
 }
 .rls-switch-label__component {
-  margin-right: var(--sizing-8);
-  width: auto;
+  max-width: 2.5rem;
 }
 .rls-switch-label__text {
   float: left;
@@ -1475,22 +1501,29 @@
   font-weight: var(--font-weight-medium);
 }
 
-.rls-autocomplete-field.rls-box-field--selected .rls-list-field__control {
-  width: calc(100% - var(--sizing-28));
+.rls-autocomplete-field {
+  --pvt-control-width: 100%;
+  --pvt-control-opacity: 1;
+}
+.rls-autocomplete-field.rls-box-field--selected {
+  --pvt-control-width: calc(100% - var(--sizing-28));
+}
+.rls-autocomplete-field.rls-box-field--disabled {
+  --pvt-control-opacity: 0.5;
 }
-
 .rls-autocomplete-field .rls-list-field__control {
-  width: 100%;
-  overflow: hidden;
+  width: var(--pvt-control-width);
   text-overflow: ellipsis;
+  overflow: hidden;
   white-space: nowrap;
+  opacity: var(--pvt-control-opacity);
 }
-
 .rls-autocomplete-field .rls-list-field__ul__search {
   display: flex;
-  width: calc(100% - var(--sizing-24));
-  margin: var(--sizing-4) var(--sizing-12) var(--sizing-12) var(--sizing-12);
-  overflow: hidden;
+  align-items: center;
+  width: 100%;
+  margin-top: var(--sizing-4);
+  margin-bottom: var(--sizing-12);
   background: var(--background-theme-300);
   border-radius: var(--sizing-8);
   padding: var(--sizing-8);
@@ -1503,15 +1536,12 @@
 .rls-autocomplete-field
   .rls-list-field__ul__search
   button:not(:disabled):hover {
-  color: var(--color-xofttion-300);
+  color: var(--color-rolster-300);
 }
 .rls-autocomplete-field .rls-list-field__ul__search button:disabled {
   opacity: 0.5;
 }
-
 .rls-autocomplete-field .rls-list-field__ul__control {
-  position: relative;
-  float: left;
   width: 100%;
   height: var(--sizing-24);
   line-height: var(--sizing-24);
@@ -1520,7 +1550,7 @@
   border: none;
   outline: none;
   background: transparent;
-  color: var(--color-theme-input);
+  color: var(--color-theme-500);
   font-size: var(--input-font-size);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--input-letter-spacing);
@@ -1529,20 +1559,18 @@
   color: var(--color-theme-100);
 }
 .rls-autocomplete-field .rls-list-field__ul__control::selection {
-  background: var(--color-xofttion-700);
+  background: var(--color-rolster-700);
   color: var(--color-light-500);
 }
 .rls-autocomplete-field .rls-list-field__ul__control:disabled {
   opacity: 0.5;
 }
-
 .rls-autocomplete-field .rls-list-field__ul .rls-progress-bar {
   margin-bottom: var(--sizing-16);
 }
-
 .rls-autocomplete-field .rls-list-field__element .rls-ballot__title label {
-  background: var(--color-xofttion-100);
-  color: var(--color-xofttion-500);
+  background: var(--color-rolster-100);
+  color: var(--color-rolster-500);
   padding: 0rem var(--sizing-4);
   border-radius: var(--sizing-4);
 }
@@ -1559,7 +1587,7 @@
 .rls-card__content {
   display: flex;
   flex-direction: column;
-  padding: var(--sizing-16);
+  padding: var(--rls-card-content-padding);
   box-sizing: border-box;
 }
 
@@ -1568,6 +1596,17 @@
   --pvt-component-height: 0rem;
   --pvt-component-opacity: 0;
   --pvt-component-visibility: hidden;
+  --pvt-title-font-size: var(--heading5-font-size);
+  --pvt-title-letter-spacing: var(--heading5-letter-spacing);
+  --pvt-title-line-height: var(--heading5-line-height);
+  --pvt-title-text-transform: initial;
+  --pvt-subtitle-font-size: var(--body-font-size);
+  --pvt-subtitle-letter-spacing: var(--body-letter-spacing);
+  --pvt-subtitle-line-height: var(--body-line-height);
+  --pvt-subtitle-text-transform: initial;
+  --pvt-content-font-size: 0.925rem;
+  --pvt-content-letter-spacing: 0.05em;
+  --pvt-content-line-height: 1.325rem;
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
   position: fixed;
@@ -1592,12 +1631,15 @@
 }
 .rls-confirmation__component {
   position: absolute;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--sizing-16);
   width: calc(100% - var(--sizing-32));
-  max-width: 20rem;
+  max-width: 35rem;
   height: var(--pvt-component-height);
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
-  padding: var(--sizing-8) 0rem;
+  padding: var(--sizing-16) 0rem;
   box-sizing: border-box;
   z-index: var(--z-index-2);
   border-radius: var(--sizing-8);
@@ -1611,67 +1653,60 @@
 }
 .rls-confirmation__header {
   position: relative;
-  float: left;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--sizing-4);
   width: 100%;
-  padding: var(--sizing-8) var(--sizing-16);
+  padding: 0rem var(--sizing-16);
   box-sizing: border-box;
 }
 .rls-confirmation__header__title {
   text-align: center;
-  width: 100%;
   color: var(--color-theme-500);
-  font-size: 0.85rem;
-  line-height: 0.85rem;
   font-weight: var(--font-weight-bold);
-  letter-spacing: 0.875px;
-  text-transform: uppercase;
+  font-size: var(--pvt-title-font-size);
+  line-height: var(--pvt-title-line-height);
+  letter-spacing: var(--pvt-title-letter-spacing);
+  text-transform: var(--pvt-title-text-transform);
 }
 .rls-confirmation__header__subtitle {
   text-align: center;
-  margin-top: var(--sizing-8);
-  width: 100%;
-  color: var(--color-theme-100);
-  font-size: 0.675rem;
-  line-height: 0.675rem;
+  color: var(--color-rolster-300);
   font-weight: var(--font-weight-bold);
-  letter-spacing: 0.875px;
-  text-transform: uppercase;
+  font-size: var(--pvt-subtitle-font-size);
+  line-height: var(--pvt-subtitle-line-height);
+  letter-spacing: var(--pvt-subtitle-letter-spacing);
+  text-transform: var(--pvt-subtitle-text-transform);
 }
 .rls-confirmation__body {
   position: relative;
-  float: left;
   width: 100%;
-  padding: var(--sizing-8) var(--sizing-16);
+  padding: 0rem var(--sizing-16);
   box-sizing: border-box;
 }
 .rls-confirmation__body__content {
   color: var(--color-theme-300);
-  margin: 0rem;
   text-align: center;
-  font-size: 0.925rem;
-  line-height: 1.325rem;
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: 0.05em;
+}
+.rls-confirmation__body__content p {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--pvt-content-font-size);
+  line-height: var(--pvt-content-line-height);
+  letter-spacing: var(--pvt-content-letter-spacing);
 }
 .rls-confirmation__footer {
   position: relative;
-  float: left;
   width: 100%;
-  padding: var(--sizing-16) var(--sizing-16) var(--sizing-8) var(--sizing-16);
+  padding: var(--sizing-8) var(--sizing-16) 0rem var(--sizing-16);
   box-sizing: border-box;
-  margin-top: var(--sizing-16);
-  border-top: var(--border-1-theme-100);
 }
 .rls-confirmation__footer__actions {
   position: relative;
-  display: flex;
-  flex-direction: column-reverse;
-  float: left;
   width: 100%;
-  margin: auto;
-}
-.rls-confirmation__footer__actions button + button {
-  margin-bottom: var(--sizing-12);
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: center;
+  column-gap: var(--sizing-16);
 }
 .rls-confirmation__backdrop {
   position: absolute;
@@ -1689,6 +1724,23 @@
     bottom 120ms 0ms var(--deceleration-curve);
 }
 
+@media screen and (max-width: 480px) {
+  .rls-confirmation {
+    --pvt-title-font-size: var(--title-font-size);
+    --pvt-title-letter-spacing: var(--title-letter-spacing);
+    --pvt-title-line-height: var(--title-line-height);
+    --pvt-subtitle-font-size: var(--smalltext-font-size);
+    --pvt-subtitle-letter-spacing: var(--smalltext-letter-spacing);
+    --pvt-subtitle-line-height: var(--smalltext-line-height);
+    --pvt-content-font-size: 0.9125rem;
+  }
+  .rls-confirmation__footer__actions {
+    flex-direction: column-reverse;
+    column-gap: 0rem;
+    row-gap: var(--sizing-16);
+  }
+}
+
 .rls-date-picker {
   position: relative;
   display: flex;
@@ -1864,6 +1916,9 @@
   margin-left: var(--sizing-4);
   background: transparent;
 }
+.rls-date-field__action:disabled {
+  opacity: 0.5;
+}
 
 .rls-date-range-picker {
   position: relative;
@@ -2029,6 +2084,7 @@
 .rls-snackbar {
   position: fixed;
   display: flex;
+  column-gap: var(--sizing-12);
   bottom: 0rem;
   left: var(--rls-snackbar-left);
   z-index: 32;
@@ -2038,7 +2094,7 @@
   padding: var(--sizing-12);
   box-sizing: border-box;
   border-radius: var(--sizing-8);
-  background: var(--color-rolster-100);
+  background: var(--background-theme-500);
   box-shadow: var(--shadow-bottom-light-4);
   border: var(--border-1-rolster-300);
   will-change: transform;
@@ -2049,37 +2105,34 @@
   transform: translate(-50%, calc(0% - var(--sizing-16)));
 }
 .rls-snackbar__avatar {
-  background: var(--color-rolster-500);
-  width: var(--sizing-32);
-  height: var(--sizing-32);
+  --rls-icon-color: var(--color-light-500);
+  display: flex;
+  justify-content: center;
+  align-items: center;
   overflow: hidden;
+  background: var(--color-rolster-500);
+  width: var(--sizing-36);
+  height: var(--sizing-36);
   border-radius: var(--sizing-8);
 }
-.rls-snackbar__avatar .rls-icon {
-  color: var(--color-light-500);
-  margin: var(--sizing-4);
-}
 .rls-snackbar__avatar + .rls-snackbar__component {
-  width: calc(100% - var(--sizing-40));
-  margin-left: var(--sizing-12);
+  width: calc(100% - var(--sizing-36));
 }
 .rls-snackbar__component {
-  margin: auto 0rem;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--sizing-4);
 }
 .rls-snackbar__title {
-  display: block;
-  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: var(--sizing-4);
   color: var(--color-rolster-500);
   font-size: var(--body-font-size);
   font-weight: var(--font-weight-bold);
   letter-spacing: var(--body-letter-spacing);
 }
-.rls-snackbar__message {
-  display: block;
+.rls-snackbar__content p {
   line-height: var(--sizing-20);
   color: var(--color-theme-300);
   font-size: var(--label-font-size);