@rolster/react-components 18.10.8 → 18.10.9

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

@@ -17,7 +17,7 @@
 .rls-amount {
   display: flex;
   justify-content: var(--rls-amount-text-align);
-  column-gap: var(--sizing-4);
+  column-gap: var(--sizing-x2);
 }
 .rls-amount[rls-theme] {
   color: var(--color-rolster-500);
@@ -58,7 +58,7 @@
   width: 100%;
   height: var(--rls-breadcrumb-height);
   line-height: var(--rls-breadcrumb-height);
-  padding: 0rem var(--sizing-16);
+  padding: 0rem var(--sizing-x8);
   box-sizing: border-box;
   user-select: none;
   overflow: auto;
@@ -87,10 +87,10 @@
   font-family: -rolster-icons;
   display: inline-block;
   content: '\e911';
-  margin: 0rem var(--sizing-4);
+  margin: 0rem var(--sizing-x2);
   cursor: default;
   color: inherit;
-  font-size: var(--sizing-24);
+  font-size: var(--sizing-x12);
   font-weight: normal;
   font-style: normal;
   letter-spacing: normal;
@@ -122,7 +122,7 @@
 .rls-icon--skeleton {
   --pvt-icon-display: none;
   background: var(--theme-rolster-300);
-  border-radius: var(--sizing-4);
+  border-radius: var(--sizing-x2);
 }
 .rls-icon > i {
   display: var(--pvt-icon-display);
@@ -189,8 +189,8 @@
   display: flex;
   justify-content: center;
   overflow: hidden;
-  line-height: var(--sizing-40);
-  height: var(--sizing-40);
+  line-height: var(--sizing-x20);
+  height: var(--sizing-x20);
   padding: var(--rls-button-content-padding);
   box-sizing: border-box;
   border-radius: var(--rls-button-content-radius);
@@ -204,10 +204,10 @@
   content: '';
   top: 50%;
   left: 50%;
-  padding-top: calc(100% - var(--sizing-16));
-  padding-left: calc(100% - var(--sizing-16));
-  margin-top: calc(-50% + var(--sizing-8));
-  margin-left: calc(-50% + var(--sizing-8));
+  padding-top: calc(100% - var(--sizing-x8));
+  padding-left: calc(100% - var(--sizing-x8));
+  margin-top: calc(-50% + var(--sizing-x4));
+  margin-left: calc(-50% + var(--sizing-x4));
   border-radius: 50%;
   opacity: 0.26;
   transform: scale(0);
@@ -239,10 +239,10 @@
   --pvt-button-ripple-background: var(--color-light-500);
 }
 .rls-button .rls-icon {
-  margin: auto var(--sizing-4);
+  margin: auto var(--sizing-x2);
 }
 .rls-button__label {
-  padding: 0rem var(--sizing-4);
+  padding: 0rem var(--sizing-x2);
   line-height: initial;
   width: auto;
   margin: auto 0rem;
@@ -276,11 +276,11 @@
   --pvt-tooltip-transition-delay: 0ms;
   --pvt-tooltip-opacity: 0;
   position: relative;
-  width: var(--sizing-32);
-  height: var(--sizing-32);
+  width: var(--sizing-x16);
+  height: var(--sizing-x16);
   border: none;
   outline: none;
-  padding: var(--sizing-4);
+  padding: var(--sizing-x2);
   box-sizing: border-box;
   user-select: none;
   cursor: default;
@@ -298,10 +298,10 @@
   border-radius: 50%;
   transform: scale(0);
   background: var(--rls-action-ripple-color);
-  padding-top: calc(120% - var(--sizing-8));
-  padding-left: calc(120% - var(--sizing-8));
-  margin-top: calc(-60% + var(--sizing-4));
-  margin-left: calc(-60% + var(--sizing-4));
+  padding-top: calc(120% - var(--sizing-x4));
+  padding-left: calc(120% - var(--sizing-x4));
+  margin-top: calc(-60% + var(--sizing-x2));
+  margin-left: calc(-60% + var(--sizing-x2));
 }
 .rls-button-action:not(:active)::before {
   animation: ripple-button-action 1000ms var(--standard-curve);
@@ -337,12 +337,12 @@
 }
 .rls-button-action__tooltip {
   position: absolute;
-  top: calc(100% + var(--sizing-12));
+  top: calc(100% + var(--sizing-x6));
   left: 50%;
   width: auto;
   float: initial;
-  padding: var(--sizing-8);
-  border-radius: var(--sizing-4);
+  padding: var(--sizing-x4);
+  border-radius: var(--sizing-x2);
   white-space: nowrap;
   pointer-events: none;
   transform: translateX(-50%);
@@ -371,11 +371,11 @@
   position: relative;
   float: left;
   display: flex;
-  width: var(--sizing-24);
-  height: var(--sizing-24);
+  width: var(--sizing-x12);
+  height: var(--sizing-x12);
   box-sizing: border-box;
   outline: none;
-  border-radius: var(--sizing-4);
+  border-radius: var(--sizing-x2);
   border: var(--border-1-theme-300);
 }
 .rls-checkbox:hover {
@@ -390,7 +390,7 @@
   pointer-events: none;
 }
 .rls-checkbox__component {
-  border-radius: var(--sizing-2);
+  border-radius: var(--sizing-x1);
   width: 0.875rem;
   height: 0.875rem;
   margin: auto;
@@ -493,8 +493,8 @@
   position: relative;
   float: left;
   width: 100%;
-  height: var(--sizing-24);
-  line-height: var(--sizing-24);
+  height: var(--sizing-x12);
+  line-height: var(--sizing-x12);
   padding: 0rem;
   cursor: text;
   border: none;
@@ -531,12 +531,12 @@
 
 .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);
+  --rls-icon-width: var(--sizing-x8);
+  --rls-icon-height: var(--sizing-x8);
+  --rls-icon-font-size: var(--sizing-x8);
   display: flex;
   align-items: center;
-  column-gap: var(--sizing-4);
+  column-gap: var(--sizing-x2);
 }
 .rls-message-icon span {
   color: var(--color-theme-300);
@@ -550,7 +550,7 @@
   line-height: var(--rls-poster-height);
   padding: var(--rls-poster-padding);
   box-sizing: border-box;
-  border-radius: var(--sizing-4);
+  border-radius: var(--sizing-x2);
   color: var(--color-light-500);
   background: var(--gradient-rolster-500);
 }
