@rolster/react-components 18.21.23 → 18.21.25

package/dist/cjs/assets/{index-R-vkwGLv.css → index-yC2kyFNJ.css}

@@ -1,29 +1,30 @@
 .rls-tabular-text {
   display: flex;
   width: auto;
-  justify-content: var(--rlc-tabulartext-text-align);
+  justify-content: var(--rlc-tabulartext-text-align, flex-start);
 }
 .rls-tabular-text span {
-  font-size: var(--rlc-tabulartext-font-size);
+  font-size: var(--rlc-tabulartext-font-size, var(--rls-body-font-size));
 }
 .rls-tabular-text__char {
   display: block;
   text-align: center;
-  width: var(--rlc-tabulartext-char-width);
+  width: var(--rlc-tabulartext-char-width, 5.5rem);
 }
 .rls-tabular-text__pointer {
   display: block;
   text-align: center;
-  width: var(--rlc-tabulartext-pointer-width);
+  width: var(--rlc-tabulartext-pointer-width, 2rem);
 }
 
 .rls-amount {
-  --rlc-tabulartext-font-size: var(--rlc-amount-font-size);
+  --pvt-font-size: var(--rlc-amount-font-size, inherit);
+  --rlc-tabulartext-font-size: var(--pvt-font-size);
   display: flex;
-  width: var(--rlc-amount-width);
-  justify-content: var(--rlc-amount-text-align);
+  width: var(--rlc-amount-width, auto);
+  justify-content: var(--rlc-amount-text-align, start);
   column-gap: var(--rls-sizing-x2);
-  font-size: var(--rlc-amount-font-size);
+  font-size: var(--pvt-font-size);
 }
 .rls-amount[rls-theme] {
   color: var(--rls-theme-color-500);
@@ -34,12 +35,12 @@
   display: flex;
   justify-content: center;
   overflow: hidden;
-  font-size: var(--rlc-avatar-font-size);
-  width: var(--rlc-avatar-width);
-  height: var(--rlc-avatar-height);
+  font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
+  width: var(--rlc-avatar-width, var(--rls-sizing-x24));
+  height: var(--rlc-avatar-height, var(--rls-sizing-x24));
   background: var(--rls-theme-gradient-500);
-  color: var(--rls-theme-font-500);
-  border-radius: var(--rlc-avatar-border-radius);
+  color: var(--rls-theme-color-050);
+  border-radius: var(--rlc-avatar-radius, var(--rls-sizing-x4));
 }
 .rls-avatar--skeleton {
   background: var(--rls-theme-color-200);
@@ -59,7 +60,7 @@
   position: relative;
   display: inline-block;
   width: auto;
-  padding: var(--rlc-badge-padding);
+  padding: var(--rlc-badge-padding, var(--rls-sizing-x2));
   box-sizing: border-box;
   font-size: var(--rls-caption-font-size);
   letter-spacing: var(--rls-caption-letter-spacing);
@@ -75,11 +76,12 @@
 }
 
 .rls-breadcrumb {
+  --pvt-height: var(--rlc-breadcrumb-height, var(--rls-sizing-x18));
   --pvt-link-font-color: var(--rls-app-color-600);
   display: -webkit-box;
   width: 100%;
-  height: var(--rlc-breadcrumb-height);
-  line-height: var(--rlc-breadcrumb-height);
+  height: var(--pvt-height);
+  line-height: var(--pvt-height);
   padding: 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
   user-select: none;
@@ -134,12 +136,13 @@
 }
 
 .rls-icon {
+  --pvt-icon-dimension: var(--rlc-icon-dimension, var(--rls-sizing-x12));
   --pvt-icon-display: block;
   position: relative;
-  font-size: var(--rlc-icon-dimesion);
-  width: var(--rlc-icon-dimesion);
-  height: var(--rlc-icon-dimesion);
-  line-height: var(--rlc-icon-dimesion);
+  font-size: var(--pvt-icon-dimesion);
+  width: var(--pvt-icon-dimesion);
+  height: var(--pvt-icon-dimesion);
+  line-height: var(--pvt-icon-dimesion);
 }
 .rls-icon--skeleton {
   --pvt-icon-display: none;
@@ -148,7 +151,7 @@
 }
 .rls-icon > i {
   display: var(--pvt-icon-display);
-  color: var(--rlc-icon-color);
+  color: var(--rlc-icon-color, inherit);
   width: 100%;
   height: 100%;
   line-height: inherit;
@@ -166,22 +169,22 @@
   --pvt-classic-font-color: var(--rls-app-color-500);
   --pvt-classic-border: none;
   --pvt-raised-background: var(--rls-theme-color-500);
-  --pvt-raised-font-color: var(--rls-theme-font-500);
+  --pvt-raised-font-color: var(--rls-theme-color-050);
   --pvt-raised-border: none;
   --pvt-flat-background: var(--rls-theme-color-200);
   --pvt-flat-font-color: var(--rls-theme-color-700);
   --pvt-flat-border: none;
   --pvt-stroked-background: transparent;
   --pvt-stroked-font-color: var(--rls-theme-color-500);
-  --pvt-stroked-border: var(--rls-theme-border-1-500);
+  --pvt-stroked-border: var(--rls-theme-border-2-500);
   --pvt-outline-background: transparent;
   --pvt-outline-font-color: var(--rls-app-color-600);
-  --pvt-outline-border: var(--rls-app-border-1-300);
+  --pvt-outline-border: var(--rls-app-border-2-300);
   --pvt-ghost-background: none;
   --pvt-ghost-font-color: var(--rls-theme-color-500);
   --pvt-ghost-border: none;
   --pvt-gradient-background: var(--rls-theme-gradient-500);
-  --pvt-gradient-font-color: var(--rls-theme-font-500);
+  --pvt-gradient-font-color: var(--rls-theme-color-050);
   --pvt-gradient-border: none;
   position: relative;
   padding: 0rem;
@@ -208,10 +211,10 @@
   --pvt-flat-border: none;
   --pvt-stroked-background: var(--rls-theme-color-100);
   --pvt-stroked-font-color: var(--rls-theme-color-700);
-  --pvt-stroked-border: var(--rls-theme-border-1-700);
+  --pvt-stroked-border: var(--rls-theme-border-2-700);
   --pvt-outline-background: transparent;
   --pvt-outline-font-color: var(--rls-theme-color-500);
-  --pvt-outline-border: var(--rls-theme-border-1-500);
+  --pvt-outline-border: var(--rls-theme-border-2-500);
   --pvt-ghost-background: var(--rls-theme-color-200);
   --pvt-ghost-font-color: var(--rls-theme-font-100);
   --pvt-ghost-border: none;
@@ -231,10 +234,10 @@
   --pvt-flat-border: none;
   --pvt-stroked-background: transparent;
   --pvt-stroked-font-color: var(--rls-theme-color-300);
-  --pvt-stroked-border: var(--rls-theme-border-1-300);
+  --pvt-stroked-border: var(--rls-theme-border-2-300);
   --pvt-outline-background: transparent;
   --pvt-outline-font-color: var(--rls-app-color-400);
-  --pvt-outline-border: var(--rls-app-border-1-100);
+  --pvt-outline-border: var(--rls-app-border-2-100);
   --pvt-ghost-background: transparent;
   --pvt-ghost-font-color: var(--rls-theme-color-300);
   --pvt-ghost-border: none;
@@ -250,9 +253,9 @@
   overflow: hidden;
   line-height: var(--rls-sizing-x20);
   height: var(--rls-sizing-x20);
-  padding: var(--rlc-button-content-padding);
+  padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x4));
   box-sizing: border-box;
