@m4l/layouts 9.1.11 → 9.1.13

package/commonjs/index.js

@@ -0,0 +1,7 @@
+import "react";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export {
+  getDefaultExportFromCjs as g
+};

package/components/ModuleDetailTabs/useModuleDatailTabs.d.ts

@@ -19,117 +19,118 @@ export declare function useModuleDetailTabs<T extends Record<string, any> = Reco
         size?: Extract<import('@m4l/styles').Sizes, "small" | "medium"> | undefined;
         children?: null | undefined;
         ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-        title?: string | undefined;
+        title?: string | undefined | undefined;
         component?: React.ElementType | undefined;
-        id?: string | undefined;
+        id?: string | undefined | undefined;
         disabled?: boolean | undefined;
         action?: React.Ref<import('@mui/material').ButtonBaseActions> | undefined;
-        hidden?: boolean | undefined;
+        hidden?: boolean | undefined | undefined;
         color?: Extract<import('@m4l/styles').ComponentPalletColor, "default"> | undefined;
-        content?: string | undefined;
+        content?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
-        translate?: "yes" | "no" | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
         urlIcon?: string | undefined;
-        lang?: string | undefined;
-        slot?: string | undefined;
-        dir?: string | undefined;
+        lang?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
         className?: string | undefined;
         classes?: (Partial<import('@mui/material').TabClasses> & Partial<import('@mui/material').ClassNameMap<never>>) | undefined;
         sx?: import('@mui/system').SxProps<import('@mui/material').Theme> | undefined;
         key?: import('react').Key | null | undefined;
-        defaultChecked?: boolean | undefined;
+        defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        accessKey?: string | undefined;
-        autoFocus?: boolean | undefined;
-        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
-        contextMenu?: string | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
-        nonce?: string | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
         tabIndex?: NonNullable<React.HTMLAttributes<any>["tabIndex"]> | undefined;
-        radioGroup?: string | undefined;
+        radioGroup?: string | undefined | undefined;
         role?: import('react').AriaRole | undefined;
-        about?: string | undefined;
-        datatype?: string | undefined;
+        about?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
         inlist?: any;
-        prefix?: string | undefined;
-        property?: string | undefined;
-        rel?: string | undefined;
-        resource?: string | undefined;
-        rev?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-        is?: string | undefined;
-        "aria-activedescendant"?: string | undefined;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-        "aria-braillelabel"?: string | undefined;
-        "aria-brailleroledescription"?: string | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
         "aria-busy"?: (boolean | "false" | "true") | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-colcount"?: number | undefined;
-        "aria-colindex"?: number | undefined;
-        "aria-colindextext"?: string | undefined;
-        "aria-colspan"?: number | undefined;
-        "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-        "aria-describedby"?: string | undefined;
-        "aria-description"?: string | undefined;
-        "aria-details"?: string | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
         "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-        "aria-errormessage"?: string | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
         "aria-expanded"?: (boolean | "false" | "true") | undefined;
-        "aria-flowto"?: string | undefined;
+        "aria-flowto"?: string | undefined | undefined;
         "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
         "aria-hidden"?: (boolean | "false" | "true") | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-        "aria-keyshortcuts"?: string | undefined;
-        "aria-label"?: string | undefined;
-        "aria-labelledby"?: string | undefined;
-        "aria-level"?: number | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
         "aria-modal"?: (boolean | "false" | "true") | undefined;
         "aria-multiline"?: (boolean | "false" | "true") | undefined;
         "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined;
-        "aria-owns"?: string | undefined;
-        "aria-placeholder"?: string | undefined;
-        "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-readonly"?: (boolean | "false" | "true") | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
         "aria-required"?: (boolean | "false" | "true") | undefined;
-        "aria-roledescription"?: string | undefined;
-        "aria-rowcount"?: number | undefined;
-        "aria-rowindex"?: number | undefined;
-        "aria-rowindextext"?: string | undefined;
-        "aria-rowspan"?: number | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
         "aria-selected"?: (boolean | "false" | "true") | undefined;
-        "aria-setsize"?: number | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-        "aria-valuemax"?: number | undefined;
-        "aria-valuemin"?: number | undefined;
-        "aria-valuenow"?: number | undefined;
-        "aria-valuetext"?: string | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
-        } | undefined;
+        } | undefined | undefined;
         onCopy?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
         onCopyCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
         onCut?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