@@ -560,7 +560,7 @@
   position: relative;
   float: left;
   width: 100%;
-  height: var(--sizing-4);
+  height: var(--sizing-x2);
   overflow: hidden;
   background: var(--color-rolster-100);
 }
@@ -573,7 +573,7 @@
   content: '';
   top: 0rem;
   width: 0%;
-  height: var(--sizing-4);
+  height: var(--sizing-x2);
   background: var(--gradient-rolster-500);
 }
 .rls-progress-bar--indeterminate::after {
@@ -586,7 +586,7 @@
   position: absolute;
   top: 0rem;
   width: 0%;
-  height: var(--sizing-8);
+  height: var(--sizing-x4);
   display: var(--pvt-component-display);
   background: var(--gradient-rolster-500);
   transition: width 320ms 0ms var(--standard-curve);
@@ -628,8 +628,8 @@
   float: left;
   display: flex;
   outline: none;
-  width: var(--sizing-24);
-  height: var(--sizing-24);
+  width: var(--sizing-x12);
+  height: var(--sizing-x12);
   border-radius: 50%;
   box-sizing: border-box;
   border: var(--border-1-theme-300);
@@ -657,15 +657,15 @@
 }
 
 .rls-search-input {
-  --rls-input-height: var(--sizing-28);
+  --rls-input-height: var(--sizing-x14);
   position: relative;
   float: left;
   display: flex;
   align-items: center;
-  padding: var(--sizing-8) var(--sizing-12);
+  padding: var(--sizing-x4) var(--sizing-x6);
   box-sizing: border-box;
   border: var(--border-1-theme-300);
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
 }
 
 .rls-skeleton {
@@ -679,7 +679,7 @@
   letter-spacing: inherit;
   overflow: hidden;
   background: var(--color-rolster-100);
-  border-radius: var(--sizing-4);
+  border-radius: var(--sizing-x2);
 }
 .rls-skeleton::after {
   position: absolute;
@@ -720,7 +720,7 @@
 .rls-skeleton-text--active {
   --pvt-value-visibility: hidden;
   background: var(--color-rolster-100);
-  border-radius: var(--sizing-4);
+  border-radius: var(--sizing-x2);
 }
 .rls-skeleton-text--active::after {
   animation: skeleton-text-animation 1600ms infinite;
@@ -766,10 +766,10 @@
 }
 
 .rls-switch {
-  --pvt-element-left: var(--sizing-2);
+  --pvt-element-left: var(--sizing-x1);
   --pvt-element-background: var(--background-theme-500);
   --pvt-bar-background: var(--background-theme-100);
-  max-width: var(--sizing-40);
+  max-width: var(--sizing-x20);
 }
 .rls-switch:hover {
   cursor: pointer;
@@ -777,7 +777,7 @@
 .rls-switch--checked {
   --pvt-element-background: var(--gradient-rolster-500);
   --pvt-element-left: calc(
-    100% - var(--rls-switch-element-size) - var(--sizing-2)
+    100% - var(--rls-switch-element-size) - var(--sizing-x1)
   );
   --pvt-bar-background: var(--color-rolster-300);
 }
@@ -788,7 +788,7 @@
 .rls-switch__component {
   position: relative;
   width: 100%;
-  padding: var(--sizing-6) var(--sizing-2);
+  padding: var(--sizing-x3) var(--sizing-x1);
   box-sizing: border-box;
 }
 .rls-switch__component__element {
@@ -798,11 +798,11 @@
   width: var(--rls-switch-element-size);
   height: var(--rls-switch-element-size);
   z-index: var(--z-index-2);
-  padding: var(--sizing-4);
+  padding: var(--sizing-x2);
   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);
+  box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
   transition: left 240ms var(--standard-curve);
 }
 .rls-switch__component__element::before {
@@ -821,18 +821,18 @@
 }
 
 .rls-ballot {
-  --rls-avatar-width: var(--sizing-40);
-  --rls-avatar-height: var(--sizing-40);
+  --rls-avatar-width: var(--sizing-x20);
+  --rls-avatar-height: var(--sizing-x20);
   position: relative;
   float: left;
   display: flex;
   width: 100%;
-  padding: var(--sizing-8);
+  padding: var(--sizing-x4);
   box-sizing: border-box;
   overflow: hidden;
 }
 .rls-ballot--bordered {
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   border: var(--border-1-theme-300);
 }
 .rls-ballot--skeleton {
@@ -842,8 +842,8 @@
   margin: auto 0rem;
 }
 .rls-ballot > .rls-avatar + .rls-ballot__component {
-  width: calc(100% - var(--sizing-56));
-  margin-left: var(--sizing-8);
+  width: calc(100% - var(--sizing-x28));
+  margin-left: var(--sizing-x4);
 }
 .rls-ballot__component {
   overflow: hidden;
@@ -868,7 +868,7 @@
   float: left;
   width: var(--rls-ballot-subtitle-width);
   color: var(--color-theme-300);
-  margin-top: var(--sizing-4);
+  margin-top: var(--sizing-x2);
   font-weight: var(--font-weight-semibold);
   font-size: var(--smalltext-font-size);
   letter-spacing: var(--smalltext-letter-spacing);
@@ -887,12 +887,12 @@
   justify-content: center;
 }
 .rls-button-toggle__action {
-  --rls-button-content-radius: var(--sizing-4) 0rem 0rem var(--sizing-4);
+  --rls-button-content-radius: var(--sizing-x2) 0rem 0rem var(--sizing-x2);
   width: auto;
 }
 .rls-button-toggle__icon {
-  --rls-button-content-radius: 0rem var(--sizing-4) var(--sizing-4) 0rem;
-  --rls-button-content-padding: var(--sizing-4);
+  --rls-button-content-radius: 0rem var(--sizing-x2) var(--sizing-x2) 0rem;
+  --rls-button-content-padding: var(--sizing-x2);
   width: auto;
 }
 .rls-button-toggle__list {
@@ -927,8 +927,8 @@
   width: 100%;
   height: var(--rls-button-toggle-ul-height);
   opacity: var(--rls-button-toggle-ul-opacity);
-  padding: var(--sizing-8) 0rem;
-  border-radius: var(--sizing-8);
+  padding: var(--sizing-x4) 0rem;
+  border-radius: var(--sizing-x4);
   box-sizing: border-box;
   overflow-y: auto;
   overflow-x: hidden;
@@ -942,10 +942,10 @@
   will-change: opacity, transform;
 }
 .rls-button-toggle__list ul li {
-  padding: 0rem var(--sizing-12);
+  padding: 0rem var(--sizing-x6);
   box-sizing: border-box;
-  height: var(--sizing-40);
-  line-height: var(--sizing-40);
+  height: var(--sizing-x20);
+  line-height: var(--sizing-x20);
   cursor: default;
   font-weight: var(--font-weight-bold);
   font-size: 0.825rem;
@@ -960,12 +960,12 @@
 
 .rls-checkbox-label {
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--sizing-24);
+  --pvt-text-height: var(--sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
   display: flex;
-  column-gap: var(--sizing-8);
+  column-gap: var(--sizing-x4);
 }
 .rls-checkbox-label--disabled {
   --pvt-text-opacity: 0.5;
@@ -981,9 +981,9 @@
   width: auto;
 }
 .rls-checkbox-label__text {
-  max-width: calc(100% - var(--sizing-32));
+  max-width: calc(100% - var(--sizing-x16));
   height: var(--pvt-text-height);
-  line-height: var(--sizing-24);
+  line-height: var(--sizing-x12);
   color: var(--color-theme-300);
   font-size: var(--label-font-size);
   font-weight: var(--font-weight-medium);
@@ -1008,16 +1008,16 @@
 }
 .rls-day-picker__header {
   display: flex;
-  margin-bottom: var(--sizing-8);
+  margin-bottom: var(--sizing-x4);
   background: var(--background-theme-100);
   color: var(--color-theme-500);
-  border-radius: var(--sizing-4);
+  border-radius: var(--sizing-x2);
 }
 .rls-day-picker__label {
-  padding: var(--sizing-12) 0rem;
+  padding: var(--sizing-x6) 0rem;
   text-align: center;
   width: 100%;
-  font-size: var(--sizing-12);
+  font-size: var(--sizing-x6);
   font-weight: var(--font-weight-bold);
 }
 .rls-day-picker__week {
@@ -1025,17 +1025,17 @@
 }
 .rls-day-picker__day {
   text-align: center;
-  padding: var(--sizing-2);
+  padding: var(--sizing-x1);
   box-sizing: border-box;
 }
 .rls-day-picker__day__span {
   position: relative;
   display: block;
   color: var(--color-theme-500);
-  border-radius: var(--sizing-8);
-  height: var(--sizing-36);
-  line-height: var(--sizing-36);
-  margin: var(--sizing-2) 0rem;
+  border-radius: var(--sizing-x4);
+  height: var(--sizing-x18);
+  line-height: var(--sizing-x18);
+  margin: var(--sizing-x1) 0rem;
   font-size: 0.875rem;
   font-weight: var(--font-weight-semibold);
   background: var(--pvt-span-background);
@@ -1075,16 +1075,16 @@
 }
 .rls-day-range-picker__header {
   display: flex;
-  margin-bottom: var(--sizing-8);
+  margin-bottom: var(--sizing-x4);
   background: var(--background-theme-100);
   color: var(--color-theme-500);
-  border-radius: var(--sizing-4);
+  border-radius: var(--sizing-x2);
 }
 .rls-day-range-picker__label {
-  padding: var(--sizing-12) 0rem;
+  padding: var(--sizing-x6) 0rem;
   text-align: center;
   width: 100%;
-  font-size: var(--sizing-12);
+  font-size: var(--sizing-x6);
   font-weight: var(--font-weight-bold);
 }
 .rls-day-range-picker__week {
@@ -1092,17 +1092,17 @@
 }
 .rls-day-range-picker__day {
   text-align: center;
-  padding: var(--sizing-2);
+  padding: var(--sizing-x1);
   box-sizing: border-box;
 }
 .rls-day-range-picker__day__span {
   position: relative;
   display: block;
   color: var(--color-theme-500);
-  border-radius: var(--sizing-8);
-  height: var(--sizing-36);
-  line-height: var(--sizing-36);
-  margin: var(--sizing-2) 0rem;
+  border-radius: var(--sizing-x4);
+  height: var(--sizing-x18);
+  line-height: var(--sizing-x18);
+  margin: var(--sizing-x1) 0rem;
   font-size: 0.875rem;
   font-weight: var(--font-weight-semibold);
 }
@@ -1132,7 +1132,7 @@
 }
 
 .rls-money-field {
-  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
   position: relative;
   float: left;
   width: 100%;
@@ -1146,8 +1146,8 @@
   max-width: 17.5rem;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: var(--sizing-4);
-  padding: var(--sizing-2);
+  gap: var(--sizing-x2);
+  padding: var(--sizing-x1);
   box-sizing: border-box;
 }
 .rls-month-picker__component {
@@ -1156,8 +1156,8 @@
   display: flex;
   box-sizing: border-box;
   text-align: center;
-  height: var(--sizing-36);
-  border-radius: var(--sizing-8);
+  height: var(--sizing-x18);
+  border-radius: var(--sizing-x4);
   color: var(--color-theme-300);
 }
 .rls-month-picker__component:hover {
@@ -1188,9 +1188,9 @@
   color: var(--color-theme-300);
   cursor: default;
   margin: auto 0rem;
-  height: var(--sizing-28);
-  line-height: var(--sizing-28);
-  font-size: var(--sizing-20);
+  height: var(--sizing-x14);
+  line-height: var(--sizing-x14);
+  font-size: var(--sizing-x10);
   font-weight: var(--font-weight-bold);
 }
 .rls-month-title-picker span:hover {
@@ -1198,7 +1198,7 @@
 }
 
 .rls-number-field {
-  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
   position: relative;
   float: left;
   width: 100%;
@@ -1212,15 +1212,15 @@
   float: left;
   width: 100%;
   overflow: hidden;
-  height: var(--sizing-40);
-  padding: 0rem var(--sizing-12);
+  height: var(--sizing-x20);
+  padding: 0rem var(--sizing-x6);
   box-sizing: border-box;
 }
 .rls-pagination__pages {
   display: flex;
-  gap: var(--sizing-8);
+  gap: var(--sizing-x4);
   width: auto;
-  margin: 0rem var(--sizing-8);
+  margin: 0rem var(--sizing-x4);
 }
 .rls-pagination__page {
   background: var(--background-theme-100);
@@ -1228,10 +1228,10 @@
   cursor: default;
   margin: auto 0rem;
   text-align: center;
-  width: var(--sizing-32);
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
-  border-radius: var(--sizing-4);
+  width: var(--sizing-x16);
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
+  border-radius: var(--sizing-x2);
 }
 .rls-pagination__page:hover {
   background: var(--color-rolster-300);
@@ -1243,10 +1243,10 @@
 }
 .rls-pagination__description {
   color: var(--font-primary-900);
-  margin: 0rem var(--sizing-8);
+  margin: 0rem var(--sizing-x4);
   width: auto;
-  height: var(--sizing-40);
-  line-height: var(--sizing-40);
+  height: var(--sizing-x20);
+  line-height: var(--sizing-x20);
   font-size: var(--body-1-size);
   font-weight: var(--font-weight-bold);
   letter-spacing: var(--body-1-letter-spacing);
@@ -1258,10 +1258,10 @@
   background: none;
   outline: none;
   color: var(--color-theme-300);
-  height: var(--sizing-36);
-  width: var(--sizing-36);
-  padding: var(--sizing-6);
-  margin: var(--sizing-2) 0rem;
+  height: var(--sizing-x18);
+  width: var(--sizing-x18);
+  padding: var(--sizing-x3);
+  margin: var(--sizing-x1) 0rem;
 }
 .rls-pagination__action:hover {
   color: var(--color-rolster-300);
@@ -1273,21 +1273,21 @@
 }
 
 .rls-password-field {
-  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
-  --rls-action-ripple-dimension: var(--sizing-32);
-  --rls-action-ripple-position: -1rem;
+  --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
+  --rls-action-ripple-dimension: var(--sizing-x16);
+  --rls-action-ripple-position: -8rem;
   position: relative;
   float: left;
   width: 100%;
   box-sizing: border-box;
 }
 .rls-password-field .rls-button-action {
-  margin: auto var(--sizing-4) auto 0rem;
+  margin: auto var(--sizing-x2) auto 0rem;
 }
 
 .rls-radiobutton-label {
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--sizing-24);
+  --pvt-text-height: var(--sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
@@ -1307,14 +1307,14 @@
   --pvt-text-height: auto;
 }
 .rls-radiobutton-label__component {
-  margin-right: var(--sizing-8);
+  margin-right: var(--sizing-x4);
   width: auto;
 }
 .rls-radiobutton-label__text {
   float: left;
-  max-width: calc(100% - var(--sizing-32));
+  max-width: calc(100% - var(--sizing-x16));
   height: var(--pvt-text-height);
-  line-height: var(--sizing-24);
+  line-height: var(--sizing-x12);
   color: var(--color-theme-300);
   font-size: var(--label-font-size);
   font-weight: var(--font-weight-medium);
@@ -1328,12 +1328,12 @@
 
 .rls-switch-label {
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--sizing-24);
+  --pvt-text-height: var(--sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
   display: flex;
-  column-gap: var(--sizing-8);
+  column-gap: var(--sizing-x4);
 }
 .rls-switch-label--disabled {
   --pvt-text-opacity: 0.5;
@@ -1346,13 +1346,13 @@
   --pvt-text-height: auto;
 }
 .rls-switch-label__component {
-  max-width: 2.5rem;
+  max-width: 20rem;
 }
 .rls-switch-label__text {
   float: left;
-  max-width: calc(100% - var(--sizing-56));
+  max-width: calc(100% - var(--sizing-x28));
   height: var(--pvt-text-height);
-  line-height: var(--sizing-24);
+  line-height: var(--sizing-x12);
   color: var(--color-theme-300);
   font-size: var(--label-font-size);
   font-weight: var(--font-weight-medium);
@@ -1365,7 +1365,7 @@
 }
 
 .rls-text-field {
-  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
   position: relative;
   float: left;
   width: 100%;
@@ -1375,7 +1375,7 @@
 .rls-toolbar {
   display: flex;
   justify-content: space-between;
-  column-gap: var(--sizing-12);
+  column-gap: var(--sizing-x6);
   height: var(--rls-toolbar-height);
 }
 .rls-toolbar > * {
@@ -1384,13 +1384,13 @@
 .rls-toolbar__content {
   display: flex;
   height: 100%;
-  padding: var(--sizing-4) var(--sizing-12);
+  padding: var(--sizing-x2) var(--sizing-x6);
   box-sizing: border-box;
   margin: auto 0rem;
 }
 .rls-toolbar__description {
   overflow: hidden;
-  padding: 0rem var(--sizing-4);
+  padding: 0rem var(--sizing-x2);
   box-sizing: border-box;
   margin: auto 0rem;
 }
@@ -1404,8 +1404,8 @@
 }
 .rls-toolbar__title {
   color: var(--color-theme-500);
-  height: var(--sizing-24);
-  line-height: var(--sizing-24);
+  height: var(--sizing-x12);
+  line-height: var(--sizing-x12);
   font-size: 1.0125rem;
   letter-spacing: var(--label-letter-spacing);
   font-weight: var(--font-weight-bold);
@@ -1417,7 +1417,7 @@
   display: flex;
   box-sizing: border-box;
   margin: auto 0rem;
-  column-gap: var(--sizing-16);
+  column-gap: var(--sizing-x8);
 }
 .rls-toolbar__actions > * {
   margin: auto 0rem;
@@ -1435,21 +1435,21 @@
 .rls-year-picker__header {
   display: flex;
   box-sizing: border-box;
-  padding: var(--sizing-8) var(--sizing-12);
+  padding: var(--sizing-x4) var(--sizing-x6);
   color: var(--color-theme-500);
   background: var(--background-theme-100);
 }
 .rls-year-picker__title {
   width: 100%;
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
   text-align: center;
   font-weight: var(--font-weight-bold);
 }
 .rls-year-picker__action {
-  width: var(--sizing-32);
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
+  width: var(--sizing-x16);
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
 }
 .rls-year-picker__action button {
   color: var(--color-theme-500);
@@ -1465,10 +1465,10 @@
   position: relative;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: var(--sizing-8);
+  gap: var(--sizing-x4);
   width: 100%;
   float: left;
-  padding: var(--sizing-8);
+  padding: var(--sizing-x4);
   box-sizing: border-box;
 }
 .rls-year-picker__year {
@@ -1477,8 +1477,8 @@
   display: flex;
   box-sizing: border-box;
   text-align: center;
-  height: var(--sizing-36);
-  border-radius: var(--sizing-8);
+  height: var(--sizing-x18);
+  border-radius: var(--sizing-x4);
   color: var(--color-theme-300);
 }
 .rls-year-picker__year:hover {
@@ -1506,7 +1506,7 @@
   --pvt-control-opacity: 1;
 }
 .rls-autocomplete-field.rls-box-field--selected {
-  --pvt-control-width: calc(100% - var(--sizing-28));
+  --pvt-control-width: calc(100% - var(--sizing-x14));
 }
 .rls-autocomplete-field.rls-box-field--disabled {
   --pvt-control-opacity: 0.5;
@@ -1522,11 +1522,11 @@
   display: flex;
   align-items: center;
   width: 100%;
-  margin-top: var(--sizing-4);
-  margin-bottom: var(--sizing-12);
+  margin-top: var(--sizing-x2);
+  margin-bottom: var(--sizing-x6);
   background: var(--background-theme-300);
-  border-radius: var(--sizing-8);
-  padding: var(--sizing-8);
+  border-radius: var(--sizing-x4);
+  padding: var(--sizing-x4);
   box-sizing: border-box;
 }
 .rls-autocomplete-field .rls-list-field__ul__search button {
@@ -1543,8 +1543,8 @@
 }
 .rls-autocomplete-field .rls-list-field__ul__control {
   width: 100%;
-  height: var(--sizing-24);
-  line-height: var(--sizing-24);
+  height: var(--sizing-x12);
+  line-height: var(--sizing-x12);
   padding: 0rem;
   cursor: text;
   border: none;
@@ -1566,18 +1566,18 @@
   opacity: 0.5;
 }
 .rls-autocomplete-field .rls-list-field__ul .rls-progress-bar {
-  margin-bottom: var(--sizing-16);
+  margin-bottom: var(--sizing-x8);
 }
 .rls-autocomplete-field .rls-list-field__element .rls-ballot__title label {
   background: var(--color-rolster-100);
   color: var(--color-rolster-500);
-  padding: 0rem var(--sizing-4);
-  border-radius: var(--sizing-4);
+  padding: 0rem var(--sizing-x2);
+  border-radius: var(--sizing-x2);
 }
 
 .rls-card {
   background: var(--background-theme-500);
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   box-shadow: var(--shadow-center-light-8);
 }
 .rls-card--outline {
@@ -1633,16 +1633,16 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-16);
-  width: calc(100% - var(--sizing-32));
+  row-gap: var(--sizing-x8);
+  width: calc(100% - var(--sizing-x16));
   max-width: 35rem;
   height: var(--pvt-component-height);
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
-  padding: var(--sizing-16) 0rem;
+  padding: var(--sizing-x8) 0rem;
   box-sizing: border-box;
   z-index: var(--z-index-2);
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   background: var(--background-theme-500);
   box-shadow: var(--shadow-4);
   will-change: transform;
@@ -1655,9 +1655,9 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-4);
+  row-gap: var(--sizing-x2);
   width: 100%;
-  padding: 0rem var(--sizing-16);
+  padding: 0rem var(--sizing-x8);
   box-sizing: border-box;
 }
 .rls-confirmation__header__title {
@@ -1681,7 +1681,7 @@
 .rls-confirmation__body {
   position: relative;
   width: 100%;
-  padding: 0rem var(--sizing-16);
+  padding: 0rem var(--sizing-x8);
   box-sizing: border-box;
 }
 .rls-confirmation__body__content {
@@ -1697,7 +1697,7 @@
 .rls-confirmation__footer {
   position: relative;
   width: 100%;
-  padding: var(--sizing-8) var(--sizing-16) 0rem var(--sizing-16);
+  padding: var(--sizing-x4) var(--sizing-x8) 0rem var(--sizing-x8);
   box-sizing: border-box;
 }
 .rls-confirmation__footer__actions {
@@ -1706,7 +1706,7 @@
   display: flex;
   flex-direction: row-reverse;
   justify-content: center;
-  column-gap: var(--sizing-16);
+  column-gap: var(--sizing-x8);
 }
 .rls-confirmation__backdrop {
   position: absolute;
@@ -1737,7 +1737,7 @@
   .rls-confirmation__footer__actions {
     flex-direction: column-reverse;
     column-gap: 0rem;
-    row-gap: var(--sizing-16);
+    row-gap: var(--sizing-x8);
   }
 }
 
@@ -1750,9 +1750,9 @@
 }
 .rls-date-picker__header {
   background: var(--color-rolster-100);
-  padding: var(--sizing-8);
+  padding: var(--sizing-x4);
   box-sizing: border-box;
-  margin-bottom: var(--sizing-16);
+  margin-bottom: var(--sizing-x8);
 }
 .rls-date-picker__title {
   color: var(--color-theme-500);
@@ -1764,23 +1764,23 @@
   color: var(--color-rolster-500);
 }
 .rls-date-picker__title--description {
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
   font-size: 1.15rem;
 }
 .rls-date-picker__title--year {
-  margin: var(--sizing-8) 0rem var(--sizing-4) 0rem;
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
-  font-size: var(--sizing-24);
+  margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
+  font-size: var(--sizing-x12);
   color: var(--color-theme-300);
 }
 .rls-date-picker__component {
   display: flex;
   width: 18.75rem;
-  padding: 0rem var(--sizing-4);
+  padding: 0rem var(--sizing-x2);
   box-sizing: border-box;
-  margin-bottom: var(--sizing-8);
+  margin-bottom: var(--sizing-x4);
 }
 .rls-date-picker__component > * {
   margin: 0rem auto;
@@ -1801,16 +1801,16 @@
 .rls-date-picker__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--sizing-8);
-  padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
+  gap: var(--sizing-x4);
+  padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
   overflow: hidden;
   box-sizing: border-box;
 }
 .rls-date-picker__actions--cancel {
-  width: calc(50% - var(--sizing-4));
+  width: calc(50% - var(--sizing-x2));
 }
 .rls-date-picker__actions--today {
-  width: calc(50% - var(--sizing-4));
+  width: calc(50% - var(--sizing-x2));
 }
 .rls-date-picker__actions--ok {
   width: 100%;
@@ -1849,13 +1849,13 @@
 .rls-modal__component {
   position: absolute;
   width: auto;
-  max-width: calc(100% - var(--sizing-16));
+  max-width: calc(100% - var(--sizing-x8));
   height: var(--pvt-component-height);
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
   z-index: var(--z-index-2);
   overflow: hidden;
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   background: var(--background-theme-500);
   will-change: transform;
   transform: var(--pvt-component-transform);
@@ -1880,7 +1880,7 @@
 }
 
 .rls-date-field {
-  --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
+  --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
   position: relative;
   float: left;
   width: 100%;
@@ -1889,9 +1889,9 @@
 .rls-date-field__control {
   position: relative;
   float: left;
-  width: calc(100% - var(--sizing-28));
-  height: var(--sizing-24);
-  line-height: var(--sizing-24);
+  width: calc(100% - var(--sizing-x14));
+  height: var(--sizing-x12);
+  line-height: var(--sizing-x12);
   padding: 0rem;
   cursor: default;
   border: none;
@@ -1910,10 +1910,10 @@
 }
 .rls-date-field__action {
   color: var(--color-theme-300);
-  width: var(--sizing-24);
-  height: var(--sizing-24);
+  width: var(--sizing-x12);
+  height: var(--sizing-x12);
   padding: 0rem;
-  margin-left: var(--sizing-4);
+  margin-left: var(--sizing-x2);
   background: transparent;
 }
 .rls-date-field__action:disabled {
@@ -1928,9 +1928,9 @@
 }
 .rls-date-range-picker__header {
   background: var(--color-rolster-100);
-  padding: var(--sizing-8);
+  padding: var(--sizing-x4);
   box-sizing: border-box;
-  margin-bottom: var(--sizing-16);
+  margin-bottom: var(--sizing-x8);
 }
 .rls-date-range-picker__title {
   color: var(--color-theme-500);
@@ -1942,15 +1942,15 @@
   color: var(--color-rolster-500);
 }
 .rls-date-range-picker__title--description {
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
   font-size: 1.15rem;
 }
 .rls-date-range-picker__title--year {
-  margin: var(--sizing-8) 0rem var(--sizing-4) 0rem;
-  height: var(--sizing-32);
-  line-height: var(--sizing-32);
-  font-size: var(--sizing-24);
+  margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
+  height: var(--sizing-x16);
+  line-height: var(--sizing-x16);
+  font-size: var(--sizing-x12);
   color: var(--color-theme-300);
 }
 .rls-date-range-picker__title--month {
@@ -1958,17 +1958,17 @@
   justify-content: space-between;
 }
 .rls-date-range-picker__title--month span {
-  height: var(--sizing-28);
-  line-height: var(--sizing-28);
-  font-size: var(--sizing-20);
+  height: var(--sizing-x14);
+  line-height: var(--sizing-x14);
+  font-size: var(--sizing-x10);
   color: var(--color-theme-300);
   margin: auto 0rem;
 }
 .rls-date-range-picker__component {
   display: flex;
-  padding: 0rem var(--sizing-4);
+  padding: 0rem var(--sizing-x2);
   box-sizing: border-box;
-  margin-bottom: var(--sizing-8);
+  margin-bottom: var(--sizing-x4);
 }
 .rls-date-range-picker__component > * {
   margin: 0rem auto;
@@ -1987,7 +1987,7 @@
   display: none;
 }
 .rls-date-range-picker__actions {
-  padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
+  padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -1995,7 +1995,7 @@
   width: 100%;
 }
 .rls-date-range-picker__actions--ok {
-  margin-top: var(--sizing-8);
+  margin-top: var(--sizing-x4);
   width: 100%;
 }
 .rls-date-range-picker__actions button {
@@ -2003,7 +2003,7 @@
 }
 
 .rls-date-range-field {
-  --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
+  --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
   position: relative;
   float: left;
   width: 100%;
@@ -2012,9 +2012,9 @@
 .rls-date-range-field__control {
   position: relative;
   float: left;
-  width: calc(100% - var(--sizing-28));
-  height: var(--sizing-24);
-  line-height: var(--sizing-24);
+  width: calc(100% - var(--sizing-x14));
+  height: var(--sizing-x12);
+  line-height: var(--sizing-x12);
   padding: 0rem;
   cursor: default;
   border: none;
@@ -2033,39 +2033,39 @@
 }
 .rls-date-range-field__action {
   color: var(--color-theme-300);
-  width: var(--sizing-24);
-  height: var(--sizing-24);
+  width: var(--sizing-x12);
+  height: var(--sizing-x12);
   padding: 0rem;
-  margin-left: var(--sizing-4);
+  margin-left: var(--sizing-x2);
   background: transparent;
 }
 
 .rls-form-navigation {
   position: fixed;
-  top: var(--sizing-16);
-  right: var(--sizing-16);
-  width: calc(100% - var(--sizing-32));
+  top: var(--sizing-x8);
+  right: var(--sizing-x8);
+  width: calc(100% - var(--sizing-x16));
   max-width: 20rem;
   height: auto;
-  max-height: calc(100vh - var(--sizing-32));
+  max-height: calc(100vh - var(--sizing-x16));
   z-index: var(--z-index-12);
-  padding: var(--sizing-16) var(--sizing-16) var(--sizing-24) var(--sizing-16);
+  padding: var(--sizing-x8) var(--sizing-x8) var(--sizing-x12) var(--sizing-x8);
   box-sizing: border-box;
   background: var(--background-theme-500);
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   box-shadow: var(--shadow-center-dark-8);
-  transform: translateX(calc(100% + var(--sizing-32)));
+  transform: translateX(calc(100% + var(--sizing-x16)));
   transition: transform 240ms 0ms var(--standard-curve);
 }
 .rls-form-navigation--visible {
   transform: translateX(0%);
 }
 .rls-form-navigation__header {
-  margin-bottom: var(--sizing-16);
+  margin-bottom: var(--sizing-x8);
 }
 .rls-form-navigation__header .rls-button-action {
-  width: var(--sizing-24);
-  height: var(--sizing-24);
+  width: var(--sizing-x12);
+  height: var(--sizing-x12);
   padding: 0rem;
   float: right;
 }
@@ -2084,16 +2084,16 @@
 .rls-snackbar {
   position: fixed;
   display: flex;
-  column-gap: var(--sizing-12);
+  column-gap: var(--sizing-x6);
   bottom: 0rem;
   left: var(--rls-snackbar-left);
   z-index: 32;
   width: auto;
   height: auto;
   max-width: 30rem;
-  padding: var(--sizing-12);
+  padding: var(--sizing-x6);
   box-sizing: border-box;
-  border-radius: var(--sizing-8);
+  border-radius: var(--sizing-x4);
   background: var(--background-theme-500);
   box-shadow: var(--shadow-bottom-light-4);
   border: var(--border-1-rolster-300);
@@ -2102,7 +2102,7 @@
   transition: transform 160ms 0ms var(--standard-curve);
 }
 .rls-snackbar--visible {
-  transform: translate(-50%, calc(0% - var(--sizing-16)));
+  transform: translate(-50%, calc(0% - var(--sizing-x8)));
 }
 .rls-snackbar__avatar {
   --rls-icon-color: var(--color-light-500);
@@ -2111,17 +2111,17 @@
   align-items: center;
   overflow: hidden;
   background: var(--color-rolster-500);
-  width: var(--sizing-36);
-  height: var(--sizing-36);
-  border-radius: var(--sizing-8);
+  width: var(--sizing-x18);
+  height: var(--sizing-x18);
+  border-radius: var(--sizing-x4);
 }
 .rls-snackbar__avatar + .rls-snackbar__component {
-  width: calc(100% - var(--sizing-36));
+  width: calc(100% - var(--sizing-x18));
 }
 .rls-snackbar__component {
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-4);
+  row-gap: var(--sizing-x2);
 }
 .rls-snackbar__title {
   overflow: hidden;
@@ -2133,7 +2133,7 @@
   letter-spacing: var(--body-letter-spacing);
 }
 .rls-snackbar__content p {
-  line-height: var(--sizing-20);
+  line-height: var(--sizing-x10);
   color: var(--color-theme-300);
   font-size: var(--label-font-size);
   font-weight: var(--font-weight-medium);
@@ -2142,6 +2142,6 @@
 
 @media only screen and (max-width: 375px) {
   .rls-snackbar {
-    width: calc(100% - var(--sizing-24));
+    width: calc(100% - var(--sizing-x12));
   }
 }