@m4l/graphics 3.0.3 → 6.0.1

package/components/GlobalStyles/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function GlobalStyles(): import("react").JSX.Element;

package/contexts/FormatterContext/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { FormatterProviderProps, Formatters } from './types';
-declare const FormatterContext: import("react").Context<Formatters | null>;
+declare const FormatterContext: import('react').Context<Formatters | null>;
 /**
  * @function
  * Componente encargado de proveer un contexto que permita saber los diferentes forrmatos,

package/contexts/FormatterContext/{index-Ch6IW7j8.js → index.js}

@@ -1,7 +1,7 @@
 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";
+import { u as V } from "../../hooks/useFirstRender/index.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 || (() => {

package/contexts/FormatterContext/types.d.ts

@@ -1,4 +1,4 @@
-import type { Locale } from 'date-fns';
+import { Locale } from 'date-fns';
 import { ReactNode } from 'react';
 export interface CurrencyFormatter {
     code: string;
@@ -52,4 +52,4 @@ export interface FormatterProviderProps extends OptionalFormatters {
     isMicroFrontEnd: boolean;
     children: ReactNode;
 }
-export declare type FormatterContextProps = Formatters;
+export type FormatterContextProps = Formatters;

package/contexts/HostThemeContext/index.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { HostThemeProviderProps } from './types';
-declare const HostThemeContext: import("react").Context<import("./types").HostThemeType | null>;
+declare const HostThemeContext: import('react').Context<import('./types').HostThemeType | null>;
 declare function HostThemeProvider(props: HostThemeProviderProps): import("react").JSX.Element;
 export { HostThemeProvider, HostThemeContext };

package/contexts/HostThemeContext/index.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/GlobalStyles/index.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 type { Theme, CssVarsTheme } from '@mui/material/styles';
-import type { ReactNode } from 'react';
-export declare type EventFunListener = (...args: any[]) => void;
+import { OurTheme } from '@m4l/styles';
+import { Theme, CssVarsTheme } from '@mui/material/styles';
+import { ReactNode } from 'react';
+export 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 {
@@ -10,4 +11,4 @@ export interface HostThemeProviderProps extends HostThemeType {
     children: ReactNode;
     isMobile: boolean;
 }
-export declare type HostThemeContextType = HostThemeType;
+export type HostThemeContextType = HostThemeType;

package/contexts/LocalesContext/helper.js

@@ -0,0 +1,35 @@
+import o from "date-fns/locale/en-US";
+async function g(n, e, s) {
+  const r = l(n), i = { ...n };
+  let t;
+  return r === "es" ? t = (await import("date-fns/locale/es")).default : r === "fr" ? t = (await import("date-fns/locale/fr")).default : r === "en-US" ? t = o : (t = o, i.lang = "en", i.script = void 0, i.region = "US", i.url_icon = `${e}/${s}/frontend/commons/assets/icons/langs/lang_en.svg`, i.name = "English US*"), {
+    ...i,
+    module: t,
+    localeString: l(i)
+  };
+}
+function l(n) {
+  let e = n.lang;
+  return n.script && n.script !== "" && (e = e + "-" + n.script), n.region && n.region !== "" && (e = e + "-" + n.region), e;
+}
+function a(n) {
+  try {
+    const e = new Intl.Locale(n);
+    return {
+      lang: e.language || "",
+      script: e.script,
+      region: e.region
+    };
+  } catch {
+    return {
+      lang: "en",
+      script: void 0,
+      region: "US"
+    };
+  }
+}
+export {
+  g,
+  l as j,
+  a as s
+};

package/contexts/LocalesContext/index.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { LocalesProviderProps, LocalesContextProps } from './types';
-declare const LocalesContext: import("react").Context<LocalesContextProps | null>;
+declare const LocalesContext: import('react').Context<LocalesContextProps | null>;
 declare function LocalesProvider(props: LocalesProviderProps): import("react").JSX.Element | null;
 export { LocalesProvider, LocalesContext };

package/contexts/LocalesContext/index.js

@@ -0,0 +1,69 @@
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as A, useState as d, useCallback as O, useEffect as E } from "react";
+import { AdapterDateFns as k } from "@mui/x-date-pickers/AdapterDateFns";
+import { LocalizationProvider as x } from "@mui/x-date-pickers";
+import { useEnvironment as F, useNetwork as P, useHostTools as j, useLocalStorageWithListener as G, EmitEvents as i } from "@m4l/core";
+import { s as I, j as V } from "./helper.js";
+const U = A(null);
+function B(_) {
+  const { children: g, isMicroFrontEnd: e, localeHost: a, getLocaleFromNetwork: s } = _;
+  if (e && !a)
+    throw Error("Must set localeHost in microfrontend");
+  if (!e && !s)
+    throw Error("Must set getLocaleFromNetwork in host");
+  const { domain_token: L, host_static_assets: p, environment_assets: h } = F(), { networkOperation: v } = P(), { events_add_listener: S, events_remove_listener: C, events_emit: T } = j(), [r, l] = d(() => {
+    if (e)
+      return a;
+  }), [o, c] = G(
+    "localeHost",
+    navigator.language
+  ), [H, N] = d(""), u = O((t) => {
+    l(t);
+  }, []);
+  if (E(() => (e && S(i.EMMIT_EVENT_HOST_LOCALE_CHANGE, u), () => {
+    e && C(i.EMMIT_EVENT_HOST_LOCALE_CHANGE, u);
+  }), []), E(() => {
+    let t = !0;
+    if (!e && s && !(o === H && o !== ""))
+      return v({
+        method: "POST",
+        endPoint: "na/locales",
+        data: { ...I(o), domain_token: L }
+      }).then((f) => {
+        t && s(f.data, p, h).then(
+          (n) => {
+            l(n), N(n.localeString), o !== n.localeString && c(n.localeString), T(i.EMMIT_EVENT_HOST_LOCALE_CHANGE, n);
+          }
+        );
+      }).finally(() => {
+      }), function() {
+        t = !1;
+      };
+  }, [o]), !r)
+    return null;
+  const M = (t) => {
+    (t.lang !== r.lang || t.script !== r.script || t.region !== r.region) && c(V(t));
+  };
+  return /* @__PURE__ */ m(
+    U.Provider,
+    {
+      value: {
+        currentLocale: r,
+        onChangeLocale: M
+      },
+      children: /* @__PURE__ */ m(
+        x,
+        {
+          dateAdapter: k,
+          adapterLocale: r.module,
+          dateFormats: { hours24h: "23" },
+          children: g
+        }
+      )
+    }
+  );
+}
+export {
+  U as L,
+  B as a
+};

