@m4l/styles 7.1.14-beta.3 → 7.1.14-beta.5

package/config.js

@@ -1,4 +1,4 @@
-const s = {
+const muiBreakpointsValues = {
   values: {
     xs: 0,
     sm: 600,
@@ -6,12 +6,14 @@ const s = {
     lg: 1200,
     xl: 1400
   }
-}, e = {
+};
+const globalRemSize = {
   mobile: 16,
   desktop: 16
-}, m = "medium";
+};
+const DEFAULT_SIZE = "medium";
 export {
-  m as D,
-  e as g,
-  s as m
+  DEFAULT_SIZE as D,
+  globalRemSize as g,
+  muiBreakpointsValues as m
 };

package/index.d.ts

@@ -1,4 +1,2 @@
-export * from './theme';
-export * from './utils';
-export * from './types';
+export { useResponsive } from './utils/useResponsive';
 export { muiBreakpointsValues, globalRemSize, DEFAULT_SIZE } from './config';

package/index.js

@@ -1,39 +1,8 @@
-import { D as r, g as s, m as t } from "./config.js";
-import { c as p, s as m } from "./theme/shadows.js";
-import { f as x } from "./theme/overrides/index.js";
-import { B as O } from "./theme/palette/baseColors.js";
-import { B as S } from "./theme/palette/baseOpacityColors.js";
-import { C as n } from "./theme/palette/commonColors.js";
-import { G as l } from "./theme/palette/greyPalette.js";
-import { p as P } from "./theme/palette/presetColors.js";
-import { t as _ } from "./theme/typography.js";
-import { u as A } from "./utils/useResponsive.js";
-import { D as L, d, g as h } from "./utils/getColorPresets.js";
-import { p as v, r as y, a as F } from "./utils/getFontValue.js";
-import { g as U } from "./utils/getColorState.js";
-import { g as w } from "./utils/getPaletteByPreset.js";
-import { g as G } from "./utils/getUserThemeOptions.js";
+import { u } from "./utils/useResponsive.js";
+import { D, g, m } from "./config.js";
 export {
-  O as BASE_COLORS,
-  S as BASE_OPACITY_COLORS,
-  n as COMMON_COLORS,
-  L as DEFAULT_PRESET,
-  r as DEFAULT_SIZE,
-  l as GREY_PALETTE,
-  p as createCustomShadows,
-  d as defaultPresetColors,
-  x as fnComponentsOverrides,
-  h as getColorPresets,
-  U as getColorState,
-  w as getPaletteByPreset,
-  G as getUserThemeOptions,
-  s as globalRemSize,
-  t as muiBreakpointsValues,
-  P as presetsOptionsMainColor,
-  v as pxToRem,
-  y as remToPx,
-  F as responsiveFontSizes,
-  m as shadows,
-  _ as typography,
-  A as useResponsive
+  D as DEFAULT_SIZE,
+  g as globalRemSize,
+  m as muiBreakpointsValues,
+  u as useResponsive
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "7.1.14-beta.3",
+  "version": "7.1.14-beta.5",
   "license": "UNLICENSED",
   "author": "m4l team",
   "publishConfig": {

package/types/augmentations.d.ts

@@ -1,6 +1,6 @@
 import type { CustomShadowOptions } from '../theme';
 import type { Size } from '../theme/sizes/types';
-import { BaseChipColors } from './types';
+import type { BaseChipColors } from './types';
 
 declare module '@mui/material' {
   interface Color {

package/utils/getUserThemeOptions.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@mui/material/styles';
+import { Theme } from '@mui/material';
 import { ThemeUserColor, ThemeUserMode } from '../types/types';
 /**
  * Obtiene el tema de la aplicación basado en el color y modo seleccionado por el usuario.

package/utils/useResponsive.js

@@ -1,16 +1,24 @@
-import { useTheme as u } from "@mui/material/styles";
-import o from "@mui/material/useMediaQuery";
-function b(e, t, i, r) {
-  const n = u(), s = o(n.breakpoints.up(t)), p = o(n.breakpoints.down(t)), a = o(n.breakpoints.between(i, r)), m = o(n.breakpoints.only(t));
-  if (e === "up")
-    return s;
-  if (e === "down")
-    return p;
-  if (e === "between")
-    return a;
-  if (e === "only")
-    return m;
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+function useResponsive(query, key, start, end) {
+  const theme = useTheme();
+  const mediaUp = useMediaQuery(theme.breakpoints.up(key));
+  const mediaDown = useMediaQuery(theme.breakpoints.down(key));
+  const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));
+  const mediaOnly = useMediaQuery(theme.breakpoints.only(key));
+  if (query === "up") {
+    return mediaUp;
+  }
+  if (query === "down") {
+    return mediaDown;
+  }
+  if (query === "between") {
+    return mediaBetween;
+  }
+  if (query === "only") {
+    return mediaOnly;
+  }
 }
 export {
-  b as u
+  useResponsive as u
 };

package/theme/index.js

@@ -1 +0,0 @@
-

package/theme/overrides/M4LExtendedComponents/M4LAccordion.js

@@ -1,145 +0,0 @@
-const r = (o) => ({
-  M4LAccordion: {
-    styleOverrides: {
-      "&.M4LAccordion-root": {
-        width: "100%",
-        background: o.vars.palette.background.default,
-        borderRadius: "4px",
-        "& .M4LTypography-root": {
-          padding: "4px 8px",
-          display: "flex",
-          alignItems: "center",
-          "& .MuiTypography-root": {
-            ...o.colorSchemes.finalTheme.typography.bodyDens,
-            color: o.vars.palette.text.primary
-          }
-        },
-        "& .MuiPaper-root": {
-          marginBottom: "0px",
-          borderRadius: "4px",
-          border: "1px solid",
-          borderColor: o.vars.palette?.border.default,
-          "& .MuiCollapse-root": {
-            padding: "8px",
-            "& .MuiCollapse-wrapper": {
-              "& .MuiCollapse-wrapperInner": {
-                "& .MuiAccordion-region": {
-                  "& .M4LAccordion-content": {
-                    display: "flex !important",
-                    flexDirection: "column",
-                    gap: "8px !important"
-                  }
-                }
-              }
-            }
-          }
-        },
-        "& .MuiButtonBase-root.Mui-expanded": {
-          padding: "4px 8px",
-          borderRadius: "4px",
-          height: "24px",
-          minHeight: "24px",
-          background: "transparent",
-          "&.MuiAccordionSummary-root": {
-            height: "28px",
-            minHeight: "28px",
-            padding: "0",
-            "& .M4LAccordion-labelIcon": {
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "center",
-              "& .M4LIcon-root": {
-                padding: "4px 0 4px 8px"
-              }
-            },
-            "& .Mui-expanded": {
-              background: o.vars.palette.primary.opacity,
-              height: "28px",
-              minHeight: "28px",
-              "& .MuiButtonBase-root": {
-                "&.MuiAccordionSummary-content": {
-                  borderRadius: "0 0 0 0 !important",
-                  background: o.vars.palette.primary.opacity,
-                  height: "28px",
-                  minHeight: "28px"
-                },
-                "& .M4LTypography-root": {
-                  "& .MuiTypography-root": {
-                    ...o.colorSchemes.finalTheme.typography.bodyDens,
-                    color: o.vars.palette.text?.primary
-                  }
-                },
-                "& .MuiAccordionSummary-expandIconWrapper": {
-                  transform: "rotate(0deg)"
-                },
-                "& .M4LAccordion-endIcon": {
-                  transform: "rotate(90deg)"
-                }
-              }
-            }
-          },
-          test: "root"
-        },
-        "& .MuiPaper-outlined": {
-          "& .MuiButtonBase-root": {
-            padding: "4px 8px",
-            borderRadius: "4px",
-            height: "24px",
-            minHeight: "24px",
-            background: "transparent",
-            "&.MuiAccordionSummary-root": {
-              height: "28px",
-              minHeight: "28px",
-              padding: "0",
-              "&:hover": {
-                background: o.vars.palette.background.hover
-              }
-            },
-            "& .MuiCollapse-root": {
-              background: o.vars.palette.background.default,
-              borderColor: o.vars.palette?.border.default,
-              borderRadius: "0px 0px 4px 4px",
-              padding: "8px",
-              "&.MuiButtonBase-root": {
-                padding: "4px 8px !important",
-                background: o.vars.palette.background.surface
-              },
-              "& .M4LAccordion-content": {
-                display: "flex !important",
-                flexDirection: "column",
-                gap: "2px",
-                "& .M4LPropertyValue-root:last-of-type": {
-                  borderBottom: "unset"
-                }
-              }
-            }
-          }
-        },
-        [o.breakpoints.down("md")]: {
-          "& .MuiButtonBase-root": {
-            height: "36px",
-            minHeight: "36px",
-            "&.MuiAccordionSummary-root": {
-              height: "36px",
-              minHeight: "36px",
-              "& .Mui-expanded": {
-                height: "36px",
-                minHeight: "36px",
-                "& .MuiButtonBase-root": {
-                  "&.MuiAccordionSummary-content": {
-                    height: "36px",
-                    minHeight: "36px"
-                  }
-                }
-              }
-            },
-            test: "root"
-          }
-        }
-      }
-    }
-  }
-});
-export {
-  r as M
-};

package/theme/overrides/M4LExtendedComponents/M4LAccountPopover.js

@@ -1,283 +0,0 @@
-const e = (o) => ({
-  M4LAccountPopover: {
-    styleOverrides: {
-      "&.M4LAccountPopover-root": {
-        borderRadius: "6px"
-      }
-    }
-  },
-  M4LAccountPopoverPopover: {
-    styleOverrides: {
-      "& .M4LAccountPopover-popover": {
-        display: "flex",
-        flexDirection: "column",
-        gap: "0px",
-        borderRadius: "6px"
-      },
-      "& .MuiPaper-root": {
-        display: "flex",
-        flexDirection: "column",
-        gap: "4px",
-        padding: "12px",
-        borderRadius: "6px",
-        boxShadow: o.customShadows?.z2,
-        background: o.vars.palette.background.default,
-        "& .M4LAccountPopover-containerUserInfo": {
-          display: "flex",
-          flexDirection: "column",
-          gap: "4px",
-          "& .M4LAccountPopover-containerUserName": {
-            display: "flex",
-            flexDirection: "row",
-            gap: "12px",
-            padding: "2px 4px",
-            "& .M4LIcon-root": {
-              minWidth: "16px",
-              minHeight: "16px"
-            },
-            "& .M4LAccountPopover-labelUserName": {
-              color: o.vars.palette.text.primary,
-              ...o.colorSchemes.finalTheme.typography.bodyDens,
-              width: "100%",
-              minHeight: "20px",
-              display: "flex",
-              alignItems: "center"
-            }
-          },
-          "& .M4LAccountPopover-containerUserEmail": {
-            display: "flex",
-            flexDirection: "row",
-            gap: "12px",
-            padding: "2px 4px",
-            "& .M4LIcon-root": {
-              minWidth: "16px",
-              minHeight: "16px"
-            },
-            "& .M4LAccountPopover-labelUserEmail": {
-              color: o.vars.palette.text.primary,
-              ...o.colorSchemes.finalTheme.typography.body,
-              width: "100%",
-              minHeight: "20px",
-              display: "flex",
-              alignItems: "center"
-            }
-          }
-        },
-        "& .M4LAccountPopover-containerAppVersion": {
-          display: "flex",
-          flexDirection: "row",
-          gap: "12px",
-          padding: "2px 4px",
-          "& .M4LIcon-root": {
-            minWidth: "16px",
-            minHeight: "16px"
-          },
-          "& .M4LAccountPopover-labelVersion": {
-            color: o.vars.palette.text.secondary,
-            ...o.colorSchemes.finalTheme.typography.body,
-            width: "100%",
-            minHeight: "20px",
-            display: "flex",
-            alignItems: "center"
-          }
-        },
-        "& .M4LAccountPopover-containerMenuItems": {
-          borderTop: "1.5px solid",
-          borderBottom: "1.5px solid",
-          borderColor: o.vars.palette?.border.default,
-          padding: "2px 4px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "4px",
-          "& .M4LAccountPopover-containerProgress": {
-            display: "flex",
-            justifyContent: "start",
-            alignItems: "center"
-          },
-          "& .M4LAccountPopover-containerSetting": {
-            display: "flex",
-            flexDirection: "row",
-            gap: "12px",
-            width: "100%",
-            borderRadius: "4px",
-            cursor: "pointer",
-            "&:hover": {
-              background: o.vars.palette.background.surface
-            },
-            "& .M4LIcon-root": {
-              minWidth: "16px",
-              minHeight: "16px"
-            },
-            "& .M4LAccountPopover-menuItem": {
-              color: o.vars.palette.text.primary,
-              ...o.colorSchemes.finalTheme.typography.body,
-              borderRadius: "4px",
-              width: "100%",
-              minHeight: "20px",
-              display: "flex",
-              alignItems: "center"
-            }
-          }
-        },
-        "& .M4LAccountPopover-containerlogOut": {
-          display: "flex",
-          flexDirection: "row",
-          gap: "12px",
-          padding: "0 4px",
-          borderRadius: "4px",
-          width: "100%",
-          alignItems: "center",
-          cursor: "pointer",
-          "&:hover": {
-            background: o.vars.palette.background.surface
-          },
-          "& .M4LIcon-root": {
-            minWidth: "16px",
-            minHeight: "16px"
-          },
-          "& .M4LAccountPopover-logOut": {
-            color: o.vars.palette.text.primary,
-            ...o.colorSchemes.finalTheme.typography.body,
-            borderRadius: "4px",
-            width: "100%",
-            minHeight: "20px",
-            display: "flex",
-            alignItems: "center"
-          }
-        },
-        [o.breakpoints.down("md")]: {
-          gap: "4px",
-          padding: "16px !important",
-          "& .M4LAccountPopover-containerUserInfo": {
-            gap: "4px",
-            "& .M4LAccountPopover-containerUserName": {
-              gap: "16px",
-              padding: "2px 4px",
-              minHeight: "36px",
-              alignItems: "center",
-              "& .M4LIcon-root": {
-                minWidth: "20px",
-                height: "100%",
-                "& .M4LIcon-icon": {
-                  minHeight: "20px",
-                  minWidth: "20px"
-                }
-              },
-              "& .M4LAccountPopover-labelUserName": {
-                width: "100%",
-                height: "100%"
-              }
-            },
-            "& .M4LAccountPopover-containerUserEmail": {
-              gap: "16px",
-              padding: "2px 4px",
-              minHeight: "36px",
-              alignItems: "center",
-              "& .M4LIcon-root": {
-                minWidth: "20px",
-                height: "100%",
-                "& .M4LIcon-icon": {
-                  minHeight: "20px",
-                  minWidth: "20px"
-                }
-              },
-              "& .M4LAccountPopover-labelUserEmail": {
-                width: "100%",
-                height: "100%"
-              }
-            }
-          },
-          "& .M4LAccountPopover-containerAppVersion": {
-            gap: "16px",
-            padding: "2px 4px",
-            minHeight: "36px",
-            alignItems: "center",
-            "& .M4LIcon-root": {
-              minWidth: "20px",
-              height: "100%",
-              "& .M4LIcon-icon": {
-                minHeight: "20px",
-                minWidth: "20px"
-              }
-            },
-            "& .M4LAccountPopover-labelVersion": {
-              width: "100%",
-              height: "100%"
-            }
-          },
-          "& .M4LAccountPopover-containerMenuItems": {
-            gap: "16px",
-            padding: "0px",
-            "& .M4LAccountPopover-containerSetting": {
-              gap: "16px",
-              padding: "2px 4px",
-              minHeight: "36px",
-              alignItems: "center",
-              "&:hover": {
-                background: o.vars.palette.background.surface
-              },
-              "& .M4LIcon-root": {
-                minWidth: "20px",
-                height: "100%",
-                "& .M4LIcon-icon": {
-                  minHeight: "20px",
-                  minWidth: "20px"
-                }
-              },
-              "& .M4LAccountPopover-menuItem": {
-                width: "100%",
-                height: "100%"
-              }
-            }
-          },
-          "& .M4LAccountPopover-containerlogOut": {
-            gap: "16px",
-            cursor: "pointer",
-            padding: "2px 4px",
-            minHeight: "36px",
-            alignItems: "center",
-            "&:hover": {
-              background: o.vars.palette.background.surface
-            },
-            "& .M4LIcon-root": {
-              minWidth: "20px",
-              height: "100%",
-              "& .M4LIcon-icon": {
-                minHeight: "20px",
-                minWidth: "20px"
-              }
-            },
-            "& .M4LAccountPopover-logOut": {
-              width: "100%",
-              height: "100%"
-            }
-          }
-        },
-        "& .M4LPopover-arrowStyle": {
-          display: "none",
-          "& .M4LAccountPopover-containerUserInfo": {
-            display: "flex",
-            "& .M4LAccountPopover-containerUserName": {
-              display: "flex",
-              flexDirection: "row",
-              gap: "4px"
-            },
-            "& .M4LAccountPopover-containerUserEmail": {
-              display: "flex",
-              flexDirection: "row",
-              gap: "4px"
-            },
-            "& .M4LAccountPopover-containerAppVersion": {
-              display: "flex",
-              flexDirection: "row",
-              gap: "4px"
-            }
-          }
-        }
-      }
-    }
-  }
-});
-export {
-  e as M
-};

package/theme/overrides/M4LExtendedComponents/M4LAppBar.js

@@ -1,118 +0,0 @@
-const e = (p) => ({
-  M4LAppBar: {
-    styleOverrides: {
-      "&.M4LAppBar-root": {
-        display: "flex",
-        width: "100vw",
-        maxWidth: "100vw !important",
-        overflow: "hidden",
-        minHeight: "52px",
-        height: "52px",
-        alignItems: "center",
-        padding: "8px 16px",
-        background: p.vars.palette.background.default,
-        borderBottom: "1.5px solid",
-        borderColor: p.vars.palette?.border.default,
-        justifyContent: "space-between",
-        gap: "40px",
-        [p.breakpoints.down("sm")]: {
-          width: "100%",
-          marginLeft: "0",
-          gap: "12px"
-        },
-        "& .M4LAppBar-containerLogo": {
-          "& .M4LImage-root": {
-            width: "34px!important",
-            height: "34px!important",
-            borderRadius: "4px",
-            padding: "2px"
-          },
-          "& .M4LAppBar-containerImageTypography": {
-            display: "flex",
-            alignItems: "center",
-            gap: "12px",
-            width: "163px",
-            height: "36px",
-            "& .M4LTypography-root": {
-              textWrap: "nowrap",
-              textTransform: "uppercase"
-            }
-          }
-        },
-        "& .M4LAppBar-containerIconMenuToggle": {
-          display: "flex",
-          width: "36px",
-          height: "36px",
-          minWidth: "36px",
-          minHeight: "36px",
-          alignItems: "center",
-          borderRadius: "4px",
-          borderColor: p.vars.palette?.border.default,
-          justifyContent: "space-between",
-          "& .M4LAppBar-iconMenuToggle": {
-            background: p.vars.palette.background.surface,
-            width: "36px",
-            height: "36px",
-            minWidth: "36px",
-            minHeight: "36px",
-            [p.breakpoints.down("sm")]: {
-              background: p.vars.palette.background.surface,
-              width: "36px",
-              height: "36px",
-              minWidth: "36px",
-              minHeight: "36px"
-            }
-          }
-        },
-        "& .M4LAppBar-containerChilds": {
-          flexGrow: "1",
-          display: "flex",
-          flexDirection: "row",
-          gap: "12px",
-          width: "100%",
-          justifyContent: "space-between",
-          overflow: "hidden",
-          alignItems: "center",
-          borderRadius: "4px",
-          background: "none",
-          boxShadow: "none",
-          [p.breakpoints.down("sm")]: {
-            display: "flex",
-            alignItems: "center",
-            width: "100%",
-            borderTop: "0",
-            borderColor: "none",
-            background: "none",
-            boxShadow: "none",
-            paddingRight: "0px",
-            borderRadius: "6px",
-            gap: "8px"
-          },
-          "& .M4LAvatar-root": {
-            width: "28px",
-            height: "28px",
-            padding: "4px",
-            "& .MuiAvatar-root": {
-              width: "20px",
-              height: "20px",
-              fontSize: "12px"
-            },
-            [p.breakpoints.down("sm")]: {
-              width: "36px",
-              height: "36px",
-              padding: "4px",
-              "& .MuiAvatar-root": {
-                width: "28px",
-                height: "28px",
-                fontSize: "15px"
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-});
-export {
-  e as M
-};