@m4l/styles 7.1.44 → 7.1.45-beta.0

package/index.js

@@ -1,5 +1,5 @@
-import { alpha as o, useTheme as q } from "@mui/material/styles";
-import { alpha as s, createTheme as $ } from "@mui/material";
+import { alpha as o, useTheme as R } from "@mui/material/styles";
+import { alpha as g, createTheme as W } from "@mui/material";
 import L from "@mui/material/useMediaQuery";
 const e = {
   patronusBlue: {
@@ -753,10 +753,10 @@ const e = {
     60: o(e.sheetGreen[50], 0.6),
     70: o(e.sheetGreen[50], 0.72)
   }
-}, B = {
+}, A = {
   black: "#000",
   white: "#fff"
-}, f = {
+}, v = {
   0: "#FFFFFF",
   100: "#F9FAFB",
   200: "#F4F6F8",
@@ -822,13 +822,13 @@ const e = {
     // comprobado,
     focusOpacityDark: a.patronus[20],
     // comprobado,
-    opacityGradient1Light: s(a.patronus[10], 0.35),
+    opacityGradient1Light: g(a.patronus[10], 0.35),
     // comprobado,
-    opacityGradient2Light: s(a.patronus[10], 0.15),
+    opacityGradient2Light: g(a.patronus[10], 0.15),
     // comprobado,
-    opacityGradient1Dark: s(a.patronus[10], 0.45),
+    opacityGradient1Dark: g(a.patronus[10], 0.45),
     // comprobado,
-    opacityGradient2Dark: s(a.patronus[10], 0.25),
+    opacityGradient2Dark: g(a.patronus[10], 0.25),
     // comprobado,
     opacityLight: a.patronus[10],
     // comprobado,
@@ -902,13 +902,13 @@ const e = {
     // comprobado,
     focusOpacityDark: a.grass[15] || "#fff",
     // comprobado,
-    opacityGradient1Light: s(a.grass[10], 0.35),
+    opacityGradient1Light: g(a.grass[10], 0.35),
     // comprobado,
-    opacityGradient2Light: s(a.grass[10], 0.15),
+    opacityGradient2Light: g(a.grass[10], 0.15),
     // comprobado,
-    opacityGradient1Dark: s(a.grass[10], 0.45),
+    opacityGradient1Dark: g(a.grass[10], 0.45),
     // comprobado,
-    opacityGradient2Dark: s(a.grass[10], 0.25),
+    opacityGradient2Dark: g(a.grass[10], 0.25),
     // comprobado,
     opacityLight: a.grass[10],
     // comprobado,
@@ -982,13 +982,13 @@ const e = {
     // comprobado,
     focusOpacityDark: a.turqui[20],
     // comprobado,
-    opacityGradient1Light: s(a.turqui[10], 0.35),
+    opacityGradient1Light: g(a.turqui[10], 0.35),
     // comprobado,
-    opacityGradient2Light: s(a.turqui[10], 0.15),
+    opacityGradient2Light: g(a.turqui[10], 0.15),
     // comprobado,
-    opacityGradient1Dark: s(a.turqui[10], 0.45),
+    opacityGradient1Dark: g(a.turqui[10], 0.45),
     // comprobado,
-    opacityGradient2Dark: s(a.turqui[10], 0.25),
+    opacityGradient2Dark: g(a.turqui[10], 0.25),
     // comprobado,
     opacityLight: a.turqui[10],
     // comprobado,
@@ -1064,13 +1064,13 @@ const e = {
     // comprobado,
     opacityLight: a.brown[10],
     // comprobado,
-    opacityGradient1Light: s(a.brown[10], 0.35),
+    opacityGradient1Light: g(a.brown[10], 0.35),
     // comprobado,
-    opacityGradient2Light: s(a.brown[10], 0.15),
+    opacityGradient2Light: g(a.brown[10], 0.15),
     // comprobado,
-    opacityGradient1Dark: s(a.brown[10], 0.45),
+    opacityGradient1Dark: g(a.brown[10], 0.45),
     // comprobado,
-    opacityGradient2Dark: s(a.brown[10], 0.25),
+    opacityGradient2Dark: g(a.brown[10], 0.25),
     // comprobado,
     opacityDark: a.brown[10],
     // comprobado,
@@ -1144,13 +1144,13 @@ const e = {
     // comprobado,
     opacityLight: a.blaze[10],
     // comprobado,
-    opacityGradient1Light: s(a.blaze[10], 0.35),
+    opacityGradient1Light: g(a.blaze[10], 0.35),
     // comprobado,
-    opacityGradient2Light: s(a.blaze[10], 0.15),
+    opacityGradient2Light: g(a.blaze[10], 0.15),
     // comprobado,
-    opacityGradient1Dark: s(a.blaze[10], 0.45),
+    opacityGradient1Dark: g(a.blaze[10], 0.45),
     // comprobado,
-    opacityGradient2Dark: s(a.blaze[10], 0.25),
+    opacityGradient2Dark: g(a.blaze[10], 0.25),
     // comprobado,
     opacityDark: a.blaze[10],
     // comprobado,
@@ -1181,7 +1181,7 @@ const e = {
     borderMainDark: a.blaze[40]
     // comprobado,
   }
-}, R = {
+}, _ = {
   patronus: {
     enabled: t.patronus.enabledLight,
     enabledOpacity: t.patronus.enabledOpacityLight,
@@ -1297,7 +1297,7 @@ const e = {
     light: t.turqui.light,
     dark: t.turqui.dark
   }
-}, W = {
+}, Y = {
   patronus: {
     enabled: t.patronus.enabledDark,
     enabledOpacity: t.patronus.enabledOpacityDark,
@@ -1413,10 +1413,10 @@ const e = {
     light: t.turqui.light,
     dark: t.turqui.dark
   }
-}, _ = Object.keys(t), de = _.map((g) => ({
-  name: g,
-  value: t[g].main
-})), Y = {
+}, M = Object.keys(t), de = M.map((h) => ({
+  name: h,
+  value: t[h].main
+})), I = {
   default: {
     outlined: {
       color: e.oxford[70],
@@ -1961,7 +1961,7 @@ const e = {
       // Comprobado
     }
   }
-}, M = {
+}, P = {
   default: {
     outlined: {
       /* opacidad */
@@ -2576,7 +2576,7 @@ const e = {
   // Comprobado
   toneOpacityDark: e.onyx[50]
   // Comprobado
-}, A = {
+}, w = {
   enabled: u.enabledLight,
   enabledOpacity: u.enabledOpacityLight,
   hover: u.hoverLight,
@@ -2596,7 +2596,7 @@ const e = {
   main: u.mainLight,
   light: u.light,
   dark: u.dark
-}, C = {
+}, z = {
   enabled: u.enabledDark,
   enabledOpacity: u.enabledOpacityDark,
   hover: u.hoverDark,
@@ -2658,13 +2658,13 @@ const e = {
     // comprobado,
     focusOpacityDark: a.crayon[10],
     // comprobado,
-    opacityGradient1Light: s(a.crayon[10], 0.25),
+    opacityGradient1Light: g(a.crayon[10], 0.25),
     // comprobado,
-    opacityGradient1Dark: s(a.crayon[10], 0.25),
+    opacityGradient1Dark: g(a.crayon[10], 0.25),
     // comprobado,
-    opacityGradient2Light: s(a.crayon[10], 0.1),
+    opacityGradient2Light: g(a.crayon[10], 0.1),
     // comprobado,
-    opacityGradient2Dark: s(a.crayon[10], 0.1),
+    opacityGradient2Dark: g(a.crayon[10], 0.1),
     // comprobado,
     opacityLight: a.crayon[10],
     // comprobado,
@@ -2732,13 +2732,13 @@ const e = {
     // comprobado,
     focusOpacityDark: a.middle[10],
     // comprobado,
-    opacityGradient1Light: s(a.middle[10], 0.25),
+    opacityGradient1Light: g(a.middle[10], 0.25),
     // comprobado,
-    opacityGradient1Dark: s(a.middle[10], 0.25),
+    opacityGradient1Dark: g(a.middle[10], 0.25),
     // comprobado,
-    opacityGradient2Light: s(a.middle[10], 0.1),
+    opacityGradient2Light: g(a.middle[10], 0.1),
     // comprobado,
-    opacityGradient2Dark: s(a.middle[10], 0.1),
+    opacityGradient2Dark: g(a.middle[10], 0.1),
     // comprobado,
     opacityLight: a.middle[10],
     // comprobado,
@@ -2806,13 +2806,13 @@ const e = {
     // comprobado,
     focusOpacityDark: a.flame[10],
     // comprobado,
-    opacityGradient1Light: s(a.flame[10], 0.25),
+    opacityGradient1Light: g(a.flame[10], 0.25),
     // comprobado,
-    opacityGradient1Dark: s(a.flame[10], 0.25),
+    opacityGradient1Dark: g(a.flame[10], 0.25),
     // comprobado,
-    opacityGradient2Light: s(a.flame[10], 0.1),
+    opacityGradient2Light: g(a.flame[10], 0.1),
     // comprobado,
-    opacityGradient2Dark: s(a.flame[10], 0.1),
+    opacityGradient2Dark: g(a.flame[10], 0.1),
     // comprobado,
     opacityLight: a.flame[10],
     // comprobado,
@@ -2880,13 +2880,13 @@ const e = {
     // comprobado,
     focusOpacityDark: a.acid[10],
     // comprobado,
-    opacityGradient1Light: s(a.acid[10], 0.25),
+    opacityGradient1Light: g(a.acid[10], 0.25),
     // comprobado,
-    opacityGradient1Dark: s(a.acid[10], 0.25),
+    opacityGradient1Dark: g(a.acid[10], 0.25),
     // comprobado,
-    opacityGradient2Light: s(a.acid[10], 0.1),
+    opacityGradient2Light: g(a.acid[10], 0.1),
     // comprobado,
-    opacityGradient2Dark: s(a.acid[10], 0.1),
+    opacityGradient2Dark: g(a.acid[10], 0.1),
     // comprobado,
     opacityLight: a.acid[10],
     // comprobado,
@@ -2913,7 +2913,7 @@ const e = {
     // comprobado,
     toneOpacityDark: e.acidGreen[95]
   }
-}, D = {
+}, O = {
   info: {
     enabled: r.info.enabledLight,
     enabledOpacity: r.info.enabledOpacityLight,
@@ -3002,7 +3002,7 @@ const e = {
     light: r.error.light,
     dark: r.error.dark
   }
-}, O = {
+}, T = {
   info: {
     enabled: r.info.enabledDark,
     enabledOpacity: r.info.enabledOpacityDark,
@@ -3091,54 +3091,54 @@ const e = {
     light: r.error.light,
     dark: r.error.dark
   }
-}, I = f[500], P = "#000000", w = (g) => {
-  const i = o(g, 0.2), n = o(g, 0.14), x = o(g, 0.12);
+}, V = v[500], N = "#000000", H = (h) => {
+  const s = o(h, 0.2), i = o(h, 0.14), n = o(h, 0.12);
   return [
     "none",
-    `0px 2px 1px -1px ${i},0px 1px 1px 0px ${n},0px 1px 3px 0px ${x}`,
-    `0px 3px 1px -2px ${i},0px 2px 2px 0px ${n},0px 1px 5px 0px ${x}`,
-    `0px 3px 3px -2px ${i},0px 3px 4px 0px ${n},0px 1px 8px 0px ${x}`,
-    `0px 2px 4px -1px ${i},0px 4px 5px 0px ${n},0px 1px 10px 0px ${x}`,
-    `0px 3px 5px -1px ${i},0px 5px 8px 0px ${n},0px 1px 14px 0px ${x}`,
-    `0px 3px 5px -1px ${i},0px 6px 10px 0px ${n},0px 1px 18px 0px ${x}`,
-    `0px 4px 5px -2px ${i},0px 7px 10px 1px ${n},0px 2px 16px 1px ${x}`,
-    `0px 5px 5px -3px ${i},0px 8px 10px 1px ${n},0px 3px 14px 2px ${x}`,
-    `0px 5px 6px -3px ${i},0px 9px 12px 1px ${n},0px 3px 16px 2px ${x}`,
-    `0px 6px 6px -3px ${i},0px 10px 14px 1px ${n},0px 4px 18px 3px ${x}`,
-    `0px 6px 7px -4px ${i},0px 11px 15px 1px ${n},0px 4px 20px 3px ${x}`,
-    `0px 7px 8px -4px ${i},0px 12px 17px 2px ${n},0px 5px 22px 4px ${x}`,
-    `0px 7px 8px -4px ${i},0px 13px 19px 2px ${n},0px 5px 24px 4px ${x}`,
-    `0px 7px 9px -4px ${i},0px 14px 21px 2px ${n},0px 5px 26px 4px ${x}`,
-    `0px 8px 9px -5px ${i},0px 15px 22px 2px ${n},0px 6px 28px 5px ${x}`,
-    `0px 8px 10px -5px ${i},0px 16px 24px 2px ${n},0px 6px 30px 5px ${x}`,
-    `0px 8px 11px -5px ${i},0px 17px 26px 2px ${n},0px 6px 32px 5px ${x}`,
-    `0px 9px 11px -5px ${i},0px 18px 28px 2px ${n},0px 7px 34px 6px ${x}`,
-    `0px 9px 12px -6px ${i},0px 19px 29px 2px ${n},0px 7px 36px 6px ${x}`,
-    `0px 10px 13px -6px ${i},0px 20px 31px 3px ${n},0px 8px 38px 7px ${x}`,
-    `0px 10px 13px -6px ${i},0px 21px 33px 3px ${n},0px 8px 40px 7px ${x}`,
-    `0px 10px 14px -6px ${i},0px 22px 35px 3px ${n},0px 8px 42px 7px ${x}`,
-    `0px 11px 14px -7px ${i},0px 23px 36px 3px ${n},0px 9px 44px 8px ${x}`,
-    `0px 11px 15px -7px ${i},0px 24px 38px 3px ${n},0px 9px 46px 8px ${x}`
+    `0px 2px 1px -1px ${s},0px 1px 1px 0px ${i},0px 1px 3px 0px ${n}`,
+    `0px 3px 1px -2px ${s},0px 2px 2px 0px ${i},0px 1px 5px 0px ${n}`,
+    `0px 3px 3px -2px ${s},0px 3px 4px 0px ${i},0px 1px 8px 0px ${n}`,
+    `0px 2px 4px -1px ${s},0px 4px 5px 0px ${i},0px 1px 10px 0px ${n}`,
+    `0px 3px 5px -1px ${s},0px 5px 8px 0px ${i},0px 1px 14px 0px ${n}`,
+    `0px 3px 5px -1px ${s},0px 6px 10px 0px ${i},0px 1px 18px 0px ${n}`,
+    `0px 4px 5px -2px ${s},0px 7px 10px 1px ${i},0px 2px 16px 1px ${n}`,
+    `0px 5px 5px -3px ${s},0px 8px 10px 1px ${i},0px 3px 14px 2px ${n}`,
+    `0px 5px 6px -3px ${s},0px 9px 12px 1px ${i},0px 3px 16px 2px ${n}`,
+    `0px 6px 6px -3px ${s},0px 10px 14px 1px ${i},0px 4px 18px 3px ${n}`,
+    `0px 6px 7px -4px ${s},0px 11px 15px 1px ${i},0px 4px 20px 3px ${n}`,
+    `0px 7px 8px -4px ${s},0px 12px 17px 2px ${i},0px 5px 22px 4px ${n}`,
+    `0px 7px 8px -4px ${s},0px 13px 19px 2px ${i},0px 5px 24px 4px ${n}`,
+    `0px 7px 9px -4px ${s},0px 14px 21px 2px ${i},0px 5px 26px 4px ${n}`,
+    `0px 8px 9px -5px ${s},0px 15px 22px 2px ${i},0px 6px 28px 5px ${n}`,
+    `0px 8px 10px -5px ${s},0px 16px 24px 2px ${i},0px 6px 30px 5px ${n}`,
+    `0px 8px 11px -5px ${s},0px 17px 26px 2px ${i},0px 6px 32px 5px ${n}`,
+    `0px 9px 11px -5px ${s},0px 18px 28px 2px ${i},0px 7px 34px 6px ${n}`,
+    `0px 9px 12px -6px ${s},0px 19px 29px 2px ${i},0px 7px 36px 6px ${n}`,
+    `0px 10px 13px -6px ${s},0px 20px 31px 3px ${i},0px 8px 38px 7px ${n}`,
+    `0px 10px 13px -6px ${s},0px 21px 33px 3px ${i},0px 8px 40px 7px ${n}`,
+    `0px 10px 14px -6px ${s},0px 22px 35px 3px ${i},0px 8px 42px 7px ${n}`,
+    `0px 11px 14px -7px ${s},0px 23px 36px 3px ${i},0px 9px 44px 8px ${n}`,
+    `0px 11px 15px -7px ${s},0px 24px 38px 3px ${i},0px 9px 46px 8px ${n}`
   ];
-}, V = (g) => {
-  const i = {
+}, U = (h) => {
+  const s = {
     info: `0px 2px 8px 0px ${o(e.patronusBlue[50], 0.2)}`,
     secondary: `0px 2px 8px 0px ${o(e.patronusBlue[50], 0.24)}`,
     success: `0px 2px 8px 0px ${o(e.acidGreen[50], 0.2)}`,
     warning: `0px 2px 8px 0px ${o(e.middleYellow[50], 0.2)}`,
     error: `0px 2px 8px 0px ${o(e.flameRed[50], 0.2)}`,
     //
-    card: `0 0 2px 0 ${o(f[500], 0.2)}, 0 12px 24px -4px ${o(
-      f[500],
+    card: `0 0 2px 0 ${o(v[500], 0.2)}, 0 12px 24px -4px ${o(
+      v[500],
       0.12
     )}`,
-    dialog: `-40px 40px 80px -8px ${o(B.black, 0.24)}`,
-    dropdown: `0 0 2px 0 ${o(f[500], 0.24)}, -20px 20px 40px -4px ${o(
-      f[500],
+    dialog: `-40px 40px 80px -8px ${o(A.black, 0.24)}`,
+    dropdown: `0 0 2px 0 ${o(v[500], 0.24)}, -20px 20px 40px -4px ${o(
+      v[500],
       0.24
     )}`
   };
-  return g === "light" ? {
+  return h === "light" ? {
     z1: `0px 2px 3px -2px ${o("#606f85", 0.08)}, 0px 2px 8px 0px ${o("#606f85", 0.08)}`,
     z2: `0px 4px 10px -5px ${o("#566376", 0.12)}, 0px 4px 20px -2px ${o("#566376", 0.12)}`,
     z3: `0px 4px 8px -5px  ${o("#404A59", 0.16)}, 0px 8px 30px -1px ${o("#566376", 0.12)}`,
@@ -3147,7 +3147,7 @@ const e = {
     innerShadowContainer: `2px 2px 4px 1px ${o(a.onyx[80] || "#1C2121", 0.6)} inset`,
     innerShadowOutlinedText: `2px 2px 6px 2px ${o(a.onyx[80] || "#1C2121", 0.48)} inset`,
     innerShadowText: `2px 2px 4px 2px ${o(a.onyx[80] || "#1C2121", 0.16)} inset`,
-    ...i
+    ...s
   } : {
     z1: `0px 2px 3px -2px ${o("#090c0c", 0.4)}, 0px 2px 12px 0px ${o("#090c0c", 0.4)}`,
     z2: `0px 4px 10px -5px ${o("#111818", 0.84)}, 0px 4px 20px -2px ${o("#111818", 0.56)}`,
@@ -3157,11 +3157,11 @@ const e = {
     innerShadowContainer: `3px 3px 4px 1px ${o(a.onyx[80] || "#1C2121", 0.72)} inset`,
     innerShadowOutlinedText: `3px 3px 6px 2px ${o(a.onyx[80] || "#1C2121", 0.72)} inset`,
     innerShadowText: `2px 2px 4px 2px ${o(a.onyx[80] || "#1C2121", 0.72)} inset`,
-    ...i
+    ...s
   };
-}, N = {
-  light: w(I),
-  dark: w(P)
+}, Z = {
+  light: H(V),
+  dark: H(N)
 }, d = {
   pt10: "10px",
   pt11: "11px",
@@ -3378,7 +3378,7 @@ const e = {
       letterSpacing: c.dens
     }
   }
-}, Z = {
+}, Q = {
   small: {
     h1: {
       fontSize: d.pt54,
@@ -3527,60 +3527,62 @@ const e = {
       letterSpacing: c.dens
     }
   }
-}, Q = {
+}, J = {
   mobile: K,
-  desktop: Z,
+  desktop: Q,
   lineHeight: p,
   weight: l,
   letterSpacing: c.normal
 };
-function se(g, i, n, x) {
-  const T = q(), H = L(T.breakpoints.up(i)), F = L(T.breakpoints.down(i)), E = L(T.breakpoints.between(n, x)), S = L(T.breakpoints.only(i));
-  return g === "up" ? H : g === "down" ? F : g === "between" ? E : g === "only" ? S : !1;
+function se(h, s, i, n) {
+  const m = R(), E = L(m.breakpoints.up(s)), S = L(m.breakpoints.down(s)), q = L(m.breakpoints.between(i, n)), $ = L(m.breakpoints.only(s));
+  return h === "up" ? E : h === "down" ? S : h === "between" ? q : h === "only" ? $ : !1;
 }
-const J = "patronus", j = t[J];
-function v(g) {
+const C = "patronus", B = t[C];
+function D(h) {
+  if (h == null)
+    return B;
   try {
-    return t?.[g];
+    return t?.[h] ?? B;
   } catch {
+    return B;
   }
-  return j;
 }
-function ge(g) {
-  return Math.round(parseFloat(g) * 16);
+function ge(h) {
+  return Math.round(parseFloat(h) * 16);
 }
-function m(g) {
-  return `${g / 16}rem`;
+function f(h) {
+  return `${h / 16}rem`;
 }
-function k({ sm: g, md: i, lg: n }) {
+function k({ sm: h, md: s, lg: i }) {
   return {
     "@media (min-width:0px)": {
-      fontSize: `${g}px`
+      fontSize: `${h}px`
     },
     "@media (min-width:900px)": {
-      fontSize: `${i}px`
+      fontSize: `${s}px`
     },
     "@media (min-width:1200px)": {
-      fontSize: `${n}px`
+      fontSize: `${i}px`
     }
   };
 }
-const ue = (g, i) => i?.[g]?.main || g, G = {
+const ue = (h, s) => s?.[h]?.main || h, G = {
   light: {
     scrollBar: "#5663763D",
     gridHover: "#FCFCFC"
   }
-}, X = (g) => {
-  const i = R?.[g], n = W?.[g];
+}, j = (h) => {
+  const s = h ?? C, i = _?.[s], n = Y?.[s];
   return {
     light: {
       mode: "light",
-      common: B,
+      common: A,
       primary: {
         ...i
       },
       default: {
-        ...A,
+        ...w,
         semanticText: e.onyx[20],
         focusVisible: i.focusVisible
       },
@@ -3595,7 +3597,7 @@ const ue = (g, i) => i?.[g]?.main || g, G = {
         default: e.marbleLight[10],
         neutral: e.marbleLight[30],
         surface: e.marbleLight[50],
-        hover: A.hover,
+        hover: w.hover,
         backdrop: a.oxford[30],
         base: e.marbleLight[20],
         blur: a.marble[60],
@@ -3645,51 +3647,51 @@ const ue = (g, i) => i?.[g]?.main || g, G = {
           }
           /* opacidad */
         },
-        ...Y
+        ...I
       },
       border: {
-        main: t[g]?.borderMainLight,
+        main: t[s]?.borderMainLight,
         dens: a.oxford[40],
         default: e.oxford[30],
         secondary: a.oxford[20],
         disabled: a.oxford[10],
-        error: D.error.main
+        error: O.error.main
       },
       general: {
         scrollBar: G.light.scrollBar,
         gridHover: G.light.gridHover
       },
-      grey: f,
+      grey: v,
       skeleton: {
         default: a.oxford[10],
         transition: a.oxford[20]
       },
       info: {
-        ...D.info,
+        ...O.info,
         focusVisible: i.focusVisible
       },
       success: {
-        ...D.success,
+        ...O.success,
         focusVisible: i.focusVisible
       },
       warning: {
-        ...D.warning,
+        ...O.warning,
         focusVisible: i.focusVisible
       },
       error: {
-        ...D.error,
+        ...O.error,
         focusVisible: i.focusVisible
       }
     },
     dark: {
       mode: "dark",
-      common: B,
+      common: A,
       // no definido en figma
       primary: {
         ...n
       },
       default: {
-        ...C,
+        ...z,
         semanticText: e.coolGrey[20],
         focusVisible: n?.focusVisible
       },
@@ -3704,7 +3706,7 @@ const ue = (g, i) => i?.[g]?.main || g, G = {
         default: e.onyx[60],
         neutral: e.onyx[80],
         surface: e.onyx[90],
-        hover: C.hover,
+        hover: z.hover,
         backdrop: a.onyx[30],
         base: e.onyx[70],
         blur: a.onyx[60],
@@ -3754,46 +3756,46 @@ const ue = (g, i) => i?.[g]?.main || g, G = {
           }
           /* opacidad */
         },
-        ...M
+        ...P
       },
       border: {
-        main: t[g]?.borderMainDark,
+        main: t[s]?.borderMainDark,
         dens: e.coolGrey[70],
         default: e.onyx[30],
         secondary: e.onyx[50],
         disabled: a.cool[20],
-        error: O.error.main
+        error: T.error.main
       },
       general: {
         // no definido en figma
         scrollBar: G.light.scrollBar,
         gridHover: G.light.gridHover
       },
-      grey: f,
+      grey: v,
       // no definido en figma
       skeleton: {
         default: a.mint[20],
         transition: a.mint[40]
       },
       info: {
-        ...O.info,
+        ...T.info,
         focusVisible: n.focusVisible
       },
       success: {
-        ...O.success,
+        ...T.success,
         focusVisible: n.focusVisible
       },
       warning: {
-        ...O.warning,
+        ...T.warning,
         focusVisible: n.focusVisible
       },
       error: {
-        ...O.error,
+        ...T.error,
         focusVisible: n.focusVisible
       }
     }
   };
-}, U = {
+}, X = {
   extraCompact: "4px",
   compact: "8px",
   standard: "16px",
@@ -3835,7 +3837,7 @@ const ue = (g, i) => i?.[g]?.main || g, G = {
   sp13: "52px",
   sp14: "56px",
   "sp14-5": "58px"
-}, h = {
+}, x = {
   base: {
     small: b.sp5,
     medium: b.sp6,
@@ -3917,30 +3919,30 @@ const ue = (g, i) => i?.[g]?.main || g, G = {
   }
 }, te = {
   small: {
-    base: h.base.small,
-    action: h.action.small,
-    container: h.container.small,
-    box: h.box.small,
-    case: h.case.small
+    base: x.base.small,
+    action: x.action.small,
+    container: x.container.small,
+    box: x.box.small,
+    case: x.case.small
   },
   medium: {
-    base: h.base.medium,
-    action: h.action.medium,
-    container: h.container.medium,
-    box: h.box.medium,
-    case: h.case.medium
+    base: x.base.medium,
+    action: x.action.medium,
+    container: x.container.medium,
+    box: x.box.medium,
+    case: x.case.medium
   },
   large: {
     // @ts-ignore-next-line
-    base: h.base.large,
+    base: x.base.large,
     // @ts-ignore-next-line
-    action: h.action.large,
+    action: x.action.large,
     // @ts-ignore-next-line
-    container: h.container.large,
+    container: x.container.large,
     // @ts-ignore-next-line
-    box: h.box.large,
+    box: x.box.large,
     // @ts-ignore-next-line
-    case: h.case.large
+    case: x.case.large
   }
 }, re = {
   desktop: {
@@ -3952,7 +3954,7 @@ const ue = (g, i) => i?.[g]?.main || g, G = {
   borderRadius: {
     ...ae
   },
-  typography: Q,
+  typography: J,
   borderStroke: {
     ...ee
   },
@@ -3960,30 +3962,33 @@ const ue = (g, i) => i?.[g]?.main || g, G = {
     ...b
   },
   density: {
-    ...U
+    ...X
   }
 };
-function be(g, i) {
-  const n = $();
+function he(h, s) {
+  const i = h ?? "light", n = s ?? C, m = W();
   return {
-    ...n,
-    ...n.typography,
-    ...z,
-    ...N[g],
+    ...m,
+    ...m.typography,
+    ...F,
+    ...Z[i],
     customShadows: {
-      primary: g === "light" ? `0 4px 8px -4px ${s(v(i)?.enabledLight, 0.12)},
-       0 2px 27px 2px ${s(v(i)?.enabledLight, 0.02)}` : `0 4px 8px -4px ${s(v(i)?.enabledDark, 0.12)},
-       0 2px 27px 2px ${s(v(i)?.enabledDark, 0.02)}`,
-      primary2: g === "light" ? `0px 2px 3px 0px ${s(v(i)?.hoverOpacityLight, 0.2)}` : `0px 2px 3px 0px ${s(v(i)?.hoverOpacityDark, 0.2)}`,
-      ...V(g)
+      primary: i === "light" ? `0 4px 8px -4px ${g(D(n)?.enabledLight, 0.12)},
+       0 2px 27px 2px ${g(D(n)?.enabledLight, 0.02)}` : `0 4px 8px -4px ${g(D(n)?.enabledDark, 0.12)},
+       0 2px 27px 2px ${g(D(n)?.enabledDark, 0.02)}`,
+      primary2: i === "light" ? `0px 2px 3px 0px ${g(D(n)?.hoverOpacityLight, 0.2)}` : `0px 2px 3px 0px ${g(D(n)?.hoverOpacityDark, 0.2)}`,
+      ...U(i)
     },
     stretch: !0,
-    palette: { ...n.palette, ...X(i)[g] },
-    typography: { ...n.typography, ...z },
+    palette: {
+      ...m.palette,
+      ...j(n)[i]
+    },
+    typography: { ...m.typography, ...F },
     size: re
   };
 }
-const ie = "Inter, Segoe UI, Poppins, sans-serif", z = {
+const ie = "Inter, Segoe UI, Poppins, sans-serif", F = {
   // ...baseTheme.typography,
   fontFamily: ie,
   fontWeightRegular: 400,
@@ -3992,7 +3997,7 @@ const ie = "Inter, Segoe UI, Poppins, sans-serif", z = {
   fontSize: 14,
   fontWeightLight: 300,
   htmlFontSize: 16,
-  pxToRem: (g) => `${g / 16}rem`,
+  pxToRem: (h) => `${h / 16}rem`,
   // Definindo en Patronus
   h1: {
     fontWeight: 600,
@@ -4059,12 +4064,12 @@ const ie = "Inter, Segoe UI, Poppins, sans-serif", z = {
   subtitle1: {
     fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: m(14)
+    fontSize: f(14)
   },
   subtitle2: {
     fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: m(12)
+    fontSize: f(12)
   },
   // Definindo en Patronus
   body: {
@@ -4081,32 +4086,32 @@ const ie = "Inter, Segoe UI, Poppins, sans-serif", z = {
   body0: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: m(16)
+    fontSize: f(16)
   },
   body1: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: m(14)
+    fontSize: f(14)
   },
   body2: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: m(12)
+    fontSize: f(12)
   },
   caption: {
     lineHeight: 1.5,
-    fontSize: m(11)
+    fontSize: f(11)
   },
   overline: {
     fontWeight: 700,
     lineHeight: 1.5,
-    fontSize: m(12),
+    fontSize: f(12),
     textTransform: "uppercase"
   },
   button: {
     fontWeight: 700,
     lineHeight: 24 / 14,
-    fontSize: m(14),
+    fontSize: f(14),
     textTransform: "capitalize"
   },
   // Definindo en Patronus
@@ -4115,7 +4120,7 @@ const ie = "Inter, Segoe UI, Poppins, sans-serif", z = {
     lineHeight: "16px",
     ...k({ sm: 12, md: 12, lg: 12 })
   }
-}, ne = (g) => ({
+}, ne = (h) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -4131,12 +4136,12 @@ const ie = "Inter, Segoe UI, Poppins, sans-serif", z = {
     }
   }
 });
-function xe(g) {
+function be(h) {
   return {
     ...ne()
   };
 }
-const he = {
+const xe = {
   values: {
     xs: 0,
     sm: 600,
@@ -4154,37 +4159,37 @@ export {
   c as BASE_LETTER_SPACING,
   p as BASE_LINE_HEIGHT,
   a as BASE_OPACITY_COLORS,
-  M as BASE_TAG_OBJECT_COLORS_DARK,
-  Y as BASE_TAG_OBJECT_COLORS_LIGHT,
+  P as BASE_TAG_OBJECT_COLORS_DARK,
+  I as BASE_TAG_OBJECT_COLORS_LIGHT,
   l as BASE_WEIGHT,
-  B as COMMON_COLORS,
-  J as DEFAULT_PRESET,
+  A as COMMON_COLORS,
+  C as DEFAULT_PRESET,
   ke as DEFAULT_SIZE,
-  f as GREY_PALETTE,
+  v as GREY_PALETTE,
   oe as POINTER_QR_DESKTOP_SIZES,
   te as POINTER_QR_MOBILE_SIZES,
   t as PRESET_COLORS,
   u as PRESET_DEFAULT,
   r as PRESET_SEMANTICS_COLORS,
-  W as PRIMARY_COLORS_DARK,
-  R as PRIMARY_COLORS_LIGHT,
-  Q as TYPOGRAPHY,
-  Z as TYPOGRAPHY_SIZES_DESKTOP,
+  Y as PRIMARY_COLORS_DARK,
+  _ as PRIMARY_COLORS_LIGHT,
+  J as TYPOGRAPHY,
+  Q as TYPOGRAPHY_SIZES_DESKTOP,
   K as TYPOGRAPHY_SIZES_MOBILE,
-  V as createCustomShadows,
-  j as defaultPresetColors,
-  xe as fnComponentsOverrides,
-  v as getColorPresets,
+  U as createCustomShadows,
+  B as defaultPresetColors,
+  be as fnComponentsOverrides,
+  D as getColorPresets,
   ue as getColorState,
-  X as getPaletteByPreset,
-  be as getUserThemeOptions,
+  j as getPaletteByPreset,
+  he as getUserThemeOptions,
   ye as globalRemSize,
-  he as muiBreakpointsValues,
+  xe as muiBreakpointsValues,
   de as presetsOptionsMainColor,
-  m as pxToRem,
+  f as pxToRem,
   ge as remToPx,
   k as responsiveFontSizes,
-  N as shadows,
-  z as typographyOld,
+  Z as shadows,
+  F as typographyOld,
   se as useResponsive
 };

package/overrides/index.d.ts

@@ -1,10 +1,10 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
 type ThemeType = Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
 /**
- * Funcion que se encarga de aplicar los overrides a los componentes de MUI
- * @param theme - El tema de MUI
- * @returns Los overrides aplicados a los componentes de MUI
- * @deprecated En proceso de eliminación, ahora el sistema de overrides se gestiona a través de los slots de los componentes en @m4l/components.
+ * Applies overrides to MUI components.
+ * @param theme - MUI theme
+ * @returns Overrides applied to MUI components
+ * @deprecated In process of removal. Overrides are now managed via component slots in @m4l/components.
  */
 export declare function fnComponentsOverrides(theme: ThemeType): ThemeType['components'];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "7.1.44",
+  "version": "7.1.45-beta.0",
   "publishConfig": {
     "access": "public"
   },

package/utils/getColorPresets.d.ts

@@ -2,8 +2,9 @@ import { PresetColor, ThemeUserColor } from '../types';
 export declare const DEFAULT_PRESET: ThemeUserColor;
 export declare const defaultPresetColors: PresetColor;
 /**
- * Función que retorna los colores de un preset
+ * Returns the color preset for the given key.
+ * Returns default preset when presetsKey is undefined (e.g. Storybook, invalid storage).
  */
-export declare function getColorPresets(presetsKey: ThemeUserColor): PresetColor;
+export declare function getColorPresets(presetsKey: ThemeUserColor | undefined): PresetColor;
 export default getColorPresets;
 //# sourceMappingURL=getColorPresets.d.ts.map

package/utils/getColorPresets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getColorPresets.d.ts","sourceRoot":"","sources":["../../../../../packages/styles/src/utils/getColorPresets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEvD,eAAO,MAAM,cAAc,EAAE,cAA2B,CAAC;AACzD,eAAO,MAAM,mBAAmB,aAAgC,CAAC;AACjE;;GAEG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,cAAc,GAAG,WAAW,CAKvE;AACD,eAAe,eAAe,CAAC"}
+{"version":3,"file":"getColorPresets.d.ts","sourceRoot":"","sources":["../../../../../packages/styles/src/utils/getColorPresets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEvD,eAAO,MAAM,cAAc,EAAE,cAA2B,CAAC;AACzD,eAAO,MAAM,mBAAmB,aAAgC,CAAC;AACjE;;;GAGG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,cAAc,GAAG,SAAS,GAAG,WAAW,CASnF;AACD,eAAe,eAAe,CAAC"}

package/utils/getPaletteByPreset.d.ts

@@ -1,8 +1,9 @@
 import { ThemeUserColor } from '../types';
 /**
- * Función que retorna la paleta de colores según el preset seleccionado
+ * Returns the color palette for the selected preset.
+ * Uses default preset when themeUserColor is undefined (e.g. Storybook).
  */
-export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
+export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor | undefined) => {
     readonly light: {
         readonly mode: "light";
         readonly common: import('@mui/material').CommonColors;

package/utils/getPaletteByPreset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getPaletteByPreset.d.ts","sourceRoot":"","sources":["../../../../../packages/styles/src/utils/getPaletteByPreset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAwB/C;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,gBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+LhE,CAAC"}
+{"version":3,"file":"getPaletteByPreset.d.ts","sourceRoot":"","sources":["../../../../../packages/styles/src/utils/getPaletteByPreset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAyB/C;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,gBAAgB,cAAc,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgM5E,CAAC"}

package/utils/getUserThemeOptions.d.ts

@@ -1,7 +1,8 @@
 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.
+ * Returns the application theme based on the user-selected color and mode.
+ * Uses defaults when called from environments where settings may be undefined (e.g. Storybook).
  */
-export declare function getUserThemeOptions(themeUserMode: ThemeUserMode, themeUserColor: ThemeUserColor): Theme;
+export declare function getUserThemeOptions(themeUserMode: ThemeUserMode | undefined, themeUserColor: ThemeUserColor | undefined): Theme;
 //# sourceMappingURL=getUserThemeOptions.d.ts.map

package/utils/getUserThemeOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getUserThemeOptions.d.ts","sourceRoot":"","sources":["../../../../../packages/styles/src/utils/getUserThemeOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,EAAE,MAAM,eAAe,CAAC;AAI1D,OAAO,EAAG,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEhE;;GAEG;AACH,wBAAgB,mBAAmB,CAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,GAAM,KAAK,CAyB3G"}
+{"version":3,"file":"getUserThemeOptions.d.ts","sourceRoot":"","sources":["../../../../../packages/styles/src/utils/getUserThemeOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,EAAE,MAAM,eAAe,CAAC;AAI1D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/D;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,aAAa,GAAG,SAAS,EACxC,cAAc,EAAE,cAAc,GAAG,SAAS,GACzC,KAAK,CA8BP"}