@m4l/components 1.0.18 → 1.0.20

package/components/SideBar/{index.0298ead4.js → index.d0a63ab1.js}

@@ -1,31 +1,19 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { styled, alpha } from "@mui/material/styles";
+import { O as NavItemMainRoot, Q as NavSubItemContentRoot, T as NavListSubItemRoot, U as ContainerListSubItem, V as ContentGroupsRoot, X as WrapperGroup, Y as WrapperGroupTitle, Z as CollapseButtonRoot, _ as WrapperContentMobile, $ as SideBarRoot } from "../../styles/index.256d1a63.js";
 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 { generateUtilityClasses, Collapse, Drawer as Drawer$1, useTheme } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../utils/index.14912462.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.5cf594aa.js";
-import { T as Typography } from "../mui_extended/Typography/index.642798f1.js";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.04c02216.js";
+import { T as Typography } from "../mui_extended/Typography/index.fd25cf61.js";
 import clsx from "clsx";
 import { useLocation } from "react-router-dom";
-import { I as Image } from "../Image/index.19aa7ff5.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.ee45bba2.js";
+import { I as Image } from "../Image/index.2510b352.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.3525b765.js";
 import { useResponsive } from "@m4l/styles";
-const SideBarRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LSideBar?.styleOverrides
-}));
-styled("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 componentName = "M4LSideBar";
 generateUtilityClasses(
   componentName,
@@ -206,53 +194,6 @@ const SIDEBAR_PREFIX = "M4LSideBar";
 const getNameDataTestId = (KEY) => {
   return `${SIDEBAR_PREFIX}-${KEY}`;
 };
-const WrapperGroup = styled("ul")(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  flexDirection: "column",
-  gap: theme.spacing(0.5),
-  listStyle: "none",
-  padding: "0px"
-}));
-const ContentGroupsRoot = styled("ul")(() => ({
-  display: "flex",
-  width: "100%",
-  height: "100%"
-}));
-const WrapperGroupTitle = styled("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("div", {
-  shouldForwardProp: (prop) => prop !== "activeRoot"
-})(({ activeRoot, theme }) => ({
-  ...activeRoot && {
-    ...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(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 NavItemMainContent = (props) => {
   const { item, onClick, handlerOpen, changeVisible, open } = props;
   const { title, icon_url: icon, children } = item;
@@ -322,49 +263,6 @@ function NavItemMain(props) {
     }
   );
 }
-const ContainerListSubItem = styled("div")(({ theme }) => ({
-  width: "100%",
-  height: "auto",
-  paddingLeft: theme.spacing(2.75)
-}));
-const NavListSubItemRoot = styled$1("div")(() => ({
-  display: "flex",
-  flexDirection: "column"
-}));
-const NavSubItemContentRoot = styled(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("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 NavSubItemContent = (props) => {
   const { item, onClick, closePopover = () => {
   }, setOpenSub, openSub } = props;
@@ -610,12 +508,6 @@ const ContentGroups = () => {
     }
   );
 };
-const CollapseButtonRoot = styled$1("div")(() => ({
-  display: "flex"
-}));
-styled$1("div")(() => ({
-  display: "flex"
-}));
 function FooterSidebar(_props) {
   const { classes, companyLogoNormalUrl } = useSideBar$1();
   return /* @__PURE__ */ jsx(
@@ -704,20 +596,6 @@ 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$1("div")(({ theme }) => ({
-  "& .m4l_image": {
-    display: "flex",
-    gap: theme.spacing(3),
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0
-  }
-}));
-styled$1("div")(({ theme }) => ({
-  width: "100%",
-  height: "auto",
-  padding: theme.spacing(0, 2)
-}));
 const Drawer = (props) => {
   const { children } = props;
   return /* @__PURE__ */ jsx(Drawer$1, { ...props, children });

package/components/SplitLayout/{index.15756f0f.js → index.0212514c.js}

@@ -1,32 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { a0 as SplitLayoutRoot, a1 as SplitMaster, a2 as SplitDetail } from "../../styles/index.256d1a63.js";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 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
-}));
-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 componentName = "M4LSplitLayout";
 generateUtilityClasses(componentName, [
   "root",

package/components/ToastContainer/{index.e6d48658.js → index.733671bf.js}

@@ -1,14 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { styled, generateUtilityClasses } from "@mui/material";
+import { a3 as ToastContainerRoot } from "../../styles/index.256d1a63.js";
 import { ToastContainer as ToastContainer$1 } from "react-toastify";
+import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../utils/index.14912462.js";
 import { useEnvironment } from "@m4l/core";
 import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.5cf594aa.js";
-const ToastContainerRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LToastContainer?.styleOverrides
-}));
+import { I as Icon } from "../Icon/index.04c02216.js";
 const componentName = "M4LToastContainer";
 const toastClasses = generateUtilityClasses(
   componentName,

package/components/animate/LoadingScreen/{index.779690a7.js → index.964f6dbd.js}

@@ -1,25 +1,8 @@
 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";
-const RootStyle = 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
-  }
-}));
+import { Box } from "@mui/material";
+import { a4 as RootStyle } from "../../../styles/index.256d1a63.js";
 function LoadingScreen(props) {
   const { isDashboard, variant = "fullpage", ...other } = props;
   return /* @__PURE__ */ jsx(Fragment, { children: !isDashboard && /* @__PURE__ */ jsxs(RootStyle, { variant, ...other, children: [

package/components/animate/{index.b8497385.js → index.1fcd3d70.js}

@@ -1,9 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { forwardRef, useRef } from "react";
-import { IconButton, Box, alpha } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import SimpleBarReact from "simplebar-react";
+import { IconButton, Box } from "@mui/material";
+import { a5 as AnimatedScrollRoot } from "../../styles/index.256d1a63.js";
 const varSmall = {
   hover: { scale: 1.1 },
   tap: { scale: 0.95 }
@@ -37,42 +36,6 @@ const IconButtonAnimate = forwardRef(
   ({ children, size = "medium", ...other }, ref) => /* @__PURE__ */ jsx(AnimateWrap, { size, children: /* @__PURE__ */ jsx(IconButton, { size, ref, ...other, children }) })
 );
 IconButtonAnimate.displayName = "IconButtonAnimate";
-styled(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("div")(() => ({
-  width: "100%",
-  height: "100%",
-  overflowX: "auto",
-  overflowY: "hidden",
-  transition: "scroll-behavior 0.5s",
-  scrollbarWidth: "none",
-  msOverflowStyle: "none",
-  "&::-webkit-scrollbar": {
-    width: 0
-  }
-}));
 const AnimatedScroll = (props) => {
   const { children } = props;
   const containerRef = useRef(null);

package/components/areas/components/AreasAdmin/{index.5af510af.js → index.e59f2566.js}

@@ -1,31 +1,31 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { u as useAreasStore } from "../../hooks/useAreas/index.98ea6788.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.566c6df3.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo } from "react";
 import * as Yup from "yup";
 import clsx from "clsx";
-import { generateUtilityClasses, useTheme, styled as styled$1 } from "@mui/material";
+import { generateUtilityClasses, useTheme } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../../utils/index.14912462.js";
 import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants.66529246.js";
 import { I as ICONS } from "../../icons.8266ccc8.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { styled } from "@mui/material/styles";
+import { a6 as EditAreaHeader, a7 as AreasAdminRoot } from "../../../../styles/index.256d1a63.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.06aaa091.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.bf3a2812.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.97ba17ae.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.258bf919.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.609a78ca.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.ebac0bc1.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.ee45bba2.js";
-import { P as Popover } from "../../../mui_extended/Popover/index.2348fc4f.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.642798f1.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.21bc5025.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.c4a0f78b.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.0e2d7d10.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.d80b8e93.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.e65a7bcf.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.84664a29.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.27a112d7.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.3525b765.js";
+import { P as Popover } from "../../../mui_extended/Popover/index.1747563c.js";
+import { T as Typography } from "../../../mui_extended/Typography/index.fd25cf61.js";
+import { S as ScrollBar } from "../../../ScrollBar/index.6ec54e64.js";
 import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import { B as Button } from "../../../mui_extended/Button/index.d742e9ee.js";
-import { I as Icon } from "../../../Icon/index.5cf594aa.js";
+import { B as Button } from "../../../mui_extended/Button/index.7b82d621.js";
+import { I as Icon } from "../../../Icon/index.04c02216.js";
 import { u as useOnClickOutside } from "../../index.4cc6a221.js";
 const areasAdminClasses = generateUtilityClasses(
   AREAS_ADMIN_CLASS_NAME,
@@ -87,31 +87,6 @@ const useAreasAdminUtilityClasses = (ownerState) => {
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
 };
-styled("div")(() => ({
-  display: "flex",
-  flexDirection: "row",
-  border: "1px solid gray",
-  "&.active": {
-    border: "1px solid red"
-  }
-}));
-styled("div")(({ theme }) => ({
-  height: "100%",
-  width: theme.spacing(1),
-  backgroundColor: theme.vars.palette.background.default,
-  "&.active": {
-    backgroundColor: theme.vars.palette.primary.main
-  }
-}));
-const EditAreaHeader = styled("div")(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  height: "25px",
-  borderBottom: "1px solid",
-  borderColor: theme.vars.palette.state.default,
-  justifyContent: "space-between",
-  alignItems: "center"
-}));
 const ChipActionsMobile = (props) => {
   const { handlerOpenPopoverEditArea, areaId } = props;
   const { deleteArea } = useAreasStore((state) => state.areasActions);
@@ -335,18 +310,6 @@ const AreaChip = (props) => {
   ] });
 };
 AreaChip.displayName = "AreaButtons";
-const AreasAdminRoot = styled$1("div")`
-  display: flex;
-  position: relative;
-  background-color: transparent;
-
-  //areaRoot
-  & .${areasAdminClasses.areaChipRoot} {
-    display: flex;
-  }
-
-  ${(props) => props.theme.components?.M4LAreasAdmin?.styleOverrides}
-`;
 const ChipMobile = (props) => {
   const { areaId, selected, disabled, setAnchorMenuAreas } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -729,5 +692,6 @@ function AreasAdmin() {
 }
 export {
   AreasAdmin as A,
+  areasAdminClasses as a,
   useAreasAdminUtilityClasses as u
 };