@rolster/react-components 19.1.10 → 19.1.12

package/dist/es/assets/{index-BaDqtd9t.css → index-BamXLzHk.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;
@@ -769,6 +769,8 @@
   --pvt-value-font-color: var(--pvt-font-color);
   --pvt-value-opacity: 1;
   --pvt-component-font-color: transparent;
+  --rlc-amount-height: var(--pvt-height);
+  --rlc-amount-align-items: center;
   position: relative;
   width: var(--rlc-input-width, 100%);
 }
@@ -833,8 +835,6 @@
 } /*# sourceMappingURL=Input.css.map */
 
 .rls-input-decimal {
-  --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;
   position: relative;
@@ -843,8 +843,6 @@
 } /*# sourceMappingURL=InputDecimal.css.map */
 
 .rls-input-money {
-  --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;
   position: relative;
@@ -975,11 +973,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 */
@@ -1277,8 +1275,8 @@
     --rlc-ballot-title-letter-spacing,
     var(--rls-label-letter-spacing)
   );
-  --pvt-title-height: var(
-    --rlc-ballot-title-height,
+  --pvt-title-line-height: var(
+    --rlc-ballot-title-line-height,
     var(--rls-label-line-height)
   );
   --pvt-subtitle-font-size: var(
@@ -1289,8 +1287,8 @@
     --rlc-ballot-subtitle-letter-spacing,
     var(--rls-smalltext-letter-spacing)
   );
-  --pvt-subtitle-height: var(
-    --rlc-ballot-subtitle-height,
+  --pvt-subtitle-line-height: var(
+    --rlc-ballot-subtitle-line-height,
     var(--rls-smalltext-line-height)
   );
   position: relative;
@@ -1334,6 +1332,7 @@
   );
   font-size: var(--pvt-title-font-size);
   letter-spacing: var(--pvt-title-letter-spacing);
+  line-height: var(--pvt-title-line-height);
 }
 .rls-ballot__subtitle {
   --rlc-skeleton-text-font-size: var(--pvt-subtitle-font-size);
@@ -1348,6 +1347,7 @@
   );
   font-size: var(--pvt-subtitle-font-size);
   letter-spacing: var(--pvt-subtitle-letter-spacing);
+  line-height: var(--pvt-subtitle-line-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);

package/dist/es/index.js

@@ -464,17 +464,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 = 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 = useMemo(() => {
-        return renderClassStatus('rls-badge', { contrast });
-    }, [contrast]);
+        return renderClassStatus('rls-badge', { contrasted });
+    }, [contrasted]);
     return (jsxRuntimeExports.jsx("span", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
@@ -733,10 +733,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 = useMemo(() => {
-        return renderClassStatus('rls-poster', { contrast });
-    }, [contrast]);
+        return renderClassStatus('rls-poster', { contrasted });
+    }, [contrasted]);
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
@@ -782,11 +782,11 @@ function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-alert__icon", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsx("div", { className: "rls-alert__content", children: children })] }));
 }
 
-function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-ballot', { bordered, skeleton });
-    }, [bordered, skeleton]);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
+function RlsBallot({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
+    const classNameBallot = useMemo(() => {
+        return renderClassStatus('rls-ballot', { bordered, skeleton }, className);
+    }, [bordered, skeleton, className]);
+    return (jsxRuntimeExports.jsxs("div", { className: classNameBallot, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
 }
 
 function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
@@ -1708,10 +1708,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 = 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 }) {
@@ -1723,19 +1723,19 @@ function RlsDatatableSubheader({ children, className, identifier, rlsTheme }) {
 function RlsDatatableRecord({ children, className, contained, error, identifier, info, success, warning, rlsTheme }) {
     const classNameRecord = 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 = 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 = 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 }) {
@@ -2054,7 +2054,7 @@ function RlsFieldAutocompleteTemplate(props) {
     return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
 }
 function RlsFieldAutocomplete(props) {
-    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
@@ -2723,7 +2723,7 @@ function RlsFieldSelectTemplate(props) {
     return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
 }
 function RlsFieldSelect(props) {
-    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
     return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
 }