@m4l/layouts 0.1.34 → 0.1.37

package/components/BaseModule/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseModuleProps } from './types';
 export declare function BaseModule(props: BaseModuleProps): JSX.Element;
 export default BaseModule;

package/components/MFHostApp/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MFHostAppProps } from './types';
 export declare function MFHostApp(props: MFHostAppProps): JSX.Element;
 export default MFHostApp;

package/components/MFIsolationApp/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MFIsolationAppProps } from './types';
 export declare function MFIsolationApp(props: MFIsolationAppProps): JSX.Element;
 export default MFIsolationApp;

package/components/MFIsolationApp/subcomponents/MFAuthApp/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MFAuthAppProps } from './types';
 export declare function MFAuthApp(props: MFAuthAppProps): JSX.Element;
 export default MFAuthApp;

package/index.js

@@ -4,7 +4,7 @@ import { B as L } from "./components/BaseModule/index.6309486a.js";
 import { a as g, A as h } from "./contexts/AuthContext/index.6f966215.js";
 import { a as N, d as B, g as F } from "./layouts/ModuleLayout/index.c673a65f.js";
 import { a as H, d as I, g as P } from "./layouts/MasterDetailLayout/index.793884be.js";
-import { N as j, d as k, g as q } from "./layouts/NoAuthModuleLayout/index.5d946846.js";
+import { N as j, d as k, g as q } from "./layouts/NoAuthModuleLayout/index.eabf38c1.js";
 import { u as z } from "./hooks/useMasterDetail/index.dd9cb927.js";
 import { u as G } from "./hooks/useAuth/index.cb6a3420.js";
 import { u as K } from "./hooks/useModule/index.97184469.js";

package/layouts/MasterDetailLayout/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { MasterDetailLayoutProps } from './types';
 export declare function MasterDetailLayout(props: MasterDetailLayoutProps): JSX.Element;

package/layouts/NoAuthModuleLayout/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { NoAuthModuleLayoutProps } from './types';
 export declare const NoAuthModuleLayout: (props: NoAuthModuleLayoutProps) => JSX.Element;

package/layouts/NoAuthModuleLayout/index.eabf38c1.js

