@m4l/graphics 3.0.2 → 6.0.0

package/components/GlobalStyle/index-C3p7OfnO.js

@@ -0,0 +1,82 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useTheme as o } from "@mui/material/styles";
+import { GlobalStyles as a } from "@mui/material";
+import { globalRemSize as r } from "@m4l/styles";
+function s() {
+  const t = o();
+  return /* @__PURE__ */ e(
+    a,
+    {
+      styles: {
+        body: {
+          textRendering: "geometricPrecision",
+          width: "100%",
+          height: "100vh",
+          "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active": {
+            color: t.vars.palette.text.primary
+          },
+          "*::-webkit-scrollbar": {
+            // camino de la barra con radio
+            width: "7px",
+            height: "7px",
+            borderRadius: "3px",
+            backgroundColor: "transparent"
+          },
+          "*::-webkit-scrollbar-track": {
+            // Camino de la barrra sin radio
+            backgroundColor: "transparent",
+            border: "0px solid transparent"
+          },
+          "*::-webkit-scrollbar-corner": {
+            backgroundColor: "transparent"
+          },
+          // FireFox
+          // scrollbarColor: `${theme.vars.palette.primary.main} white`,
+          // scrollbarWidth: 'thin',
+          // Chrome
+          "*::-webkit-scrollbar-thumb": {
+            // barra que se mueve
+            background: t.vars.palette.general.scrollBar,
+            borderRadius: "2px!important"
+          },
+          "& #root": {
+            width: "100%",
+            height: "100%"
+          }
+        },
+        "#nprogress": {
+          pointerEvents: "none",
+          "& .bar": {
+            top: 0,
+            left: 0,
+            height: 2,
+            width: "100%",
+            position: "fixed",
+            zIndex: t.zIndex.snackbar,
+            backgroundColor: t.vars.palette.primary.main,
+            boxShadow: `0 0 2px ${t.vars.palette.primary.main}`
+          },
+          "& .peg": {
+            right: 0,
+            opacity: 1,
+            width: 100,
+            height: "100%",
+            display: "block",
+            position: "absolute",
+            transform: "rotate(3deg) translate(0px, -4px)",
+            boxShadow: `0 0 10px ${t.vars.palette.primary.main}, 0 0 5px ${t.vars.palette.primary.main}`
+          }
+        },
+        "& html": {
+          fontSize: r.desktop,
+          [t.breakpoints.down("sm")]: {
+            fontSize: r.mobile
+          }
+        }
+      }
+    }
+  );
+}
+export {
+  s as G
+};

package/contexts/FormatterContext/index-Ch6IW7j8.js

@@ -0,0 +1,74 @@
+import { jsx as D } from "react/jsx-runtime";
+import { createContext as C, useState as k, useCallback as p, useEffect as v } from "react";
+import { useHostTools as R, usePropageteMF as h, EmitEvents as f } from "@m4l/core";
+import { u as V } from "../../hooks/useFirstRender/index-B-Q0TTn0.js";
+const x = C(null);
+function I(T) {
+  const { children: b, isMicroFrontEnd: F, currencyFormatter: l, numberFormatter: M, dateFormatter: t } = T, r = l?.decimalDigits || 0, o = l?.code || "USD", a = M?.decimalSymbol || 0.1.toLocaleString().substring(1, 2), s = M?.thousandsSymbol || 1e3.toLocaleString().substring(1, 2), m = t?.dateFormat || "yyyy-MM-dd", n = t?.dateMask || "____-__-__", c = t?.datetimeFormat || "yyyy-MM-dd HH:mm:ss", i = t?.datetimeMask || "____-__-__ __:__:__", _ = t?.timeFormat || "HH:mm:ss", d = t?.timeMask || "__:__:__", u = t?.formatDate || (() => {
+    throw new Error("Incorrect use of formatDate");
+  }), y = V(), { events_emit: g } = R(), [H, E] = k({
+    currencyFormatter: {
+      decimalDigits: r,
+      code: o
+    },
+    numberFormatter: { decimalSymbol: a, thousandsSymbol: s },
+    dateFormatter: {
+      dateFormat: m,
+      dateMask: n,
+      datetimeFormat: c,
+      datetimeMask: i,
+      timeFormat: _,
+      timeMask: d,
+      formatDate: u
+    }
+  }), S = p((e) => {
+    E(e);
+  }, []);
+  return h({
+    isMicroFrontEnd: F,
+    event: f.EMMIT_EVENT_HOST_FORMATTER_CHANGE,
+    setHandler: S
+  }), v(() => {
+    if (F || y)
+      return;
+    const e = {
+      currencyFormatter: { decimalDigits: r, code: o },
+      numberFormatter: { decimalSymbol: a, thousandsSymbol: s },
+      dateFormatter: {
+        dateFormat: m,
+        dateMask: n,
+        datetimeFormat: c,
+        datetimeMask: i,
+        timeFormat: _,
+        timeMask: d,
+        formatDate: u
+      }
+    };
+    E(e), g(f.EMMIT_EVENT_HOST_FORMATTER_CHANGE, e);
+  }, [
+    y,
+    o,
+    r,
+    a,
+    s,
+    m,
+    n,
+    c,
+    i,
+    _,
+    d,
+    u
+  ]), /* @__PURE__ */ D(
+    x.Provider,
+    {
+      value: {
+        ...H
+      },
+      children: b
+    }
+  );
+}
+export {
+  x as F,
+  I as a
+};

