@rolster/react-components 18.21.15 → 18.21.18

package/dist/cjs/assets/{index-ogdfILLi.css → index-8PgjMh4T.css}

@@ -75,7 +75,7 @@
 }
 
 .rls-breadcrumb {
-  --pvt-link-font-color: var(--rls-app-color-300);
+  --pvt-link-font-color: var(--rls-app-color-600);
   display: -webkit-box;
   width: 100%;
   height: var(--rlc-breadcrumb-height);
@@ -85,7 +85,7 @@
   user-select: none;
   overflow: auto;
   overflow-y: hidden;
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   font-weight: var(--rls-font-weight-medium);
 }
 .rls-breadcrumb::-webkit-scrollbar {
@@ -172,7 +172,7 @@
   --pvt-stroked-font-color: var(--rls-theme-color-500);
   --pvt-stroked-border: var(--rls-theme-border-1-500);
   --pvt-outline-background: transparent;
-  --pvt-outline-font-color: var(--rls-app-color-300);
+  --pvt-outline-font-color: var(--rls-app-color-600);
   --pvt-outline-border: var(--rls-app-border-1-300);
   --pvt-ghost-background: none;
   --pvt-ghost-font-color: var(--rls-theme-color-500);
@@ -224,7 +224,7 @@
   --pvt-stroked-font-color: var(--rls-theme-color-300);
   --pvt-stroked-border: var(--rls-theme-border-1-300);
   --pvt-outline-background: transparent;
-  --pvt-outline-font-color: var(--rls-app-color-100);
+  --pvt-outline-font-color: var(--rls-app-color-400);
   --pvt-outline-border: var(--rls-app-border-1-100);
   --pvt-ghost-background: transparent;
   --pvt-ghost-font-color: var(--rls-theme-color-300);
@@ -403,8 +403,8 @@
   white-space: nowrap;
   pointer-events: none;
   transform: translateX(-50%);
-  background: var(--rls-dark-color-500);
-  color: var(--rls-light-color-500);
+  background: var(--rls-app-color-900);
+  color: var(--rls-app-color-050);
   transition: opacity 200ms 0ms var(--rls-deceleration-curve);
   opacity: var(--pvt-tooltip-opacity);
   transition-delay: var(--pvt-tooltip-transition-delay);
@@ -493,11 +493,11 @@
   -webkit-appearance: none;
 }
 .rls-input__component::placeholder {
-  color: var(--rls-app-color-100);
+  color: var(--rls-app-color-400);
 }
 .rls-input__component::selection {
   background: var(--rls-theme-color-700);
-  color: var(--rls-light-color-500);
+  color: var(--rls-app-color-050);
 }
 .rls-input__component:disabled {
   opacity: 0.5;
@@ -562,11 +562,11 @@
   -webkit-appearance: none;
 }
 .rls-input-password__component::placeholder {
-  color: var(--rls-app-color-100);
+  color: var(--rls-app-color-400);
 }
 .rls-input-password__component::selection {
   background: var(--rls-theme-color-700);
-  color: var(--rls-light-color-500);
+  color: var(--rls-app-color-050);
 }
 .rls-input-password__component:disabled {
   opacity: 0.5;
@@ -609,13 +609,13 @@
 .rls-message-icon span {
   font-size: var(--rls-caption-font-size);
   letter-spacing: var(--rls-caption-letter-spacing);
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
 }
 
 .rls-poster {
   --pvt-background: var(--rls-theme-color-100);
   --pvt-border-content: none;
-  --pvt-border-color: var(--rls-app-color-100);
+  --pvt-border-color: var(--rls-app-color-400);
   position: relative;
   display: block;
   width: auto;
@@ -627,8 +627,8 @@
   padding: var(--rlc-poster-padding);
   text-align: var(--rlc-poster-text-align);
   border-radius: var(--rls-sizing-x2);
-  color: var(--rls-app-color-300);
-  background: var(--rls-app-background-100);
+  color: var(--rls-app-color-600);
+  background: var(--rls-app-color-200);
   border: var(--pvt-border-content);
 }
 .rls-poster[rls-theme] {
@@ -854,8 +854,8 @@
 
 .rls-switch {
   --pvt-element-left: var(--rls-sizing-x1);
-  --pvt-element-background: var(--rls-app-background-500);
-  --pvt-bar-background: var(--rls-app-background-100);
+  --pvt-element-background: var(--rls-app-color-050);
+  --pvt-bar-background: var(--rls-app-color-200);
   max-width: var(--rls-sizing-x20);
 }
 .rls-switch:hover {
@@ -888,7 +888,7 @@
   padding: var(--rls-sizing-x2);
   box-sizing: border-box;
   border-radius: 50%;
-  background: var(--rls-app-background-500);
+  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);*/
 }
@@ -971,7 +971,7 @@
   --rlc-skeleton-text-font-size: var(--rlc-ballot-title-font-size);
   position: relative;
   width: 100%;
-  color: var(--rls-app-color-500);
+  color: var(--rls-app-color-900);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -987,7 +987,7 @@
   --rlc-skeleton-text-font-size: var(--rlc-ballot-subtitle-font-size);
   position: relative;
   width: var(--rlc-ballot-subtitle-width);
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   font-weight: var(--rlc-ballot-subtitle-font-weight);
   font-size: var(--rls-ballot-subtitle-font-size);
   letter-spacing: var(--rlc-ballot-subtitle-letter-spacing);
@@ -1062,7 +1062,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   z-index: var(--rls-z-index-2);
-  background: var(--rls-app-background-500);
+  background: var(--rls-app-color-050);
   border: var(--rls-theme-border-1-500);
   transform: var(--rlc-button-toggle-ul-transform);
   transform-origin: 0% 0%;
@@ -1080,29 +1080,29 @@
   font-size: 6rem;
   letter-spacing: 0.825px;
   text-transform: uppercase;
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
 }
 .rls-button-toggle__list ul li:hover {
-  background: var(--rls-app-background-300);
-  color: var(--rls-app-color-500);
+  background: var(--rls-app-color-100);
+  color: var(--rls-app-color-900);
 }
 
 .rls-field-money {
-  --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
   position: relative;
   width: 100%;
   box-sizing: border-box;
 }
 
 .rls-field-number {
-  --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
   position: relative;
   width: 100%;
   box-sizing: border-box;
 }
 
 .rls-field-password {
-  --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
   --rlc-action-ripple-dimension: var(--rls-sizing-x12);
   --rlc-action-ripple-position: -6rem;
   position: relative;
@@ -1117,7 +1117,7 @@
 }
 
 .rls-field-readonly {
-  --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
   --pvt-component-font-color: var(--rlc-input-font-color);
   position: relative;
   width: 100%;
@@ -1125,7 +1125,7 @@
 }
 
 .rls-field-text {
-  --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
   position: relative;
   width: 100%;
   box-sizing: border-box;
@@ -1157,7 +1157,7 @@
   max-width: calc(100% - var(--rls-sizing-x16));
   height: var(--pvt-text-height);
   line-height: var(--rls-sizing-x12);
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
@@ -1196,7 +1196,7 @@
   max-width: calc(100% - var(--rls-sizing-x16));
   height: var(--pvt-text-height);
   line-height: var(--rls-sizing-x12);
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
@@ -1233,7 +1233,7 @@
   max-width: calc(100% - var(--rls-sizing-x28));
   height: var(--pvt-text-height);
   line-height: var(--rls-sizing-x12);
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
@@ -1261,8 +1261,8 @@
   margin: 0rem var(--rls-sizing-x4);
 }
 .rls-pagination__page {
-  background: var(--rls-app-background-100);
-  color: var(--rls-app-color-500);
+  background: var(--rls-app-color-200);
+  color: var(--rls-app-color-900);
   cursor: default;
   margin: auto 0rem;
   text-align: center;
@@ -1279,10 +1279,10 @@
 }
 .rls-pagination__page--active {
   background: var(--rls-theme-gradient-500);
-  color: var(--rls-light-color-500);
+  color: var(--rls-app-color-050);
 }
 .rls-pagination__description {
-  color: var(--rls-app-color-500);
+  color: var(--rls-app-color-900);
   margin: 0rem var(--rls-sizing-x4);
   width: auto;
   height: var(--rls-sizing-x20);
@@ -1297,7 +1297,7 @@
 .rls-pagination__action {
   background: none;
   outline: none;
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   height: var(--rls-sizing-x18);
   width: var(--rls-sizing-x18);
   padding: var(--rls-sizing-x3);
@@ -1314,7 +1314,7 @@
 
 .rls-picker-day {
   --pvt-span-background: transparent;
-  --pvt-span-font-color: var(--rls-app-color-500);
+  --pvt-span-font-color: var(--rls-app-color-900);
   --pvt-span-border: var(--rls-border-1) solid transparent;
   position: relative;
   width: 100%;
@@ -1325,8 +1325,8 @@
 .rls-picker-day__header {
   display: flex;
   margin-bottom: var(--rls-sizing-x4);
-  background: var(--rls-app-background-100);
-  color: var(--rls-app-color-500);
+  background: var(--rls-app-color-100);
+  color: var(--rls-app-color-900);
   border-radius: var(--rls-sizing-x4);
 }
 .rls-picker-day__label {
@@ -1381,14 +1381,14 @@
   --pvt-span-border: var(--rls-theme-border-1-500);
 }
 .rls-picker-day__element--forbidden {
-  --pvt-span-background: var(--rls-app-background-300);
-  --pvt-span-font-color: var(--rls-app-color-100);
-  --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
+  --pvt-span-background: var(--rls-app-color-100);
+  --pvt-span-font-color: var(--rls-app-color-400);
+  --pvt-span-border: var(--rls-border-1) solid var(--rls-app-color-100);
   pointer-events: none;
 }
 .rls-picker-day__element--disabled {
   --pvt-span-background: transparent;
-  --pvt-span-font-color: var(--rls-app-color-100);
+  --pvt-span-font-color: var(--rls-app-color-400);
   --pvt-span-border: var(--rls-border-1) solid transparent;
   pointer-events: none;
 }
@@ -1417,8 +1417,8 @@
 }
 .rls-picker-day-range__header {
   display: flex;
-  background: var(--rls-app-background-100);
-  color: var(--rls-app-color-500);
+  background: var(--rls-app-color-200);
+  color: var(--rls-app-color-900);
   border-radius: var(--rls-sizing-x2);
 }
 .rls-picker-day-range__label {
@@ -1439,7 +1439,7 @@
 .rls-picker-day-range__element__span {
   position: relative;
   display: block;
-  color: var(--rls-app-color-500);
+  color: var(--rls-app-color-900);
   border-radius: var(--rls-sizing-x4);
   height: var(--rls-sizing-x18);
   line-height: var(--rls-sizing-x18);
@@ -1452,22 +1452,22 @@
   color: var(--pvt-span-nothover-font-color);
 }
 .rls-picker-day-range__element__span:hover {
-  color: var(--rls-light-color-500);
+  color: var(--rls-app-color-050);
   background: var(--rls-theme-color-900);
 }
 .rls-picker-day-range__element--end {
-  --pvt-span-nothover-background: var(--rls-app-color-500);
-  --pvt-span-nothover-font-color: var(--rls-app-background-500);
+  --pvt-span-nothover-background: var(--rls-app-color-900);
+  --pvt-span-nothover-font-color: var(--rls-app-color-050);
 }
 .rls-picker-day-range__element--source {
   --pvt-span-nothover-background: var(--rls-theme-color-500);
-  --pvt-span-nothover-font-color: var(--rls-light-color-500);
+  --pvt-span-nothover-font-color: var(--rls-app-color-050);
 }
 .rls-picker-day-range__element--ranged {
   --pvt-span-nothover-background: var(--rls-theme-color-100);
 }
 .rls-picker-day-range__element--forbidden {
-  --pvt-span-background: var(--rls-app-background-100);
+  --pvt-span-background: var(--rls-app-color-200);
   pointer-events: none;
   opacity: 0.5;
 }
@@ -1478,7 +1478,7 @@
 
 .rls-picker-month {
   --pvt-component-background: transparent;
-  --pvt-component-font-color: var(--rls-app-color-500);
+  --pvt-component-font-color: var(--rls-app-color-900);
   --pvt-component-border: var(--rls-border-1) solid transparent;
   position: relative;
   display: grid;
@@ -1520,7 +1520,7 @@
 }
 .rls-picker-month__component--disabled {
   --pvt-component-background: transparent;
-  --pvt-component-font-color: var(--rls-app-color-100);
+  --pvt-component-font-color: var(--rls-app-color-400);
   --pvt-component-border: var(--rls-border-1) solid transparent;
   pointer-events: none;
 }
@@ -1538,7 +1538,7 @@
   align-items: center;
 }
 .rls-picker-selector-title span {
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   cursor: default;
   height: var(--rls-sizing-x14);
   line-height: var(--rls-sizing-x14);
@@ -1551,7 +1551,7 @@
 
 .rls-picker-year {
   --pvt-component-background: transparent;
-  --pvt-component-font-color: var(--rls-app-color-300);
+  --pvt-component-font-color: var(--rls-app-color-600);
   --pvt-component-border: var(--rls-border-1) solid transparent;
   position: relative;
   width: 100%;
@@ -1566,8 +1566,8 @@
   align-items: center;
   box-sizing: border-box;
   padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
-  color: var(--rls-app-color-500);
-  background: var(--rls-app-background-100);
+  color: var(--rls-app-color-900);
+  background: var(--rls-app-color-200);
   border-radius: var(--rls-sizing-x4);
 }
 .rls-picker-year__header > label {
@@ -1581,7 +1581,7 @@
   line-height: var(--rls-sizing-x16);
 }
 .rls-picker-year__action button {
-  color: var(--rls-app-color-500);
+  color: var(--rls-app-color-900);
   background: transparent;
   outline: none;
   width: inherit;
@@ -1632,9 +1632,9 @@
   --pvt-component-border: var(--rls-theme-border-1-500);
 }
 .rls-picker-year__element--disabled {
-  --pvt-span-background: var(--rls-app-background-300);
-  --pvt-component-font-color: var(--rls-app-color-100);
-  --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
+  --pvt-span-background: var(--rls-app-color-100);
+  --pvt-component-font-color: var(--rls-app-color-400);
+  --pvt-span-border: var(--rls-border-1) solid var(--rls-app-color-100);
   pointer-events: none;
 }
 .rls-picker-year__span {
@@ -1669,7 +1669,7 @@
   white-space: nowrap;
 }
 .rls-toolbar__title {
-  color: var(--rls-app-color-500);
+  color: var(--rls-app-color-900);
   height: var(--rls-sizing-x12);
   line-height: var(--rls-sizing-x12);
   font-size: 8.125rem;
@@ -1677,7 +1677,7 @@
   font-weight: var(--rls-font-weight-bold);
 }
 .rls-toolbar__subtitle {
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
 }
 .rls-toolbar__actions {
   display: flex;
@@ -1687,7 +1687,7 @@
 }
 
 .rls-card {
-  background: var(--rls-app-background-500);
+  background: var(--rls-app-color-050);
   border-radius: var(--rls-sizing-x4);
   box-shadow: var(--rls-light-shadow-center-8);
 }
@@ -1754,7 +1754,7 @@
   box-sizing: border-box;
   z-index: var(--rls-z-index-4);
   border-radius: var(--rls-sizing-x4);
-  background: var(--rls-app-background-500);
+  background: var(--rls-app-color-050);
   box-shadow: var(--rls-app-shadow-4);
   transform: var(--pvt-component-transform);
   /*transition: opacity 125ms 0ms var(--rls-deceleration-curve),
@@ -1772,7 +1772,7 @@
 }
 .rls-confirmation__title {
   text-align: center;
-  color: var(--rls-app-color-500);
+  color: var(--rls-app-color-900);
   font-weight: var(--rls-font-weight-bold);
   font-size: var(--pvt-title-font-size);
   line-height: var(--pvt-title-line-height);
@@ -1795,7 +1795,7 @@
   box-sizing: border-box;
 }
 .rls-confirmation__message {
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   text-align: center;
 }
 .rls-confirmation__message p {
@@ -1858,7 +1858,7 @@
   --pvt-control-opacity: 1;
 }
 .rls-field-autocomplete.rls-field-box--selected {
-  --pvt-control-width: calc(100% - var(--rlc-fieldlist-action-dimension));
+  --pvt-control-width: calc(100% - var(--rlc-fieldbox-action-dimension));
 }
 .rls-field-autocomplete.rls-field-box--disabled {
   --pvt-control-opacity: 0.5;
@@ -1872,13 +1872,13 @@
   width: 100%;
   margin-top: var(--rls-sizing-x2);
   margin-bottom: var(--rls-sizing-x6);
-  background: var(--rls-app-background-300);
+  background: var(--rls-app-color-100);
   border-radius: var(--rls-sizing-x4);
   padding: var(--rls-sizing-x4);
   box-sizing: border-box;
 }
 .rls-field-autocomplete .rls-field-list__ul__search button {
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   background: transparent;
 }
 .rls-field-autocomplete
@@ -1898,17 +1898,17 @@
   border: none;
   outline: none;
   background: transparent;
-  color: var(--rls-app-color-500);
+  color: var(--rls-app-color-900);
   font-size: var(--rls-input-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-input-letter-spacing);
 }
 .rls-field-autocomplete .rls-field-list__ul__control::placeholder {
-  color: var(--rls-app-color-100);
+  color: var(--rls-app-color-400);
 }
 .rls-field-autocomplete .rls-field-list__ul__control::selection {
   background: var(--rls-theme-color-700);
-  color: var(--rls-light-color-500);
+  color: var(--rls-app-color-050);
 }
 .rls-field-autocomplete .rls-field-list__ul__control:disabled {
   opacity: 0.5;
@@ -1958,7 +1958,7 @@
   z-index: var(--rls-z-index-2);
   overflow: var(--pvt-component-overflow);
   border-radius: var(--rls-sizing-x4);
-  background: var(--rls-app-background-500);
+  background: var(--rls-app-color-050);
   transform: var(--pvt-component-transform);
   transition: opacity 125ms 0ms var(--rls-deceleration-curve),
     transform 125ms 0ms var(--rls-deceleration-curve),
@@ -2001,7 +2001,7 @@
   box-sizing: border-box;
 }
 .rls-picker-date__title {
-  color: var(--rls-app-color-500);
+  color: var(--rls-app-color-900);
   text-align: center;
   cursor: default;
   font-weight: var(--rls-font-weight-bold);
@@ -2018,7 +2018,7 @@
   height: var(--rls-sizing-x16);
   line-height: var(--rls-sizing-x16);
   font-size: var(--rls-sizing-x12);
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
 }
 .rls-picker-date__component {
   display: flex;
@@ -2059,7 +2059,7 @@
 }
 
 .rls-field-date {
-  --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
   position: relative;
   width: 100%;
   box-sizing: border-box;
@@ -2077,27 +2077,33 @@
   border: none;
   outline: none;
   background: transparent;
-  color: var(--rls-app-color-500);
+  color: var(--rls-app-color-900);
   font-weight: var(--rls-font-weight-medium);
   font-size: var(--rlc-input-font-size);
   letter-spacing: var(--rlc-input-letter-spacing);
 }
 .rls-field-date__control::placeholder {
-  color: var(--rls-app-color-100);
+  color: var(--rls-app-color-400);
 }
 .rls-field-date__control:disabled {
   opacity: 0.5;
 }
 .rls-field-date__action {
-  color: var(--rls-app-color-300);
-  width: var(--rls-sizing-x12);
-  height: var(--rls-sizing-x12);
+  --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
+  width: var(--rlc-fieldbox-action-dimension);
+  height: var(--rlc-fieldbox-action-dimension);
+  color: var(--rls-app-color-600);
   padding: 0rem;
-  background: transparent;
+  outline: none;
+  border-radius: 50%;
+  background: var(--rlc-fieldbox-action-background);
 }
 .rls-field-date__action:disabled {
   opacity: 0.5;
 }
+.rls-field-date__action .rls-icon {
+  margin: 1rem;
+}
 
 .rls-picker-date-range {
   position: relative;
@@ -2113,7 +2119,7 @@
   box-sizing: border-box;
 }
 .rls-picker-date-range__title {
-  color: var(--rls-app-color-500);
+  color: var(--rls-app-color-900);
   text-align: center;
   cursor: default;
   font-weight: var(--rls-font-weight-bold);
@@ -2131,7 +2137,7 @@
   height: var(--rls-sizing-x16);
   line-height: var(--rls-sizing-x16);
   font-size: var(--rls-sizing-x12);
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
 }
 .rls-picker-date-range__title--month {
   display: flex;
@@ -2141,7 +2147,7 @@
   height: var(--rls-sizing-x14);
   line-height: var(--rls-sizing-x14);
   font-size: var(--rls-sizing-x10);
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   margin: auto 0rem;
 }
 .rls-picker-date-range__component {
@@ -2179,7 +2185,7 @@
 }
 
 .rls-field-date-range {
-  --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
   position: relative;
   width: 100%;
   box-sizing: border-box;
@@ -2200,18 +2206,26 @@
   letter-spacing: var(--rlc-input-letter-spacing);
 }
 .rls-field-date-range__control::placeholder {
-  color: var(--rls-app-color-100);
+  color: var(--rls-app-color-400);
 }
 .rls-field-date-range__control:disabled {
   opacity: 0.5;
 }
 .rls-field-date-range__action {
-  color: var(--rls-app-color-300);
-  width: var(--rls-sizing-x12);
-  height: var(--rls-sizing-x12);
+  --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
+  width: var(--rlc-fieldbox-action-dimension);
+  height: var(--rlc-fieldbox-action-dimension);
+  color: var(--rls-app-color-600);
   padding: 0rem;
-  margin-left: var(--rls-sizing-x2);
-  background: transparent;
+  outline: none;
+  border-radius: 50%;
+  background: var(--rlc-fieldbox-action-background);
+}
+.rls-field-date-range__action:disabled {
+  opacity: 0.5;
+}
+.rls-field-date-range__action .rls-icon {
+  margin: 1rem;
 }
 
 .rls-field-select .rls-field-list__control {
@@ -2237,7 +2251,7 @@
   padding: var(--rls-sizing-x8) var(--rls-sizing-x8) var(--rls-sizing-x12)
     var(--rls-sizing-x8);
   box-sizing: border-box;
-  background: var(--rls-app-background-500);
+  background: var(--rls-app-color-050);
   border-radius: var(--rls-sizing-x4);
   box-shadow: var(--rls-dark-shadow-center-8);
   transform: translateX(calc(100% + var(--rls-sizing-x16)));
@@ -2269,7 +2283,7 @@
   padding: var(--rls-sizing-x6);
   box-sizing: border-box;
   border-radius: var(--rls-sizing-x4);
-  background: var(--rls-app-background-500);
+  background: var(--rls-app-color-050);
   box-shadow: var(--rls-light-shadow-bottom-4);
   border: var(--rls-theme-border-1-300);
   transform: translate(-50%, 100%);
@@ -2279,7 +2293,7 @@
   transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
 }
 .rls-snackbar__avatar {
-  --rlc-icon-color: var(--rls-light-color-500);
+  --rlc-icon-color: var(--rls-app-color-050);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2308,7 +2322,7 @@
 }
 .rls-snackbar__content p {
   line-height: var(--rls-sizing-x10);
-  color: var(--rls-app-color-300);
+  color: var(--rls-app-color-600);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);