@m4l/components 1.0.17 → 1.0.19

package/styles/index.2e92ddf7.js

@@ -0,0 +1,1444 @@
+import { styled, alpha, Skeleton, Popover, IconButton, Stack, Tabs, Dialog, ListItemText, ListItemButton } from "@mui/material";
+import { styled as styled$1, alpha as alpha$1 } from "@mui/material/styles";
+import SimpleBarReact from "simplebar-react";
+import { h as gridLayoutClasses } from "../components/GridLayout/index.932b1f7a.js";
+import { a as ResizableBox } from "../react-resizable.a59c14f4.js";
+import { a as areasAdminClasses } from "../components/areas/components/AreasAdmin/index.af6a6611.js";
+import { a as areasViewerClasses } from "../components/areas/components/AreasViewer/index.0527c2be.js";
+import { g as gpsToolsClasses } from "../components/maps/components/GpsTools/index.c825dd0d.js";
+import { M as MAP_ZINDEX_OVER_MAP } from "../components/maps/components/Map/index.b9c876b4.js";
+import { R as RHFormProvider } from "../contexts/RHFormContext/index.78938329.js";
+import { S as Stack$1 } from "../components/mui_extended/Stack/index.ea662d2e.js";
+import { I as Image } from "../components/Image/index.54e91742.js";
+const RootStyle$1 = styled("div", {
+  shouldForwardProp: (props) => props !== "variant"
+})(({ theme, variant }) => ({
+  right: 0,
+  bottom: 0,
+  zIndex: 99999,
+  width: "100%",
+  height: "100%",
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: theme.vars.palette.background.default,
+  ...variant === "microfrontend" && {
+    position: "relative",
+    zIndex: 0
+  }
+}));
+styled$1(SimpleBarReact)(({ theme }) => ({
+  height: "100%",
+  "& .simplebar-scrollbar": {
+    "&:before": {
+      backgroundColor: alpha(theme.colorSchemes.finalTheme.palette.grey[600], 0.48)
+    },
+    "&.simplebar-visible:before": {
+      opacity: 1
+    }
+  },
+  "& .simplebar-track.simplebar-vertical": {
+    width: 10
+  },
+  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
+    height: 6
+  },
+  "& .simplebar-mask": {
+    zIndex: "inherit"
+  },
+  "& .simplebar-content": {
+    display: "flex",
+    height: "100%"
+  }
+}));
+const AnimatedScrollRoot = styled$1("div")(() => ({
+  width: "100%",
+  height: "100%",
+  overflowX: "auto",
+  overflowY: "hidden",
+  transition: "scroll-behavior 0.5s",
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+  "&::-webkit-scrollbar": {
+    width: 0
+  }
+}));
+const IconRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LIcon?.styleOverrides
+}));
+const DivIcon = styled$1("div", {
+  shouldForwardProp: (props) => props !== "src" && props !== "rotationAngle"
+})(({ src, rotationAngle }) => ({
+  maskPosition: "center",
+  maskRepeat: "no-repeat",
+  maskSize: "cover",
+  WebkitMaskRepeat: "no-repeat",
+  mask: `url(${src})`,
+  WebkitMask: `url(${src})`,
+  WebkitMaskSize: "cover",
+  ...rotationAngle && {
+    transform: `rotate(${rotationAngle}deg)`
+  }
+}));
+const IconButtonRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LIconButton?.styleOverrides
+}));
+const react_resizable_css$1 = {};
+const GridLayoutRoot = styled$1("div")`
+  overflow: auto;
+  position: relative;
+  transition: height 200ms ease;
+
+  .${gridLayoutClasses.gridItemRoot} {
+    transition: all 200ms ease;
+    transition-property: left, top;
+  }
+  .${gridLayoutClasses.gridItemRoot} img {
+    pointer-events: none;
+    user-select: none;
+  }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.cssTransforms} {
+    transition-property: transform;
+    transition: left 0.1s ease, top 0.1s ease;
+  }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.maximizeOther} {
+    display: none;
+  }
+
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemFreeMove} {
+    z-index: 1;
+    will-change: width, height;
+  }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.resizing} {
+    z-index: 2000;
+    will-change: width, height;
+  }
+
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.dragging} {
+    transition: none;
+    z-index: 4000;
+    will-change: transform;
+  }
+
+  .${gridLayoutClasses.gridItemRoot}.dropping {
+    visibility: hidden;
+  }
+
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemPlaceholder} {
+    background: ${(props) => props.theme.vars.palette.state?.toneOp};
+    opacity: 0.5;
+    transition-duration: 100ms;
+    z-index: 3000;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    background-image: unset;
+
+    & .M4LIcon-icon {
+      width: 10px;
+      height: 10px;
+      min-width: 10px;
+      min-height: 10px;
+      background-color: ${(props) => alpha$1(props.theme.colorSchemes.finalTheme.palette.text.primary, 0.3)};
+    }
+  }
+
+  /*  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle::after {
+        content: '';
+        position: absolute;
+        right: 3px;
+        bottom: 3px;
+        width: 5px;
+        height: 5px;
+        border-right: 2px solid rgba(0, 0, 0, 0.4);
+        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+    } */
+
+  .react-resizable-hide > .react-resizable-handle {
+    display: none;
+    border-color: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+  }
+
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-sw {
+    bottom: 3px;
+    left: 3px;
+    cursor: sw-resize;
+    transform: rotate(90deg);
+    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom-right-radius: 15%;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-se {
+    bottom: 3px;
+    right: 3px;
+    cursor: se-resize;
+    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom-right-radius: 15%;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-nw {
+    top: 3px;
+    left: 3px;
+    cursor: nw-resize;
+    transform: rotate(180deg);
+    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom-right-radius: 15%;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-ne {
+    top: 3px;
+    right: 3px;
+    cursor: ne-resize;
+    transform: rotate(270deg);
+    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom-right-radius: 15%;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-w,
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-e {
+    top: 50%;
+    margin-top: -10px;
+    cursor: ew-resize;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-w {
+    left: 0;
+    transform: rotate(135deg);
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-e {
+    right: 0;
+    transform: rotate(315deg);
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-n,
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-s {
+    left: 50%;
+    margin-left: -10px;
+    cursor: ns-resize;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-n {
+    top: 0;
+    transform: rotate(225deg);
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-s {
+    bottom: 0;
+    transform: rotate(45deg);
+  }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.maximizeMe} > .react-resizable-handle,
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.resizeHide} > .react-resizable-handle {
+    display: none;
+  }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.invisible} {
+    display: none;
+  }
+
+  ${react_resizable_css$1}
+  ${(props) => props.theme.components?.M4LGridLayout?.styleOverrides}
+`;
+styled$1("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderRadius: theme.spacing(0.5),
+  height: theme.spacing(4.5),
+  minHeight: theme.spacing(4.5),
+  backgroundColor: theme.vars.palette.background.header,
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  marginBottom: "0px"
+}));
+styled$1("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  gap: theme.spacing(2)
+}));
+const AccordionRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LAccordion?.styleOverrides
+}));
+const WarpperTypography = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LTypography?.styleOverrides
+}));
+const AvatarRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LAvatar?.styleOverrides
+}));
+const ButtonRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LButton?.styleOverrides
+}));
+styled$1(Skeleton)(({ theme }) => ({
+  borderRadius: theme.spacing(0.5)
+}));
+const FieldLabelRoot = styled("label")(({ theme }) => ({
+  ...theme.components?.M4LFieldLabel?.styleOverrides
+}));
+const CheckBoxRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LCheckBox?.styleOverrides
+}));
+const BadgeRoot = styled$1("div")(({ theme }) => ({
+  display: "flex",
+  ...theme.components?.M4LBadge?.styleOverrides
+}));
+const ImageRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LImage?.styleOverrides
+}));
+const WrapperImageButton = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LImageButton?.styleOverrides
+}));
+const LoadingButtonRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LLoadingButton?.styleOverrides
+}));
+const PopoverRoot = styled$1(Popover)(({ theme }) => ({
+  ...theme.components?.M4LPopover?.styleOverrides
+}));
+styled$1(IconButton)(() => ({}));
+const LabelMemuItem = styled$1("div")(({ theme }) => ({
+  height: "22px",
+  overflow: "hidden",
+  wordBreak: "break-all",
+  marginLeft: theme.spacing(1.5),
+  display: "flex",
+  alignItems: "center"
+}));
+const MUISTack = styled(Stack)(({ theme }) => ({
+  ...theme.components?.M4LStack?.styleOverrides
+}));
+const MUITabs = styled(Tabs)(({ theme }) => ({
+  ...theme.components?.M4LTabs?.styleOverrides
+}));
+const TabContentRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LTabContent?.styleOverrides
+}));
+const PagerRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LPager?.styleOverrides
+}));
+const TabRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LTab?.styleOverrides
+}));
+const SKTTabWrapper = styled$1("div")(({ theme }) => ({
+  padding: theme.spacing(1.5, 2)
+}));
+const WrapperResizeable = styled$1(ResizableBox)(({ theme }) => ({
+  "&.react-resizable": {
+    position: "relative",
+    width: "100%",
+    height: "100%"
+  },
+  "& .custom-handle-se": {
+    width: "7px",
+    height: "7px",
+    position: "absolute",
+    bottom: "3px",
+    right: "3px",
+    cursor: "se-resize",
+    borderRight: `2px solid ${theme.vars.palette.text.disabled}`,
+    borderBottom: `2px solid ${theme.vars.palette.text.disabled}`,
+    borderBottomRightRadius: "15%"
+  },
+  "& .custom-handle-nw": {
+    width: "7px",
+    height: "7px",
+    position: "absolute",
+    top: "3px",
+    left: "3px",
+    cursor: "se-resize",
+    transform: "rotate(180deg)",
+    borderRight: `2px solid ${theme.vars.palette.text.disabled}`,
+    borderBottom: `2px solid ${theme.vars.palette.text.disabled}`,
+    borderBottomRightRadius: "15%"
+  },
+  "& .react-resizable-handle": {
+    position: "absolute",
+    width: "20px",
+    height: "20px",
+    margin: "4px",
+    backgroundRepeat: "no-repeat",
+    backgroundOrigin: "content-box",
+    boxSizing: "border-box",
+    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",
+    padding: "0 3px 3px 0"
+  },
+  "& .react-resizable-handle-sw": {
+    bottom: "0",
+    left: "0",
+    cursor: "sw-resize",
+    transform: "rotate(90deg)",
+    position: "absolute"
+  },
+  ".M4LImage-root.custom-handle.custom-handle-se": {
+    bottom: "0",
+    right: "0",
+    cursor: "se-resize",
+    position: "absolute",
+    "& .M4LImage-img": {
+      opacity: "0.5",
+      filter: "invert(0.4) hue-rotate(20deg) saturate(1000%)"
+    }
+  },
+  "& .M4LImage-root.custom-handle.custom-handle-nw": {
+    top: "0",
+    left: "0",
+    cursor: "nw-resize",
+    transform: "rotate(180deg)",
+    "& .M4LImage-img": {
+      opacity: "0.5",
+      filter: "invert(0.4) hue-rotate(20deg) saturate(1000%)"
+    }
+  },
+  "& .react-resizable-handle-ne": {
+    top: "0",
+    right: "0",
+    cursor: "ne-resize",
+    transform: "rotate(270deg)"
+  },
+  "& .react-resizable-handle-w, .react-resizable-handle-e": {
+    top: "50%",
+    marginTop: "-10px",
+    cursor: "ew-resize"
+  },
+  "& .react-resizable-handle-w": {
+    left: "0",
+    transform: "rotate(135deg)"
+  },
+  "& .react-resizable-handle-e": {
+    right: "0",
+    transform: "rotate(315deg) "
+  },
+  "& .react-resizable-handle-n,.react-resizable-handle-s": {
+    left: "50%",
+    marginLeft: "-10px",
+    cursor: "ns-resize"
+  },
+  "& .react-resizable-handle-n": {
+    top: "0",
+    transform: "rotate(225deg)"
+  },
+  "& .react-resizable-handle-s": {
+    bottom: "0",
+    transform: "rotate(45deg)"
+  }
+}));
+const FormProviderRoot = styled("form")(({ theme }) => ({
+  ...theme.components?.M4LRHFormProvider?.styleOverrides
+}));
+const AutocompleteRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFAutocomplete?.styleOverrides
+}));
+const WrapperOption = styled$1("li")(({ theme }) => ({
+  "& .m4l_image": {
+    marginRight: theme.spacing(1.5)
+  }
+}));
+const HelperTextRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LErrorLabel?.styleOverrides
+}));
+const WrapperStandarActions = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LCommonActions?.styleOverrides
+}));
+const RHFColorPickerRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFColorPicker?.styleOverrides
+}));
+styled$1("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+}));
+styled$1("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  paddingRight: `${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    justifyContent: "flex-start"
+  }
+}));
+styled$1("div")(({ theme }) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  height: `${theme.spacing(4.5)}`,
+  border: `1px solid ${theme.vars.palette.divider}`,
+  borderRadius: `${theme.spacing(1)}`,
+  padding: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+const RHFAutocompleteAsyncRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFAutocompleteAsync?.styleOverrides
+}));
+const RHFCheckboxRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFCheckbox?.styleOverrides
+}));
+styled$1("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px"
+}));
+styled$1(Skeleton)(() => ({
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px"
+}));
+const ContainerCheckTypography = styled$1("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+const RHFDateTimeRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFDateTime?.styleOverrides
+}));
+const SkeletonTextFieldRoot = styled$1("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: "4px"
+}));
+const WrapperSkeletonRHFTextField = styled$1("div")(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: `1px solid ${theme.vars.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1),
+  gap: "4px"
+}));
+const RHFTextFieldRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFTextField?.styleOverrides
+}));
+styled$1("div")(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  border: `1px solid ${theme.vars.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1)
+}));
+const RHFTextFieldPasswordRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFTextFieldPassword?.styleOverrides
+}));
+const RHFPeriodRoot = styled$1("div")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1),
+  ...theme.components?.M4LRHFPeriod?.styleOverrides
+}));
+const ContainerPeriod = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LPeriod?.styleOverrides
+}));
+styled$1("div")(({ theme }) => ({
+  width: "1px",
+  height: "20px",
+  backgroundColor: theme.vars.palette.divider
+}));
+styled$1("div", {
+  shouldForwardProp: (props) => props !== "readOnly"
+})(({ theme, readOnly }) => ({
+  display: "flex",
+  width: "100%",
+  height: "37.5px",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: `1px solid ${theme.vars.palette.divider}`,
+  ...readOnly && {
+    border: "0px"
+  },
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px"
+}));
+styled$1("div")(({ theme }) => ({
+  ...theme.colorSchemes.finalTheme.typography.body2,
+  width: "100%",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+styled$1("div")(({ theme }) => ({
+  ...theme.colorSchemes.finalTheme.typography.body2,
+  width: "70px",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+const UploadImageRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFUploadImage?.styleOverrides
+}));
+const WrapperRHFUploadImage = styled("div")(() => ({
+  width: "inherit",
+  height: "inherit",
+  padding: "1px"
+}));
+styled$1("div")(() => ({
+  display: "flex",
+  flexDirection: "row",
+  border: "1px solid gray",
+  "&.active": {
+    border: "1px solid red"
+  }
+}));
+styled$1("div")(({ theme }) => ({
+  height: "100%",
+  width: theme.spacing(1),
+  backgroundColor: theme.vars.palette.background.default,
+  "&.active": {
+    backgroundColor: theme.vars.palette.primary.main
+  }
+}));
+const EditAreaHeader = styled$1("div")(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  height: "25px",
+  borderBottom: "1px solid",
+  borderColor: theme.vars.palette.state.default,
+  justifyContent: "space-between",
+  alignItems: "center"
+}));
+const AreasAdminRoot = styled("div")`
+  display: flex;
+  position: relative;
+  background-color: transparent;
+
+  //areaRoot
+  & .${areasAdminClasses.areaChipRoot} {
+    display: flex;
+  }
+
+  ${(props) => props.theme.components?.M4LAreasAdmin?.styleOverrides}
+`;
+const RootStyle = styled$1("div")(({ theme }) => ({
+  flexGrow: "1",
+  height: "100%",
+  overflow: "hidden",
+  ...theme.components?.M4LScrollBar?.styleOverrides
+}));
+const SimpleBarStyle = styled$1(SimpleBarReact)`
+  /* flex-grow: 1;
+    height: 100%;
+    overflow: hidden; */
+  height: 100%;
+
+  .simplebar-scrollbar {
+    .simplebar-visible:before {
+      opacity: 1;
+    }
+  }
+  .simplebar-track.simplebar-vertical {
+    width: 30;
+  }
+  .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+    height: 6;
+  }
+
+  .simplebar-mask {
+    z-index: 'inherit';
+  }
+
+  .simplebar-content {
+    // display: 'flex',
+    // flexDirection: 'column',
+    // height: '100%',
+  }
+
+  .simplebar-content-wrapper[style*='overflow: hidden scroll;'] {
+    .simplebar-content {
+      margin-right: 16px;
+    }
+  }
+`;
+styled$1(SimpleBarReact)(({ theme }) => ({
+  height: "100%",
+  "& .simplebar-scrollbar": {
+    "&:before": {
+      backgroundColor: alpha$1(theme.colorSchemes.finalTheme.palette.grey[600], 0.48)
+    },
+    "&.simplebar-visible:before": {
+      opacity: 1
+    }
+  },
+  "& .simplebar-track.simplebar-vertical": {
+    width: 10
+  },
+  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
+    height: 6
+  },
+  "& .simplebar-mask": {
+    zIndex: "inherit"
+  },
+  "& .simplebar-content": {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  },
+  '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] ': {
+    "& .simplebar-content": {
+      marginRight: "12px"
+    }
+  }
+}));
+const react_resizable_css = {};
+const AreasViewerRoot = styled("div")`
+  /* display: flex; */
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /* flex-grow: 1; */
+  position: relative;
+
+  //areaRoot
+  & .${areasViewerClasses.areaRoot} {
+    display: none;
+    position: absolute;
+    /* flex-grow: 1; */
+    flex-direction: row;
+    inset: 0;
+    /* width: 100%; */
+    overflow: hidden;
+    justify-content: top;
+    align-items: flex-start;
+
+    visibility: hidden;
+  }
+
+  & .${areasViewerClasses.areaRoot}.${areasViewerClasses.selected} {
+    display: block;
+    visibility: visible;
+  }
+
+  &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaRoot} {
+  }
+
+  // areaGridLayoutPanelContainer
+  & .${areasViewerClasses.areaGridLayoutPanelContainer} {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+  &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaGridLayoutPanelContainer} {
+    flex-direction: column-reverse;
+  }
+  // areaGridLayout
+  & .${areasViewerClasses.areaGridLayout} {
+    height: 100% !important;
+    overflow: auto;
+    flex-grow: 1;
+  }
+  &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaGridLayout} {
+    flex-direction: column-reverse;
+    height: unset;
+    width: 100%;
+  }
+  // areaGridLayoutPopupsContainer
+  & .${areasViewerClasses.areaGridLayoutPopupsContainer} {
+    z-index: 1; //Garantizar q el contenedor de los popus este por encima de los layouts
+    //     // ' .react-draggable': {
+    //     //     position: 'absolute',
+    //     // },
+  }
+
+  // PanelWindowsRoot
+  & .${areasViewerClasses.panelWindowsRoot} {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+  &.${areasViewerClasses.isMobile} .${areasViewerClasses.panelWindowsRoot} {
+    flex-direction: row;
+  }
+
+  // windowRoot
+  & .${areasViewerClasses.windowRoot} {
+    inset: 0;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    /* height: 100%; */
+    /* width: 100%; */
+    overflow: hidden;
+    border: 1px solid gray;
+
+    background-color: ${(props) => props.theme.vars.palette.background.default};
+    padding: ${(props) => props.theme.spacing(0)};
+  }
+
+  & .${areasViewerClasses.windowRoot}.${areasViewerClasses.selected} {
+    border-top: 1px solid green;
+  }
+  // windowHeaderTitle
+  & .${areasViewerClasses.windowHeaderTitle} {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    color: ${(props) => props.theme.vars.palette.text.primary};
+    text-overflow: ellipsis;
+  }
+  // windowHeaderMainActions
+  & .${areasViewerClasses.windowHeaderMainActions} {
+    display: flex;
+
+    gap: 4px;
+  }
+
+  // windowHeaderMainActions
+  & .${areasViewerClasses.windowContent} {
+    flex-grow: 1;
+    position: relative;
+  }
+
+  // windowModalRoot
+  & .${areasViewerClasses.windowModalRoot} {
+    padding: 16px;
+  }
+
+  ${react_resizable_css}
+
+  ${(props) => props.theme.components?.M4LAreasViewer?.styleOverrides}
+`;
+const LinearProgressIndeterminateRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LinearProgressIndeterminate?.styleOverrides
+}));
+const LoadingErrorRoot = styled$1("div")(({ theme }) => ({
+  ...theme?.components?.M4LoadingError?.styleOverrides
+}));
+const MFLoaderRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LMFLoader?.styleOverrides
+}));
+const WindowRoot = styled("div")`
+  inset: 0;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  /* height: 100%; */
+  /* width: 100%; */
+  overflow: hidden;
+  border: 1px solid gray;
+
+  background-color: ${(props) => props.theme.vars.palette.background.default};
+  padding: ${(props) => props.theme.spacing(0)};
+  &.${areasViewerClasses.selected} {
+    border-top: 1px solid green;
+  }
+
+  // windowHeader
+  /* 
+    &.${areasViewerClasses.loading} .${areasViewerClasses.windowHeader} {
+        border-bottom: 2px solid red !important; 
+    }
+    */
+  // windowHeaderTitle
+  & .${areasViewerClasses.windowHeaderTitle} {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    color: ${(props) => props.theme.vars.palette.text.primary};
+    text-overflow: ellipsis;
+  }
+
+  & .${areasViewerClasses.windowHeaderCancelHandle} {
+    display: flex;
+    cursor: default;
+  }
+
+  // windowHeaderMainActions
+  & .${areasViewerClasses.windowHeaderMainActions} {
+    display: flex;
+
+    gap: 4px;
+  }
+
+  // windowHeaderMainActions
+  & .${areasViewerClasses.windowContent} {
+    flex-grow: 1;
+    position: relative;
+  }
+
+  & .${areasViewerClasses.windowContent}.${areasViewerClasses.colapsed} {
+    display: none !important;
+  }
+  // windowModalRoot
+  & .${areasViewerClasses.windowModalRoot} {
+    padding: 16px;
+  }
+
+  // windowToastiesContainer
+  & .${areasViewerClasses.windowToastiesContainer} {
+    padding: 4px;
+  }
+
+  // windowToastyContainer
+  & .${areasViewerClasses.windowToastyContainer} {
+    display: flex;
+    flex-direction: column;
+  }
+  // windowToastyContainer
+  & .${areasViewerClasses.windowToastyContainer}.${areasViewerClasses.success} {
+    background-color: ${(props) => props.theme.vars.palette.success.main};
+  }
+
+  // windowToastyMeesageButtonsContainer
+  & .${areasViewerClasses.windowToastyMeesageButtonsContainer} {
+    display: flex;
+  }
+  & .MuiLinearProgress-root {
+    width: 100%;
+  }
+
+  // windowToastyMessage
+  & .${areasViewerClasses.windowToastyMessage} {
+    flex-grow: 1;
+  }
+
+  // windowToastyContainer
+  & .${areasViewerClasses.windowToastyPin}.${areasViewerClasses.pinIn} {
+    border: 1px solid red;
+  }
+
+  ${(props) => props.theme.components?.M4LAreasViewerWindow?.styleOverrides}
+`;
+styled$1("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+const WrapperWindowModal = styled$1(Dialog)(({ theme }) => ({
+  hola: 1,
+  backgroundColor: theme.vars.palette.background.paper,
+  "& .MuiDialog-container": {},
+  "&.m4l_selected": {
+    borderTop: "1px solid green"
+  },
+  ...theme.components?.M4LAreasViewerModal?.styleOverrides
+}));
+const FormatterRootContainer = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LFormatter?.styleOverrides
+}));
+const DataGridRoot = styled$1("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  padding: "0px",
+  inset: "0px",
+  overflow: "hidden",
+  ...theme.components?.M4LDataGrid?.styleOverrides
+}));
+const WrapperSkeleton = styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  alignItems: "center"
+}));
+const WrapperColumnsConfig = styled$1("div")(({ theme }) => ({
+  color: theme.vars.palette.text.primary,
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  width: "100%"
+}));
+styled$1("div")(({ theme }) => ({
+  color: theme.vars.palette.text.primary,
+  fontSize: theme.typography.h4.fontSize
+}));
+const DivSelColumns = styled$1("div")(({ theme }) => ({
+  ...theme.colorSchemes.finalTheme.typography.bodyDens,
+  color: theme.vars.palette.text.primary,
+  padding: `16px 8px`
+}));
+const WrapperDataGrid = styled$1("div")(() => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  overflow: "auto"
+}));
+styled$1("div")(() => ({
+  display: "flex",
+  flexDirection: "row"
+}));
+const ColumnActions = styled$1("div")(() => ({
+  paddingTop: "16px",
+  paddingBottom: "8px",
+  display: "flex",
+  flexDirection: "row"
+}));
+styled$1("div")(({ theme }) => ({
+  paddingTop: theme.spacing(3),
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  "& > button": {
+    marginLeft: "10px"
+  }
+}));
+const PrintingSystemRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LPrintingSystem?.styleOverrides
+}));
+const LanguagePopoverRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LanguagePopover?.styleOverrides
+}));
+const LabelItem = styled$1("div")(({ theme }) => ({
+  marginLeft: theme.spacing(1)
+}));
+const ContainerProgress = styled$1("div")(({ theme }) => ({
+  padding: theme.spacing(0.75, 0),
+  margin: theme.spacing(0, 1.25)
+}));
+const ContainerMenuItems = styled$1("div")(() => ({
+  display: "flex",
+  flexDirection: "column"
+}));
+const ContainerImage = styled$1("div")(() => ({
+  display: "flex",
+  gap: "4px",
+  width: "16px",
+  height: "16px"
+}));
+const DivGpsToolsRoot = styled$1("div")`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
+
+  z-index: ${MAP_ZINDEX_OVER_MAP};
+
+  .${gpsToolsClasses.gpsToolsTabContent}.${gpsToolsClasses.hidden} {
+    display: none;
+  }
+
+  .${gpsToolsClasses.gpsToolsGeofencesList} .M4LDataGrid-root {
+    height: unset !important;
+    flex-grow: 1;
+  }
+
+  .${gpsToolsClasses.toolGeofencesAddEditGeneral} {
+    flex-grow: 1;
+  }
+
+  ${(props) => props.theme.components?.M4LGpsTools?.styleOverrides}
+`;
+const RHFormProviderStyled = styled$1(RHFormProvider)`
+  height: 100% !important;
+
+  .${gpsToolsClasses.gpsToolsGeofencesAddEditContent} {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    height: 100%;
+  }
+
+  .${gpsToolsClasses.gpsToolsTabContent}.${gpsToolsClasses.hidden} {
+    display: none;
+  }
+
+  ${(props) => props.theme.components?.M4LGpsToolsGeofencesAddEdit?.styleOverrides}
+`;
+const StackGeofenceListRoot = styled$1(Stack$1)`
+  padding: 12px;
+  position: relative !important;
+  flex-grow: 1;
+  width: 100%;
+
+  .M4LDataGrid-root {
+    height: unset !important;
+    flex-grow: 1;
+  }
+
+  ${(props) => props.theme.components?.M4LGpsToolsGeofencesList?.styleOverrides}
+`;
+const NavLinkRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LNavLink?.styleOverrides
+}));
+const WrapperNoItemSelected = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LNoItemSelected?.styleOverrides
+}));
+const Img = styled$1(Image)(() => ({
+  display: "flex"
+}));
+const Label = styled$1("span")(({ theme }) => ({
+  ...theme.colorSchemes.finalTheme.typography.body,
+  padding: `${theme.spacing(1.5)} ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}`
+}));
+const WrapperSKTNoItemSelected = styled$1("div")(() => ({
+  display: "flex",
+  width: "100%",
+  minWidth: "100%",
+  minHeight: "230px",
+  mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
+  WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`
+}));
+const Container = styled$1("div")(() => ({
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-start",
+  gap: "4px"
+}));
+const Actions = styled$1("div")(({ theme }) => ({
+  position: "relative",
+  height: "auto",
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  "& .MuiFormControl-root": {
+    flexGrow: 1
+  },
+  [theme.breakpoints.up("sm")]: {
+    "& .MuiFormControl-root:nth-of-type(1)": {
+      marginRight: theme.spacing(3)
+    }
+  }
+}));
+const GridWrapper = styled$1("div")(() => ({
+  position: "relative",
+  flexGrow: "1",
+  width: "100%"
+}));
+const PaperFormRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LPaperForm?.styleOverrides
+}));
+const HeaderContainer = styled$1("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  borderBottom: `1px solid ${theme.vars.palette.divider}`,
+  paddingBottom: theme.spacing(3),
+  marginBottom: theme.spacing(2),
+  overflow: "hidden"
+}));
+const IconTitleContainer = styled$1("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  alignItems: "center",
+  color: theme.vars.palette.text.primary,
+  ...theme.colorSchemes.finalTheme.typography.subtitle1
+}));
+const IconHeader = styled$1("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: theme.spacing(1.5)
+}));
+const Content = styled$1("div")(() => ({
+  flexGrow: 1,
+  position: "relative"
+}));
+const SkTPaperFormHeader = styled$1("div")(({ theme }) => ({
+  width: "auto",
+  display: "grid",
+  gridTemplateColumns: `${theme.spacing(2)} auto`,
+  gridGap: `${theme.spacing(1.5)}`,
+  paddingBottom: `${theme.spacing(3)}`,
+  borderBottom: `1px solid ${theme.vars.palette.divider}`,
+  marginBottom: `${theme.spacing(3)}`
+}));
+const PDFVeiwerRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LPDFViewer?.styleOverrides
+}));
+const PropertyValueRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LPropertyValue?.styleOverrides
+}));
+const SplitLayoutRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LSplitLayout?.styleOverrides
+}));
+const SplitMaster = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden"
+}));
+const SplitDetail = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  overflow: "hidden",
+  position: "absolute",
+  left: "0px",
+  right: "0px",
+  top: "0px",
+  bottom: "0px"
+}));
+const ToastContainerRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LToastContainer?.styleOverrides
+}));
+const SideBarRoot = styled$1("div")(({ theme }) => ({
+  ...theme.components?.M4LSideBar?.styleOverrides
+}));
+styled$1("div", {
+  shouldForwardProp: (props) => props !== "collapsed"
+})((props) => ({
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "center",
+  alignItems: props.collapsed ? "center" : "normal",
+  padding: props.theme.spacing(3, 2.5, 2, 2.5)
+}));
+const WrapperGroup = styled$1("ul")(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column",
+  gap: theme.spacing(0.5),
+  listStyle: "none",
+  padding: "0px"
+}));
+const ContentGroupsRoot = styled$1("ul")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%"
+}));
+const WrapperGroupTitle = styled$1("li")(({ theme }) => ({
+  ...theme.colorSchemes.finalTheme.typography.overline,
+  paddingTop: theme.spacing(3),
+  paddingLeft: theme.spacing(2),
+  paddingBottom: theme.spacing(1),
+  color: theme.vars.palette.text.primary,
+  transition: theme.transitions.create("opacity", {
+    duration: theme.transitions.duration.shorter
+  })
+}));
+const NavItemMainRoot = styled$1("div", {
+  shouldForwardProp: (prop) => prop !== "activeRoot"
+})(({ activeRoot, theme }) => ({
+  ...activeRoot && {
+    ...theme.colorSchemes.finalTheme.typography.subtitle2,
+    color: theme.vars.palette.primary.main,
+    backgroundColor: alpha$1(
+      theme.colorSchemes.finalTheme.palette.primary.main,
+      theme.vars.palette.action.selectedOpacity
+    )
+  }
+}));
+styled$1(ListItemText, {
+  shouldForwardProp: (prop) => prop !== "isCollapse"
+})(({ isCollapse, theme }) => ({
+  whiteSpace: "nowrap",
+  transition: theme.transitions.create(["width", "opacity"], {
+    duration: theme.transitions.duration.shorter
+  }),
+  ...isCollapse && {
+    width: 0,
+    opacity: 0
+  }
+}));
+const ArrowIconRoot$1 = styled("div")(() => ({
+  display: "flex",
+  alignSelf: "center",
+  lineHeight: 0
+}));
+const ContainerListSubItem = styled$1("div")(({ theme }) => ({
+  width: "100%",
+  height: "auto",
+  paddingLeft: theme.spacing(2.75)
+}));
+const NavListSubItemRoot = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column"
+}));
+const NavSubItemContentRoot = styled$1(ListItemButton)(({ theme }) => ({
+  display: "flex",
+  padding: theme.spacing(0, 2),
+  alignItems: "center",
+  height: theme.spacing(6),
+  borderRadius: theme.spacing(1),
+  "& .m4l_icon": {
+    marginRight: theme.spacing(1)
+  }
+}));
+styled$1("span", {
+  shouldForwardProp: (props) => props !== "active"
+})(({ theme, active }) => ({
+  width: "22px",
+  height: "22px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "50%",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shorter
+  }),
+  "&::before": {
+    content: '""',
+    width: "4px",
+    height: "4px",
+    borderRadius: "50%",
+    backgroundColor: theme.vars.palette.text.disabled,
+    ...active && {
+      transform: "scale(1.5)",
+      backgroundColor: theme.vars.palette.primary.main
+    }
+  }
+}));
+const CollapseButtonRoot = styled("div")(() => ({
+  display: "flex"
+}));
+styled("div")(() => ({
+  display: "flex"
+}));
+const WrapperContentMobile = styled("div")(({ theme }) => ({
+  "& .m4l_image": {
+    display: "flex",
+    gap: theme.spacing(3),
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }
+}));
+styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "auto",
+  padding: theme.spacing(0, 2)
+}));
+const AppBarRoot = styled$1("header")(({ theme }) => ({
+  ...theme.components?.M4LAppBar?.styleOverrides
+}));
+const AppBarComercialRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LAppBarCommercial?.styleOverrides
+}));
+const HamburgerMenuRoot = styled$1("header")(({ theme }) => ({
+  ...theme.components?.M4LHamburgerMenuCommercial?.styleOverrides
+}));
+const ArrowIconRoot = styled("div")(() => ({
+  display: "flex",
+  alignSelf: "center",
+  lineHeight: 0
+}));
+const SectionCommercialRoot = styled(Stack$1)(({ theme }) => ({
+  ...theme.components?.M4LSectionCommercial?.styleOverrides
+}));
+export {
+  SideBarRoot as $,
+  AppBarRoot as A,
+  PrintingSystemRoot as B,
+  ColumnActions as C,
+  DataGridRoot as D,
+  PropertyValueRoot as E,
+  FieldLabelRoot as F,
+  GridLayoutRoot as G,
+  HelperTextRoot as H,
+  IconRoot as I,
+  WrapperResizeable as J,
+  SimpleBarStyle as K,
+  LanguagePopoverRoot as L,
+  MFLoaderRoot as M,
+  NavLinkRoot as N,
+  NavItemMainRoot as O,
+  PDFVeiwerRoot as P,
+  NavSubItemContentRoot as Q,
+  RootStyle as R,
+  SkTPaperFormHeader as S,
+  NavListSubItemRoot as T,
+  ContainerListSubItem as U,
+  ContentGroupsRoot as V,
+  WrapperStandarActions as W,
+  WrapperGroup as X,
+  WrapperGroupTitle as Y,
+  CollapseButtonRoot as Z,
+  WrapperContentMobile as _,
+  WrapperSkeleton as a,
+  SplitLayoutRoot as a0,
+  SplitMaster as a1,
+  SplitDetail as a2,
+  ToastContainerRoot as a3,
+  RootStyle$1 as a4,
+  AnimatedScrollRoot as a5,
+  EditAreaHeader as a6,
+  AreasAdminRoot as a7,
+  WindowRoot as a8,
+  WrapperWindowModal as a9,
+  ButtonRoot as aA,
+  WrapperImageButton as aB,
+  LoadingButtonRoot as aC,
+  CheckBoxRoot as aD,
+  IconButtonRoot as aE,
+  LabelMemuItem as aF,
+  PagerRoot as aG,
+  PopoverRoot as aH,
+  MUISTack as aI,
+  MUITabs as aJ,
+  TabContentRoot as aK,
+  TabRoot as aL,
+  SKTTabWrapper as aM,
+  WarpperTypography as aN,
+  FormProviderRoot as aO,
+  AreasViewerRoot as aa,
+  AppBarComercialRoot as ab,
+  SectionCommercialRoot as ac,
+  ArrowIconRoot as ad,
+  HamburgerMenuRoot as ae,
+  FormatterRootContainer as af,
+  WrapperOption as ag,
+  AutocompleteRoot as ah,
+  RHFAutocompleteAsyncRoot as ai,
+  RHFCheckboxRoot as aj,
+  ContainerCheckTypography as ak,
+  RHFColorPickerRoot as al,
+  RHFDateTimeRoot as am,
+  RHFPeriodRoot as an,
+  SkeletonTextFieldRoot as ao,
+  WrapperSkeletonRHFTextField as ap,
+  RHFTextFieldRoot as aq,
+  RHFTextFieldPasswordRoot as ar,
+  UploadImageRoot as as,
+  WrapperRHFUploadImage as at,
+  RHFormProviderStyled as au,
+  StackGeofenceListRoot as av,
+  DivGpsToolsRoot as aw,
+  AccordionRoot as ax,
+  AvatarRoot as ay,
+  BadgeRoot as az,
+  WrapperColumnsConfig as b,
+  DivSelColumns as c,
+  WrapperDataGrid as d,
+  DivIcon as e,
+  ArrowIconRoot$1 as f,
+  ImageRoot as g,
+  ContainerMenuItems as h,
+  ContainerProgress as i,
+  ContainerImage as j,
+  LabelItem as k,
+  LinearProgressIndeterminateRoot as l,
+  LoadingErrorRoot as m,
+  WrapperNoItemSelected as n,
+  Label as o,
+  Img as p,
+  WrapperSKTNoItemSelected as q,
+  Container as r,
+  Actions as s,
+  GridWrapper as t,
+  HeaderContainer as u,
+  IconTitleContainer as v,
+  IconHeader as w,
+  PaperFormRoot as x,
+  Content as y,
+  ContainerPeriod as z
+};