-  border-radius: var(--rlc-button-content-radius);
+  border-radius: var(--rlc-button-content-radius, var(--rls-sizing-x2));
   color: var(--pvt-button-content-font-color);
   border: var(--pvt-button-content-border);
   background: var(--pvt-button-content-background);
@@ -321,7 +324,7 @@
   font-size: var(--rls-button-font-size);
   font-weight: var(--rls-font-weight-bold);
   letter-spacing: var(--rls-button-letter-spacing);
-  text-transform: var(--rlc-button-label-text-transform);
+  text-transform: var(--rlc-button-label-text-transform, uppercase);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -345,6 +348,12 @@
 }
 
 .rls-button-action {
+  --pvt-ripple-dimension: var(
+    --rlc-action-ripple-dimension,
+    var(--rls-sizing-x18)
+  );
+  --pvt-ripple-position: var(--rlc-action-ripple-position, -9rem);
+  --pvt-ripple-color: var(--rlc-action-ripple-color, var(--rls-app-color-600));
   --pvt-tooltip-transition-delay: 0ms;
   --pvt-tooltip-opacity: 0;
   position: relative;
@@ -357,7 +366,7 @@
   user-select: none;
   cursor: default;
   background: transparent;
-  color: var(--rlc-action-color);
+  color: var(--rlc-action-color, var(--rls-app-color-600));
 }
 .rls-button-action::before {
   position: absolute;
@@ -369,7 +378,7 @@
   visibility: hidden;
   border-radius: 50%;
   transform: scale(0);
-  background: var(--rlc-action-ripple-color);
+  background: var(--pvt-ripple-color);
   padding-top: calc(120% - var(--rls-sizing-x4));
   padding-left: calc(120% - var(--rls-sizing-x4));
   margin-top: calc(-60% + var(--rls-sizing-x2));
@@ -387,12 +396,12 @@
   top: 50%;
   left: 50%;
   opacity: 0.24;
-  width: var(--rlc-action-ripple-dimension);
-  height: var(--rlc-action-ripple-dimension);
-  margin-top: var(--rlc-action-ripple-position);
-  margin-left: var(--rlc-action-ripple-position);
+  width: var(--pvt-ripple-dimension);
+  height: var(--pvt-ripple-dimension);
+  margin-top: var(--pvt-ripple-position);
+  margin-left: var(--pvt-ripple-position);
   border-radius: 50%;
-  background: var(--rlc-action-ripple-color);
+  background: var(--pvt-ripple-color);
   transform: scale(0);
   transition: transform 160ms 0ms var(--rls-sharp-curve);
 }