@@ -301,7 +302,7 @@ export declare function useModuleDetailTabs<T extends Record<string, any> = Reco
         touchRippleRef?: React.Ref<import('@mui/material/ButtonBase/TouchRipple').TouchRippleActions> | undefined;
         disableFocusRipple?: boolean | undefined;
         dataTestId?: string | undefined;
-        iconPosition?: ("top" | "bottom" | "start" | "end") | undefined;
+        iconPosition?: "top" | "bottom" | "start" | "end" | undefined;
         wrapped?: boolean | undefined;
     }[];
     handleChangeTab: (newValue: string) => void;

package/layouts/MasterDetailLayout/MasterDetailLayout.js

@@ -78,7 +78,6 @@ function MasterDetailLayout(props) {
           children: typeof detailComponent === "function" ? detailComponent({}) : detailComponent
         }
       )
-      // actions: undefined,
     });
   }, [detailComponent, getLabel]);
   const finalModuleActions = useMemo(() => {

package/layouts/ModuleLayout/constants.d.ts

@@ -1 +1,2 @@
 export declare const MODULE_LAYOUT_KEY = "M4LModuleLayout";
+export declare const MODULE_LAYOUT_STORE_ID = "M4LModuleLayoutStore";

package/layouts/ModuleLayout/constants.js

@@ -1,4 +1,6 @@
 const MODULE_LAYOUT_KEY = "M4LModuleLayout";
+const MODULE_LAYOUT_STORE_ID = "M4LModuleLayoutStore";
 export {
-  MODULE_LAYOUT_KEY as M
+  MODULE_LAYOUT_STORE_ID as M,
+  MODULE_LAYOUT_KEY as a
 };

package/layouts/ModuleLayout/contexts/ModuleContext/index.js

@@ -1,27 +1,33 @@
 import { jsx } from "react/jsx-runtime";
 import { useWindowToolsMF } from "@m4l/components";
-import { createContext, useState, useMemo, useEffect } from "react";
+import { createContext, useRef, useEffect } from "react";
+import { c as createModuleLayoutStore } from "./store.js";
 const ModuleContext = createContext(null);
 function ModuleProvider(props) {
   const { children, moduleActions, moduleId, version } = props;
-  const [configOptions] = useState(() => ({
-    moduleId,
-    dictionary: void 0
-  }));
   const { setActions } = useWindowToolsMF();
-  const [dynamicActions, setDynamicActions] = useState([]);
-  const finalModuleActions = useMemo(() => {
-    return (moduleActions || []).concat(dynamicActions);
-  }, [moduleActions, dynamicActions]);
+  const moduleLayoutStoreRef = useRef();
   useEffect(() => {
-    setActions(finalModuleActions, version);
-  }, [finalModuleActions]);
+    if (moduleLayoutStoreRef.current) {
+      moduleLayoutStoreRef.current.getState().updateModuleActions(moduleActions || []);
+    }
+  }, [moduleActions]);
+  if (!moduleLayoutStoreRef.current) {
+    moduleLayoutStoreRef.current = createModuleLayoutStore({
+      moduleActions,
+      moduleId,
+      version,
+      setActions
+    });
+    moduleLayoutStoreRef.current.getState().init();
+  }
+  const store = moduleLayoutStoreRef.current.getState();
   return /* @__PURE__ */ jsx(
     ModuleContext.Provider,
     {
       value: {
-        setDynamicActions,
-        moduleId: configOptions.moduleId
+        setDynamicActions: store.updateDynamicActions,
+        moduleId: store.configOptions.moduleId
       },
       children
     }

package/layouts/ModuleLayout/contexts/ModuleContext/store.d.ts

@@ -0,0 +1,16 @@
+import { InitialModuleLayoutStoreProps, ModuleLayoutStateWithActions } from './types';
+/**
+ * Crea el Store para ModuleLayout.
+ * Este store se encarga de manejar el estado del layout de módulo.
+ * @param props Las props iniciales del store.
+ */
+export declare const createModuleLayoutStore: (initProps: InitialModuleLayoutStoreProps, storeDevtoolsEnabled?: boolean) => import('zustand').UseBoundStore<Omit<Omit<import('zustand').StoreApi<ModuleLayoutStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: ModuleLayoutStateWithActions | Partial<ModuleLayoutStateWithActions> | ((state: ModuleLayoutStateWithActions) => ModuleLayoutStateWithActions | Partial<ModuleLayoutStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: ModuleLayoutStateWithActions | Partial<ModuleLayoutStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<ModuleLayoutStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}>;
+export type ModuleLayoutStore = ReturnType<typeof createModuleLayoutStore>;

package/layouts/ModuleLayout/contexts/ModuleContext/store.js

@@ -0,0 +1,62 @@
+import { c as create, i as immer, d as devtools } from "../../../../not_recognized/index.js";
+import { M as MODULE_LAYOUT_STORE_ID } from "../../constants.js";
+const createDevtools = (immerMiddlewere, config) => {
+  const { enabled = false } = config;
+  if (enabled && process.env.NODE_ENV === "development") {
+    return devtools(immerMiddlewere, config);
+  }
+  return immerMiddlewere;
+};
+const createModuleLayoutStore = (initProps, storeDevtoolsEnabled = false) => {
+  const { moduleActions, moduleId, version, setActions } = initProps;
+  const startProps = {
+    configOptions: {
+      moduleId
+    },
+    dynamicActions: [],
+    finalModuleActions: [],
+    moduleActions: [],
+    version
+  };
+  return create(
+    createDevtools(
+      immer((set) => ({
+        ...startProps,
+        /**
+         * Inicializa el store de ModuleLayout.
+         */
+        init: () => {
+          set((state) => {
+            state.finalModuleActions = (moduleActions || []).concat(state.dynamicActions);
+          });
+        },
+        /**
+         * Actualiza las acciones dinámicas del módulo.
+         */
+        updateDynamicActions: (dynamicActions) => {
+          set((state) => {
+            const actionsConcatenated = (moduleActions || []).concat(dynamicActions);
+            state.dynamicActions = dynamicActions;
+            state.finalModuleActions = actionsConcatenated;
+            setActions(actionsConcatenated, state.version);
+          });
+        },
+        /**
+         * Actualiza module actions en el store cuando moduleActions cambia.
+         */
+        updateModuleActions: (newModuleActions) => {
+          set((state) => {
+            const actionsConcatenated = newModuleActions.concat(state.dynamicActions);
+            state.moduleActions = moduleActions;
+            state.finalModuleActions = actionsConcatenated;
+            setActions(actionsConcatenated, state.version);
+          });
+        }
+      })),
+      { name: `${MODULE_LAYOUT_STORE_ID}: ${initProps.storeId}`, enabled: storeDevtoolsEnabled }
+    )
+  );
+};
+export {
+  createModuleLayoutStore as c
+};

package/layouts/ModuleLayout/contexts/ModuleContext/types.d.ts

@@ -1,4 +1,4 @@
-import { ModuleAction } from '@m4l/components';
+import { ModuleAction, WindowToolsMF } from '@m4l/components';
 import { ReactNode } from 'react';
 export interface ModuleLayoutContextStateProps {
     moduleId: string;
@@ -7,7 +7,52 @@ export interface ModuleLayoutProviderProps extends Omit<ModuleLayoutContextState
     children: ReactNode;
     version: string;
     moduleActions?: ModuleAction[];
+    /**
+     *  "storeId" identificador del store
+     */
+    storeId?: string;
+    /**
+     *  "storeDevtoolsEnabled" determina si se debe usar devtools para el store
+     */
+    storeDevtoolsEnabled?: boolean;
 }
 export interface ModuleLayoutContextProps extends ModuleLayoutContextStateProps {
     setDynamicActions: (dynamicActions: ModuleAction[]) => void;
 }
+export interface ModuleLayoutState extends Pick<ModuleLayoutProviderProps, 'storeId'> {
+    /**
+     * "dynamicActions" Acciones dinámicas del módulo
+     */
+    dynamicActions: ModuleAction[];
+    /**
+     * "finalModuleActions" Acciones con moduleActions y dynamicActions
+     */
+    finalModuleActions: ModuleAction[];
+    /**
+     * "moduleActions" Acciones iniciales del módulo
+     */
+    moduleActions?: ModuleAction[];
+    /**
+     * "configOptions" Propiedades de configuración del módulo
+     */
+    configOptions: ModuleLayoutContextStateProps;
+    /**
+     * "version" Versión del módulo
+     */
+    version: string;
+}
+export interface ModuleLayoutStateWithActions extends ModuleLayoutState {
+    /**
+     * Inicializa el store de ModuleLayout.
+     */
+    init: () => void;
+    /**
+     *  Actualiza las acciones dinámicas del módulo.
+     */
+    updateDynamicActions: (dynamicActions: ModuleAction[]) => void;
+    /**
+     * Actualiza module actions en el store cuando moduleActions cambia.
+     */
+    updateModuleActions: (moduleActions: ModuleAction[]) => void;
+}
+export type InitialModuleLayoutStoreProps = Pick<ModuleLayoutState, 'moduleActions' | 'version' | 'storeId'> & Pick<WindowToolsMF, 'setActions'> & ModuleLayoutContextStateProps;

package/layouts/ModuleLayout/slots/ModuleLayoutSlots.js

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { M as MODULE_LAYOUT_KEY } from "../constants.js";
+import { a as MODULE_LAYOUT_KEY } from "../constants.js";
 import { M as ModuleLayoutSlots } from "./ModuleLayoutEnum.js";
 import { m as moduleLayoutStyles } from "../styles.js";
 const ModuleLayoutRootStyled = styled("div", {

package/layouts/ModuleLayout/subcomponents/BaseModuleLayout/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle } from "react";
 import { useModal, getComponentSlotRoot } from "@m4l/components";
 import { M as ModuleLayoutRootStyled } from "../../slots/ModuleLayoutSlots.js";
-import { M as MODULE_LAYOUT_KEY } from "../../constants.js";
+import { a as MODULE_LAYOUT_KEY } from "../../constants.js";
 const BaseModuleLayout = forwardRef((props, ref) => {
   const { children } = props;
   const { openModal, closeModal } = useModal();

package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/subcomponents/DesktopContent/index.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { LanguagePopover, Image, Typography, Stack, ScrollBar } from "@m4l/components";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { LanguagePopover, Image, Typography, Stack } from "@m4l/components";
 import { D as DesktopContentRootStyled, a as DesktopBannerStyled, C as ContainerLogoDesktopStyled, b as CompanyNameDesktopStyled, T as TypographyBannerStyled, c as CompanyLeyendDesktopStyled, W as WrapperFormContentDesktopStyled, F as FormContentDesktopStyled, d as ContainerModuleNameDesktopStyled } from "../../../../slots/NoAuthModuleLayoutSlots.js";
 import { useBase, useModuleDictionary, useDomain } from "@m4l/core";
 const DesktopContent = (props) => {
@@ -39,7 +39,7 @@ const DesktopContent = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(Stack, { direction: "column", height: "auto", children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx(Fragment, { children }) }) })
+      /* @__PURE__ */ jsx(Stack, { direction: "column", height: "auto", style: { overflow: "auto", position: "relative" }, children })
     ] }) })
   ] });
 };

