@rolster/react-components 18.10.7 → 18.10.9

package/dist/esm/components/atoms/Amount/Amount.css

@@ -1,7 +1,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);

package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css

@@ -4,7 +4,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;
@@ -33,10 +33,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;

package/dist/esm/components/atoms/Button/Button.css

@@ -53,8 +53,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);
@@ -68,10 +68,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);
@@ -103,10 +103,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;

package/dist/esm/components/atoms/ButtonAction/ButtonAction.css

@@ -2,11 +2,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;
@@ -24,10 +24,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);
@@ -63,12 +63,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%);

package/dist/esm/components/atoms/CheckBox/CheckBox.css

@@ -3,11 +3,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 {
@@ -22,7 +22,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;

package/dist/esm/components/atoms/Icon/Icon.css

@@ -10,7 +10,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);

package/dist/esm/components/atoms/InputPassword/InputPassword.css

@@ -9,8 +9,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;

package/dist/esm/components/atoms/MessageIcon/MessageIcon.css

@@ -1,11 +1,11 @@
 .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);

package/dist/esm/components/atoms/Poster/Poster.css

@@ -6,7 +6,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);
 }

package/dist/esm/components/atoms/ProgressBar/ProgressBar.css

@@ -3,7 +3,7 @@
   position: relative;
   float: left;
   width: 100%;
-  height: var(--sizing-4);
+  height: var(--sizing-x2);
   overflow: hidden;
   background: var(--color-rolster-100);
 }
@@ -16,7 +16,7 @@
   content: '';
   top: 0rem;
   width: 0%;
-  height: var(--sizing-4);
+  height: var(--sizing-x2);
   background: var(--gradient-rolster-500);
 }
 .rls-progress-bar--indeterminate::after {
@@ -29,7 +29,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);

package/dist/esm/components/atoms/RadioButton/RadioButton.css

@@ -4,8 +4,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);

package/dist/esm/components/atoms/SearchInput/SearchInput.css

@@ -1,11 +1,11 @@
 .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);
 }

package/dist/esm/components/atoms/Skeleton/Skeleton.css

@@ -9,7 +9,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;

package/dist/esm/components/atoms/SkeletonText/SkeletonText.css

@@ -13,7 +13,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;

package/dist/esm/components/atoms/Switch/Switch.css

@@ -1,8 +1,8 @@
 .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;
@@ -10,7 +10,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);
 }
@@ -21,7 +21,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 {
@@ -31,11 +31,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 {

package/dist/esm/components/molecules/Ballot/Ballot.css

@@ -1,16 +1,16 @@
 .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 {
@@ -20,8 +20,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;
@@ -46,7 +46,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);

package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css

@@ -6,12 +6,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 {
@@ -46,8 +46,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;
@@ -61,10 +61,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;

package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css

@@ -1,11 +1,11 @@
 .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;
@@ -21,9 +21,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);

package/dist/esm/components/molecules/DayPicker/DayPicker.css

@@ -11,16 +11,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 {
@@ -28,17 +28,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);

package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css

@@ -11,16 +11,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 {
@@ -28,17 +28,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);
 }

package/dist/esm/components/molecules/MoneyField/MoneyField.css

@@ -1,5 +1,5 @@
 .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%;

package/dist/esm/components/molecules/MonthPicker/MonthPicker.css

@@ -5,8 +5,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 {
@@ -15,8 +15,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 {

package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.css

@@ -6,9 +6,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 {

package/dist/esm/components/molecules/NumberField/NumberField.css

@@ -1,5 +1,5 @@
 .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%;

package/dist/esm/components/molecules/Pagination/Pagination.css

@@ -5,15 +5,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);
@@ -21,10 +21,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);
@@ -36,10 +36,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);
@@ -51,10 +51,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);

package/dist/esm/components/molecules/PasswordField/PasswordField.css

@@ -1,12 +1,12 @@
 .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;
 }

package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css

@@ -1,6 +1,6 @@
 .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;
@@ -20,14 +20,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);