@@ -0,0 +1,345 @@
+import { useResponsiveDesktop as I, useLocales as $ } from "@m4l/graphics";
+import { LanguagePopover as h, Image as x, Typography as a, ScrollBar as m, HelmetPage as W } from "@m4l/components";
+import { styled as t, alpha as d } from "@mui/material/styles";
+import { useBase as u, useModuleDictionary as g, useDomain as y, useEnvironment as H, BaseProvider as N, FlagsProvider as R, ModuleDictionaryProvider as U, ModuleSkeletonProvider as F } from "@m4l/core";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+const P = t("div")(({
+  theme: o
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: "100vh",
+  padding: "20px",
+  backgroundColor: o.palette.background.background,
+  [o.breakpoints.down("md")]: {
+    padding: "0px"
+  }
+})), j = t("div")(({ theme: o }) => ({
+  display: "flex",
+  borderRadius: "16px",
+  backgroundColor: o.palette.background.neutral,
+  boxShadow: o.customShadows?.z4,
+  padding: "20px 0 20px 20px",
+  width: "100%",
+  height: "100%",
+  maxWidth: "965px",
+  maxHeight: "900px",
+  position: "relative",
+  overflow: "auto",
+  "& .M4LanguagePopover-root": {
+    position: "absolute",
+    top: "20px",
+    right: "20px",
+    zIndex: 1
+  }
+})), T = t("div")(({ theme: o }) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "16px",
+  width: "100%",
+  maxWidth: "400px",
+  height: "100%",
+  backgroundColor: o.palette.state?.focus,
+  boxShadow: o.customShadows?.z4,
+  padding: "0 60px",
+  gap: "40px",
+  overflow: "hidden",
+  "& .MuiTypography-root": {
+    color: o.palette.patronus?.marbleLight[10],
+    display: "flex",
+    justifyContent: "center",
+    textAlign: "center",
+    textTransform: "uppercase"
+  },
+  "& .M4LTypography-root .MuiSkeleton-root": {
+    backgroundColor: d(`${o.palette.patronus?.marbleLight[10]}`, 0.24),
+    margin: "auto"
+  }
+})), A = t("div")(({ theme: o }) => ({
+  display: "flex",
+  width: "84px",
+  height: "84px",
+  borderRadius: "6px",
+  backgroundColor: o.palette.state?.active,
+  justifyContent: "center",
+  alignItems: "center",
+  boxShadow: `0px 4px 8px  ${d(o.palette.patronus?.coolGrey[70] || "", 0.16)}`,
+  "& .M4LImage-root": {
+    backgroundColor: o.palette.patronus?.marbleLight[10],
+    borderRadius: "6px"
+  }
+})), B = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "5px",
+  width: "100%"
+})), z = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "5px",
+  width: "100%"
+})), G = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: "0 60px 0 80px",
+  margin: "auto 0",
+  width: "100%",
+  gap: "20px"
+})), E = t("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%"
+})), q = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: "4px"
+})), J = () => {
+  const {
+    children: o,
+    companyLogoSmallUrl: l
+  } = u(), {
+    getLabel: n
+  } = g(), {
+    name: r
+  } = y();
+  return /* @__PURE__ */ i(j, {
+    children: [/* @__PURE__ */ e(h, {}), /* @__PURE__ */ i(T, {
+      children: [/* @__PURE__ */ e(A, {
+        children: /* @__PURE__ */ e(x, {
+          src: l,
+          ratio: "1:1",
+          width: "64px",
+          height: "64px"
+        })
+      }), /* @__PURE__ */ i(B, {
+        children: [/* @__PURE__ */ e(a, {
+          variant: "subtitleDens",
+          skeletonWidth: "70%",
+          skeletongHeight: "24px",
+          children: r
+        }), /* @__PURE__ */ e(a, {
+          variant: "paragraph",
+          skeletonWidth: "40%",
+          skeletongHeight: "20px",
+          children: n("company_name_subtitle")
+        })]
+      }), /* @__PURE__ */ i(z, {
+        children: [/* @__PURE__ */ e(a, {
+          variant: "h5",
+          skeletonWidth: "50%",
+          skeletongHeight: "36px",
+          children: n("module_leyend")
+        }), /* @__PURE__ */ e(a, {
+          variant: "subtitle",
+          skeletonWidth: "80%",
+          skeletongHeight: "24px",
+          children: "slogan"
+        })]
+      })]
+    }), /* @__PURE__ */ e(E, {
+      children: /* @__PURE__ */ e(m, {
+        children: /* @__PURE__ */ i(G, {
+          children: [/* @__PURE__ */ i(q, {
+            children: [/* @__PURE__ */ e(a, {
+              variant: "h5",
+              skeletonWidth: "20%",
+              skeletongHeight: "36px",
+              children: n("module_name")
+            }), /* @__PURE__ */ e(a, {
+              variant: "paragraph",
+              skeletonWidth: "40%",
+              skeletongHeight: "20px",
+              children: n("module_description")
+            })]
+          }), o]
+        })
+      })
+    })]
+  });
+}, K = t("div")(({ theme: o }) => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  height: "100%",
+  backgroundColor: o.palette.background.neutral,
+  padding: "12px",
+  gap: "32px"
+})), O = t("div")(({ theme: o }) => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: "12px",
+  gap: "20px",
+  width: "100%",
+  backgroundColor: o.palette.state?.focus,
+  boxShadow: o.customShadows?.z4,
+  position: "relative",
+  borderRadius: "8px",
+  "& .M4LanguagePopover-root": {
+    position: "absolute",
+    top: "12px",
+    right: "12px"
+  },
+  "& .MuiTypography-root": {
+    color: o.palette.patronus?.marbleLight[10],
+    display: "flex",
+    textTransform: "uppercase"
+  },
+  "& .MuiSkeleton-root": {
+    backgroundColor: d(`${o.palette.patronus?.marbleLight[10]}`, 0.24),
+    margin: "auto"
+  }
+}));
+t("div")(() => ({
+  display: "flex"
+}));
+const Q = t("div")(({ theme: o }) => ({
+  display: "flex",
+  width: "52px",
+  height: "52px",
+  borderRadius: "6px",
+  backgroundColor: o.palette.state?.active,
+  justifyContent: "center",
+  alignItems: "center",
+  boxShadow: `0px 4px 8px  ${d(o.palette.patronus?.coolGrey[70] || "", 0.16)}`,
+  "& .M4LImage-root": {
+    backgroundColor: o.palette.patronus?.marbleLight[10],
+    borderRadius: "6px"
+  }
+})), V = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+})), X = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: "12px",
+  margin: "auto 0",
+  width: "100%",
+  gap: "20px"
+})), Y = t("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden"
+})), Z = t("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: "4px"
+})), oo = () => {
+  const {
+    children: o,
+    companyLogoSmallUrl: l
+  } = u(), {
+    getLabel: n
+  } = g(), {
+    name: r
+  } = y();
+  return /* @__PURE__ */ i(K, {
+    children: [/* @__PURE__ */ i(O, {
+      children: [/* @__PURE__ */ e(Q, {
+        children: /* @__PURE__ */ e(x, {
+          src: l,
+          ratio: "1:1",
+          width: "44px",
+          height: "44px"
+        })
+      }), /* @__PURE__ */ i(V, {
+        children: [/* @__PURE__ */ e(a, {
+          variant: "subtitleDens",
+          skeletonWidth: "70%",
+          skeletongHeight: "24px",
+          children: r
+        }), /* @__PURE__ */ e(a, {
+          variant: "paragraph",
+          skeletonWidth: "40%",
+          skeletongHeight: "20px",
+          children: n("company_name_subtitle")
+        })]
+      }), /* @__PURE__ */ e(h, {})]
+    }), /* @__PURE__ */ e(Y, {
+      children: /* @__PURE__ */ e(m, {
+        children: /* @__PURE__ */ i(X, {
+          children: [/* @__PURE__ */ i(Z, {
+            children: [/* @__PURE__ */ e(a, {
+              variant: "h5",
+              skeletonWidth: "20%",
+              skeletongHeight: "36px",
+              children: n("module_name")
+            }), /* @__PURE__ */ e(a, {
+              variant: "paragraph",
+              skeletonWidth: "40%",
+              skeletongHeight: "20px",
+              children: n("module_description")
+            })]
+          }), o]
+        })
+      })
+    })]
+  });
+}, eo = () => {
+  const {
+    getModuleLabel: o
+  } = g(), l = I(), {
+    subtitle: n
+  } = u();
+  return /* @__PURE__ */ e(W, {
+    title: o(),
+    subtitle: n,
+    children: /* @__PURE__ */ e(P, {
+      children: l ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(oo, {})
+    })
+  });
+}, ro = (o) => {
+  const {
+    moduleId: l,
+    moduleNameField: n,
+    children: r,
+    componentsDictionary: f,
+    skeletonFlags: b,
+    subtitle: v,
+    companyLogoSmallUrl: k,
+    companyLogoNormalUrl: C,
+    moduleIlustrationUrl: L
+  } = o, {
+    host_static_assets: s,
+    environment_assets: p
+  } = H(), w = $().currentLocale?.localeString, D = C || `${s}/${p}/frontend/commons/assets/icons/logotipo_m4l.svg`, M = k || `${s}/${p}/frontend/commons/assets/icons/isotipo_m4l.svg`, _ = L || `${s}/${p}/frontend/domain/host/commons/assets/img/illustration_noauth.png`, c = b;
+  return c.findIndex((S) => S === "dictionary_loaded") < 0 && c.push("dictionary_loaded"), /* @__PURE__ */ e(N, {
+    value: {
+      subtitle: v,
+      companyLogoSmallUrl: M,
+      companyLogoNormalUrl: D,
+      moduleIlustrationUrl: _,
+      children: r
+    },
+    children: /* @__PURE__ */ e(R, {
+      children: /* @__PURE__ */ e(U, {
+        isAuth: !1,
+        moduleId: l,
+        moduleNameField: n,
+        componentsDictionary: f,
+        currentLang: w,
+        children: /* @__PURE__ */ e(F, {
+          flags: c,
+          children: /* @__PURE__ */ e(eo, {})
+        })
+      })
+    })
+  });
+};
+function so() {
+  return ["no_auth_module_layout"];
+}
+const po = {
+  no_auth_module_layout: {}
+};
+export {
+  ro as N,
+  po as d,
+  so as g
+};

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/index.d.ts

