@rolster/react-components 18.26.4 → 18.26.7

package/dist/cjs/assets/{index-CV_br95-.css → index-H6EZ9odJ.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);
@@ -373,10 +374,13 @@
   --pvt-button-content-border: var(--pvt-gradient-border);
   --pvt-button-ripple-background: var(--rls-theme-font-900);
 }
-.rls-button__label {
+.rls-button__description {
+  display: flex;
+  width: auto;
+  align-items: center;
+  column-gap: var(--rlc-button-description-gap, var(--rls-sizing-x2));
   padding: 0rem var(--rls-sizing-x2);
   line-height: initial;
-  width: auto;
   font-size: var(--rls-button-font-size);
   letter-spacing: var(--rls-button-letter-spacing);
   font-weight: var(--rlc-button-font-weight, var(--rls-font-weight-medium));
@@ -385,7 +389,7 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.rls-button__label a {
+.rls-button__description a {
   text-decoration: none;
   color: inherit;
 }
@@ -965,8 +969,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 +1116,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 +1142,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 +1166,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 +1181,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 +1193,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 +1269,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 +1279,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 +1602,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 +1655,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 +1704,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 +1745,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 +1997,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 +2074,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 +2214,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 +2343,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 +2946,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

@@ -1428,7 +1428,7 @@ function RlsButton({ type, children, disabled, identifier, prefixIcon, suffixIco
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-button__content', { type });
     }, [type]);
-    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: className, children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__label", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
+    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: className, children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__description", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
 
 function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
@@ -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 }) })) }));