@rolster/react-components 19.1.9 → 19.1.11

package/dist/cjs/assets/{index-CoA-HvvU.css → index-CDqDWlee.css}

@@ -94,7 +94,7 @@
 .rls-avatar--rounded {
   border-radius: 50%;
 }
-.rls-avatar--contrast {
+.rls-avatar--contrasted {
   color: var(--rls-theme-color-500);
   background: var(--rls-theme-color-100);
 }
@@ -110,8 +110,8 @@
   --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
   --pvt-font-color: var(--rls-app-color-050);
   --pvt-background: var(--rls-app-color-700);
-  --pvt-contrast-font-color: var(--rls-app-color-600);
-  --pvt-contrast-background: var(--rls-app-color-200);
+  --pvt-contrasted-font-color: var(--rls-app-color-600);
+  --pvt-contrasted-background: var(--rls-app-color-200);
   position: relative;
   display: inline-block;
   width: auto;
@@ -131,15 +131,15 @@
   background: var(--pvt-background);
   border-radius: var(--rlc-badge-radius, calc(var(--pvt-dimension) / 2));
 }
-.rls-badge--contrast {
-  color: var(--pvt-contrast-font-color);
-  background: var(--pvt-contrast-background);
+.rls-badge--contrasted {
+  color: var(--pvt-contrasted-font-color);
+  background: var(--pvt-contrasted-background);
 }
 .rls-badge[rls-theme] {
   --pvt-font-color: var(--rls-theme-color-050);
   --pvt-background: var(--rls-theme-color-500);
-  --pvt-contrast-font-color: var(--rls-theme-color-700);
-  --pvt-contrast-background: var(--rls-theme-color-100);
+  --pvt-contrasted-font-color: var(--rls-theme-color-700);
+  --pvt-contrasted-background: var(--rls-theme-color-100);
 }
 .rls-badge > span {
   font-size: inherit;
@@ -660,9 +660,9 @@
 } /*# sourceMappingURL=ButtonOption.css.map */
 
 .rls-checkbox {
-  --rlc-icon-dimension: var(--rls-sizing-x10);
   --rlc-icon-color: transparent;
   --pvt-dimension: var(--rlc-checkbox-dimension, var(--rls-sizing-x12));
+  --rlc-icon-dimension: calc(var(--pvt-dimension) - 2rem);
   --pvt-component-background: transparent;
   position: relative;
   display: flex;
@@ -833,7 +833,7 @@
 } /*# sourceMappingURL=Input.css.map */
 
 .rls-input-decimal {
-  --rlc-amount-height: inherit;
+  --rlc-amount-height: var(--rlc-input-height);
   --rlc-amount-align-items: center;
   --rlc-tabular-text-font-size: var(--rls-input-font-size);
   --rlc-tabular-text-char-width: 5.25rem;
@@ -843,7 +843,7 @@
 } /*# sourceMappingURL=InputDecimal.css.map */
 
 .rls-input-money {
-  --rlc-amount-height: inherit;
+  --rlc-amount-height: var(--rlc-input-height);
   --rlc-amount-align-items: center;
   --rlc-tabular-text-font-size: var(--rls-input-font-size);
   --rlc-tabular-text-char-width: 5.25rem;
@@ -975,11 +975,11 @@
   color: var(--rls-theme-color-050);
   background: var(--rls-theme-color-500);
 }
-.rls-poster--contrast {
+.rls-poster--contrasted {
   color: var(--rls-app-color-700);
   background: var(--rls-app-color-200);
 }
-.rls-poster--contrast[rls-theme] {
+.rls-poster--contrasted[rls-theme] {
   color: var(--rls-theme-color-700);
   background: var(--rls-theme-color-100);
 } /*# sourceMappingURL=Poster.css.map */
@@ -1515,11 +1515,14 @@
     --rlc-label-checkbox-font-size,
     var(--rls-label-font-size)
   );
+  --pvt-label-letter-spacing: var(
+    --rlc-label-checkbox-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
   --rlc-checkbox-dimension: var(--pvt-dimension);
   --rlc-checkbox-cursor: pointer;
   --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
@@ -1538,7 +1541,6 @@
   --pvt-text-text-overflow: initial;
   --pvt-text-overflow: initial;
   --pvt-text-white-space: initial;
-  --pvt-text-height: auto;
 }
 .rls-label-checkbox__component {
   width: var(--pvt-dimension);
@@ -1548,8 +1550,8 @@
   flex: 1 1 auto;
   font-size: var(--pvt-label-font-size);
   font-weight: var(--rls-font-weight-medium);
-  letter-spacing: var(--rls-label-letter-spacing);
-  line-height: var(--pvt-text-height);
+  letter-spacing: var(--pvt-label-letter-spacing);
+  line-height: var(--rlc-label-checkbox-line-height, var(--rls-sizing-x12));
   color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
@@ -1571,11 +1573,14 @@
     --rlc-label-radiobutton-font-size,
     var(--rls-label-font-size)
   );
+  --pvt-label-letter-spacing: var(
+    --rlc-label-radiobutton-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
   --rlc-radiobutton-dimension: var(--pvt-dimension);
   --rlc-radiobutton-cursor: pointer;
   --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
@@ -1594,7 +1599,6 @@
   --pvt-text-text-overflow: initial;
   --pvt-text-overflow: initial;
   --pvt-text-white-space: initial;
-  --pvt-text-height: auto;
 }
 .rls-label-radiobutton__component {
   width: var(--pvt-dimension);
@@ -1604,8 +1608,8 @@
   flex: 1 1 auto;
   font-size: var(--pvt-label-font-size);
   font-weight: var(--rls-font-weight-medium);
-  letter-spacing: var(--rls-label-letter-spacing);
-  line-height: var(--pvt-text-height);
+  letter-spacing: var(--pvt-label-letter-spacing);
+  line-height: var(--rlc-label-radiobutton-line-height, var(--rls-sizing-x12));
   color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
@@ -1625,8 +1629,11 @@
     --rlc-label-switch-font-size,
     var(--rls-label-font-size)
   );
+  --pvt-label-letter-spacing: var(
+    --rlc-label-switch-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
@@ -1655,8 +1662,8 @@
   flex: 1 1 auto;
   font-size: var(--pvt-label-font-size);
   font-weight: var(--rls-font-weight-medium);
-  letter-spacing: var(--rls-label-letter-spacing);
-  line-height: var(--pvt-text-height);
+  letter-spacing: var(--pvt-label-letter-spacing);
+  line-height: var(--rlc-label-switch-line-height, var(--rls-sizing-x12));
   color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);

package/dist/cjs/index.js

@@ -466,17 +466,17 @@ function RlsAmount({ value, decimals, rlsTheme, symbol }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { className: "rls-amount__symbol", children: symbol }), jsxRuntimeExports.jsxs("div", { className: "rls-amount__content", children: [jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
 }
 
-function RlsAvatar({ children, contrast, rounded, skeleton, rlsTheme }) {
+function RlsAvatar({ children, contrasted, rounded, skeleton, rlsTheme }) {
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-avatar', { contrast, rounded, skeleton });
-    }, [contrast, rounded, skeleton]);
+        return renderClassStatus('rls-avatar', { contrasted, rounded, skeleton });
+    }, [contrasted, rounded, skeleton]);
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
-function RlsBadge({ children, contrast, rlsTheme }) {
+function RlsBadge({ children, contrasted, rlsTheme }) {
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-badge', { contrast });
-    }, [contrast]);
+        return renderClassStatus('rls-badge', { contrasted });
+    }, [contrasted]);
     return (jsxRuntimeExports.jsx("span", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
@@ -735,10 +735,10 @@ function RlsMessageIcon({ icon, children, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsxRuntimeExports.jsx(RlsIcon, { value: icon }), jsxRuntimeExports.jsx("span", { className: "truncate", children: children })] }));
 }
 
