@rolster/react-components 19.1.14 → 19.1.15

package/dist/es/assets/{index-CaFvOFVd.css → index-CvUJnmkm.css}

@@ -217,6 +217,7 @@
 .rls-icon {
   --pvt-icon-dimension: var(--rlc-icon-dimension, var(--rls-sizing-x12));
   --pvt-icon-display: block;
+  --pvt-icon-color: var(--rlc-icon-color);
   position: relative;
   font-size: var(--pvt-icon-dimension);
   width: var(--pvt-icon-dimension);
@@ -228,9 +229,12 @@
   background: var(--rls-theme-color-300);
   border-radius: var(--rls-sizing-x2);
 }
+.rls-icon[rls-theme] {
+  --pvt-icon-color: var(--rls-theme-color-500);
+}
 .rls-icon > i {
   display: var(--pvt-icon-display);
-  color: var(--rlc-icon-color, inherit);
+  color: var(--pvt-icon-color, inherit);
   width: 100%;
   height: 100%;
   line-height: inherit;

package/dist/es/index.js

@@ -449,7 +449,10 @@ function RlsTabularText({ className, value }) {
     return jsxRuntimeExports.jsx("div", { className: _className, children: codes });
 }
 
-function RlsAmount({ value, decimals, rlsTheme, symbol }) {
+function RlsAmount({ value, className, decimals, rlsTheme, symbol }) {
+    const classNameAmount = useMemo(() => {
+        return renderClassStatus('rls-amount', {}, className);
+    }, [className]);
     const { decimal, integer } = useMemo(() => {
         const currency = currencyFormat({ value, decimals });
         if (!currency.includes(',')) {
@@ -461,7 +464,7 @@ function RlsAmount({ value, decimals, rlsTheme, symbol }) {
             decimal: currencySplit[1] || ''
         };
     }, [value, decimals]);
-    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 }))] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classNameAmount, "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, contrasted, rounded, skeleton, rlsTheme }) {
@@ -493,11 +496,11 @@ function RlsBreadcrumb({ labels }) {
     return jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: children });
 }
 
-function RlsIcon({ value, skeleton }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-icon', { skeleton });
-    }, [skeleton]);
-    return (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
+function RlsIcon({ value, className, rlsTheme, skeleton }) {
+    const classNameIcon = useMemo(() => {
+        return renderClassStatus('rls-icon', { skeleton }, className);
+    }, [className, skeleton]);
+    return (jsxRuntimeExports.jsx("div", { className: classNameIcon, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
 }
 
 function RlsSpinner() {