@m4l/components 0.1.13 → 0.1.15

package/components/CompanyLogo/{index.f81c179c.js → index.js}

@@ -1,18 +1,18 @@
-import { useEnvironment as g } from "@m4l/core";
-import { useResponsive as m } from "@m4l/graphics";
-import { Skeleton as x } from "@mui/material";
-import { styled as s } from "@mui/material/styles";
-import { I as d } from "../Image/index.e790b50b.js";
-import { jsx as t } from "react/jsx-runtime";
-s("div")(({
-  theme: c
+import { useEnvironment } from "@m4l/core";
+import { useResponsive } from "@m4l/graphics";
+import { Skeleton } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { I as Image } from "../Image/index.js";
+import { jsx } from "react/jsx-runtime";
+styled("div")(({
+  theme
 }) => ({
-  [c.breakpoints.up("md")]: {
+  [theme.breakpoints.up("md")]: {
     display: "flex"
   }
 }));
-s("header")(({
-  theme: c
+styled("header")(({
+  theme
 }) => ({
   top: 0,
   lineHeight: 0,
@@ -20,15 +20,15 @@ s("header")(({
   display: "flex",
   alignItems: "center",
   position: "absolute",
-  padding: c.spacing(3),
+  padding: theme.spacing(3),
   justifyContent: "space-between",
-  [c.breakpoints.up("md")]: {
+  [theme.breakpoints.up("md")]: {
     alignItems: "flex-start",
-    padding: c.spacing(7, 5, 0, 7)
+    padding: theme.spacing(7, 5, 0, 7)
   }
 }));
-s("div")(({
-  theme: c
+styled("div")(({
+  theme
 }) => ({
   maxWidth: 480,
   margin: "auto",
@@ -36,40 +36,46 @@ s("div")(({
   minHeight: "100vh",
   flexDirection: "column",
   justifyContent: "center",
-  padding: c.spacing(12, 0)
+  padding: theme.spacing(12, 0)
 }));
-const w = s("div")(({
-  theme: c
+const SKTCompanyLogoMask = styled("div")(({
+  theme
 }) => ({
   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`,
-  [c.breakpoints.up("md")]: {
+  [theme.breakpoints.up("md")]: {
     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 394.6 97' style='enable-background:new 0 0 394.6 97%3B' xml:space='preserve'%3E%3Cpath d='M54.2 35.1c2.2 0 4.3-0.8 5.8-2.3c1.6-1.5 2.5-3.7 2.6-6c-0.1-2.3-1-4.4-2.6-6c-1.6-1.5-3.7-2.4-5.8-2.4c-2.2 0-4.2 0.8-5.8 2.4c-1.5 1.6-2.5 3.7-2.6 6c0.1 2.3 1 4.4 2.6 6C50 34.3 52 35.2 54.2 35.1z'/%3E%3Cpath d='M58 49.6c-0.3-0.5-0.8-0.9-1.3-1.2C56.2 48.1 55.6 48 55 48s-1.3 0.1-1.8 0.4c-0.5 0.3-1 0.7-1.3 1.2l-3.3 5.2c-0.2 0.4-0.5 0.6-0.8 0.8c-0.3 0.2-0.7 0.3-1.1 0.3c-0.4 0-0.8-0.1-1.1-0.3c-0.3-0.2-0.6-0.5-0.8-0.8L32.7 35.5c-0.3-0.5-0.8-0.9-1.3-1.2s-1.1-0.4-1.7-0.4c-0.6 0-1.2 0.1-1.7 0.4s-1 0.7-1.3 1.2L2.5 74C2.2 74.5 2 75 2 75.6c0 0.6 0.2 1.1 0.5 1.6s0.8 0.9 1.3 1.2c0.5 0.3 1.1 0.4 1.7 0.4h64.9c0.6 0 1.2-0.2 1.7-0.4c0.5-0.3 1-0.7 1.3-1.2c0.3-0.5 0.5-1 0.5-1.6c0-0.6-0.2-1.1-0.5-1.6L58 49.6z'/%3E%3Cpath d='M386.6 41.8H107.5c-3.1 0-5.6 2.5-5.6 5.6v9c0 3.1 2.5 5.6 5.6 5.6h279.1c3.1 0 5.6-2.5 5.6-5.6v-9C392.2 44.3 389.7 41.8 386.6 41.8z'/%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 394.6 97' style='enable-background:new 0 0 394.6 97%3B' xml:space='preserve'%3E%3Cpath d='M54.2 35.1c2.2 0 4.3-0.8 5.8-2.3c1.6-1.5 2.5-3.7 2.6-6c-0.1-2.3-1-4.4-2.6-6c-1.6-1.5-3.7-2.4-5.8-2.4c-2.2 0-4.2 0.8-5.8 2.4c-1.5 1.6-2.5 3.7-2.6 6c0.1 2.3 1 4.4 2.6 6C50 34.3 52 35.2 54.2 35.1z'/%3E%3Cpath d='M58 49.6c-0.3-0.5-0.8-0.9-1.3-1.2C56.2 48.1 55.6 48 55 48s-1.3 0.1-1.8 0.4c-0.5 0.3-1 0.7-1.3 1.2l-3.3 5.2c-0.2 0.4-0.5 0.6-0.8 0.8c-0.3 0.2-0.7 0.3-1.1 0.3c-0.4 0-0.8-0.1-1.1-0.3c-0.3-0.2-0.6-0.5-0.8-0.8L32.7 35.5c-0.3-0.5-0.8-0.9-1.3-1.2s-1.1-0.4-1.7-0.4c-0.6 0-1.2 0.1-1.7 0.4s-1 0.7-1.3 1.2L2.5 74C2.2 74.5 2 75 2 75.6c0 0.6 0.2 1.1 0.5 1.6s0.8 0.9 1.3 1.2c0.5 0.3 1.1 0.4 1.7 0.4h64.9c0.6 0 1.2-0.2 1.7-0.4c0.5-0.3 1-0.7 1.3-1.2c0.3-0.5 0.5-1 0.5-1.6c0-0.6-0.2-1.1-0.5-1.6L58 49.6z'/%3E%3Cpath d='M386.6 41.8H107.5c-3.1 0-5.6 2.5-5.6 5.6v9c0 3.1 2.5 5.6 5.6 5.6h279.1c3.1 0 5.6-2.5 5.6-5.6v-9C392.2 44.3 389.7 41.8 386.6 41.8z'/%3E%3C/svg%3E") no-repeat center / contain`
   }
-})), f = (c) => {
+}));
+const CompanyLogo = (props) => {
+  const {
+    size = "small",
+    isSkeleton,
+    ...other
+  } = props;
+  const height = size === "small" ? "50px" : "auto";
+  const width = size === "small" ? "50px" : "380px";
   const {
-    size: e = "small",
-    isSkeleton: a,
-    ...i
-  } = c, o = e === "small" ? "50px" : "auto", p = e === "small" ? "50px" : "380px", {
-    host_static_assets: l,
-    environment_assets: r
-  } = g(), n = m("up", "md");
-  return a ? /* @__PURE__ */ t(w, {
-    children: /* @__PURE__ */ t(x, {
-      variant: "rectangular",
-      width: n ? 380 : 50,
-      height: n ? 97 : 50
-    })
-  }) : /* @__PURE__ */ t(d, {
-    src: `${l}/${r}/frontend/commons/assets/icons/${e === "small" ? "isotipo_m4l.svg" : "logotipo_m4l.svg"}`,
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const mdUp = useResponsive("up", "md");
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTCompanyLogoMask, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "rectangular",
+        width: mdUp ? 380 : 50,
+        height: mdUp ? 97 : 50
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Image, {
+    src: `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/${size === "small" ? "isotipo_m4l.svg" : "logotipo_m4l.svg"}`,
     effect: "opacity",
-    width: p,
-    height: o,
-    ...i
+    width,
+    height,
+    ...other
   });
 };
-export {
-  f as C
-};
+export { CompanyLogo as C };