@rolster/react-components 18.26.3 → 18.26.6

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

@@ -33,6 +33,7 @@
   --pvt-decimal-size: var(--rlc-amount-decimal-size, 0.6);
   --rlc-tabular-text-font-size: var(--pvt-font-size);
   --rlc-tabular-text-font-weight: var(--pvt-font-weight);
+  --rlc-tabular-text-char-width: calc(var(--pvt-font-size) / 1.25);
   display: flex;
   width: var(--rlc-amount-width, auto);
   justify-content: var(--rlc-amount-text-align, flex-start);
@@ -154,8 +155,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;
@@ -965,8 +966,8 @@
   cursor: var(--rlc-radiobutton-cursor, initial);
 }
 .rls-radiobutton--checked {
-  --pvt-component-background: var(--rls-app-gradient-050);
-  background: var(--rls-theme-color-500);
+  --pvt-component-background: var(--rls-app-color-050);
+  background: var(--rls-theme-gradient-500);
   border: var(--rls-theme-border-1-500);
 }
 .rls-radiobutton--disabled {
@@ -1112,18 +1113,22 @@
 .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-letter-spacing: var(
+    --rlc-ballot-title-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
   --pvt-title-height: var(
     --rlc-ballot-title-height,
     var(--rls-label-line-height)
   );
+  --pvt-subtitle-font-size: var(
+    --rlc-ballot-subtitle-font-size,
+    var(--rls-smalltext-font-size)
+  );
   --pvt-subtitle-letter-spacing: var(
     --rlc-ballot-subtitle-letter-spacing,
     var(--rls-smalltext-letter-spacing)
@@ -1134,7 +1139,7 @@
   );
   position: relative;
   display: flex;
-  width: 100%;
+  width: var(--rlc-ballot-width, 100%);
   align-items: center;
   column-gap: var(--rls-sizing-x4);
   padding: var(--rlc-ballot-padding, var(--rls-sizing-x4));
@@ -1158,9 +1163,9 @@
   width: calc(100% - var(--rlc-avatar-width) - var(--rls-sizing-x4));
 }
 .rls-ballot__title {
-  --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);
+  --rlc-skeleton-text-height: auto;
+  --rlc-skeleton-text-letter-spacing: var(--pvt-title-letter-spacing);
   position: relative;
   width: 100%;
   color: var(--rls-app-color-900);
@@ -1173,16 +1178,11 @@
   );
   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(--pvt-subtitle-height);
+  --rlc-skeleton-text-font-size: var(--pvt-subtitle-font-size);
+  --rlc-skeleton-text-height: auto;
   --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, 100%);
   color: var(--rls-app-color-500);
@@ -1190,10 +1190,8 @@
     --rlc-ballot-subtitle-font-weight,
     var(--rls-font-weight-medium)
   );
-  font-size: var(--rls-ballot-subtitle-font-size);
+  font-size: var(--pvt-subtitle-font-size);
   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);
@@ -1268,6 +1266,8 @@
   transform: var(--rlc-button-toggle-ul-transform);
   transform-origin: 0% 0%;
   box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
+  transition: transform 240ms 0ms var(--rls-standard-curve),
+    opacity 240ms 0ms var(--rls-standard-curve);
 }
 .rls-button-toggle__list ul li {
   padding: 0rem var(--rls-sizing-x6);
@@ -1276,8 +1276,8 @@
   line-height: var(--rls-sizing-x20);
   cursor: default;
   font-weight: var(--rls-font-weight-semibold);
-  font-size: 6rem;
-  letter-spacing: 0.825px;
+  font-size: var(--rls-smalltext-font-size);
+  letter-spacing: var(--rls-smalltext-letter-spacing);
   text-transform: uppercase;
   color: var(--rls-app-color-600);
 }
@@ -1599,10 +1599,10 @@
   height: var(--rls-sizing-x20);
   line-height: var(--rls-sizing-x20);
   text-align: center;
-  font-size: 5.875rem;
+  font-size: var(--rls-caption-font-size);
   color: var(--rls-app-color-600);
   font-weight: var(--rls-font-weight-regular);