@@ -1,3 +1 @@
-/// <reference types="react" />
-import { ModuleProps } from './types';
-export declare const InnerModule: (props: ModuleProps) => JSX.Element;
+export declare const InnerModule: () => JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/index.d.ts

@@ -0,0 +1 @@
+export declare const DesktopContent: () => JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/index.d.ts

@@ -0,0 +1 @@
+export declare const MobileContent: () => JSX.Element;

package/layouts/NoAuthModuleLayout/types.d.ts

@@ -8,11 +8,11 @@ export declare interface NoAuthBaseProviderProps {
     companyLogoSmallUrl: string;
     companyLogoNormalUrl: string;
     moduleIlustrationUrl?: string;
+    children: ReactNode;
 }
 export interface NoAuthModuleLayoutProps extends NoAuthBaseProviderProps {
     moduleId: string;
     moduleNameField?: string;
     componentsDictionary: string[];
     skeletonFlags: string[];
-    children: ReactNode;
 }

package/layouts/{index.8748e200.js → index.8e0df44b.js}

@@ -5,4 +5,4 @@ import "@m4l/core";
 import "./MasterDetailLayout/index.793884be.js";
 import "@m4l/graphics";
 import "react/jsx-runtime";
-import "./NoAuthModuleLayout/index.5d946846.js";
+import "./NoAuthModuleLayout/index.eabf38c1.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.34",
+  "version": "0.1.37",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/components": "*",

