@m4l/components 0.2.36 → 1.0.0

package/components/Period/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SKTWrapperProps } from './types';
-export declare const ContainerPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Gap: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SKTWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SKTWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FieldPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FieldValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Gap: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & SKTWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PrintingSystem/{index.f51a00f8.js → index.fb176a93.js}

@@ -1,24 +1,24 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.0718eeac.js";
+import { Z as componentName } from "../areas/constants.5387d83e.js";
+import { g as getComponentUtilityClass } from "../../utils/index.9ee4c99a.js";
 import clsx from "clsx";
-import { D as DividerNode } from "./subcomponents/DividerNode/index.e58467c9.js";
-import { S as SectionNode } from "./subcomponents/SectionNode/index.879cf13d.js";
-import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.eb6af0ca.js";
-import { H as HeaderNode } from "./subcomponents/HeaderNode/index.e8b151ad.js";
-import { a as ImageNode, Q as QRImageNode } from "../Image/index.8cc036b1.js";
-import { B as BodyNode } from "./subcomponents/BodyNode/index.6792c353.js";
-import { F as FooterNode } from "./subcomponents/FooterNode/index.920b75c9.js";
-import { P as PaperNode } from "./subcomponents/PaperNode/index.bf199422.js";
-import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.44d436b9.js";
-import { G as GridNode } from "./subcomponents/GridNode/index.6c1ad53c.js";
-import { C as ChartNode } from "./subcomponents/ChartNode/index.eec6b4cd.js";
-import { P as PagerNode, a as PageRender } from "../Page/index.c1d4a319.js";
+import { D as DividerNode } from "./subcomponents/DividerNode/index.67d9f1b4.js";
+import { S as SectionNode } from "./subcomponents/SectionNode/index.540a4b19.js";
+import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.41e7fcb0.js";
+import { H as HeaderNode } from "./subcomponents/HeaderNode/index.7de4e411.js";
+import { b as ImageNode, Q as QRImageNode } from "../Image/index.36a3d440.js";
+import { B as BodyNode } from "./subcomponents/BodyNode/index.c1d61038.js";
+import { F as FooterNode } from "./subcomponents/FooterNode/index.eaee152a.js";
+import { P as PaperNode } from "./subcomponents/PaperNode/index.f9ccf22b.js";
+import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.f2f2e903.js";
+import { G as GridNode } from "./subcomponents/GridNode/index.f5f63a2a.js";
+import { C as ChartNode } from "./subcomponents/ChartNode/index.18bd9bad.js";
+import { P as PagerNode, a as PageRender } from "../Page/index.fdf04592.js";
 import { useBase, evaluateWithContext } from "@m4l/core";
 import { forwardRef, useRef, useImperativeHandle } from "react";
 import { useTheme } from "@mui/material/styles";
