@rolster/react-components 18.15.37 → 18.15.41

package/dist/cjs/assets/{index-DTDYY-4K.css → index-DymY06ih.css}

@@ -1001,7 +1001,6 @@
   transform-origin: 0% 0%;
   transition: transform 240ms 0ms var(--rls-standard-curve),
     opacity 240ms 0ms var(--rls-standard-curve);
-  will-change: opacity, transform;
   box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
 }
 .rls-button-toggle__list ul li {
@@ -1678,11 +1677,10 @@
   visibility: var(--pvt-component-visibility);
   padding: var(--rls-sizing-x8) 0rem;
   box-sizing: border-box;
-  z-index: var(--rls-z-index-2);
+  z-index: var(--rls-z-index-4);
   border-radius: var(--rls-sizing-x4);
   background: var(--rls-app-background-500);
   box-shadow: var(--rls-app-shadow-4);
-  will-change: transform;
   transform: var(--pvt-component-transform);
   transition: opacity 125ms 0ms var(--rls-deceleration-curve),
     transform 125ms 0ms var(--rls-deceleration-curve),
@@ -1753,8 +1751,7 @@
   right: 0px;
   bottom: var(--pvt-backdrop-bottom);
   opacity: var(--pvt-backdrop-opacity);
-  z-index: 1;
-  will-change: opacity;
+  z-index: var(--rls-z-index-2);
   background: var(--rls-theme-backdrop-900);
   backdrop-filter: blur(2px);
   transition: opacity 120ms 0ms var(--rls-deceleration-curve),
@@ -1849,6 +1846,7 @@
   --pvt-component-transform: translateY(80rem) scale(0.6);
   --pvt-component-height: 0rem;
   --pvt-component-opacity: 0;
+  --pvt-component-overflow: hidden;
   --pvt-component-visibility: hidden;
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
@@ -1863,6 +1861,9 @@
   align-items: center;
   justify-content: center;
 }
+.rls-modal--overflow {
+  --pvt-component-overflow: initial;
+}
 .rls-modal--visible {
   --pvt-component-visibility: visible;
   --pvt-component-height: auto;
@@ -1880,10 +1881,9 @@
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
   z-index: var(--rls-z-index-2);
-  overflow: hidden;
+  overflow: var(--pvt-component-overflow);
   border-radius: var(--rls-sizing-x4);
   background: var(--rls-app-background-500);
-  will-change: transform;
   transform: var(--pvt-component-transform);
   transition: opacity 125ms 0ms var(--rls-deceleration-curve),
     transform 125ms 0ms var(--rls-deceleration-curve),
@@ -1898,7 +1898,6 @@
   bottom: var(--pvt-backdrop-bottom);
   opacity: var(--pvt-backdrop-opacity);
   z-index: 1;
-  will-change: opacity;
   background: var(--rls-theme-backdrop-900);
   backdrop-filter: blur(2px);
   transition: opacity 120ms 0ms var(--rls-deceleration-curve),

package/dist/cjs/index.js

@@ -1357,10 +1357,12 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
-const baseCls = 'rls-tabular-text';
+const className = 'rls-tabular-text';
 const pointers = ['.', ','];
 function charClass(char) {
-    return pointers.includes(char) ? `${baseCls}__pointer` : `${baseCls}__char`;
+    return pointers.includes(char)
+        ? `${className}__pointer`
+        : `${className}__char`;
 }
 function RlsTabularText({ value }) {
     return (jsxRuntimeExports.jsx("div", { className: "rls-tabular-text", children: value?.split('').map((char, index) => (jsxRuntimeExports.jsx("span", { className: charClass(char), children: char }, index))) }));
@@ -1406,7 +1408,7 @@ function RlsButton({ type, children, disabled, prefixIcon, suffixIcon, rlsTheme,
 }
 
 function RlsButtonAction({ icon, disabled, tooltip, onClick }) {
-    return (jsxRuntimeExports.jsxs("button", { className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip caption-semibold", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
+    return (jsxRuntimeExports.jsxs("button", { className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
 }
 
 function RlsCheckBox({ checked, disabled, onClick, rlsTheme }) {
@@ -2304,8 +2306,8 @@ function RlsFieldAutocomplete(props) {
     return (jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
 }
 
-function RlsModal({ children, visible, rlsTheme }) {
-    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
+function RlsModal({ children, overflow, visible, rlsTheme }) {
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-modal', { overflow, visible }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
 
 const FORMAT_TITLE = '{dw}, {mx} {dd} de {aa}';