@@ -439,23 +448,30 @@
 }
 
 .rls-checkbox {
+  --pvt-dimension: var(--rlc-checkbox-dimension, var(--rls-sizing-x12));
+  --pvt-component-dimension: var(
+    --rlc-checkbox-children-dimension,
+    var(--rls-sizing-x6)
+  );
+  --pvt-component-border-color: var(--rls-app-color-500);
   --pvt-component-transform: scale(0);
   position: relative;
   display: flex;
-  width: var(--rlc-checkbox-dimension);
-  height: var(--rlc-checkbox-dimension);
+  width: var(--pvt-dimension);
+  height: var(--pvt-dimension);
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   outline: none;
-  border-radius: var(--rls-sizing-x2);
-  background: var(--rls-app-color-050);
-  box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
+  border-radius: var(--rls-sizing-x3);
+  background: var(--rls-theme-color-050);
+  border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
 }
 .rls-checkbox:hover {
   cursor: pointer;
 }
 .rls-checkbox--checked {
+  --pvt-component-border-color: var(--rls-theme-color-500);
   --pvt-component-transform: scale(1);
 }
 .rls-checkbox--disabled {
@@ -463,24 +479,32 @@
   pointer-events: none;
 }
 .rls-checkbox__component {
-  width: var(--rlc-checkbox-children-dimension);
-  height: var(--rlc-checkbox-children-dimension);
+  width: var(--pvt-component-dimension);
+  height: var(--pvt-component-dimension);
   border-radius: var(--rls-sizing-x1);
-  background: var(--rls-theme-gradient-500);
+  background: var(--rls-theme-color-500);
   transform: var(--pvt-component-transform);
   transform-origin: 50% 50%;
   transition: all 160ms 0ms var(--rls-standard-curve);
 }
 
 .rls-input {
-  --pvt-value-font-color: var(--rlc-input-font-color);
+  --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
+  --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-input-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
+  --pvt-text-align: var(--rlc-input-text-align, left);
+  --pvt-value-font-color: var(--pvt-font-color);
   --pvt-value-opacity: 1;
   --pvt-component-font-color: transparent;
   position: relative;
   width: 100%;
 }
 .rls-input--focused {
-  --pvt-component-font-color: var(--rlc-input-font-color);
+  --pvt-component-font-color: var(--pvt-font-color);
   --pvt-value-font-color: transparent;
 }
 .rls-input--disabled {
@@ -489,8 +513,8 @@
 .rls-input__component {
   position: relative;
   width: 100%;
-  height: var(--rlc-input-height);
-  line-height: var(--rlc-input-height);
+  height: var(--pvt-height);
+  line-height: var(--pvt-height);
   padding: 0rem;
   cursor: text;
   border: none;
@@ -498,9 +522,9 @@
   background: transparent;
   color: var(--pvt-component-font-color);
   font-weight: var(--rls-font-weight-medium);
-  font-size: var(--rlc-input-font-size);
-  text-align: var(--rlc-input-text-align);
-  letter-spacing: var(--rlc-input-letter-spacing);
+  font-size: var(--pvt-font-size);
+  text-align: var(--pvt-text-align);
+  letter-spacing: var(--pvt-letter-spacing);
 }
 .rls-input__component::-webkit-outer-spin-button,
 .rls-input__component::-webkit-inner-spin-button {
@@ -522,8 +546,8 @@
   top: 0rem;
   left: 0rem;
   width: 100%;
-  height: var(--rlc-input-height);
-  line-height: var(--rlc-input-height);
+  height: var(--pvt-height);
+  line-height: var(--pvt-height);
   background: transparent;
   pointer-events: none;
   overflow: hidden;
@@ -531,9 +555,9 @@
   opacity: var(--pvt-value-opacity);
   color: var(--pvt-value-font-color);
   font-weight: var(--rls-font-weight-medium);
-  font-size: var(--rlc-input-font-size);
-  text-align: var(--rlc-input-text-align);
-  letter-spacing: var(--rlc-input-letter-spacing);
+  font-size: var(--pvt-font-size);
+  text-align: var(--pvt-text-align);
+  letter-spacing: var(--pvt-letter-spacing);
 }
 
 .rls-input-money {
@@ -594,7 +618,7 @@
   align-items: center;
   padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
   box-sizing: border-box;
-  background: var(--rls-app-color-100);
+  background: var(rlc-input-search-background, var(--rls-app-color-100));
   border-radius: var(--rls-sizing-x4);
 }
 
@@ -605,9 +629,12 @@
 }
 
 .rls-label {
-  font-size: var(--rlc-label-font-size);
-  letter-spacing: var(--rlc-label-letter-spacing);
-  line-height: var(--rlc-label-height);
+  font-size: var(--rlc-label-font-size, var(--rls-smalltext-font-size));
+  letter-spacing: var(
+    --rlc-label-letter-spacing,
+    var(--rls-smalltext-letter-spacing)
+  );
+  line-height: var(--rlc-label-height, var(--rls-smalltext-line-height));
   font-weight: inherit;
 }
 .rls-label[rls-theme] {
@@ -629,18 +656,22 @@
 
 .rls-poster {
   --pvt-background: var(--rls-theme-color-100);
+  --pvt-height: var(--rlc-poster-height, var(--rls-body-line-height));
   --pvt-border-content: none;
   --pvt-border-color: var(--rls-app-color-400);
   position: relative;
   display: block;
   width: auto;
   font-weight: inherit;
-  font-size: var(--rlc-poster-font-size);
-  letter-spacing: var(--rlc-poster-letter-spacing);
-  height: var(--rlc-poster-height);
-  line-height: var(--rlc-poster-height);
-  padding: var(--rlc-poster-padding);
-  text-align: var(--rlc-poster-text-align);
+  font-size: var(--rlc-poster-font-size, var(--rls-body-font-size));
+  letter-spacing: var(
+    --rlc-poster-letter-spacing,
+    var(--rls-body-letter-spacing)
+  );
+  height: var(--pvt-height);
+  line-height: var(--pvt-height);
+  padding: var(--rlc-poster-padding, var(--rls-sizing-x4));
+  text-align: var(--rlc-poster-text-align, center);
   border-radius: var(--rls-sizing-x2);
   color: var(--rls-app-color-600);
   background: var(--rls-app-color-200);
@@ -728,9 +759,13 @@
 }
 
 .rls-progress-circular {
+  --pvt-dimension: var(
+    --rlc-progress-circular-dimension,
+    var(--rls-sizing-x28)
+  );
   position: relative;
-  width: var(--rlc-progress-circular-dimension);
-  height: var(--rlc-progress-circular-dimension);
+  width: var(--pvt-dimension);
+  height: var(--pvt-dimension);
   padding: var(--rls-sizing-x2);
   box-sizing: border-box;
   stroke: var(--rls-theme-color-500);
@@ -773,23 +808,30 @@
 }
 
 .rls-radiobutton {
+  --pvt-dimension: var(--rlc-radiobutton-dimension, var(--rls-sizing-x12));
+  --pvt-component-dimension: var(
+    --rlc-radiobutton-children-dimension,
+    var(--rls-sizing-x6)
+  );
+  --pvt-component-border-color: var(--rls-app-color-500);
   --pvt-component-transform: scale(0);
   position: relative;
   display: flex;
-  width: var(--rlc-radiobutton-dimension);
-  height: var(--rlc-radiobutton-dimension);
+  width: var(--pvt-dimension);
+  height: var(--pvt-dimension);
   justify-content: center;
   align-items: center;
   outline: none;
   border-radius: 50%;
   box-sizing: border-box;
-  background: var(--rls-app-color-050);
-  box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
+  background: var(--rls-theme-color-050);
+  border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
 }
 .rls-radiobutton:hover {
   cursor: pointer;
 }
 .rls-radiobutton--checked {
+  --pvt-component-border-color: var(--rls-theme-color-500);
   --pvt-component-transform: scale(1);
 }
 .rls-radiobutton--disabled {
@@ -797,22 +839,25 @@
   pointer-events: none;
 }
 .rls-radiobutton__component {
-  width: var(--rlc-radiobutton-children-dimension);
-  height: varr(--rlc-radiobutton-children-dimension);
+  width: var(--pvt-component-dimension);
+  height: var(--pvt-component-dimension);
   border-radius: 50%;
-  background: var(--rls-theme-gradient-500);
+  background: var(--rls-theme-color-500);
   transform: var(--pvt-component-transform);
   transform-origin: 50% 50%;
   transition: all 160ms 0ms var(--rls-standard-curve);
 }
 
 .rls-skeleton {
+  --pvt-height: var(--rlc-skeleton-height, inherit);
+  --pvt-max-height: var(--rlc-skeleton-max-height, inherit);
+  --pvt-min-height: var(--rlc-skeleton-min-height, inherit);
   position: relative;
   width: 100%;
-  max-height: inherit;
-  min-height: inherit;
-  height: inherit;
-  line-height: inherit;
+  max-height: var(--pvt-max-height);
+  min-height: var(--pvt-min-height);
+  height: var(--pvt-height);
+  line-height: var(--pvt-height);
   letter-spacing: inherit;
   overflow: hidden;
   background: var(--rls-theme-color-100);
@@ -843,18 +888,22 @@
 }
 
 .rls-skeleton-text {
-  --rlc-skeleton-height: var(--rlc-skeleton-text-height);
+  --pvt-height: var(--rlc-skeleton-text-height, var(--rls-body-line-height));
+  --rlc-skeleton-height: var(--pvt-height);
   position: relative;
   display: block;
   overflow: inherit;
   font-weight: inherit;
-  font-size: var(--rlc-skeleton-text-font-size);
-  letter-spacing: var(--rlc-skeleton-text-letter-spacing);
-  line-height: var(--rlc-skeleton-text-height);
+  font-size: var(--rlc-skeleton-text-font-size, var(--rls-body-font-size));
+  letter-spacing: var(
+    --rlc-skeleton-text-letter-spacing,
+    var(--rls-body-letter-spacing)
+  );
+  line-height: var(--pvt-height);
 }
 .rls-skeleton-text__value {
   display: flex;
-  column-gap: var(--rlc-skeleton-text-column-gap);
+  column-gap: var(--rlc-skeleton-text-column-gap, var(--rls-sizing-x4));
   align-items: center;
   font-weight: inherit;
   font-size: inherit;
@@ -869,19 +918,24 @@
 }
 
 .rls-switch {
+  --pvt-element-size: var(--rlc-switch-element-size, var(--rls-sizing-x10));
   --pvt-element-left: var(--rls-sizing-x1);
+  --pvt-element-border-color: var(--rls-app-color-400);
   --pvt-element-background: var(--rls-app-color-050);
-  --pvt-bar-background: var(--rls-app-color-200);
-  max-width: var(--rlc-switch-max-width);
+  --pvt-element-item-background: transparent;
+  --pvt-bar-background: var(--rls-app-color-300);
+  max-width: var(--rlc-switch-max-width, var(--rls-sizing-x18));
 }
 .rls-switch:hover {
   cursor: pointer;
 }
 .rls-switch--checked {
-  --pvt-element-background: var(--rls-theme-gradient-500);
   --pvt-element-left: calc(
-    100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
+    100% - var(--pvt-element-size) - var(--rls-sizing-x1)
   );
+  --pvt-element-border-color: var(--rls-theme-color-500);
+  --pvt-element-background: var(--rls-theme-color-050);
+  --pvt-element-item-background: var(--rls-theme-color-500);
   --pvt-bar-background: var(--rls-theme-color-300);
 }
 .rls-switch--disabled {
@@ -898,15 +952,15 @@
   position: absolute;
   top: 0rem;
   left: var(--pvt-element-left);
-  width: var(--rlc-switch-element-size);
-  height: var(--rlc-switch-element-size);
+  width: var(--pvt-element-size);
+  height: var(--pvt-element-size);
   z-index: var(--rls-z-index-2);
   padding: var(--rls-sizing-x2);
   box-sizing: border-box;
   border-radius: 50%;
-  background: var(--rls-app-color-050);
-  box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
-  /*transition: left 240ms var(--rls-standard-curve);*/
+  background: var(--pvt-element-background);
+  border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
+  transition: left 240ms var(--rls-standard-curve);
 }
 .rls-switch__component__element::before {
   display: block;
@@ -914,13 +968,13 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: var(--pvt-element-background);
+  background: var(--pvt-element-item-background);
 }
 .rls-switch__component__bar {
   background: var(--pvt-bar-background);
   width: 100%;
-  height: var(--rlc-switch-bar-height);
-  border-radius: var(--rlc-switch-bar-radius);
+  height: var(--rlc-switch-bar-height, var(--rls-sizing-x4));
+  border-radius: var(--rlc-switch-bar-radius, var(--rls-sizing-x2));
 }
 
 .rls-alert {
@@ -956,12 +1010,32 @@
 .rls-ballot {
   --rlc-avatar-width: var(--rls-sizing-x20);
   --rlc-avatar-height: var(--rls-sizing-x20);
+  --pvt-title-letter-spacing: var(
+    --rlc-ballot-title-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
+  --pvt-title-font-size: var(
+    --rlc-ballot-title-font-size,
+    var(--rls-label-font-size)
+  );
+  --pvt-title-height: var(
+    --rlc-ballot-title-height,
+    var(--rls-label-line-height)
+  );
+  --pvt-subtitle-letter-spacing: var(
+    --rlc-ballot-subtitle-letter-spacing,
+    var(--rls-smalltext-letter-spacing)
+  );
+  --pvt-subtitle-height: var(
+    --rlc-ballot-subtitle-height,
+    var(--rls-smalltext-line-height)
+  );
   position: relative;
   display: flex;
   width: 100%;
   align-items: center;
   column-gap: var(--rls-sizing-x4);
-  padding: var(--rlc-ballot-padding);
+  padding: var(--rlc-ballot-padding, var(--rls-sizing-x4));
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -976,42 +1050,51 @@
   display: flex;
   overflow: hidden;
   flex-direction: column;
-  row-gap: var(--rlc-ballot-component-row-gap);
+  row-gap: var(--rlc-ballot-component-row-gap, var(--rls-sizing-x2));
 }
 .rls-ballot .rls-avatar + .rls-ballot__component {
   width: calc(100% - var(--rlc-avatar-width) - var(--rls-sizing-x4));
 }
 .rls-ballot__title {
-  --rlc-skeleton-text-height: var(--rlc-ballot-title-height);
-  --rlc-skeleton-text-letter-spacing: var(--rlc-ballot-title-letter-spacing);
-  --rlc-skeleton-text-font-size: var(--rlc-ballot-title-font-size);
+  --rlc-skeleton-text-height: var(--pvt-title-height);
+  --rlc-skeleton-text-letter-spacing: var(--pvt-title-letter-spacing);
+  --rlc-skeleton-text-font-size: var(--pvt-title-font-size);
   position: relative;
   width: 100%;
   color: var(--rls-app-color-900);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-weight: var(--rlc-ballot-title-font-weight);
-  font-size: var(--rlc-ballot-title-font-size);
-  letter-spacing: var(--rlc-ballot-title-letter-spacing);
-  min-height: var(--rlc-ballot-title-height);
-  line-height: var(--rlc-ballot-title-height);
+  font-weight: var(
+    --rlc-ballot-title-font-weight,
+    var(--rls-font-weight-medium)
+  );
+  font-size: var(--pvt-title-font-size);
+  letter-spacing: var(--pvt-title-letter-spacing);
+  min-height: var(--pvt-title-height);
+  line-height: var(--pvt-title-height);
 }
 .rls-ballot__subtitle {
-  --rlc-skeleton-text-height: var(--rlc-ballot-subtitle-height);
-  --rlc-skeleton-text-letter-spacing: var(--rlc-ballot-subtitle-letter-spacing);
-  --rlc-skeleton-text-font-size: var(--rlc-ballot-subtitle-font-size);
+  --rlc-skeleton-text-height: var(--pvt-subtitle-height);
+  --rlc-skeleton-text-letter-spacing: var(--pvt-subtitle-letter-spacing);
+  --rlc-skeleton-text-font-size: var(
+    --rlc-ballot-subtitle-font-size,
+    var(--rls-smalltext-font-size)
+  );
   position: relative;
-  width: var(--rlc-ballot-subtitle-width);
+  width: var(--rlc-ballot-subtitle-width, 100%);
   color: var(--rls-app-color-600);
-  font-weight: var(--rlc-ballot-subtitle-font-weight);
+  font-weight: var(
+    --rlc-ballot-subtitle-font-weight,
+    var(--rls-font-weight-semibold)
+  );
   font-size: var(--rls-ballot-subtitle-font-size);
-  letter-spacing: var(--rlc-ballot-subtitle-letter-spacing);
-  min-height: var(--rlc-ballot-subtitle-height);
-  line-height: var(--rlc-ballot-subtitle-height);
-  overflow: var(--rlc-ballot-subtitle-overflow);
-  text-overflow: var(--rlc-ballot-subtitle-text-overflow);
-  white-space: var(--rlc-ballot-subtitle-white-space);
+  letter-spacing: var(--pvt-subtitle-letter-spacing);
+  min-height: var(--pvt-subtitle-height);
+  line-height: var(--pvt-subtitle-height);
+  overflow: var(--rlc-ballot-subtitle-overflow, initial);
+  text-overflow: var(--rlc-ballot-subtitle-text-overflow, initial);
+  white-space: var(--rlc-ballot-subtitle-white-space, initial);
 }
 
 .rls-button-progress {
@@ -1393,7 +1476,7 @@
 }
 .rls-picker-day__element--focused {
   --pvt-span-background: var(--rls-theme-color-500);
-  --pvt-span-font-color: var(--rls-theme-font-500);
+  --pvt-span-font-color: var(--rls-theme-color-050);
   --pvt-span-border: var(--rls-theme-border-1-500);
 }
 .rls-picker-day__element--forbidden {
@@ -1531,7 +1614,7 @@
 }
 .rls-picker-month__component--focused {
   --pvt-component-background: var(--rls-theme-color-500);
-  --pvt-component-font-color: var(--rls-theme-font-500);
+  --pvt-component-font-color: var(--rls-theme-color-050);
   --pvt-component-border: var(--rls-theme-border-1-500);
 }
 .rls-picker-month__component--disabled {
@@ -1644,7 +1727,7 @@
 }
 .rls-picker-year__element--focused {
   --pvt-component-background: var(--rls-theme-color-500);
-  --pvt-component-font-color: var(--rls-theme-font-500);
+  --pvt-component-font-color: var(--rls-theme-color-050);
   --pvt-component-border: var(--rls-theme-border-1-500);
 }
 .rls-picker-year__element--disabled {
@@ -1666,7 +1749,7 @@
   justify-content: space-between;
   align-items: center;
   column-gap: var(--rls-sizing-x6);
-  height: var(--rlc-toolbar-height);
+  height: var(--rlc-toolbar-height, var(--rls-sizing-x28));
 }
 .rls-toolbar > * {
   width: auto;
@@ -1714,7 +1797,7 @@
 .rls-card__content {
   display: flex;
   flex-direction: column;
-  padding: var(--rlc-card-content-padding);
+  padding: var(--rlc-card-content-padding, var(--rls-sizing-x8));
   box-sizing: border-box;
 }
 
@@ -2291,7 +2374,7 @@
   display: flex;
   column-gap: var(--rls-sizing-x6);
   bottom: 0rem;
-  left: var(--rlc-snackbar-left);
+  left: var(--rlc-snackbar-left, 50%);
   z-index: 32;
   width: auto;
   height: auto;