-const componentName = "M4LPrintingSystem";
 const classes = generateUtilityClasses(componentName, [
   "root",
   "pageNodeRoot",

package/components/PrintingSystem/subcomponents/BodyNode/{index.6792c353.js → index.c1d61038.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.f51a00f8.js";
+import { c as classes, g as getSize } from "../../index.fb176a93.js";
 import clsx from "clsx";
 const BodyNode = (props) => {
   const {

package/components/PrintingSystem/subcomponents/ChartNode/{index.eec6b4cd.js → index.18bd9bad.js}

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { c as classes } from "../../index.f51a00f8.js";
+import { c as classes } from "../../index.fb176a93.js";
 import clsx from "clsx";
 import { createRef, useEffect } from "react";
 import { Chart, registerables } from "chart.js";

package/components/PrintingSystem/subcomponents/DividerNode/{index.e58467c9.js → index.67d9f1b4.js}

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { c as classes } from "../../index.f51a00f8.js";
+import { c as classes } from "../../index.fb176a93.js";
 import clsx from "clsx";
 const DividerNode = (props) => {
   const { direction = "vertical", className = "", style = {} } = props;

package/components/PrintingSystem/subcomponents/FooterNode/{index.920b75c9.js → index.eaee152a.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.f51a00f8.js";
+import { c as classes, g as getSize } from "../../index.fb176a93.js";
 import clsx from "clsx";
 const FooterNode = (props) => {
   const {

package/components/PrintingSystem/subcomponents/GridNode/{index.6c1ad53c.js → index.f5f63a2a.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.f51a00f8.js";
+import { c as classes, g as getSize } from "../../index.fb176a93.js";
 import clsx from "clsx";
 const GridNode = (props) => {
   const { style = {}, className = "", rows, columns } = props;

package/components/PrintingSystem/subcomponents/HeaderNode/{index.e8b151ad.js → index.7de4e411.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.f51a00f8.js";
+import { c as classes, g as getSize } from "../../index.fb176a93.js";
 import clsx from "clsx";
 const HeaderNode = (props) => {
   const {

package/components/PrintingSystem/subcomponents/PaperNode/{index.bf199422.js → index.f9ccf22b.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.f51a00f8.js";
+import { c as classes } from "../../index.fb176a93.js";
 import clsx from "clsx";
 const PaperNode = (props) => {
   const { children, style = {}, className = "", title, titleSecondary } = props;

package/components/PrintingSystem/subcomponents/PropertyValueNode/{index.44d436b9.js → index.f2f2e903.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.f51a00f8.js";
+import { c as classes, g as getSize } from "../../index.fb176a93.js";
 import clsx from "clsx";
 const PropertyValueNode = (props) => {
   const {

package/components/PrintingSystem/subcomponents/SectionNode/{index.879cf13d.js → index.540a4b19.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.f51a00f8.js";
+import { c as classes, g as getSize } from "../../index.fb176a93.js";
 import clsx from "clsx";
 const SectionNode = (props) => {
   const {

package/components/PrintingSystem/subcomponents/TextBoxNode/{index.eb6af0ca.js → index.41e7fcb0.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.f51a00f8.js";
+import { c as classes } from "../../index.fb176a93.js";
 import clsx from "clsx";
 const TextBoxNode = (props) => {
   const { variant = "body", style, className, textAlign = "start", children } = props;

package/components/PropertyValue/{index.5e59580c.js → index.9572c347.js}

@@ -2,16 +2,15 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { unstable_composeClasses } from "@mui/base";
+import { _ as componentName, $ as TEST_PROPS_DATA, T as TEST_PROP_ID, a0 as COMPONENT_PREFIX } from "../areas/constants.5387d83e.js";
 import clsx from "clsx";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../test/getNameDataTestId.0faeade8.js";
+import { a as getNameDataTestId } from "../../test/getNameDataTestId.aee44365.js";
 import { useState } from "react";
-import { F as FieldLabel } from "../FieldLabel/index.2622ee40.js";
-import { I as Icon } from "../Icon/index.ee7b85c9.js";
+import { F as FieldLabel } from "../FieldLabel/index.f9cdcc27.js";
+import { I as Icon } from "../Icon/index.d5fed418.js";
 const PropertyValueRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPropertyValue?.styleOverrides
 }));
-const componentName = "M4LPropertyValue";
 generateUtilityClasses(
   componentName,
   [
@@ -48,8 +47,6 @@ const propertyValueUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
-const COMPONENT_PREFIX = "m4l-property-value";
-const TEST_PROPS_DATA = `${COMPONENT_PREFIX}-data`;
 function PropertyValue(props) {
   const {
     property,

package/components/Resizeable/{index.5e8e48b1.js → index.1f0c1359.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { styled } from "@mui/material";
-import { a as ResizableBox } from "../../react-resizable.af1f31c1.js";
+import { styled } from "@mui/material/styles";
+import { a as ResizableBox } from "../../react-resizable.37bfb965.js";
 const WrapperResizeable = styled(ResizableBox)(({ theme }) => ({
   "&.react-resizable": {
     position: "relative",
@@ -14,8 +14,8 @@ const WrapperResizeable = styled(ResizableBox)(({ theme }) => ({
     bottom: "3px",
     right: "3px",
     cursor: "se-resize",
-    borderRight: `2px solid ${theme.palette.text.disabled}`,
-    borderBottom: `2px solid ${theme.palette.text.disabled}`,
+    borderRight: `2px solid ${theme.vars.palette.text.disabled}`,
+    borderBottom: `2px solid ${theme.vars.palette.text.disabled}`,
     borderBottomRightRadius: "15%"
   },
   "& .custom-handle-nw": {
@@ -26,8 +26,8 @@ const WrapperResizeable = styled(ResizableBox)(({ theme }) => ({
     left: "3px",
     cursor: "se-resize",
     transform: "rotate(180deg)",
-    borderRight: `2px solid ${theme.palette.text.disabled}`,
-    borderBottom: `2px solid ${theme.palette.text.disabled}`,
+    borderRight: `2px solid ${theme.vars.palette.text.disabled}`,
+    borderBottom: `2px solid ${theme.vars.palette.text.disabled}`,
     borderBottomRightRadius: "15%"
   },
   "& .react-resizable-handle": {
@@ -38,7 +38,7 @@ const WrapperResizeable = styled(ResizableBox)(({ theme }) => ({
     backgroundRepeat: "no-repeat",
     backgroundOrigin: "content-box",
     boxSizing: "border-box",
-    backgroundColor: theme.palette.action.active,
+    backgroundColor: theme.vars.palette.action.active,
     mask: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
     backgroundImage: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
     backgroundPosition: "bottom right",

package/components/ResizeableWindow/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ResizableBox } from 'react-resizable';
-export declare const WrapperResizeable: import("@emotion/styled").StyledComponent<import("react-resizable").ResizableBoxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {
+export declare const WrapperResizeable: import("@emotion/styled").StyledComponent<import("react-resizable").ResizableBoxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {
     ref?: import("react").Ref<ResizableBox> | undefined;
 }>;

package/components/ScrollBar/{index.4b965665.js → index.adf0eade.js}

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, generateUtilityClass, Box } from "@mui/material";
 import { styled, alpha } from "@mui/material/styles";
 import SimpleBarReact from "simplebar-react";
-import simpleBarCss from "simplebar/dist/simplebar.min.css?used";
 import { unstable_composeClasses } from "@mui/base";
+import { a1 as componentName } from "../areas/constants.5387d83e.js";
 const RootStyle = styled("div")(({ theme }) => ({
   flexGrow: "1",
   height: "100%",
@@ -14,7 +14,6 @@ const SimpleBarStyle = styled(SimpleBarReact)`
   /* flex-grow: 1;
     height: 100%;
     overflow: hidden; */
-  ${simpleBarCss}
   height: 100%;
 
   .simplebar-scrollbar {
@@ -49,7 +48,7 @@ styled(SimpleBarReact)(({ theme }) => ({
   height: "100%",
   "& .simplebar-scrollbar": {
     "&:before": {
-      backgroundColor: alpha(theme.palette.grey[600], 0.48)
+      backgroundColor: alpha(theme.colorSchemes.finalTheme.palette.grey[600], 0.48)
     },
     "&.simplebar-visible:before": {
       opacity: 1
@@ -75,7 +74,6 @@ styled(SimpleBarReact)(({ theme }) => ({
     }
   }
 }));
-const componentName = "M4LScrollBar";
 generateUtilityClasses(componentName, [
   "root"
 ]);

package/components/SideBar/classes/index.d.ts

@@ -4,7 +4,6 @@ export declare const SideBarClasses: SideBarClassesType;
 export declare const getSideBarClassesByState: (ownerState: SideBarState) => {
     footer: string;
     root: string;
-    drawer: string;
     popover: string;
     containerLogo: string;
     skeleton: string;
@@ -39,6 +38,7 @@ export declare const getSideBarClassesByState: (ownerState: SideBarState) => {
     subItemCollapseActive: string;
     containerContentGroupsFooter: string;
     contentGroupsLine: string;
+    drawer: string;
     overlapping: string;
     wrapperLogoFooter: string;
 };

package/components/SideBar/{index.5d1f4a23.js → index.629ba840.js}

@@ -1,18 +1,17 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { styled, generateUtilityClasses, ListItemText, ListItemButton, Collapse, Drawer as Drawer$1, useTheme } from "@mui/material";
+import { styled, alpha } from "@mui/material/styles";
 import { createContext, useState, useContext, useEffect } from "react";
+import { generateUtilityClasses, ListItemText, styled as styled$1, ListItemButton, Collapse, Drawer as Drawer$1, useTheme } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.0718eeac.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { styled as styled$1, alpha } from "@mui/material/styles";
+import { a2 as componentName, a3 as SIDEBAR_PREFIX, T as TEST_PROP_ID, a4 as MENU_COLLAPSED_CONTAINER_SIZE, a5 as MENU_COLLAPSED_SIZE } from "../areas/constants.5387d83e.js";
+import { g as getComponentUtilityClass } from "../../utils/index.9ee4c99a.js";
 import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.ee7b85c9.js";
-import { T as Typography } from "../mui_extended/Typography/index.a1e774a2.js";
+import { I as Icon, A as ArrowIcon, a as IconButton } from "../Icon/index.d5fed418.js";
+import { T as Typography } from "../../vendor.a1ce6777.js";
 import clsx from "clsx";
 import { useLocation } from "react-router-dom";
-import { I as Image } from "../Image/index.8cc036b1.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.b0ee4965.js";
+import { I as Image } from "../Image/index.36a3d440.js";
 import { useResponsive } from "@m4l/styles";
 const SideBarRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LSideBar?.styleOverrides
@@ -26,7 +25,6 @@ styled("div", {
   alignItems: props.collapsed ? "center" : "normal",
   padding: props.theme.spacing(3, 2.5, 2, 2.5)
 }));
-const componentName = "M4LSideBar";
 generateUtilityClasses(
   componentName,
   [
@@ -202,7 +200,6 @@ const SideBarProvider = (props) => {
 };
 const useSideBar = () => useContext(SideBarContext);
 const useSideBar$1 = useSideBar;
-const SIDEBAR_PREFIX = "M4LSideBar";
 const getNameDataTestId = (KEY) => {
   return `${SIDEBAR_PREFIX}-${KEY}`;
 };
@@ -220,25 +217,28 @@ const ContentGroupsRoot = styled("ul")(() => ({
   height: "100%"
 }));
 const WrapperGroupTitle = styled("li")(({ theme }) => ({
-  ...theme.typography.overline,
+  ...theme.colorSchemes.finalTheme.typography.overline,
   paddingTop: theme.spacing(3),
   paddingLeft: theme.spacing(2),
   paddingBottom: theme.spacing(1),
-  color: theme.palette.text.primary,
+  color: theme.vars.palette.text.primary,
   transition: theme.transitions.create("opacity", {
     duration: theme.transitions.duration.shorter
   })
 }));
-const NavItemMainRoot = styled$1("div", {
+const NavItemMainRoot = styled("div", {
   shouldForwardProp: (prop) => prop !== "activeRoot"
 })(({ activeRoot, theme }) => ({
   ...activeRoot && {
-    ...theme.typography.subtitle2,
-    color: theme.palette.primary.main,
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+    ...theme.colorSchemes.finalTheme.typography.subtitle2,
+    color: theme.vars.palette.primary.main,
+    backgroundColor: alpha(
+      theme.colorSchemes.finalTheme.palette.primary.main,
+      theme.vars.palette.action.selectedOpacity
+    )
   }
 }));
-styled$1(ListItemText, {
+styled(ListItemText, {
   shouldForwardProp: (prop) => prop !== "isCollapse"
 })(({ isCollapse, theme }) => ({
   whiteSpace: "nowrap",
@@ -324,7 +324,7 @@ const ContainerListSubItem = styled("div")(({ theme }) => ({
   height: "auto",
   paddingLeft: theme.spacing(2.75)
 }));
-const NavListSubItemRoot = styled("div")(() => ({
+const NavListSubItemRoot = styled$1("div")(() => ({
   display: "flex",
   flexDirection: "column"
 }));
@@ -355,10 +355,10 @@ styled("span", {
     width: "4px",
     height: "4px",
     borderRadius: "50%",
-    backgroundColor: theme.palette.text.disabled,
+    backgroundColor: theme.vars.palette.text.disabled,
     ...active && {
       transform: "scale(1.5)",
-      backgroundColor: theme.palette.primary.main
+      backgroundColor: theme.vars.palette.primary.main
     }
   }
 }));
@@ -607,10 +607,10 @@ const ContentGroups = () => {
     }
   );
 };
-const CollapseButtonRoot = styled("div")(() => ({
+const CollapseButtonRoot = styled$1("div")(() => ({
   display: "flex"
 }));
-styled("div")(() => ({
+styled$1("div")(() => ({
   display: "flex"
 }));
 function FooterSidebar(_props) {
@@ -633,8 +633,6 @@ function FooterSidebar(_props) {
     }
   );
 }
-const MENU_COLLAPSED_SIZE = "14px";
-const MENU_COLLAPSED_CONTAINER_SIZE = "15px";
 const ContentComponent = () => {
   const { collapsed, onToggleCollapse, classes, onToggleOverlay, overlay } = useSideBar$1();
   const handlerOnMouseEnter = () => {
@@ -701,7 +699,7 @@ const ContentDesktop = () => {
   const areaExpandMenuSize = collapsed ? !overlay ? MENU_COLLAPSED_SIZE : expandedWidth : expandedWidth;
   return /* @__PURE__ */ jsx("div", { className: classes.areaExpandMenu, style: { width: areaExpandMenuSize }, children: /* @__PURE__ */ jsx(ContentComponent, {}) });
 };
-const WrapperContentMobile = styled("div")(({ theme }) => ({
+const WrapperContentMobile = styled$1("div")(({ theme }) => ({
   "& .m4l_image": {
     display: "flex",
     gap: theme.spacing(3),
@@ -710,7 +708,7 @@ const WrapperContentMobile = styled("div")(({ theme }) => ({
     flexShrink: 0
   }
 }));
-styled("div")(({ theme }) => ({
+styled$1("div")(({ theme }) => ({
   width: "100%",
   height: "auto",
   padding: theme.spacing(0, 2)

package/components/SideBar/styles.d.ts

@@ -8,7 +8,7 @@ import { LogoConainerProps } from './types';
  * // Uso del componente
  * <SideBarRoot />
  */
-export declare const SideBarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SideBarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 /**
  * Componente estilizado que representa la raíz de la barra lateral.
  *
@@ -17,4 +17,4 @@ export declare const SideBarRoot: import("@emotion/styled").StyledComponent<impo
  * // Uso del componente
  * <SideBarRoot />
  */
-export declare const LogoContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & LogoConainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LogoContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LogoConainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/SideBar/subcomponents/ContentGroups/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const WrapperGroup: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const ContentGroupsRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const WrapperGroupTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const WrapperGroup: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const ContentGroupsRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const WrapperGroupTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/styles.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const ContainerListSubItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerListSubItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/subcomponents/NavListSub/subcomponents/NavItemSub/subcomponents/NavItemSubContent/styles.d.ts

@@ -1,22 +1,6 @@
 /// <reference types="react" />
 import { DotIconProps } from './types';
-export declare const NavSubItemContentRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const NavSubItemContentRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "disabled" | "children" | "tabIndex" | "className" | "action" | "classes" | "alignItems" | "sx" | "autoFocus" | "selected" | "dense" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "style" | "disabled" | "children" | "tabIndex" | "className" | "action" | "alignItems" | "divider" | "dense" | "sx" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "disableGutters" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const DotIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & DotIconProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/components/SplitLayout/{index.15756f0f.js → index.74091a81.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
+import { a6 as componentName, a7 as SPLITLAYOUT_PREFIX, T as TEST_PROP_ID } from "../areas/constants.5387d83e.js";
 import clsx from "clsx";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { S as SplitterLayout } from "../../react-splitter-layout.8b1655c8.js";
 const SplitLayoutRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LSplitLayout?.styleOverrides
@@ -27,7 +27,6 @@ const SplitDetail = styled("div")(() => ({
   top: "0px",
   bottom: "0px"
 }));
-const componentName = "M4LSplitLayout";
 generateUtilityClasses(componentName, [
   "root",
   "firstPart",
@@ -53,7 +52,6 @@ const useSplitLayoutUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
-const SPLITLAYOUT_PREFIX = "M4LSplitLayout";
 const getNameSplitLayoutDataTestId = (KEY) => {
   return `${SPLITLAYOUT_PREFIX}-${KEY}`;
 };

package/components/ToastContainer/{index.dbd78941.js → index.f9b507b9.js}

@@ -2,14 +2,14 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { styled, generateUtilityClasses } from "@mui/material";
 import { ToastContainer as ToastContainer$1 } from "react-toastify";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.0718eeac.js";
+import { a8 as componentName } from "../areas/constants.5387d83e.js";
+import { g as getComponentUtilityClass } from "../../utils/index.9ee4c99a.js";
 import { useEnvironment } from "@m4l/core";
 import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.ee7b85c9.js";
+import { I as Icon } from "../Icon/index.d5fed418.js";
 const ToastContainerRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LToastContainer?.styleOverrides
 }));
-const componentName = "M4LToastContainer";
 const toastClasses = generateUtilityClasses(
   componentName,
   [

package/components/animate/LoadingScreen/{index.1a83615a.js → index.779690a7.js}

@@ -2,7 +2,6 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { alpha } from "@mui/material/styles";
 import { styled, Box } from "@mui/material";
-import { L as Logo } from "../../../assets/Logo/index.109a182d.js";
 const RootStyle = styled("div", {
   shouldForwardProp: (props) => props !== "variant"
 })(({ theme, variant }) => ({
@@ -15,7 +14,7 @@ const RootStyle = styled("div", {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.vars.palette.background.default,
   ...variant === "microfrontend" && {
     position: "relative",
     zIndex: 0
@@ -34,8 +33,7 @@ function LoadingScreen(props) {
           ease: "easeInOut",
           repeatDelay: 1,
           repeat: Infinity
-        },
-        children: /* @__PURE__ */ jsx(Logo, { disabledLink: true, sx: { width: 32, height: 32 } })
+        }
       }
     ),
     /* @__PURE__ */ jsx(
@@ -78,7 +76,7 @@ function LoadingScreen(props) {
           height: 60,
           borderRadius: "25%",
           position: "absolute",
-          border: (theme) => `solid 8px ${alpha(theme.palette.primary.dark, 0.24)}`
+          border: (theme) => `solid 8px ${alpha(theme.colorSchemes.finalTheme.palette.primary.dark, 0.24)}`
         }
       }
     )

package/components/animate/PropagateLoader/{index.76d7ea70.js → index.a9da8d00.js}

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { styled, useTheme } from "@mui/material";
+import { useTheme } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import { P as PropagateLoader$1 } from "../../../react-spinners.342a6578.js";
 const WrapperPropageteLoader = styled("div")(({ theme }) => ({
   right: 0,
@@ -11,7 +12,7 @@ const WrapperPropageteLoader = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  background: theme.palette.background.default
+  background: theme.vars.palette.background.default
 }));
 const PropagateLoader = () => {
   const { palette } = useTheme();

package/components/animate/PropagateLoader/syles.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const WrapperPropageteLoader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperPropageteLoader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/animate/{index.87296638.js → index.b8497385.js}

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { forwardRef, useRef } from "react";
-import { IconButton, Box, styled, alpha } from "@mui/material";
+import { IconButton, Box, alpha } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import SimpleBarReact from "simplebar-react";
 const varSmall = {
   hover: { scale: 1.1 },
@@ -40,7 +41,7 @@ styled(SimpleBarReact)(({ theme }) => ({
   height: "100%",
   "& .simplebar-scrollbar": {
     "&:before": {
-      backgroundColor: alpha(theme.palette.grey[600], 0.48)
+      backgroundColor: alpha(theme.colorSchemes.finalTheme.palette.grey[600], 0.48)
     },
     "&.simplebar-visible:before": {
       opacity: 1

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const WrapperAreaChips: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AreaSelect: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const EditAreaHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperAreaChips: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AreaSelect: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EditAreaHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;