package/contexts/LocalesContext/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import type { Locale } from 'date-fns';
-export declare type SupportedLocales = 'en-US' | 'es' | 'fr';
+import { Locale } from 'date-fns';
+export type SupportedLocales = 'en-US' | 'es' | 'fr';
 export interface BaseLocale {
     lang: string;
     script?: string;
@@ -14,13 +14,13 @@ export interface LocaleType extends NetworkLocaleType {
     module: Locale;
     localeString: string;
 }
-export declare type LocalesProviderProps = {
+export type LocalesProviderProps = {
     isMicroFrontEnd: boolean;
     localeHost?: LocaleType;
     getLocaleFromNetwork?: (locale: NetworkLocaleType, host_static_assets: string, environment_assets: string) => Promise<LocaleType>;
     children: ReactNode;
 };
-export declare type LocalesContextProps = {
+export type LocalesContextProps = {
     currentLocale?: LocaleType;
     onChangeLocale: (newLocaleString: BaseLocale) => void;
 };

package/contexts/ResponsiveContainerContext/constants.js

@@ -0,0 +1,4 @@
+const s = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 };
+export {
+  s as B
+};

package/contexts/ResponsiveContainerContext/index.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import { ResponsiveContainerProviderProps } from './types';
-declare const ResponsiveContainerContext: import("react").Context<(Omit<Omit<import("zustand").StoreApi<import("./types").ResponsiveContainerStateWithActions>, "setState"> & {
+declare const ResponsiveContainerContext: import('react').Context<(Omit<Omit<import('zustand').StoreApi<import('./types').ResponsiveContainerStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
-    }>(partial: import("./types").ResponsiveContainerStateWithActions | Partial<import("./types").ResponsiveContainerStateWithActions> | ((state: import("./types").ResponsiveContainerStateWithActions) => import("./types").ResponsiveContainerStateWithActions | Partial<import("./types").ResponsiveContainerStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+    }>(partial: import('./types').ResponsiveContainerStateWithActions | Partial<import('./types').ResponsiveContainerStateWithActions> | ((state: import('./types').ResponsiveContainerStateWithActions) => import('./types').ResponsiveContainerStateWithActions | Partial<import('./types').ResponsiveContainerStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
 }, "setState"> & {
-    setState(nextStateOrUpdater: import("./types").ResponsiveContainerStateWithActions | Partial<import("./types").ResponsiveContainerStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./types").ResponsiveContainerStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: import('./types').ResponsiveContainerStateWithActions | Partial<import('./types').ResponsiveContainerStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('./types').ResponsiveContainerStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 }) | null>;

package/contexts/ResponsiveContainerContext/index.js

@@ -0,0 +1,51 @@
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as p, useRef as v, useCallback as u, useMemo as d, useLayoutEffect as R } from "react";
+import { B as i } from "./constants.js";
+import b from "lodash.throttle";
+import { c as h } from "./store.js";
+const k = p(null), y = (l) => {
+  const { children: f, observedDivRef: s } = l, o = v();
+  o.current || (o.current = h({
+    breakPoint: "md",
+    isUpSm: !1,
+    isXs: !1
+  }));
+  const c = u(() => {
+    const n = s;
+    if (n instanceof HTMLElement && n.clientWidth) {
+      const e = Object.keys(
+        i
+      );
+      for (let t = 0; t < e.length; t++) {
+        const r = e[t];
+        if (n.clientWidth <= i[r]) {
+          o.current?.getState().responsiveContainerActions.setBreakpoint(r);
+          break;
+        } else t === e.length - 1 && n.clientWidth >= i[r] && o.current?.getState().responsiveContainerActions.setBreakpoint(r);
+      }
+    }
+  }, [s]), a = d(
+    () => b(c, 200, {
+      leading: !1,
+      trailing: !0
+    }),
+    [c]
+  );
+  return R(() => {
+    const n = () => {
+      a();
+    }, e = s;
+    if (e && e instanceof Element) {
+      const t = new ResizeObserver((r) => {
+        n();
+      });
+      return t.observe(e), () => {
+        t.disconnect();
+      };
+    }
+  }, [s, a]), /* @__PURE__ */ m(k.Provider, { value: o.current, children: f });
+};
+export {
+  k as R,
+  y as a
+};

package/contexts/ResponsiveContainerContext/store.d.ts

@@ -1,11 +1,11 @@
 import { InitialResponsiveContainerProps, ResponsiveContainerStateWithActions } from './types';
-export declare const createResponsiveContainerStore: (initProps: InitialResponsiveContainerProps) => Omit<Omit<import("zustand").StoreApi<ResponsiveContainerStateWithActions>, "setState"> & {
+export declare const createResponsiveContainerStore: (initProps: InitialResponsiveContainerProps) => Omit<Omit<import('zustand').StoreApi<ResponsiveContainerStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
     }>(partial: ResponsiveContainerStateWithActions | Partial<ResponsiveContainerStateWithActions> | ((state: ResponsiveContainerStateWithActions) => ResponsiveContainerStateWithActions | Partial<ResponsiveContainerStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
 }, "setState"> & {
-    setState(nextStateOrUpdater: ResponsiveContainerStateWithActions | Partial<ResponsiveContainerStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<ResponsiveContainerStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: ResponsiveContainerStateWithActions | Partial<ResponsiveContainerStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<ResponsiveContainerStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 };
-export declare type ResponsiveContainerStore = ReturnType<typeof createResponsiveContainerStore>;
+export type ResponsiveContainerStore = ReturnType<typeof createResponsiveContainerStore>;

package/contexts/ResponsiveContainerContext/store.js

@@ -0,0 +1,26 @@
+import { createStore as i } from "zustand";
+import { devtools as m } from "zustand/middleware";
+import { immer as n } from "zustand/middleware/immer";
+const S = (r) => {
+  const s = {
+    ...r
+  };
+  return i(
+    m(
+      n((t, p) => ({
+        ...s,
+        responsiveContainerActions: {
+          setBreakpoint: (e) => {
+            t((o) => {
+              o.breakPoint = e, o.isUpSm = e !== "xs" && e !== "sm", o.isXs = e === "xs";
+            });
+          }
+        }
+      })),
+      { name: "Responsive Relative Store" }
+    )
+  );
+};
+export {
+  S as c
+};

package/contexts/ResponsiveContainerContext/types.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-export declare type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export declare type BreakPointsType = Record<BreakpointType, number>;
+export type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BreakPointsType = Record<BreakpointType, number>;
 export interface ResponsiveRelativeContextProps {
     breakPoint: BreakpointType;
 }
@@ -8,7 +7,7 @@ export interface ResponsiveContainerProviderProps {
     observedDivRef: Element | Text | null;
     children: React.ReactNode;
 }
-export declare type CurrentState = {
+export type CurrentState = {
     width: number;
     height: number;
     mounted: boolean;
@@ -19,7 +18,7 @@ export interface ResponsiveContainerState {
     isUpSm: boolean;
     isXs: boolean;
 }
-export declare type InitialResponsiveContainerProps = Pick<ResponsiveContainerState, 'breakPoint' | 'isUpSm' | 'isXs'>;
+export type InitialResponsiveContainerProps = Pick<ResponsiveContainerState, 'breakPoint' | 'isUpSm' | 'isXs'>;
 export interface ResponsiveContainerStateWithActions extends ResponsiveContainerState {
     responsiveContainerActions: {
         setBreakpoint: (breakPoint: BreakpointType) => void;

package/contexts/ThemeSettingsContext/ThemeSettingsContext.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import type { ThemeSettingsProviderProps } from './types';
-declare const ThemeSettingsContext: import("react").Context<(Omit<Omit<import("zustand").StoreApi<import("./types").ThemeSettingsStateWithActions>, "setState"> & {
+import { ThemeSettingsProviderProps } from './types';
+declare const ThemeSettingsContext: import('react').Context<(Omit<Omit<import('zustand').StoreApi<import('./types').ThemeSettingsStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
-    }>(partial: import("./types").ThemeSettingsStateWithActions | Partial<import("./types").ThemeSettingsStateWithActions> | ((state: import("./types").ThemeSettingsStateWithActions) => import("./types").ThemeSettingsStateWithActions | Partial<import("./types").ThemeSettingsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+    }>(partial: import('./types').ThemeSettingsStateWithActions | Partial<import('./types').ThemeSettingsStateWithActions> | ((state: import('./types').ThemeSettingsStateWithActions) => import('./types').ThemeSettingsStateWithActions | Partial<import('./types').ThemeSettingsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
 }, "setState"> & {
-    setState(nextStateOrUpdater: import("./types").ThemeSettingsStateWithActions | Partial<import("./types").ThemeSettingsStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./types").ThemeSettingsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: import('./types').ThemeSettingsStateWithActions | Partial<import('./types').ThemeSettingsStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('./types').ThemeSettingsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 }) | null>;

package/contexts/ThemeSettingsContext/ThemeSettingsContext.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as c, useRef as a, useEffect as u } from "react";
+import { useNetwork as f, useLocalStorageWithListener as g } from "@m4l/core";
+import { OUR_THEME as p, presetsOptions as S } from "@m4l/styles";
+import { c as h } from "./store.js";
+import { d as l } from "./constants.js";
+import { u as T } from "../../hooks/useIsMobile/index.js";
+const d = c(null);
+function b({ children: o, themeSettings: t }) {
+  const { networkOperation: s } = f(), r = T(), [n, i] = g(
+    "theme_setting",
+    {}
+  ), e = a();
+  return e.current || (e.current = h({
+    networkOperation: s,
+    currentThemeSettings: {
+      ...l,
+      ...t,
+      ...n
+    },
+    themeOptions: p,
+    colorOption: S,
+    open: !1,
+    setterThemeSettings: t ? void 0 : i
+  }), e.current.getState().settingsActions.init()), u(() => {
+    e.current?.getState().settingsActions.setThemeSettings({ isMobile: r });
+  }, [r]), /* @__PURE__ */ m(d.Provider, { value: e.current, children: o });
+}
+export {
+  d as T,
+  b as a
+};

package/contexts/ThemeSettingsContext/constants.js

@@ -0,0 +1,11 @@
+const e = {
+  themeMode: "light",
+  themeDirection: "ltr",
+  themeColorPresets: "patronus",
+  themeLayout: "horizontal",
+  themeStretch: !1,
+  isMobile: !1
+};
+export {
+  e as d
+};

package/contexts/ThemeSettingsContext/index.js

@@ -0,0 +1 @@
+

package/contexts/ThemeSettingsContext/store.d.ts

@@ -1,6 +1,6 @@
 import { InitialThemeSettingsStoreProps, ThemeSettingsStateWithActions } from './types';
 import { WritableDraft } from 'immer/dist/internal';
-export declare const createThemeSettingsStore: (initialState: InitialThemeSettingsStoreProps) => Omit<Omit<import("zustand").StoreApi<ThemeSettingsStateWithActions>, "setState"> & {
+export declare const createThemeSettingsStore: (initialState: InitialThemeSettingsStoreProps) => Omit<Omit<import('zustand').StoreApi<ThemeSettingsStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
     }>(partial: ThemeSettingsStateWithActions | Partial<ThemeSettingsStateWithActions> | ((state: ThemeSettingsStateWithActions) => ThemeSettingsStateWithActions | Partial<ThemeSettingsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
@@ -9,4 +9,4 @@ export declare const createThemeSettingsStore: (initialState: InitialThemeSettin
         type: unknown;
     } | undefined): void;
 };
-export declare type ThemeSettingsStore = ReturnType<typeof createThemeSettingsStore>;
+export type ThemeSettingsStore = ReturnType<typeof createThemeSettingsStore>;

package/contexts/ThemeSettingsContext/store.js

@@ -0,0 +1,118 @@
+import { createStore as l } from "zustand";
+import { devtools as u } from "zustand/middleware";
+import { immer as S } from "zustand/middleware/immer";
+import { getPaletteByPreset as p, typography as T, shadows as h, getColorPresets as a, createCustomShadows as d } from "@m4l/styles";
+import { alpha as f } from "@mui/system";
+import { d as c } from "./constants.js";
+function g(n, r = "m4l") {
+  const m = document.querySelector('[data-mui-color-scheme="light"]');
+  if (!m) {
+    console.error('Element with data-mui-color-scheme="light" not found.');
+    return;
+  }
+  Object.keys(n).forEach((t) => {
+    const e = n[t];
+    if (typeof e == "string" || typeof e == "number") {
+      const s = `--${r}-${t}`;
+      m.style.setProperty(s, e.toString());
+    } else typeof e == "object" && e !== null && g(e, `${r}-${t}`);
+  });
+}
+const o = (n) => {
+  const r = n.currentThemeSettings || c, m = r.themeMode === "light", t = p(r.themeColorPresets), e = m ? t.light : t.dark;
+  n.themeOptions = {
+    ...n.themeOptions,
+    typography: T,
+    palette: {
+      ...n.themeOptions?.palette ?? {},
+      ...e
+    },
+    shape: { borderRadius: 8 },
+    direction: r.themeDirection,
+    shadows: m ? h.light : h.dark,
+    customShadows: {
+      primary: `0 8px 16px 0 ${f(
+        a(r.themeColorPresets)?.main || "#fff",
+        0.2
+      )}`,
+      ...d(r.themeMode)
+    },
+    stretch: r.themeStretch
+  }, g(n.themeOptions);
+}, i = (n) => {
+  n.setterThemeSettings && n.setterThemeSettings(n.currentThemeSettings);
+}, b = (n) => l(
+  u(
+    S((r, m) => ({
+      ...n,
+      settingsActions: {
+        init: () => {
+          r((t) => {
+            o(t);
+          });
+        },
+        setThemeSettings: (t) => {
+          r((e) => {
+            e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, i(e), o(e);
+          });
+        },
+        onChangeMode: (t) => {
+          r((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeMode: t.target.value
+            }, i(e), o(e);
+          });
+        },
+        handleOpen: () => {
+          r((t) => {
+            t.open = !t.open;
+          });
+        },
+        onChangeDirection: (t) => {
+          r((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeDirection: t.target.value
+            }, i(e), o(e);
+          });
+        },
+        onChangeColor: (t) => {
+          r((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeColorPresets: t.target.value
+            }, i(e), o(e);
+          });
+        },
+        onChangeLayout: (t) => {
+          r((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeLayout: t.target.value
+            }, i(e), o(e);
+          });
+        },
+        onToggleStretch: () => {
+          r((t) => {
+            t.currentThemeSettings = {
+              ...t.currentThemeSettings,
+              themeStretch: !t.currentThemeSettings.themeStretch
+            }, i(t), o(t);
+          });
+        },
+        onResetSetting: () => {
+          r((t) => {
+            t.currentThemeSettings = {
+              ...c
+            }, i(t), o(t);
+          });
+        }
+      }
+    })),
+    { name: "ThemeSettingsStore" }
+  )
+);
+export {
+  b as c
+};

package/contexts/ThemeSettingsContext/types.d.ts

@@ -1,15 +1,15 @@
 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';
-export declare type ThemeDirection = 'rtl' | 'ltr';
-export declare type ThemeLayout = 'vertical' | 'horizontal';
-export declare type ThemeStretch = boolean;
-export declare type ThemeSettingsType = {
+export type ThemeMode = 'light' | 'dark';
+export type ThemeDirection = 'rtl' | 'ltr';
+export type ThemeLayout = 'vertical' | 'horizontal';
+export type ThemeStretch = boolean;
+export 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
@@ -26,8 +29,8 @@ export interface ThemeSettingsStore {
     setterThemeSettings?: (newValue: ThemeSettingsType) => void;
     open: boolean;
 }
-export declare type DefaultThemeSettingsStoreProps = ThemeSettingsStore;
-export declare type InitialThemeSettingsStoreProps = DefaultThemeSettingsStoreProps;
+export type DefaultThemeSettingsStoreProps = ThemeSettingsStore;
+export type InitialThemeSettingsStoreProps = DefaultThemeSettingsStoreProps;
 export interface ThemeSettingsStateWithActions extends ThemeSettingsStore {
     settingsActions: {
         init: () => void;
@@ -41,7 +44,7 @@ export interface ThemeSettingsStateWithActions extends ThemeSettingsStore {
         setThemeSettings: (newValue: Partial<ThemeSettingsType>) => void;
     };
 }
-export declare type ThemeSettingsProviderProps = {
+export type ThemeSettingsProviderProps = {
     themeSettings?: ThemeSettingsType;
     children: ReactNode;
 };