@rolster/react-components 18.26.2 → 18.26.4

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

@@ -154,8 +154,8 @@
   color: inherit;
   line-height: inherit;
   font-weight: var(--pvt-label-font-weight);
-  font-size: var(--pvt-label--font-size);
-  letter-spacing: var(--pvt-label--letter-spacing);
+  font-size: var(--pvt-label-font-size);
+  letter-spacing: var(--pvt-label-letter-spacing);
 }
 .rls-breadcrumb__label:first-child::before {
   display: none;
@@ -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 }) {
@@ -1723,10 +1723,11 @@ function RlsContent({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__content", "rls-theme": rlsTheme, children: children }));
 }
 
-const errorsDictionary = {
+const errors = {
     es: {
         alphabetic: 'Campo solo permite caracteres',
         alphanumber: 'Campo solo permite caracteres y número',
+        checked: 'Campo debe ser seleccionado',
         decimal: 'Campo debe ser número decimal',
         defined: 'Campo debe estar definido',
         email: 'Campo debe ser correo electrónico',
@@ -1737,18 +1738,19 @@ const errorsDictionary = {
         maxValue: 'Campo debe tener un valor máximo de {thanValue}',
         minValue: 'Campo debe tener un valor mínimo de {thanValue}',
         nickname: 'Campo inválido para nombre de usuario',
-        onlynumber: 'Campo debe ser númerico',
+        onlyNumber: 'Campo debe ser númerico',
         password: 'Campo no permitido para password',
-        reqlength: 'Campo debe tener {length} caracter(es)',
         required: 'Campo es requerido',
         strMinlength: 'Campo debe tener mínimo {length} caracter(es)',
         strMaxlength: 'Campo debe tener máximo {length} caracter(es)',
+        strReqLength: 'Campo debe tener {length} caracter(es)',
         textonly: 'Campo solo permite caracteres (sin espacio)',
         _unknown: 'Campo inválido {error}'
     },
     en: {
         alphabetic: 'Field only allows characters',
         alphanumber: 'Field only allows characters and number',
+        checked: 'Field must be selected',
         decimal: 'Field must be decimal number',
         defined: 'Field must be defined',
         email: 'Field must be email',
@@ -1759,9 +1761,9 @@ const errorsDictionary = {
         minValue: 'Field must have a minimum value of {thanValue}',
         maxValue: 'Field must have a maximum value of {thanValue}',
         nickname: 'Invalid field for username',
-        onlynumber: 'Field must be numeric',
+        onlyNumber: 'Field must be numeric',
         password: 'Field not allowed for password',
-        reqlength: 'Field must be {length} characters',
+        strReqLength: 'Field must be {length} characters',
         required: 'Field is required',
         strMinlength: 'Field must have minimum {length} characters',
         strMaxlength: 'Field must have maximum {length} characters',
@@ -1771,6 +1773,7 @@ const errorsDictionary = {
     fr: {
         alphabetic: 'Field only allows characters',
         alphanumber: 'Field only allows characters and number',
+        checked: 'Field must be selected',
         decimal: 'Field must be decimal number',
         defined: 'Field must be defined',
         email: 'Field must be email',
@@ -1781,9 +1784,9 @@ const errorsDictionary = {
         minValue: 'Field must have a minimum value of {thanValue}',
         maxValue: 'Field must have a maximum value of {thanValue}',
         nickname: 'Invalid field for username',
-        onlynumber: 'Field must be numeric',
+        onlyNumber: 'Field must be numeric',
         password: 'Field not allowed for password',
-        reqlength: 'Field must be {length} characters',
+        strReqLength: 'Field must be {length} characters',
         required: 'Field is required',
         strMinlength: 'Field must have minimum {length} characters',
         strMaxlength: 'Field must have maximum {length} characters',
@@ -1793,6 +1796,7 @@ const errorsDictionary = {
     pt: {
         alphabetic: 'Field only allows characters',
         alphanumber: 'Field only allows characters and number',
+        checked: 'Field must be selected',
         decimal: 'Field must be decimal number',
         defined: 'Field must be defined',
         email: 'Field must be email',
@@ -1803,21 +1807,25 @@ const errorsDictionary = {
         minValue: 'Field must have a minimum value of {thanValue}',
         maxValue: 'Field must have a maximum value of {thanValue}',
         nickname: 'Invalid field for username',
-        onlynumber: 'Field must be numeric',
+        onlyNumber: 'Field must be numeric',
         password: 'Field not allowed for password',
-        reqlength: 'Field must be {thanValue} characters',
+        strReqLength: 'Field must be {length} characters',
         required: 'Field is required',
-        strMinlength: 'Field must have minimum {thanValue} characters',
-        strMaxlength: 'Field must have maximum {thanValue} characters',
+        strMinlength: 'Field must have minimum {length} characters',
+        strMaxlength: 'Field must have maximum {length} characters',
         textonly: 'Field only allows characters (no space)',
         _unknown: 'Invalid field {error}'
     }
 };
-let _msgErrorsI18n = i18n.i18n(errorsDictionary);
+let _msgErrorsI18n = i18n.i18n(errors);
 function setErrorsI18n(dictionary) {
-    _msgErrorsI18n = i18n.i18n(Object.entries(errorsDictionary).reduce((_dictionary, [key, value]) => {
-        _dictionary[key] = { ...value, ...dictionary[key] };
-        return _dictionary;
+    _msgErrorsI18n = i18n.i18n(Object.entries(errors).reduce((errors, [key, value]) => {
+        // Merge keys from dictionary in errors i18n
+        errors[key] = {
+            ...value,
+            ...dictionary[key]
+        };
+        return errors;
     }, {}));
 }
 function msgErrorsI18n(key, language, interpolators) {
@@ -3014,7 +3022,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 +3147,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 }) {