package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/subcomponents/MobileContent/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Image, LanguagePopover, ScrollBar, Typography } from "@m4l/components";
+import { Image, LanguagePopover, Typography } from "@m4l/components";
 import { M as MobileContentRootStyled, e as MobileBannerStyled, f as ContainerLogoStyled, g as CompanyNameStyled, T as TypographyBannerStyled, h as WrapperFormContentStyled, i as FormContentStyled, j as ContainerModuleNameStyled } from "../../../../slots/NoAuthModuleLayoutSlots.js";
 import { useBase, useModuleDictionary, useDomain } from "@m4l/core";
 const MobileContent = (props) => {
@@ -23,7 +23,7 @@ const MobileContent = (props) => {
       ] }),
       /* @__PURE__ */ jsx(LanguagePopover, {})
     ] }),
-    /* @__PURE__ */ jsx(WrapperFormContentStyled, { children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsxs(FormContentStyled, { children: [
+    /* @__PURE__ */ jsx(WrapperFormContentStyled, { children: /* @__PURE__ */ jsxs(FormContentStyled, { style: { overflow: "auto", position: "relative" }, children: [
       /* @__PURE__ */ jsxs(ContainerModuleNameStyled, { children: [
         /* @__PURE__ */ jsx(Typography, { variant: "h3", skeletonWidth: "20%", children: getLabel("module_name") }),
         /* @__PURE__ */ jsx(
@@ -36,7 +36,7 @@ const MobileContent = (props) => {
         )
       ] }),
       children
-    ] }) }) })
+    ] }) })
   ] });
 };
 export {