-  letter-spacing: 0.375rem;
+  letter-spacing: var(--rls-caption-letter-spacing);
 }
 .rls-picker-day__component {
   display: flex;
@@ -1652,13 +1652,13 @@
 .rls-picker-day__element__span {
   position: relative;
   display: block;
-  font-size: 7rem;
+  font-size: var(--rls-paragraph-font-size);
   font-weight: var(--rls-font-weight-semibold);
   border-radius: var(--rls-sizing-x4);
   height: var(--rls-sizing-x18);
   line-height: var(--rls-sizing-x18);
   box-sizing: border-box;
-  letter-spacing: 0.475rem;
+  letter-spacing: var(--rls-paragraph-letter-spacing);
   box-shadow: var(--pvt-span-box-shadow);
 }
 .rls-picker-day__element__span:not(:hover) {
@@ -1701,10 +1701,10 @@
   height: var(--rls-sizing-x20);
   line-height: var(--rls-sizing-x20);
   text-align: center;
-  font-size: 5.875rem;
+  font-size: var(--rls-caption-font-size);
   color: var(--rls-app-color-600);
   font-weight: var(--rls-font-weight-regular);
-  letter-spacing: 0.375rem;
+  letter-spacing: var(--rls-caption-letter-spacing);
 }
 .rls-picker-day-range__component {
   display: flex;
@@ -1742,13 +1742,13 @@
 .rls-picker-day-range__element__span {
   position: relative;
   display: block;
-  font-size: 7rem;
+  font-size: var(--rls-paragraph-font-size);
   font-weight: var(--rls-font-weight-semibold);
   border-radius: var(--rls-sizing-x4);
   height: var(--rls-sizing-x18);
   line-height: var(--rls-sizing-x18);
   box-sizing: border-box;
-  letter-spacing: 0.475rem;
+  letter-spacing: var(--rls-paragraph-letter-spacing);
 }
 .rls-picker-day-range__element__span:not(:hover) {
   background: var(--pvt-span-nothover-background);
@@ -1994,7 +1994,7 @@
   height: var(--rls-sizing-x10);
   line-height: var(--rls-sizing-x10);
   text-align: center;
-  font-size: 3.5rem;
+  font-size: var(--rls-micro-font-size);
   font-weight: var(--rls-font-weight-medium);
   color: var(--pvt-thumb-color);
   z-index: var(--rls-z-index-4);
@@ -2071,7 +2071,7 @@
   color: var(--rls-app-color-900);
   height: var(--rls-sizing-x12);
   line-height: var(--rls-sizing-x12);
-  font-size: 8.125rem;
+  font-size: var(--rls-body-font-size);
   letter-spacing: var(--rls-label-letter-spacing);
   font-weight: var(--rls-font-weight-bold);
 }
@@ -2211,9 +2211,9 @@
   --pvt-subtitle-letter-spacing: var(--rls-body-letter-spacing);
   --pvt-subtitle-line-height: var(--rls-body-line-height);
   --pvt-subtitle-text-transform: initial;
-  --pvt-content-font-size: 7.4rem;
-  --pvt-content-letter-spacing: 0.05em;
-  --pvt-content-line-height: 10.6rem;
+  --pvt-content-font-size: var(--rls-input-font-size);
+  --pvt-content-letter-spacing: var(--rls-input-letter-spacing);
+  --pvt-content-line-height: var(--rls-input-line-height);
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
   position: fixed;
@@ -2340,7 +2340,7 @@
     --pvt-subtitle-font-size: var(--rls-smalltext-font-size);
     --pvt-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
     --pvt-subtitle-line-height: var(--rls-smalltext-line-height);
-    --pvt-content-font-size: 7.325rem;
+    --pvt-content-font-size: var(--rls-paragraph-font-size);
   }
   .rls-confirmation__header {
     row-gap: var(--rls-sizing-x2);
@@ -2943,7 +2943,10 @@
   );
   --pvt-component-height: 0rem;
   --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
-  --pvt-component-border-radius: var(--rls-sizing-x4);
+  --pvt-component-border-radius: var(
+    --rlc-modal-sheet-border-radius,
+    var(--rls-sizing-x4)
+  );
   --pvt-component-opacity: 0;
   --pvt-component-visibility: hidden;
   --pvt-component-transition: 160ms;

package/dist/cjs/index.js

@@ -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) {
@@ -1833,7 +1841,7 @@ function RlsMessageFormError({ className, formControl }) {
     }, []);
     const msgError = require$$0.useMemo(() => {
         return (formControl?.error &&
-            (msgErrorsI18n(formControl.error.id, language, formControl.error.data) ??
+            (msgErrorsI18n(formControl.error.id, language, formControl.error.data) ||
                 msgErrorsI18n('_unknown', language, { error: formControl.error.id })));
     }, [formControl?.error, language]);
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: formControl?.wrong && (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: msgError }) })) }));