-function RlsPoster({ children, contrast, rlsTheme }) {
+function RlsPoster({ children, contrasted, rlsTheme }) {
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-poster', { contrast });
-    }, [contrast]);
+        return renderClassStatus('rls-poster', { contrasted });
+    }, [contrasted]);
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
@@ -1710,10 +1710,10 @@ function RlsDatatable({ children, footer, header, identifier, rlsTheme, resizabl
 function RlsDatatableHeader({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: "rls-datatable__header", "rls-theme": rlsTheme, children: children }));
 }
-function RlsDatatableTitle({ children, className, control, identifier, rlsTheme }) {
+function RlsDatatableTitle({ children, className, contained, control, identifier, rlsTheme }) {
     const classNameTitle = require$$0.useMemo(() => {
-        return renderClassStatus('rls-datatable__title', { control }, className);
-    }, [className, control]);
+        return renderClassStatus('rls-datatable__title', { contained, control }, className);
+    }, [className, contained, control]);
     return (jsxRuntimeExports.jsx("th", { id: identifier, className: classNameTitle, "rls-theme": rlsTheme, children: children }));
 }
 function RlsDatatableSubheader({ children, className, identifier, rlsTheme }) {
@@ -1725,19 +1725,19 @@ function RlsDatatableSubheader({ children, className, identifier, rlsTheme }) {
 function RlsDatatableRecord({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
     const classNameRecord = require$$0.useMemo(() => {
         return renderClassStatus('rls-datatable__record', { error, info, contained, success, warning }, className);
-    }, [className, error, info, contained, success, warning]);
+    }, [className, contained, error, info, success, warning]);
     return (jsxRuntimeExports.jsx("tr", { id: identifier, className: classNameRecord, "rls-theme": rlsTheme, children: children }));
 }
 function RlsDatatableTotals({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
     const classNameTotals = require$$0.useMemo(() => {
         return renderClassStatus('rls-datatable__totals', { error, info, contained, success, warning }, className);
-    }, [className, error, info, contained, success, warning]);
+    }, [className, contained, error, info, success, warning]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: classNameTotals, "rls-theme": rlsTheme, children: children }));
 }
 function RlsDatatableCell({ children, className, contained, control, identifier, rlsTheme }) {
     const classNameCell = require$$0.useMemo(() => {
         return renderClassStatus('rls-datatable__cell', { control, contained }, className);
-    }, [className, control, contained]);
+    }, [className, contained, control]);
     return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameCell, "rls-theme": rlsTheme, children: children }));
 }
 function RlsDatatableData({ children, className, contained, control, identifier }) {