@rolster/react-components 18.26.4 → 18.26.6

package/dist/cjs/assets/{index-CV_br95-.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);
@@ -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

@@ -1841,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 }) })) }));