@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LExtendedComponents/M4LSplitLayout.js

@@ -0,0 +1,142 @@
+const o = (t) => ({
+  M4LSplitLayout: {
+    styleOverrides: {
+      "&.M4LSplitLayout-root": {
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        flexGrow: 1,
+        overflow: "hidden",
+        "& .M4LSplitLayout-firstPart": {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          "& .M4LStack-root": {
+            gap: "8px"
+          }
+        },
+        "& .M4LSplitLayout-secondPart": {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          "& .M4LStack-root": {
+            //gap: '8px',
+            overflow: "hidden"
+          }
+        },
+        // Configuracion por defecto en horizontal
+        "& .splitter-layout": {
+          position: "absolute",
+          display: "flex",
+          flexDirection: "row",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden"
+        },
+        // Configuracion de ambos paneles a dividir
+        "& .splitter-layout .layout-pane": {
+          position: "relative",
+          flex: "0 0 auto",
+          overflow: "hidden"
+        },
+        // Configuración del panel principal
+        "& .splitter-layout .layout-pane.layout-pane-primary": {
+          flex: "1 1 auto"
+        },
+        // Configuración del cursor en horizontal
+        "& .splitter-layout.layout-changing": {
+          cursor: "col-resize"
+        },
+        // Configuración barran grande cuando es horizontal
+        "& .splitter-layout > .layout-splitter": {
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: "none",
+          boxSizing: "border-box",
+          backgroundClip: "padding-box",
+          // Propiedades del horizontal
+          width: "8px",
+          margin: "0 0.5px",
+          borderLeft: "4px solid hsla(0, 0%, 5%, 0)",
+          borderRight: "4px solid hsla(0, 0%, 5%, 0)",
+          cursor: "col-resize",
+          justifyContent: "center",
+          height: "100%"
+        },
+        // Configuración divisorra interna posición horizontal del split
+        "& .splitter-layout .layout-splitter:before": {
+          content: '""',
+          height: "56px",
+          width: "4px",
+          top: "calc(50% - 22.5px)",
+          position: "absolute",
+          background: t.vars.palette.primary.focusActive,
+          borderRadius: "1px",
+          margin: "1px 0px"
+        },
+        // Hover de la barra externa en posición horizontal
+        "& .splitter-layout > .layout-splitter:hover": {
+          borderRadius: "2px",
+          borderLeft: "2px",
+          borderRight: "2px"
+        },
+        // Configuración del cursor en horizontal
+        "& .splitter-layout.splitter-layout-vertical.layout-changing": {
+          cursor: "row-resize"
+        },
+        // Barra divisora vertical del split
+        "& .splitter-layout.splitter-layout-vertical > .layout-splitter": {
+          height: "8px !important",
+          width: "100% !important",
+          margin: "1px 0",
+          borderTop: "4px solid hsla(0, 0%, 2%, 0)",
+          borderBottom: "4px solid hsla(0, 0%, 2%, 0)",
+          cursor: "row-resize"
+        },
+        // Configuración barra divisora interna vertical del split
+        "& .splitter-layout.splitter-layout-vertical .layout-splitter:before": {
+          width: "56px !important",
+          height: "4px !important",
+          left: "calc(50% - 22.5px)",
+          top: "unset",
+          background: t.vars.palette.primary.focusActive,
+          borderRadius: "2px",
+          zIndex: "1"
+        },
+        // Color del hover y el arrastrando del splitter
+        "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
+          // barra interna vertical
+          background: t.vars.palette.primary.hover
+        },
+        // Dirección flex cuando es vertical
+        "& .splitter-layout.splitter-layout-vertical": {
+          flexDirection: "column",
+          position: "relative",
+          "& .layout-splitter:after": {
+            content: '""',
+            height: "2px",
+            left: "0",
+            right: "0",
+            /* top: 'calc(50% - 6px)', */
+            position: "absolute",
+            background: t.vars.palette?.border.default
+          }
+        },
+        "& .splitter-layout:not(.splitter-layout-vertical)": {
+          "& .layout-splitter:after": {
+            content: '""',
+            width: "2px",
+            top: "0",
+            bottom: "0",
+            position: "absolute",
+            background: t.vars.palette?.border.default
+          }
+        }
+        // Borde gris cuando esta en over y es vertical
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LStack.js

@@ -0,0 +1,17 @@
+const e = (t) => ({
+  M4LStack: {
+    styleOverrides: {
+      "&.M4LStack-root": {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "auto",
+        flex: "1",
+        borderRadius: "4px"
+      }
+    }
+  }
+});
+export {
+  e as M
+};

package/theme/overrides/M4LExtendedComponents/M4LTab.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LTab: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LTab: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LTab: {
         styleOverrides: {
             '&.M4LTab-root': {

package/theme/overrides/M4LExtendedComponents/M4LTab.js

@@ -0,0 +1,69 @@
+const r = (o) => ({
+  M4LTab: {
+    styleOverrides: {
+      "&.M4LTab-root": {
+        width: "fit-content",
+        background: o.vars.palette.primary.opacity,
+        borderRadius: "4px 4px 0 0",
+        zIndex: "3",
+        "& .MuiButtonBase-root": {
+          background: o.vars.palette.primary.opacity,
+          height: "32px",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          padding: "4px 16px 4px 8px",
+          width: "fit-content",
+          minHeight: "fit-content",
+          minWidth: "fit-content",
+          gap: "8px",
+          ...o.colorSchemes.finalTheme.typography.body,
+          color: o.vars.palette.text.primary,
+          lineHeight: "none",
+          borderRadius: "4px 4px 0 0",
+          "& .M4LIcon-root": {
+            marginBottom: "0"
+          },
+          [o.breakpoints.down("md")]: {
+            height: "44px",
+            minHeight: "fit-content"
+          }
+        },
+        "& .MuiTab-root": {
+          borderBottom: `1px solid ${o.vars.palette?.border.secondary}`
+        },
+        // estado hover
+        "& .MuiButtonBase-root:hover": {
+          color: o.vars.palette.primary.hover,
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.primary.hover
+          }
+        },
+        // estado selected
+        "& .Mui-selected": {
+          background: o.vars.palette.background.default,
+          borderTop: `1px solid ${o.vars.palette?.border.secondary}`,
+          borderLeft: `1px solid ${o.vars.palette?.border.secondary}`,
+          borderRight: `1px solid ${o.vars.palette?.border.secondary}`,
+          borderBottom: `1px solid ${o.vars.palette.background.default}`,
+          ...o.colorSchemes.finalTheme.typography.bodyDens,
+          color: o.vars.palette.text.primary,
+          lineHeight: "none",
+          "&::before": {
+            content: '""',
+            width: "95%",
+            height: "2px",
+            left: "1.5px",
+            top: "0px",
+            backgroundColor: o.vars.palette.primary.focusActive,
+            borderRadius: "2px 2px 0px 0px",
+            position: "absolute"
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LExtendedComponents/M4LTabContent.d.ts

@@ -21,7 +21,7 @@ export declare const M4LTabContent: (theme: Omit<Theme, "palette" | "applyStyles
                 boxSizing: string;
                 zIndex: string;
                 top: string;
-                "& .M4LStack-root": {
+                '& .M4LStack-root': {
                     gap: string;
                 };
                 '&.M4LTabContent-root > div': {

package/theme/overrides/M4LExtendedComponents/M4LTabContent.js

@@ -0,0 +1,35 @@
+const r = (o) => ({
+  M4LTabContent: {
+    styleOverrides: {
+      "&.M4LTabContent-root": {
+        padding: "12px",
+        display: "flex",
+        overflow: "hidden",
+        height: "100%",
+        flexDirection: "column",
+        gap: "8px",
+        background: o.vars.palette.background.default,
+        borderRadius: "0 4px 4px 4px",
+        position: "relative",
+        flex: 1,
+        borderTop: "1px solid",
+        borderLeft: "1px solid",
+        borderRight: "1px solid",
+        borderBottom: "1px solid",
+        borderColor: o.vars.palette?.border.secondary,
+        boxSizing: "border-box",
+        zIndex: "1",
+        top: "-1px",
+        "& .M4LStack-root": {
+          gap: "8px !important"
+        },
+        "&.M4LTabContent-root > div": {
+          gap: "8px"
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LExtendedComponents/M4LTabs.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LTabs: (_theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LTabs: (_theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LTabs: {
         styleOverrides: {
             '&.M4LTabs-root': {

package/theme/overrides/M4LExtendedComponents/M4LTabs.js

@@ -0,0 +1,44 @@
+const o = (r) => ({
+  M4LTabs: {
+    styleOverrides: {
+      "&.M4LTabs-root": {
+        width: "100%",
+        height: "auto",
+        position: "relative",
+        minHeight: "32px",
+        borderRadius: "4px 4px 0 0",
+        zIndex: "2",
+        "& .MuiTabs-indicator": {
+          display: "none"
+        },
+        "& .MuiButtonBase-root": {
+          background: r.vars.palette.background.neutral,
+          borderRadius: "4px 4px 0 0",
+          "& .MuiSvgIcon-root": {
+            color: r.vars.palette.text.primary
+          }
+        },
+        "& .MuiButtonBase-root:hover": {
+          "& .MuiSvgIcon-root": {
+            color: r.vars.palette.primary.focusActive
+          }
+        },
+        "& .MuiTabs-scroller": {
+          borderRadius: "4px 4px 0 0",
+          "& .MuiTabs-flexContainer": {
+            padding: "0px",
+            backgroundColor: "transparent",
+            width: "100%",
+            borderRadius: "4px 4px 0 0"
+          }
+        },
+        "&:not(:last-of-type)": {
+          margin: "unset"
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LTooltip.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LTooltip: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LTooltip: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LTooltip: {
         styleOverrides: {
             '&.M4LTooltip-root': {

package/theme/overrides/M4LExtendedComponents/M4LTooltip.js

@@ -0,0 +1,26 @@
+import { B as t } from "../../palette/baseColors.js";
+const e = (o) => ({
+  M4LTooltip: {
+    styleOverrides: {
+      "&.M4LTooltip-root": {
+        test: "root",
+        "& .MuiTooltip-tooltip": {
+          display: "flex",
+          alignItems: "center",
+          background: o.vars.palette.info.main,
+          borderRadius: "4px",
+          boxShadow: o.customShadows?.z2,
+          padding: "4px 8px",
+          height: "fit-content",
+          minHeight: "24px",
+          width: "fit-content",
+          color: t.marbleLight[30],
+          ...o.colorSchemes.finalTheme.typography.body
+        }
+      }
+    }
+  }
+});
+export {
+  e as M
+};

package/theme/overrides/M4LExtendedComponents/M4LTopBar.js

@@ -0,0 +1,71 @@
+const r = (o) => ({
+  M4LTopBar: {
+    styleOverrides: {
+      "&.M4LTopBar-root": {
+        "& .M4LTopBar-SimplebarComercial": {
+          display: "inline-flex",
+          gap: "16px",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "36px",
+          "& .M4LTopBar-ContainerAccordionCase1": {
+            display: "flex",
+            gap: 8,
+            padding: "4px 12px",
+            border: "1px solid transparent",
+            borderRadius: "4px",
+            "& .MuiButtonBase-root": {
+              padding: 0,
+              minWidth: "20px"
+            }
+          },
+          //if IsActive class exist add to styles
+          "& .M4LTopBar-IsActive": {
+            //Render case 1
+            "& .M4LTopBar-ContainerAccordionCase1": {
+              "& .M4LIcon-root": {
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.vars.palette.primary.main
+                }
+              },
+              "& .MuiButtonBase-root": {
+                color: o.vars.palette.primary.main
+              }
+            },
+            //Render case 2
+            "& .M4LTopBar-ContainerAccordion": {
+              "& .M4LIcon-root": {
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.vars.palette.primary.main
+                }
+              },
+              "& .MuiButtonBase-root": {
+                color: o.vars.palette.primary.main
+              }
+            },
+            //Render case 3
+            "& .MuiButtonBase-root": {
+              color: o.vars.palette.primary.main
+            }
+          }
+        }
+      }
+    }
+  },
+  M4LPopoverTopBar: {
+    styleOverrides: {
+      "& .MuiPaper-root": {
+        "& .M4LTopBar-ItemSelect": {
+          "&.M4LTopBar-IsActive": {
+            "& .MuiButtonBase-root": {
+              color: o.vars.palette.primary.main
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LExtendedComponents/M4LTypography.js

@@ -0,0 +1,16 @@
+const o = (r) => ({
+  M4LTypography: {
+    styleOverrides: {
+      "&.M4LTypography-root": {
+        color: r.vars.palette.text.primary,
+        display: "inline",
+        "& .MuiTypography-root": {
+          margin: "unset"
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LanguagePopover.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LanguagePopover: (_theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LanguagePopover: (_theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LanguagePopover: {
         styleOverrides: {
             "&.M4LanguagePopover-root": {

package/theme/overrides/M4LExtendedComponents/M4LanguagePopover.js

@@ -0,0 +1,25 @@
+const o = (t) => ({
+  M4LanguagePopover: {
+    styleOverrides: {
+      "&.M4LanguagePopover-root": {
+        "& .M4LImageButton-root": {
+          "& .MuiButtonBase-root": {
+            width: "32px",
+            height: "32px",
+            "M4LImage-root": {
+              width: "32px",
+              height: "32px",
+              "& .M4LImage-lazyLoad": {
+                width: "24px !important",
+                height: "24px !important"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LinearProgressIndeterminate.js

@@ -0,0 +1,58 @@
+const t = (e) => ({
+  M4LinearProgressIndeterminate: {
+    styleOverrides: {
+      "&.M4LinearProgressIndeterminate-root": {
+        width: "100%",
+        position: "absolute",
+        padding: "1px",
+        top: "0",
+        left: "0",
+        "@keyframes borealisBar": {
+          "0%": {
+            left: "0%",
+            right: "100%",
+            width: "0%"
+          },
+          "30%": {
+            left: "0%",
+            right: "75%",
+            width: "60%"
+          },
+          "90%": {
+            right: "0%",
+            left: "50%",
+            width: "25%"
+          },
+          "100%": {
+            left: "100%",
+            right: "0%",
+            width: "0%"
+          }
+        },
+        "&:before": {
+          content: '""',
+          borderRadius: "10px",
+          position: "absolute",
+          top: "-4px",
+          right: "-4px",
+          bottom: "-4px",
+          left: "-4px"
+        },
+        "& .M4LinearProgressIndeterminate-windowLinearProgressBar": {
+          position: "absolute",
+          borderRadius: "10px",
+          top: "0",
+          right: "100%",
+          bottom: "0",
+          left: "0",
+          backgroundColor: e.vars.palette.primary.focusVisible,
+          width: "0",
+          animation: "borealisBar 2s linear infinite"
+        }
+      }
+    }
+  }
+});
+export {
+  t as M
+};

package/theme/overrides/M4LExtendedComponents/M4LoadingButton.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LLoadingButton: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LLoadingButton: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LLoadingButton: {
         styleOverrides: {
             '&.M4LLoadingButton-root': {