@rolster/react-components 18.23.10 → 18.23.12

package/dist/cjs/assets/{index-C_p5wY7X.css → index-Dr8-miqn.css}

@@ -94,13 +94,20 @@
   width: auto;
   padding: var(--rlc-badge-padding, var(--rls-sizing-x2));
   box-sizing: border-box;
-  font-size: var(--rls-caption-font-size);
-  letter-spacing: var(--rls-caption-letter-spacing);
-  line-height: var(--rls-caption-line-height);
+  font-size: var(--rlc-badge-font-size, var(--rls-caption-font-size));
+  letter-spacing: var(
+    --rlc-badge-letter-spacing,
+    var(--rls-caption-letter-spacing)
+  );
+  line-height: var(--rlc-badge-line-height, var(--rls-caption-line-height));
   color: var(--rls-theme-color-100);
   background: var(--rls-theme-color-500);
   border-radius: var(--rls-sizing-x2);
 }
+.rls-badge--contrast {
+  background: var(--rls-theme-color-100);
+  color: var(--rls-theme-color-700);
+}
 .rls-badge > span {
   font-size: inherit;
   letter-spacing: inherit;
@@ -2026,15 +2033,18 @@
   padding: 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
 }
-.rls-confirmation__message {
-  color: var(--rls-app-color-600);
-  text-align: center;
+.rls-confirmation__content {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
 }
-.rls-confirmation__message p {
+.rls-confirmation__content > p {
   font-weight: var(--rls-font-weight-medium);
   font-size: var(--pvt-content-font-size);
   line-height: var(--pvt-content-line-height);
   letter-spacing: var(--pvt-content-letter-spacing);
+  text-align: center;
+  color: var(--rls-app-color-600);
 }
 .rls-confirmation__footer {
   position: relative;

package/dist/cjs/index.js

@@ -1395,8 +1395,11 @@ function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
-function RlsBadge({ children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-badge", "rls-theme": rlsTheme, children: children }));
+function RlsBadge({ children, contrast, rlsTheme }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-badge', { contrast });
+    }, [contrast]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsBreadcrumbLabel({ label }) {
@@ -2420,11 +2423,11 @@ class ConfirmationResult extends commons.PartialSealed {
         return new ConfirmationResult('reject');
     }
 }
-function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
-    const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-confirmation', { visible });
-    }, [visible]);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__message", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: approved.type, onClick: approved.onClick, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
+function RlsConfirmation({ approved, className, content, reject, rlsTheme, subtitle, title, visible }) {
+    const classConfirmation = require$$0.useMemo(() => {
+        return renderClassStatus('rls-confirmation', { visible }, className);
+    }, [visible, className]);
+    return (jsxRuntimeExports.jsxs("div", { className: classConfirmation, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__content", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: approved.type, onClick: approved.onClick, disabled: approved.disabled, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, disabled: reject.disabled, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
 function useConfirmation() {
     const [config, setConfig] = require$$0.useState({});
@@ -2432,29 +2435,30 @@ function useConfirmation() {
     const component = ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
     const confirmation = require$$0.useCallback((options) => {
         return new Promise((resolve) => {
-            const { approved, reject } = options;
             setConfig({
                 ...options,
                 approved: {
-                    label: approved?.label ?? reactI18n('confirmationActionApproved'),
+                    label: options.approved?.label ?? reactI18n('confirmationActionApproved'),
                     onClick: () => {
                         setVisible(false);
                         resolve(ConfirmationResult.approved());
                     },
-                    identifier: approved?.identifier,
-                    rlsTheme: approved?.rlsTheme,
-                    type: approved?.type ?? 'raised'
+                    type: options.approved?.type ?? 'raised',
+                    disabled: options.approved?.disabled,
+                    identifier: options.approved?.identifier,
+                    rlsTheme: options.approved?.rlsTheme
                 },
-                reject: reject
+                reject: options.reject
                     ? {
-                        label: reject.label,
+                        label: options.reject.label,
                         onClick: () => {
                             setVisible(false);
                             resolve(ConfirmationResult.reject());
                         },
-                        identifier: reject.identifier,
-                        rlsTheme: reject.rlsTheme,
-                        type: reject?.type ?? 'classic'
+                        type: options.reject.type ?? 'outline',
+                        disabled: options.reject.disabled,
+                        identifier: options.reject.identifier,
+                        rlsTheme: options.reject.rlsTheme
                     }
                     : undefined
             });
@@ -2722,7 +2726,7 @@ function useFieldAutocomplete(props) {
         else {
             controller.setFormValue(element);
         }
-        if (props.selectionContinuos) {
+        if (props.keepOpen) {
             setPattern('');
             controller.refInput?.current?.focus();
         }
@@ -2734,7 +2738,7 @@ function useFieldAutocomplete(props) {
         controller.setState,
         controller.setFormValue,
         setPattern,
-        props.selectionContinuos,
+        props.keepOpen,
         props.onSelect,
         props.onValue
     ]);