package/layouts/NoAuthModuleLayout/index.5d946846.js

@@ -1,198 +0,0 @@
-import { useResponsive as h, useLocales as N } from "@m4l/graphics";
-import { Image as p, Typography as u, LanguagePopover as W, HelmetPage as k } from "@m4l/components";
-import { useModuleDictionary as m, useBase as g, useEnvironment as b, BaseProvider as I, FlagsProvider as S, ModuleDictionaryProvider as F, ModuleSkeletonProvider as A } from "@m4l/core";
-import { styled as t } from "@mui/material/styles";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-const C = t("div")(({
-  theme: o
-}) => ({
-  boxShadow: o.shadows[1],
-  borderRadius: o.spacing(2),
-  width: "100%",
-  maxWidth: "464px",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  margin: o.spacing(2, 0, 2, 2),
-  padding: o.spacing(4, 3),
-  gap: o.spacing(3),
-  overflow: "hidden"
-})), j = () => {
-  const {
-    getLabel: o
-  } = m(), {
-    companyLogoNormalUrl: n,
-    moduleIlustrationUrl: l
-  } = g();
-  return /* @__PURE__ */ i(C, {
-    children: [/* @__PURE__ */ e(p, {
-      width: "400px",
-      height: "400px",
-      src: n,
-      alt: "logo"
-    }, "Logo"), l ? /* @__PURE__ */ e(p, {
-      src: l,
-      width: "100%",
-      height: "300px"
-    }) : null, /* @__PURE__ */ e(u, {
-      variant: "h3",
-      skeletonWidth: "30%",
-      skeletongHeight: "18px",
-      children: o("module_leyend")
-    }, "Leyend")]
-  });
-}, B = t("div")(() => ({
-  flexGrow: "1",
-  display: "flex",
-  flexDirection: "column"
-})), P = t("header")(({
-  theme: o
-}) => ({
-  width: "100%",
-  display: "flex",
-  justifyContent: "space-between",
-  padding: o.spacing(1, 3),
-  [o.breakpoints.up("md")]: {
-    justifyContent: "flex-end"
-  }
-})), $ = () => {
-  const {
-    companyLogoSmallUrl: o
-  } = g(), n = h("down", "md");
-  return /* @__PURE__ */ i(P, {
-    children: [n ? /* @__PURE__ */ e(p, {
-      src: o,
-      width: "40px",
-      height: "40px",
-      skeletonVariant: "circle"
-    }, "Isotipo") : null, /* @__PURE__ */ e(W, {})]
-  });
-}, H = t("div")(() => ({
-  display: "flex",
-  overflow: "auto",
-  width: "100%",
-  height: "100%",
-  justifyContent: "center"
-})), R = t("div")(({
-  theme: o
-}) => ({
-  display: "flex",
-  width: "100%",
-  height: "auto",
-  margin: "auto",
-  maxWidth: "480px",
-  flexDirection: "column",
-  gap: o.spacing(3)
-})), E = t("div")(({
-  theme: o
-}) => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: o.spacing(2),
-  padding: o.spacing(0, 3)
-})), G = () => {
-  const {
-    getModuleLabel: o,
-    getLabel: n
-  } = m();
-  return /* @__PURE__ */ i(E, {
-    children: [/* @__PURE__ */ e(u, {
-      variant: "h4",
-      skeletonWidth: "35%",
-      skeletongHeight: "36px",
-      children: o()
-    }, "ModuleName"), /* @__PURE__ */ e(u, {
-      skeletonWidth: "60%",
-      skeletongHeight: "21px",
-      children: n("module_description")
-    }, "ModuleDescription")]
-  });
-}, T = (o) => {
-  const {
-    children: n
-  } = o;
-  return /* @__PURE__ */ e(H, {
-    children: /* @__PURE__ */ i(R, {
-      children: [/* @__PURE__ */ e(G, {}), n]
-    })
-  });
-}, V = (o) => {
-  const {
-    children: n
-  } = o;
-  return /* @__PURE__ */ i(B, {
-    children: [/* @__PURE__ */ e($, {}), /* @__PURE__ */ e(T, {
-      children: n
-    })]
-  });
-}, q = t("div")(() => ({
-  display: "flex",
-  height: "100vh"
-})), z = (o) => {
-  const {
-    children: n
-  } = o, {
-    getModuleLabel: l
-  } = m(), r = h("up", "md"), {
-    subtitle: a
-  } = g();
-  return /* @__PURE__ */ e(k, {
-    title: l(),
-    subtitle: a,
-    children: /* @__PURE__ */ i(q, {
-      children: [r ? /* @__PURE__ */ e(j, {}) : null, /* @__PURE__ */ e(V, {
-        children: n
-      })]
-    })
-  });
-}, Y = (o) => {
-  const {
-    moduleId: n,
-    moduleNameField: l,
-    children: r,
-    componentsDictionary: a,
-    skeletonFlags: f,
-    subtitle: y,
-    companyLogoSmallUrl: x,
-    companyLogoNormalUrl: L,
-    moduleIlustrationUrl: v
-  } = o, {
-    host_static_assets: s,
-    environment_assets: d
-  } = b(), _ = N().currentLocale?.localeString, w = L || `${s}/${d}/frontend/commons/assets/icons/logotipo_m4l.svg`, M = x || `${s}/${d}/frontend/commons/assets/icons/isotipo_m4l.svg`, U = v || `${s}/${d}/frontend/domain/host/commons/assets/img/illustration_noauth.png`, c = f;
-  return c.findIndex((D) => D === "dictionary_loaded") < 0 && c.push("dictionary_loaded"), /* @__PURE__ */ e(I, {
-    value: {
-      subtitle: y,
-      companyLogoSmallUrl: M,
-      companyLogoNormalUrl: w,
-      moduleIlustrationUrl: U
-    },
-    children: /* @__PURE__ */ e(S, {
-      children: /* @__PURE__ */ e(F, {
-        isAuth: !1,
-        moduleId: n,
-        moduleNameField: l,
-        componentsDictionary: a,
-        currentLang: _,
-        children: /* @__PURE__ */ e(A, {
-          flags: c,
-          children: /* @__PURE__ */ e(z, {
-            children: r
-          })
-        })
-      })
-    })
-  });
-};
-function Z() {
-  return ["no_auth_module_layout"];
-}
-const oo = {
-  no_auth_module_layout: {}
-};
-export {
-  Y as N,
-  oo as d,
-  Z as g
-};

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { WrapperAppBarFormProps } from './types';
-export declare const AppBarForm: (props: WrapperAppBarFormProps) => JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/subcomponents/AppBar/index.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const AppBar: () => JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/subcomponents/Form/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { WrapperFormScrollProps } from './types';
-export declare const Form: (props: WrapperFormScrollProps) => JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/subcomponents/Form/subcomponents/NameDescription/index.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const NameDescription: () => JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/subcomponents/Form/types.d.ts

@@ -1,4 +0,0 @@
-import { ReactNode } from 'react';
-export interface WrapperFormScrollProps {
-    children: ReactNode;
-}

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/types.d.ts

@@ -1,4 +0,0 @@
-import { ReactNode } from 'react';
-export interface WrapperAppBarFormProps {
-    children: ReactNode;
-}

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/LogoLeyend/index.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const LogoLeyend: () => JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/types.d.ts

@@ -1,4 +0,0 @@
-import { ReactNode } from 'react';
-export interface ModuleProps {
-    children: ReactNode;
-}