@m4l/layouts 0.1.56 → 1.0.0

package/index.js

@@ -5,7 +5,7 @@ import { B } from "./components/BaseModule/index.8ff0193e.js";
 import { a, A } from "./contexts/AuthContext/index.6f966215.js";
 import { a as a2, d, g } from "./layouts/ModuleLayout/index.e7218171.js";
 import { a as a3, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index.748f7ada.js";
-import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.1da3bcd4.js";
+import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.a0c88ca8.js";
 import { u } from "./hooks/useMasterDetail/index.d45f2a86.js";
 import { u as u2 } from "./hooks/useAuth/index.cb6a3420.js";
 import { u as u3 } from "./hooks/useModule/index.b5f598b1.js";

package/layouts/NoAuthModuleLayout/{index.1da3bcd4.js → index.a0c88ca8.js}

@@ -1,5 +1,5 @@
 import { useResponsiveDesktop, useLocales, ResponsiveContainerProvider } from "@m4l/graphics";
-import { LanguagePopover, IconButton, Image, Typography, Stack, ScrollBar, HelmetPage } from "@m4l/components";
+import { LanguagePopover, Image, Typography, Stack, ScrollBar, HelmetPage } from "@m4l/components";
 import { styled } from "@mui/material";
 import { useBase, useModuleDictionary, useDomain, useEnvironment, BaseProvider, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider } from "@m4l/core";
 import { styled as styled$1, alpha } from "@mui/material/styles";
@@ -12,7 +12,7 @@ const InnerModuleRoot = styled("div")(({
   alignItems: "center",
   height: "100vh",
   padding: "20px",
-  backgroundColor: theme.palette.background.background,
+  backgroundColor: theme.vars.palette.background.background,
   [theme.breakpoints.down("md")]: {
     padding: "0px"
   }
@@ -20,7 +20,7 @@ const InnerModuleRoot = styled("div")(({
 const DesktopContentRoot = styled$1("div")(({ theme }) => ({
   display: "flex",
   borderRadius: "16px",
-  backgroundColor: theme.palette.background.neutral,
+  backgroundColor: theme.vars.palette.background.neutral,
   boxShadow: theme.customShadows?.z4,
   padding: "20px 0 20px 20px",
   width: "100%",
@@ -51,7 +51,7 @@ const DesktopBanner = styled$1("div")(({ theme }) => ({
   width: "100%",
   maxWidth: "400px",
   height: "100%",
-  backgroundColor: theme.palette.state?.focus,
+  backgroundColor: theme.vars.palette.state?.focus,
   boxShadow: theme.customShadows?.z4,
   padding: "0 60px",
   gap: "40px",
@@ -64,7 +64,7 @@ const DesktopBanner = styled$1("div")(({ theme }) => ({
     textTransform: "uppercase"
   },
   "& .M4LTypography-root .MuiSkeleton-root": {
-    backgroundColor: alpha(`${theme.palette.patronus?.marbleLight[10]}`, 0.24),
+    backgroundColor: alpha(`${theme.colorSchemes.finalTheme.palette.patronus?.marbleLight[10]}`, 0.24),
     margin: "auto"
   }
 }));
@@ -73,12 +73,12 @@ const ContainerLogo$1 = styled$1("div")(({ theme }) => ({
   width: "84px",
   height: "84px",
   borderRadius: "6px",
-  backgroundColor: theme.palette.state?.active,
+  backgroundColor: theme.vars.palette.state?.active,
   justifyContent: "center",
   alignItems: "center",
-  boxShadow: `0px 4px 8px  ${alpha(theme.palette.patronus?.coolGrey[70] || "", 0.16)}`,
+  boxShadow: `0px 4px 8px  ${alpha(theme.colorSchemes.finalTheme.palette.patronus?.coolGrey[70] || "", 0.16)}`,
   "& .M4LImage-root": {
-    backgroundColor: theme.palette.patronus?.marbleLight[10],
+    backgroundColor: theme.vars.palette.patronus?.marbleLight[10],
     borderRadius: "6px"
   }
 }));
@@ -124,8 +124,7 @@ styled$1("div")(() => ({
 const DesktopContent = () => {
   const {
     children,
-    companyLogoSmallUrl,
-    handleSetting
+    companyLogoSmallUrl
   } = useBase();
   const {
     getLabel
@@ -134,16 +133,8 @@ const DesktopContent = () => {
     name,
     slogan
   } = useDomain();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
   return /* @__PURE__ */ jsxs(DesktopContentRoot, {
-    children: [/* @__PURE__ */ jsx(LanguagePopover, {}), /* @__PURE__ */ jsx(IconButton, {
-      src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/configuration.svg`,
-      onClick: handleSetting,
-      className: "config-icon"
-    }), /* @__PURE__ */ jsxs(DesktopBanner, {
+    children: [/* @__PURE__ */ jsx(LanguagePopover, {}), /* @__PURE__ */ jsxs(DesktopBanner, {
       children: [/* @__PURE__ */ jsx(ContainerLogo$1, {
         children: /* @__PURE__ */ jsx(Image, {
           src: companyLogoSmallUrl,
@@ -208,7 +199,7 @@ const MobileContentRoot = styled$1("div")(({ theme }) => ({
   flexDirection: "column",
   width: "100%",
   height: "100%",
-  backgroundColor: theme.palette.background.neutral,
+  backgroundColor: theme.vars.palette.background.neutral,
   padding: "12px",
   gap: "32px"
 }));
@@ -218,7 +209,7 @@ const MobileBanner = styled$1("div")(({ theme }) => ({
   padding: "12px",
   gap: "20px",
   width: "100%",
-  backgroundColor: theme.palette.state?.focus,
+  backgroundColor: theme.vars.palette.state?.focus,
   boxShadow: theme.customShadows?.z4,
   position: "relative",
   borderRadius: "8px",
@@ -234,16 +225,16 @@ const MobileBanner = styled$1("div")(({ theme }) => ({
     right: "40px",
     zIndex: 1,
     "& .M4LIcon-root .M4LIcon-icon": {
-      backgroundColor: theme.palette.patronus?.marbleLight[10]
+      backgroundColor: theme.vars.palette.patronus?.marbleLight[10]
     }
   },
   "& .MuiTypography-root": {
-    color: theme.palette.patronus?.marbleLight[10],
+    color: theme.vars.palette.patronus?.marbleLight[10],
     display: "flex",
     textTransform: "uppercase"
   },
   "& .MuiSkeleton-root": {
-    backgroundColor: alpha(`${theme.palette.patronus?.marbleLight[10]}`, 0.24),
+    backgroundColor: alpha(`${theme.colorSchemes.finalTheme.palette.patronus?.marbleLight[10]}`, 0.24),
     margin: "auto"
   }
 }));
@@ -255,12 +246,12 @@ const ContainerLogo = styled$1("div")(({ theme }) => ({
   width: "52px",
   height: "52px",
   borderRadius: "6px",
-  backgroundColor: theme.palette.state?.active,
+  backgroundColor: theme.vars.palette.state?.active,
   justifyContent: "center",
   alignItems: "center",
-  boxShadow: `0px 4px 8px  ${alpha(theme.palette.patronus?.coolGrey[70] || "", 0.16)}`,
+  boxShadow: `0px 4px 8px  ${alpha(theme.colorSchemes.finalTheme.palette.patronus?.coolGrey[70] || "", 0.16)}`,
   "& .M4LImage-root": {
-    backgroundColor: theme.palette.patronus?.marbleLight[10],
+    backgroundColor: theme.vars.palette.patronus?.marbleLight[10],
     borderRadius: "6px"
   }
 }));
@@ -292,16 +283,11 @@ const ContainerModuleName = styled$1("div")(() => ({
 const MobileContent = () => {
   const {
     children,
-    companyLogoSmallUrl,
-    handleSetting
+    companyLogoSmallUrl
   } = useBase();
   const {
     getLabel
   } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
   const {
     name
   } = useDomain();
@@ -326,10 +312,6 @@ const MobileContent = () => {
           skeletongHeight: "20px",
           children: getLabel("company_name_subtitle")
         })]
-      }), /* @__PURE__ */ jsx(IconButton, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/configuration.svg`,
-        onClick: handleSetting,
-        className: "config-icon"
       }), /* @__PURE__ */ jsx(LanguagePopover, {})]
     }), /* @__PURE__ */ jsx(WrapperFormContent, {
       children: /* @__PURE__ */ jsx(ScrollBar, {

package/layouts/{index.79db5f2e.js → index.bcda3d40.js}

@@ -5,4 +5,4 @@ import "@m4l/core";
 import "./MasterDetailLayout/index.748f7ada.js";
 import "@m4l/graphics";
 import "react/jsx-runtime";
-import "./NoAuthModuleLayout/index.1da3bcd4.js";
+import "./NoAuthModuleLayout/index.a0c88ca8.js";

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.56",
+  "version": "1.0.0",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/components": "*",
     "@m4l/core": "*",
     "@m4l/graphics": "*",
     "@m4l/styles": "*",
-    "@mui/material": "5.10.4"
+    "@mui/material": "5.15.19"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",