@rolster/react-components 18.26.22 → 18.26.24

package/dist/cjs/assets/{index-3tg8B_CA.css → index-QCv-Uo8R.css}

@@ -43,6 +43,7 @@
   column-gap: var(--rls-sizing-x2);
   font-size: var(--pvt-font-size);
   font-weight: var(--pvt-font-weight);
+  color: var(--rls-amount-font-color, inherit);
 }
 .rls-amount[rls-theme] {
   color: var(--rls-theme-color-500);
@@ -55,6 +56,7 @@
 .rls-amount__content {
   display: flex;
   justify-content: var(--rlc-amount-text-align, flex-start);
+  align-items: var(--rlc-amount-align-items, center);
 }
 .rls-amount__decimal {
   --rlc-tabular-text-char-width: calc(
@@ -96,6 +98,8 @@
 
 .rls-badge {
   --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
+  --pvt-contrast-font-color: var(--rls-app-color-600);
+  --pvt-contrast-background: var(--rls-app-color-200);
   position: relative;
   display: inline-block;
   width: auto;
@@ -105,18 +109,25 @@
   padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x4));
   box-sizing: border-box;
   font-size: var(--rlc-badge-font-size, var(--rls-smalltext-font-size));
+  font-weight: var(--rlc-badge-font-weight, var(--rls-font-weight-regular));
   text-align: center;
   letter-spacing: var(
     --rlc-badge-letter-spacing,
     var(--rls-smalltext-letter-spacing)
   );
-  color: var(--rls-theme-color-050);
-  background: var(--rls-theme-color-500);
+  color: var(--rls-app-color-050);
+  background: var(--rls-app-color-700);
   border-radius: var(--rlc-badge-border-radius, calc(var(--pvt-dimension) / 2));
 }
 .rls-badge--contrast {
-  background: var(--rls-theme-color-100);
-  color: var(--rls-theme-color-700);
+  color: var(--pvt-contrast-font-color);
+  background: var(--pvt-contrast-background);
+}
+.rls-badge[rls-theme] {
+  --pvt-contrast-font-color: var(--rls-theme-color-700);
+  --pvt-contrast-background: var(--rls-theme-color-100);
+  color: var(--rls-theme-color-050);
+  background: var(--rls-theme-color-500);
 }
 .rls-badge > span {
   font-size: inherit;
@@ -2888,61 +2899,35 @@
 } /*# sourceMappingURL=FieldSelect.css.map */
 
 .rls-form-navigation {
-  --pvt-component-transform: translateX(100%);
-  --pvt-component-opacity: 0;
-  --pvt-component-visibility: hidden;
   --pvt-component-transition: 160ms;
-  --pvt-backdrop-opacity: 0;
-  --pvt-backdrop-bottom: initial;
   position: fixed;
   display: flex;
   top: 0rem;
-  left: 0rem;
-  width: 100%;
+  right: 0rem;
+  width: calc(100% - var(--rls-sizing-x16));
+  max-width: var(--rlc-form-navigation-max-width, 160rem);
   height: 100%;
-  z-index: var(--rls-z-index-24);
-  visibility: hidden;
   justify-content: flex-end;
+  visibility: hidden;
+  transform: translateX(100%);
+  transition: opacity var(--pvt-component-transition) 0ms
+      var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
+  z-index: var(--rls-z-index-16);
 }
 .rls-form-navigation--visible {
-  --pvt-component-visibility: visible;
-  --pvt-component-opacity: 1;
-  --pvt-component-transform: translateX(0%);
-  --pvt-backdrop-bottom: 0rem;
-  --pvt-backdrop-opacity: 1;
   visibility: visible;
+  transform: translateX(0%);
 }
 .rls-form-navigation__component {
   position: absolute;
   display: flex;
-  width: calc(100% - var(--rls-sizing-x16));
-  max-width: var(--rlc-form-navigation-max-width, 160rem);
+  width: 100%;
   height: 100%;
   flex-direction: column;
-  opacity: var(--pvt-component-opacity);
-  visibility: var(--pvt-component-visibility);
-  z-index: var(--rls-z-index-2);
-  border-radius: var(--rls-sizing-x4) 0rem 0rem var(--rls-sizing-x4);
-  background: var(--rlc-form-navigation-background, var(--rls-app-color-050));
-  transform: var(--pvt-component-transform);
-  transition: opacity var(--pvt-component-transition) 0ms
-      var(--rls-deceleration-curve),
-    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
-    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
-}
-.rls-form-navigation__backdrop {
-  position: absolute;
-  display: block;
-  top: 0rem;
-  left: 0rem;
-  right: 0rem;
-  bottom: var(--pvt-backdrop-bottom);
-  opacity: var(--pvt-backdrop-opacity);
-  z-index: 1;
-  background: var(--rls-theme-backdrop-900);
-  backdrop-filter: blur(2px);
-  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
-    bottom 120ms 0ms var(--rls-deceleration-curve);
+  background: var(--rlc-form-navigation-background, var(--rls-app-color-100));
+  border-left: var(--rlc-form-navigation-border, var(--rls-app-border-1-200));
 } /*# sourceMappingURL=FormNavigation.css.map */
 
 .rls-image-editor {

package/dist/cjs/index.js

@@ -3389,39 +3389,11 @@ function RlsFieldSelect(props) {
     return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
 }
 
-function RlsFormNavigation({ onAutoClose, children, className, visible, rlsTheme }) {
+function RlsFormNavigation({ children, className, visible, rlsTheme }) {
     const classNameForm = require$$0.useMemo(() => {
         return renderClassStatus('rls-form-navigation', { visible }, className);
     }, [visible, className]);
-    const onClickBackdrop = require$$0.useCallback(() => {
-        onAutoClose && onAutoClose();
-    }, [onAutoClose]);
-    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameForm, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__backdrop", onClick: onClickBackdrop })] }), document.body);
-}
-
-function usePortalController(component) {
-    const [children, setChildren] = require$$0.useState(component);
-    const [visible, setVisible] = require$$0.useState(false);
-    const open = require$$0.useCallback((children) => {
-        setVisible(true);
-        children && setChildren(children);
-    }, []);
-    const close = require$$0.useCallback(() => {
-        setVisible(false);
-    }, []);
-    return { children, close, open, visible };
-}
-
-function useFormNavigationController(component) {
-    const portal = usePortalController(component);
-    const FormNavigation = require$$0.useMemo(() => {
-        return (jsxRuntimeExports.jsx(RlsFormNavigation, { visible: portal.visible, children: portal.children }));
-    }, [portal.children, portal.visible]);
-    return {
-        close: portal.close,
-        FormNavigation,
-        open: portal.open
-    };
+    return ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: classNameForm, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__component", children: children }) }), document.body);
 }
 
 function useRelocationOnComponent({ container, element, onDrag }) {
@@ -3953,6 +3925,17 @@ function RlsApplication({ children }) {
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
+function usePortalController() {
+    const [visible, setVisible] = require$$0.useState(false);
+    const open = require$$0.useCallback(() => {
+        setVisible(true);
+    }, []);
+    const close = require$$0.useCallback(() => {
+        setVisible(false);
+    }, []);
+    return { close, open, visible };
+}
+
 exports.ConfirmationResult = ConfirmationResult;
 exports.RlsAlert = RlsAlert;
 exports.RlsAmount = RlsAmount;
@@ -4047,11 +4030,11 @@ exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
 exports.useFieldAutocomplete = useFieldAutocomplete;
 exports.useFieldSelect = useFieldSelect;
-exports.useFormNavigationController = useFormNavigationController;
 exports.useFormSingleSelectionController = useFormSingleSelectionController;
 exports.useFormToggleController = useFormToggleController;
 exports.useImageEditorController = useImageEditorController;
 exports.useListController = useListController;
+exports.usePortalController = usePortalController;
 exports.useRelocationOnComponent = useRelocationOnComponent;
 exports.useResize = useResize;
 exports.useSnackbar = useSnackbar;