package/contexts/HostThemeContext/index-CcHelA1w.js

@@ -0,0 +1,46 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { createContext as h, useMemo as d } from "react";
+import { CssBaseline as p } from "@mui/material";
+import { deepmerge as t } from "@mui/utils";
+import { G as f } from "../../components/GlobalStyle/index-C3p7OfnO.js";
+import { createTheme as u, experimental_extendTheme as x, Experimental_CssVarsProvider as T, StyledEngineProvider as v } from "@mui/material/styles";
+const C = h(null);
+function y(l) {
+  const { children: c, hostThemeOptions: n, fnComponentsOverrides: s, isMobile: m } = l, a = d(() => {
+    const e = {
+      ...u(),
+      ...n
+    }, r = x({
+      cssVarPrefix: "m4l",
+      colorSchemes: {
+        light: t({}, e),
+        finalTheme: t({}, e),
+        dark: t({}, e)
+      },
+      generalSettings: {
+        isMobile: m
+      }
+    });
+    return r.components = s(r), r;
+  }, [m]);
+  return /* @__PURE__ */ i(T, { theme: a, children: [
+    /* @__PURE__ */ o(f, {}),
+    /* @__PURE__ */ o(
+      C.Provider,
+      {
+        value: {
+          hostThemeOptions: n,
+          fnComponentsOverrides: s
+        },
+        children: /* @__PURE__ */ i(v, { injectFirst: !0, children: [
+          /* @__PURE__ */ o(p, { enableColorScheme: !0 }),
+          c
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  C as H,
+  y as a
+};

package/contexts/HostThemeContext/types.d.ts

@@ -1,8 +1,9 @@
+import { OurTheme } from '@m4l/styles';
 import type { Theme, CssVarsTheme } from '@mui/material/styles';
 import type { ReactNode } from 'react';
 export declare type EventFunListener = (...args: any[]) => void;
 export interface HostThemeType {
-    hostThemeOptions: Theme;
+    hostThemeOptions: OurTheme;
     fnComponentsOverrides: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => any;
 }
 export interface HostThemeProviderProps extends HostThemeType {

package/contexts/LocalesContext/{index--VwMF60R.js → index-C89UlO0s.js}

@@ -1,13 +1,13 @@
-import { createContext as k, useState as E, useCallback as x, useEffect as _ } from "react";
+import { jsx as E } from "react/jsx-runtime";
+import { createContext as k, useState as _, useCallback as x, useEffect as L } from "react";
 import { AdapterDateFns as F } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider as U } from "@mui/x-date-pickers";
 import { useEnvironment as P, useNetwork as I, useHostTools as j, useLocalStorageWithListener as w, EmitEvents as u } from "@m4l/core";
-import L from "date-fns/locale/en-US";
-import { jsx as S } from "react/jsx-runtime";
+import S from "date-fns/locale/en-US";
 async function B(t, e, o) {
   const s = g(t), r = { ...t };
   let i;
-  return s === "es" ? i = (await import("date-fns/locale/es")).default : s === "fr" ? i = (await import("date-fns/locale/fr")).default : s === "en-US" ? i = L : (i = L, r.lang = "en", r.script = void 0, r.region = "US", r.url_icon = `${e}/${o}/frontend/commons/assets/icons/langs/lang_en.svg`, r.name = "English US*"), {
+  return s === "es" ? i = (await import("date-fns/locale/es")).default : s === "fr" ? i = (await import("date-fns/locale/fr")).default : s === "en-US" ? i = S : (i = S, r.lang = "en", r.script = void 0, r.region = "US", r.url_icon = `${e}/${o}/frontend/commons/assets/icons/langs/lang_en.svg`, r.name = "English US*"), {
     ...r,
     module: i,
     localeString: g(r)
@@ -35,46 +35,35 @@ function y(t) {
 }
 const G = k(null);
 function J(t) {
-  const {
-    children: e,
-    isMicroFrontEnd: o,
-    localeHost: s,
-    getLocaleFromNetwork: r
-  } = t;
+  const { children: e, isMicroFrontEnd: o, localeHost: s, getLocaleFromNetwork: r } = t;
   if (o && !s)
     throw Error("Must set localeHost in microfrontend");
   if (!o && !r)
     throw Error("Must set getLocaleFromNetwork in host");
-  const {
-    domain_token: i,
-    host_static_assets: v,
-    environment_assets: h
-  } = P(), {
-    networkOperation: C
-  } = I(), {
-    events_add_listener: N,
-    events_remove_listener: T,
-    events_emit: H
-  } = j(), [a, f] = E(() => {
+  const { domain_token: i, host_static_assets: v, environment_assets: h } = P(), { networkOperation: C } = I(), { events_add_listener: N, events_remove_listener: T, events_emit: H } = j(), [a, f] = _(() => {
     if (o)
       return s;
-  }), [l, m] = w("localeHost", navigator.language), [M, A] = E(""), d = x((n) => {
+  }), [l, m] = w(
+    "localeHost",
+    navigator.language
+  ), [M, A] = _(""), d = x((n) => {
     f(n);
   }, []);
-  if (_(() => (o && N(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, d), () => {
+  if (L(() => (o && N(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, d), () => {
     o && T(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, d);
-  }), []), _(() => {
+  }), []), L(() => {
     let n = !0;
     if (!o && r && !(l === M && l !== ""))
       return C({
         method: "POST",
         endPoint: "na/locales",
-        data: {
-          ...y(l),
-          domain_token: i
-        }
+        data: { ...y(l), domain_token: i }
       }).then((p) => {
-        n && r(p.data, v, h).then((c) => {
+        n && r(
+          p.data,
+          v,
+          h
+        ).then((c) => {
           f(c), A(c.localeString), l !== c.localeString && m(c.localeString), H(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, c);
         });
       }).finally(() => {
@@ -86,20 +75,24 @@ function J(t) {
   const O = (n) => {
     (n.lang !== a.lang || n.script !== a.script || n.region !== a.region) && m(g(n));
   };
-  return /* @__PURE__ */ S(G.Provider, {
-    value: {
-      currentLocale: a,
-      onChangeLocale: O
-    },
-    children: /* @__PURE__ */ S(U, {
-      dateAdapter: F,
-      adapterLocale: a.module,
-      dateFormats: {
-        hours24h: "23"
+  return /* @__PURE__ */ E(
+    G.Provider,
+    {
+      value: {
+        currentLocale: a,
+        onChangeLocale: O
       },
-      children: e
-    })
-  });
+      children: /* @__PURE__ */ E(
+        U,
+        {
+          dateAdapter: F,
+          adapterLocale: a.module,
+          dateFormats: { hours24h: "23" },
+          children: e
+        }
+      )
+    }
+  );
 }
 export {
   G as L,

package/contexts/ThemeSettingsContext/types.d.ts

@@ -1,5 +1,5 @@
 import { NetworkProps } from '@m4l/core';
-import { PresetsOptions, ThemeColorPresets } from '@m4l/styles';
+import { OurTheme, PresetsOptions, ThemeColorOptionsType } from '@m4l/styles';
 import { CssVarsTheme, Theme } from '@mui/material/styles';
 import { ReactNode } from 'react';
 export declare type ThemeMode = 'light' | 'dark';
@@ -9,7 +9,7 @@ export declare type ThemeStretch = boolean;
 export declare type ThemeSettingsType = {
     themeMode: ThemeMode;
     themeDirection: ThemeDirection;
-    themeColorPresets: ThemeColorPresets;
+    themeColorPresets: ThemeColorOptionsType;
     themeStretch: ThemeStretch;
     themeLayout: ThemeLayout;
     isMobile: boolean;
@@ -17,7 +17,10 @@ export declare type ThemeSettingsType = {
 export interface ThemeSettingsStore {
     networkOperation: (props: NetworkProps) => Promise<any>;
     currentThemeSettings: ThemeSettingsType;
-    themeOptions: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
+    /**
+     * Contiene la configuración incial del tema como la paleta, tipografía, sombras, etc. También puede contener el tema convertido a css vars.
+    */
+    themeOptions: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme | OurTheme;
     colorOption: PresetsOptions;
     /**
      * "setterThemeSettings" es una función que se encarga de persistir en local storage los cambios de los settings

package/contexts/index-DypyrDjq.js

@@ -0,0 +1,211 @@
+import { jsx as p } from "react/jsx-runtime";
+import { createContext as f, useRef as d, useMemo as y, useLayoutEffect as b, useEffect as P } from "react";
+import { c as T, d as v, i as C, l as O } from "../node_modules-BHhXVwYT.js";
+import { useNetwork as M, useLocalStorageWithListener as E } from "@m4l/core";
+import { getPaletteByPreset as x, typography as k, shadows as S, getColorPresets as L, createCustomShadows as w, OUR_THEME as A, presetsOptions as B } from "@m4l/styles";
+import { alpha as D } from "@mui/system";
+import { u as z } from "../hooks/useIsMobile/index-Bro0dV28.js";
+const u = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, _ = (r) => {
+  const n = {
+    ...r
+  };
+  return T(
+    v(
+      C((o, t) => ({
+        ...n,
+        responsiveContainerActions: {
+          setBreakpoint: (e) => {
+            o((i) => {
+              i.breakPoint = e, i.isUpSm = e !== "xs" && e !== "sm", i.isXs = e == "xs";
+            });
+          }
+        }
+      })),
+      { name: "Responsive Relative Store" }
+    )
+  );
+}, $ = f(null), V = (r) => {
+  const { children: n, observedDivRef: o } = r, t = d();
+  t.current || (t.current = _({
+    breakPoint: "md",
+    isUpSm: !1,
+    isXs: !1
+  }));
+  const e = () => {
+    const s = o;
+    if (s instanceof HTMLElement && s.clientWidth) {
+      const m = Object.keys(
+        u
+      );
+      for (let h = 0; h < m.length; h++) {
+        const a = m[h];
+        if (s.clientWidth <= u[a]) {
+          t.current?.getState().responsiveContainerActions.setBreakpoint(a);
+          break;
+        } else h === m.length - 1 && s.clientWidth >= u[a] && t.current?.getState().responsiveContainerActions.setBreakpoint(a);
+      }
+    }
+  }, i = y(
+    () => O.throttle(e, 200, {
+      leading: !1,
+      trailing: !0
+    }),
+    [e]
+  );
+  return b(() => {
+    const s = () => {
+      i();
+    }, m = o;
+    if (m && m instanceof Element) {
+      const h = new ResizeObserver((a) => {
+        s();
+      });
+      return h.observe(m), () => {
+        h.disconnect();
+      };
+    }
+  }, [o]), /* @__PURE__ */ p($.Provider, { value: t.current, children: n });
+}, g = {
+  themeMode: "light",
+  themeDirection: "ltr",
+  themeColorPresets: "patronus",
+  themeLayout: "horizontal",
+  themeStretch: !1,
+  isMobile: !1
+};
+function R(r, n = "m4l") {
+  const o = document.querySelector('[data-mui-color-scheme="light"]');
+  if (!o) {
+    console.error('Element with data-mui-color-scheme="light" not found.');
+    return;
+  }
+  Object.keys(r).forEach((t) => {
+    const e = r[t];
+    if (typeof e == "string" || typeof e == "number") {
+      const i = `--${n}-${t}`;
+      o.style.setProperty(i, e.toString());
+    } else typeof e == "object" && e !== null && R(e, `${n}-${t}`);
+  });
+}
+const c = (r) => {
+  const n = r.currentThemeSettings || g, o = n.themeMode === "light", t = x(n.themeColorPresets), e = o ? t.light : t.dark;
+  r.themeOptions = {
+    ...r.themeOptions,
+    typography: k,
+    palette: {
+      ...r.themeOptions?.palette ?? {},
+      ...e
+    },
+    shape: { borderRadius: 8 },
+    direction: n.themeDirection,
+    shadows: o ? S.light : S.dark,
+    customShadows: {
+      primary: `0 8px 16px 0 ${D(
+        L(n.themeColorPresets)?.main || "#fff",
+        0.2
+      )}`,
+      ...w(n.themeMode)
+    },
+    stretch: n.themeStretch
+  }, R(r.themeOptions);
+}, l = (r) => {
+  r.setterThemeSettings && r.setterThemeSettings(r.currentThemeSettings);
+}, j = (r) => T(
+  v(
+    C((n, o) => ({
+      ...r,
+      settingsActions: {
+        init: () => {
+          n((t) => {
+            c(t);
+          });
+        },
+        setThemeSettings: (t) => {
+          n((e) => {
+            e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, l(e), c(e);
+          });
+        },
+        onChangeMode: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeMode: t.target.value
+            }, l(e), c(e);
+          });
+        },
+        handleOpen: () => {
+          n((t) => {
+            t.open = !t.open;
+          });
+        },
+        onChangeDirection: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeDirection: t.target.value
+            }, l(e), c(e);
+          });
+        },
+        onChangeColor: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeColorPresets: t.target.value
+            }, l(e), c(e);
+          });
+        },
+        onChangeLayout: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeLayout: t.target.value
+            }, l(e), c(e);
+          });
+        },
+        onToggleStretch: () => {
+          n((t) => {
+            t.currentThemeSettings = {
+              ...t.currentThemeSettings,
+              themeStretch: !t.currentThemeSettings.themeStretch
+            }, l(t), c(t);
+          });
+        },
+        onResetSetting: () => {
+          n((t) => {
+            t.currentThemeSettings = {
+              ...g
+            }, l(t), c(t);
+          });
+        }
+      }
+    })),
+    { name: "ThemeSettingsStore" }
+  )
+), W = f(null);
+function F({ children: r, themeSettings: n }) {
+  const { networkOperation: o } = M(), t = z(), [e, i] = E(
+    "theme_setting",
+    {}
+  ), s = d();
+  return s.current || (s.current = j({
+    networkOperation: o,
+    currentThemeSettings: {
+      ...g,
+      ...n,
+      ...e
+    },
+    themeOptions: A,
+    colorOption: B,
+    open: !1,
+    setterThemeSettings: n ? void 0 : i
+  }), s.current.getState().settingsActions.init()), P(() => {
+    s.current?.getState().settingsActions.setThemeSettings({ isMobile: t });
+  }, [t]), /* @__PURE__ */ p(W.Provider, { value: s.current, children: r });
+}
+export {
+  $ as R,
+  W as T,
+  V as a,
+  F as b,
+  g as d
+};

package/hooks/{index-jy_ocazP.js → index-DrIHt-va.js}

@@ -1,7 +1,7 @@
 import { useRef as n, useEffect as r, useState as i, useContext as u, useLayoutEffect as c } from "react";
-import { H as m } from "../contexts/HostThemeContext/index-B8iD1cO8.js";
+import { H as m } from "../contexts/HostThemeContext/index-CcHelA1w.js";
 import { u as a } from "../node_modules-BHhXVwYT.js";
-import { T as l } from "../contexts/index-DqxwPAZr.js";
+import { T as l } from "../contexts/index-DypyrDjq.js";
 function S() {
   const e = n(!0);
   return r(

package/hooks/useFormatter/{index-DfdAcbzw.js → index-BBgQ4lJL.js}

@@ -1,5 +1,5 @@
 import { useContext as r } from "react";
-import { F as e } from "../../contexts/FormatterContext/index-BHG3bJJo.js";
+import { F as e } from "../../contexts/FormatterContext/index-Ch6IW7j8.js";
 const m = () => {
   const t = r(e);
   if (!t) throw new Error("useFormatter context must be use inside FormatterProvider");

package/hooks/useLocales/{index-mTHn9nqY.js → index-_thMBNE7.js}

@@ -1,5 +1,5 @@
 import { useContext as o } from "react";
-import { L as t } from "../../contexts/LocalesContext/index--VwMF60R.js";
+import { L as t } from "../../contexts/LocalesContext/index-C89UlO0s.js";
 const n = () => {
   const e = o(t);
   if (!e) throw new Error("useLocales context must be use inside LocalesProvider");

package/hooks/useResponsive/{index-P9e5eab1.js → index-BEcgN5as.js}

@@ -1,6 +1,6 @@
 import { useContext as t } from "react";
 import { u as r } from "../../node_modules-BHhXVwYT.js";
-import { R as n } from "../../contexts/index-DqxwPAZr.js";
+import { R as n } from "../../contexts/index-DypyrDjq.js";
 import { useResponsive as i } from "@m4l/styles";
 function f(e, s) {
   const o = t(n);

package/index.js

@@ -1,13 +1,13 @@
-import { G as s } from "./components/GlobalStyle/index-BwMNLyTC.js";
-import { L as r, a, g as i } from "./contexts/LocalesContext/index--VwMF60R.js";
-import { F as m, a as p } from "./contexts/FormatterContext/index-BHG3bJJo.js";
-import { R as x, a as f, T as d, b as l, d as v } from "./contexts/index-DqxwPAZr.js";
-import { H as T, a as g } from "./contexts/HostThemeContext/index-B8iD1cO8.js";
+import { G as s } from "./components/GlobalStyle/index-C3p7OfnO.js";
+import { L as r, a, g as i } from "./contexts/LocalesContext/index-C89UlO0s.js";
+import { F as m, a as p } from "./contexts/FormatterContext/index-Ch6IW7j8.js";
+import { R as x, a as f, T as d, b as l, d as v } from "./contexts/index-DypyrDjq.js";
+import { H as T, a as g } from "./contexts/HostThemeContext/index-CcHelA1w.js";
 import { u as R } from "./hooks/useFirstRender/index-B-Q0TTn0.js";
-import { u as c } from "./hooks/useFormatter/index-DfdAcbzw.js";
-import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-jy_ocazP.js";
-import { u as z } from "./hooks/useLocales/index-mTHn9nqY.js";
-import { u as I, a as M } from "./hooks/useResponsive/index-P9e5eab1.js";
+import { u as c } from "./hooks/useFormatter/index-BBgQ4lJL.js";
+import { b as P, u as b, a as L, c as H, d as k } from "./hooks/index-DrIHt-va.js";
+import { u as z } from "./hooks/useLocales/index-_thMBNE7.js";
+import { u as I, a as M } from "./hooks/useResponsive/index-BEcgN5as.js";
 import { u as y } from "./hooks/useIsMobile/index-Bro0dV28.js";
 import { C as D, g as E } from "./utils/index-DZG6QXjf.js";
 export {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@m4l/graphics",
-  "version": "3.0.2",
+  "version": "6.0.0",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "dependencies": {
-    "@m4l/core": "^2.0.0",
-    "@m4l/styles": "^3.0.0",
     "date-fns": "^2.30.0",
     "zustand": "4.3.6",
     "immer": "^9.0.21"
   },
   "peerDependencies": {
+    "@m4l/core": "^2.0.0",
+    "@m4l/styles": "^6.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-toastify": "10.0.5",

package/components/GlobalStyle/index-BwMNLyTC.js

@@ -1,79 +0,0 @@
-import { useTheme as e } from "@mui/material/styles";
-import { GlobalStyles as o } from "@mui/material";
-import { globalRemSize as r } from "@m4l/styles";
-import { jsx as a } from "react/jsx-runtime";
-function s() {
-  const t = e();
-  return /* @__PURE__ */ a(o, {
-    styles: {
-      body: {
-        textRendering: "geometricPrecision",
-        width: "100%",
-        height: "100vh",
-        "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active": {
-          color: t.vars.palette.text.primary
-        },
-        "*::-webkit-scrollbar": {
-          // camino de la barra con radio
-          width: "7px",
-          height: "7px",
-          borderRadius: "3px",
-          backgroundColor: "transparent"
-        },
-        "*::-webkit-scrollbar-track": {
-          // Camino de la barrra sin radio
-          backgroundColor: "transparent",
-          border: "0px solid transparent"
-        },
-        "*::-webkit-scrollbar-corner": {
-          backgroundColor: "transparent"
-        },
-        // FireFox
-        // scrollbarColor: `${theme.vars.palette.primary.main} white`,
-        // scrollbarWidth: 'thin',
-        // Chrome
-        "*::-webkit-scrollbar-thumb": {
-          // barra que se mueve
-          background: t.vars.palette.general.scrollBar,
-          borderRadius: "2px!important"
-        },
-        "& #root": {
-          width: "100%",
-          height: "100%"
-        }
-      },
-      "#nprogress": {
-        pointerEvents: "none",
-        "& .bar": {
-          top: 0,
-          left: 0,
-          height: 2,
-          width: "100%",
-          position: "fixed",
-          zIndex: t.zIndex.snackbar,
-          backgroundColor: t.vars.palette.primary.main,
-          boxShadow: `0 0 2px ${t.vars.palette.primary.main}`
-        },
-        "& .peg": {
-          right: 0,
-          opacity: 1,
-          width: 100,
-          height: "100%",
-          display: "block",
-          position: "absolute",
-          transform: "rotate(3deg) translate(0px, -4px)",
-          boxShadow: `0 0 10px ${t.vars.palette.primary.main}, 0 0 5px ${t.vars.palette.primary.main}`
-        }
-      },
-      "& html": {
-        fontSize: r.desktop,
-        [t.breakpoints.down("sm")]: {
-          fontSize: r.mobile
-        }
-      }
-    }
-  });
-}
-export {
-  s as G
-};

package/contexts/FormatterContext/index-BHG3bJJo.js

@@ -1,75 +0,0 @@
-import { createContext as D, useState as C, useCallback as k, useEffect as p } from "react";
-import { useHostTools as v, usePropageteMF as R, EmitEvents as f } from "@m4l/core";
-import { u as h } from "../../hooks/useFirstRender/index-B-Q0TTn0.js";
-import { jsx as V } from "react/jsx-runtime";
-const x = D(null);
-function I(T) {
-  const {
-    children: b,
-    isMicroFrontEnd: F,
-    currencyFormatter: l,
-    numberFormatter: M,
-    dateFormatter: t
-  } = T, r = l?.decimalDigits || 0, o = l?.code || "USD", a = M?.decimalSymbol || 0.1.toLocaleString().substring(1, 2), s = M?.thousandsSymbol || 1e3.toLocaleString().substring(1, 2), m = t?.dateFormat || "yyyy-MM-dd", n = t?.dateMask || "____-__-__", c = t?.datetimeFormat || "yyyy-MM-dd HH:mm:ss", i = t?.datetimeMask || "____-__-__ __:__:__", _ = t?.timeFormat || "HH:mm:ss", d = t?.timeMask || "__:__:__", u = t?.formatDate || (() => {
-    throw new Error("Incorrect use of formatDate");
-  }), y = h(), {
-    events_emit: g
-  } = v(), [H, E] = C({
-    currencyFormatter: {
-      decimalDigits: r,
-      code: o
-    },
-    numberFormatter: {
-      decimalSymbol: a,
-      thousandsSymbol: s
-    },
-    dateFormatter: {
-      dateFormat: m,
-      dateMask: n,
-      datetimeFormat: c,
-      datetimeMask: i,
-      timeFormat: _,
-      timeMask: d,
-      formatDate: u
-    }
-  }), S = k((e) => {
-    E(e);
-  }, []);
-  return R({
-    isMicroFrontEnd: F,
-    event: f.EMMIT_EVENT_HOST_FORMATTER_CHANGE,
-    setHandler: S
-  }), p(() => {
-    if (F || y)
-      return;
-    const e = {
-      currencyFormatter: {
-        decimalDigits: r,
-        code: o
-      },
-      numberFormatter: {
-        decimalSymbol: a,
-        thousandsSymbol: s
-      },
-      dateFormatter: {
-        dateFormat: m,
-        dateMask: n,
-        datetimeFormat: c,
-        datetimeMask: i,
-        timeFormat: _,
-        timeMask: d,
-        formatDate: u
-      }
-    };
-    E(e), g(f.EMMIT_EVENT_HOST_FORMATTER_CHANGE, e);
-  }, [y, o, r, a, s, m, n, c, i, _, d, u]), /* @__PURE__ */ V(x.Provider, {
-    value: {
-      ...H
-    },
-    children: b
-  });
-}
-export {
-  x as F,
-  I as a
-};

package/contexts/HostThemeContext/index-B8iD1cO8.js

@@ -1,48 +0,0 @@
-import { createContext as c, useMemo as h } from "react";
-import { CssBaseline as d } from "@mui/material";
-import { G as p } from "../../components/GlobalStyle/index-BwMNLyTC.js";
-import { createTheme as x, experimental_extendTheme as f, Experimental_CssVarsProvider as u, StyledEngineProvider as T } from "@mui/material/styles";
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-const v = c(null);
-function j(m) {
-  const {
-    children: l,
-    hostThemeOptions: o,
-    fnComponentsOverrides: n,
-    isMobile: s
-  } = m, a = h(() => {
-    const e = x({
-      ...o
-    }), r = f({
-      cssVarPrefix: "m4l",
-      colorSchemes: {
-        light: e,
-        finalTheme: e,
-        dark: e
-      },
-      generalSettings: {
-        isMobile: s
-      }
-    });
-    return r.components = n(r), r;
-  }, [s]);
-  return /* @__PURE__ */ i(u, {
-    theme: a,
-    children: [/* @__PURE__ */ t(p, {}), /* @__PURE__ */ t(v.Provider, {
-      value: {
-        hostThemeOptions: o,
-        fnComponentsOverrides: n
-      },
-      children: /* @__PURE__ */ i(T, {
-        injectFirst: !0,
-        children: [/* @__PURE__ */ t(d, {
-          enableColorScheme: !0
-        }), l]
-      })
-    })]
-  });
-}
-export {
-  v as H,
-  j as a
-};

package/contexts/index-DqxwPAZr.js

@@ -1,270 +0,0 @@
-import { createContext as S, useRef as f, useMemo as R, useLayoutEffect as k, useEffect as P } from "react";
-import { c as T, d as C, i as v, l as O } from "../node_modules-BHhXVwYT.js";
-import { jsx as y } from "react/jsx-runtime";
-import { useNetwork as x, useLocalStorageWithListener as M } from "@m4l/core";
-import { getPaletteByPreset as w, typography as E, shadows as d, getColorPresets as L, createCustomShadows as B, defaultThemeOptions as A, presetsOptions as D } from "@m4l/styles";
-import { alpha as z } from "@mui/system";
-import { u as $ } from "../hooks/useIsMobile/index-Bro0dV28.js";
-const g = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, j = (r) => {
-  const n = {
-    ...r
-  };
-  return T(
-    C(
-      v((o, t) => ({
-        ...n,
-        responsiveContainerActions: {
-          setBreakpoint: (e) => {
-            o((i) => {
-              i.breakPoint = e, i.isUpSm = e !== "xs" && e !== "sm", i.isXs = e == "xs";
-            });
-          }
-        }
-      })),
-      { name: "Responsive Relative Store" }
-    )
-  );
-}, W = S(null), F = (r) => {
-  const {
-    children: n,
-    observedDivRef: o
-  } = r, t = f();
-  t.current || (t.current = j({
-    breakPoint: "md",
-    isUpSm: !1,
-    isXs: !1
-  }));
-  const e = () => {
-    const s = o;
-    if (s instanceof HTMLElement && s.clientWidth) {
-      const h = Object.keys(g);
-      for (let a = 0; a < h.length; a++) {
-        const u = h[a];
-        if (s.clientWidth <= g[u]) {
-          t.current?.getState().responsiveContainerActions.setBreakpoint(u);
-          break;
-        } else a === h.length - 1 && s.clientWidth >= g[u] && t.current?.getState().responsiveContainerActions.setBreakpoint(u);
-      }
-    }
-  }, i = R(() => O.throttle(e, 200, {
-    leading: !1,
-    trailing: !0
-  }), [e]);
-  return k(() => {
-    const s = () => {
-      i();
-    }, h = o;
-    if (h && h instanceof Element) {
-      const a = new ResizeObserver((u) => {
-        s();
-      });
-      return a.observe(h), () => {
-        a.disconnect();
-      };
-    }
-  }, [o]), /* @__PURE__ */ y(W.Provider, {
-    value: t.current,
-    children: n
-  });
-}, p = {
-  themeMode: "light",
-  themeDirection: "ltr",
-  themeColorPresets: "patronus",
-  themeLayout: "horizontal",
-  themeStretch: !1,
-  isMobile: !1
-};
-function b(r, n = "m4l") {
-  const o = document.querySelector('[data-mui-color-scheme="light"]');
-  if (!o) {
-    console.error('Element with data-mui-color-scheme="light" not found.');
-    return;
-  }
-  Object.keys(r).forEach((t) => {
-    const e = r[t];
-    if (typeof e == "string" || typeof e == "number") {
-      const i = `--${n}-${t}`;
-      o.style.setProperty(i, e.toString());
-    } else typeof e == "object" && e !== null && b(e, `${n}-${t}`);
-  });
-}
-const l = {
-  mainChannel: "",
-  lightChannel: "",
-  darkChannel: "",
-  contrastTextChannel: ""
-}, c = (r) => {
-  const n = r.currentThemeSettings || p, o = n.themeMode === "light", t = w(n.themeColorPresets), e = o ? t.light : t.dark;
-  r.themeOptions = {
-    ...r.themeOptions,
-    typography: E,
-    palette: {
-      ...r.themeOptions?.palette ?? {},
-      ...e,
-      primary: {
-        ...e.primary,
-        ...l
-      },
-      secondary: {
-        ...e.secondary,
-        ...l
-      },
-      info: {
-        ...e.info,
-        ...l
-      },
-      error: {
-        ...e.error,
-        ...l
-      },
-      success: {
-        ...e.success,
-        ...l
-      },
-      warning: {
-        ...e.warning,
-        ...l
-      },
-      text: {
-        ...e.text,
-        primaryChannel: "",
-        secondaryChannel: ""
-      },
-      background: {
-        ...e.background,
-        defaultChannel: "",
-        paperChannel: ""
-      },
-      common: {
-        ...e.common,
-        background: "",
-        backgroundChannel: "",
-        onBackground: "",
-        onBackgroundChannel: ""
-      },
-      action: {
-        ...e.action,
-        activeChannel: "",
-        selectedChannel: ""
-      }
-    },
-    shape: { borderRadius: 8 },
-    direction: n.themeDirection,
-    shadows: o ? d.light : d.dark,
-    customShadows: {
-      primary: `0 8px 16px 0 ${z(
-        L(n.themeColorPresets)?.main || "#fff",
-        0.2
-      )}`,
-      ...B(n.themeMode)
-    },
-    stretch: n.themeStretch
-  }, b(r.themeOptions);
-}, m = (r) => {
-  r.setterThemeSettings && r.setterThemeSettings(r.currentThemeSettings);
-}, _ = (r) => T(
-  C(
-    v((n, o) => ({
-      ...r,
-      settingsActions: {
-        init: () => {
-          n((t) => {
-            c(t);
-          });
-        },
-        setThemeSettings: (t) => {
-          n((e) => {
-            e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, m(e), c(e);
-          });
-        },
-        onChangeMode: (t) => {
-          n((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
-              themeMode: t.target.value
-            }, m(e), c(e);
-          });
-        },
-        handleOpen: () => {
-          n((t) => {
-            t.open = !t.open;
-          });
-        },
-        onChangeDirection: (t) => {
-          n((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
-              themeDirection: t.target.value
-            }, m(e), c(e);
-          });
-        },
-        onChangeColor: (t) => {
-          n((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
-              themeColorPresets: t.target.value
-            }, m(e), c(e);
-          });
-        },
-        onChangeLayout: (t) => {
-          n((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
-              themeLayout: t.target.value
-            }, m(e), c(e);
-          });
-        },
-        onToggleStretch: () => {
-          n((t) => {
-            t.currentThemeSettings = {
-              ...t.currentThemeSettings,
-              themeStretch: !t.currentThemeSettings.themeStretch
-            }, m(t), c(t);
-          });
-        },
-        onResetSetting: () => {
-          n((t) => {
-            t.currentThemeSettings = {
-              ...p
-            }, m(t), c(t);
-          });
-        }
-      }
-    })),
-    { name: "ThemeSettingsStore" }
-  )
-), N = S(null);
-function G({
-  children: r,
-  themeSettings: n
-}) {
-  const {
-    networkOperation: o
-  } = x(), t = $(), [e, i] = M("theme_setting", {}), s = f();
-  return s.current || (s.current = _({
-    networkOperation: o,
-    currentThemeSettings: {
-      ...p,
-      ...n,
-      ...e
-    },
-    themeOptions: A,
-    colorOption: D,
-    open: !1,
-    setterThemeSettings: n ? void 0 : i
-  }), s.current.getState().settingsActions.init()), P(() => {
-    s.current?.getState().settingsActions.setThemeSettings({
-      isMobile: t
-    });
-  }, [t]), /* @__PURE__ */ y(N.Provider, {
-    value: s.current,
-    children: r
-  });
-}
-export {
-  W as R,
-  N as T,
-  F as a,
-  G as b,
-  p as d
-};