@rolster/react-components 18.26.2 → 18.26.3

package/dist/cjs/assets/{index-Da99wzhq.css → index-D9onGyQ8.css}

@@ -224,7 +224,7 @@
   --pvt-outline-background: var(--rls-app-color-050);
   --pvt-outline-font-color: var(--rls-app-color-500);
   --pvt-outline-border: var(--rls-app-border-1-300);
-  --pvt-flat-background: var(--rls-theme-color-050);
+  --pvt-flat-background: var(--rls-theme-color-100);
   --pvt-flat-font-color: var(--rls-theme-color-500);
   --pvt-flat-border: none;
   --pvt-stroked-background: var(--rls-app-color-050);
@@ -525,7 +525,7 @@
 .rls-checkbox--checked {
   --rlc-icon-color: var(--rls-app-color-050);
   --pvt-component-background: var(--rls-theme-color-200);
-  background: var(--rls-theme-color-500);
+  background: var(--rls-theme-gradient-500);
   border: var(--rls-theme-border-1-500);
 }
 .rls-checkbox--disabled {
@@ -965,7 +965,7 @@
   cursor: var(--rlc-radiobutton-cursor, initial);
 }
 .rls-radiobutton--checked {
-  --pvt-component-background: var(--rls-app-color-050);
+  --pvt-component-background: var(--rls-app-gradient-050);
   background: var(--rls-theme-color-500);
   border: var(--rls-theme-border-1-500);
 }
@@ -1037,7 +1037,7 @@
   --pvt-element-radius: var(--rls-sizing-x4);
 }
 .rls-switch--checked {
-  --pvt-component-background: var(--rls-theme-color-500);
+  --pvt-component-background: var(--rls-theme-gradient-500);
   --pvt-element-left: calc(
     100% - var(--pvt-element-width) - var(--rls-sizing-x2)
   );
@@ -1074,7 +1074,7 @@
 .rls-alert {
   --pvt-icon-background: var(--rls-app-color-600);
   --pvt-icon-color: var(--rls-app-color-050);
-  --pvt-content-font-color: var(--rls-app-color-700);
+  --pvt-content-font-color: var(--rls-app-color-500);
   position: relative;
   display: flex;
   column-gap: var(--rls-sizing-x6);
@@ -1152,7 +1152,7 @@
   display: flex;
   overflow: hidden;
   flex-direction: column;
-  row-gap: var(--rlc-ballot-component-row-gap, var(--rls-sizing-x2));
+  row-gap: var(--rlc-ballot-component-row-gap, var(--rls-sizing-x1));
 }
 .rls-ballot .rls-avatar + .rls-ballot__component {
   width: calc(100% - var(--rlc-avatar-width) - var(--rls-sizing-x4));
@@ -1185,10 +1185,10 @@
   );
   position: relative;
   width: var(--rlc-ballot-subtitle-width, 100%);
-  color: var(--rls-app-color-600);
+  color: var(--rls-app-color-500);
   font-weight: var(
     --rlc-ballot-subtitle-font-weight,
-    var(--rls-font-weight-semibold)
+    var(--rls-font-weight-medium)
   );
   font-size: var(--rls-ballot-subtitle-font-size);
   letter-spacing: var(--pvt-subtitle-letter-spacing);
@@ -1353,7 +1353,8 @@
 } /*# sourceMappingURL=FieldText.css.map */
 
 .rls-label-checkbox {
-  --rlc-switch-cursor: pointer;
+  --rlc-checkbox-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
   --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
@@ -1384,7 +1385,7 @@
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   line-height: var(--pvt-text-height);
-  color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-600));
+  color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1396,7 +1397,8 @@
 } /*# sourceMappingURL=LabelCheckBox.css.map */
 
 .rls-label-radiobutton {
-  --rlc-switch-cursor: pointer;
+  --rlc-radiobutton-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
   --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
@@ -1427,7 +1429,7 @@
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   line-height: var(--pvt-text-height);
-  color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-600));
+  color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1440,6 +1442,7 @@
 
 .rls-label-switch {
   --rlc-switch-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
   --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
@@ -1470,7 +1473,7 @@
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   line-height: var(--pvt-text-height);
-  color: var(--rlc-label-switch-font-color, var(--rls-app-color-600));
+  color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -2237,7 +2240,7 @@
   position: absolute;
   display: flex;
   width: calc(100% - var(--rls-sizing-x16));
-  max-width: 280rem;
+  max-width: 180rem;
   height: var(--pvt-component-height);
   flex-direction: column;
   row-gap: var(--rls-sizing-x8);
@@ -2303,13 +2306,14 @@
 .rls-confirmation__footer {
   position: relative;
   width: 100%;
-  padding: var(--rls-sizing-x4) var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x12) 0rem var(--rls-sizing-x12);
   box-sizing: border-box;
 }
 .rls-confirmation__actions {
+  --rlc-button-width: 100%;
   position: relative;
-  width: 100%;
   display: flex;
+  width: 100%;
   flex-direction: row-reverse;
   justify-content: center;
   column-gap: var(--rls-sizing-x8);

package/dist/cjs/index.js

@@ -1648,7 +1648,7 @@ function RlsRadioButton({ checked, disabled, identifier, rlsTheme, onClick }) {
 }
 
 function RlsSkeletonText({ active, children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("label", { className: "rls-skeleton-text__value", children: children })) }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
 }
 
 function RlsSwitch({ checked, capsule, disabled, identifier, onClick, rlsTheme }) {
@@ -3014,7 +3014,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
                 value
             });
     }, [formControl, value, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "outline", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
 }
 
 function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
@@ -3139,7 +3139,7 @@ function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, m
         formControl?.setValue(value);
         onListener && onListener({ event: components.PickerListenerEvent.Select, value });
     }, [formControl, value, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "outline", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
 }
 
 function RlsFieldDateRange({ children, date: _date, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {