@m4l/graphics 6.0.2 → 7.0.0

package/contexts/HostThemeContext/index.d.ts

@@ -4,7 +4,7 @@ declare const HostThemeContext: import('react').Context<import('./types').HostTh
  * Host theme provider
  * @author Juan Escobar - automatic
  * @createdAt 2024-10-06 20:07:18 - automatic
- * @updatedAt 2024-10-06 20:07:18 - automatic
+ * @updatedAt 2024-10-08 19:28:36 - automatic
  * @updatedUser Juan Escobar - automatic
  */
 declare function HostThemeProvider(props: HostThemeProviderProps): import("react").JSX.Element;

package/contexts/HostThemeContext/index.js

@@ -1,15 +1,15 @@
-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 { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { createContext as h, useMemo as p } from "react";
+import { CssBaseline as f } 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(() => {
+import { G as u } from "../../components/GlobalStyles/index.js";
+import { experimental_extendTheme as x, Experimental_CssVarsProvider as v, StyledEngineProvider as C } from "@mui/material/styles";
+import { u as S } from "../../hooks/useIsMobile/index.js";
+const T = h(null);
+function E(c) {
+  const { children: a, hostThemeOptions: s, fnComponentsOverrides: n, isMobileForced: i } = c, m = S(i), d = p(() => {
     const e = {
-      ...u(),
-      ...n
+      ...s
     }, r = x({
       cssVarPrefix: "m4l",
       colorSchemes: {
@@ -21,26 +21,27 @@ function y(l) {
         isMobile: m
       }
     });
-    return r.components = s(r), r;
+    return r.components = n(r), r;
   }, [m]);
-  return /* @__PURE__ */ i(T, { theme: a, children: [
-    /* @__PURE__ */ o(f, {}),
+  return /* @__PURE__ */ l(v, { theme: d, children: [
+    /* @__PURE__ */ o(u, {}),
     /* @__PURE__ */ o(
-      C.Provider,
+      T.Provider,
       {
         value: {
-          hostThemeOptions: n,
-          fnComponentsOverrides: s
+          hostThemeOptions: s,
+          fnComponentsOverrides: n,
+          isMobileForced: i
         },
-        children: /* @__PURE__ */ i(v, { injectFirst: !0, children: [
-          /* @__PURE__ */ o(p, { enableColorScheme: !0 }),
-          c
+        children: /* @__PURE__ */ l(C, { injectFirst: !0, children: [
+          /* @__PURE__ */ o(f, { enableColorScheme: !0 }),
+          a
         ] })
       }
     )
   ] });
 }
 export {
-  C as H,
-  y as a
+  T as H,
+  E as a
 };

package/contexts/HostThemeContext/types.d.ts

@@ -1,14 +1,22 @@
-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: OurTheme;
+    /**
+     * "dataTestId" es una variable que se encarga de asignar un id a un componente
+     * @createdAt 2024-10-08 18:52:29 - automatic
+     */
+    dataTestId?: string;
+    /**
+     * "isMobileForced" es una variable que se encarga de forzar el modo mobile en la plataforma
+     * @createdAt 2024-10-08 13:22:53 - automatic
+     */
+    isMobileForced?: boolean | undefined;
+    hostThemeOptions: Theme;
     fnComponentsOverrides: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => any;
 }
 export interface HostThemeProviderProps extends HostThemeType {
     isMicroFrontEnd: boolean;
     children: ReactNode;
-    isMobile: boolean;
 }
 export type HostThemeContextType = HostThemeType;

package/contexts/ResponsiveContainerContext/index.d.ts

@@ -12,7 +12,7 @@ declare const ResponsiveContainerContext: import('react').Context<(Omit<Omit<imp
  * Proveedor de contenedor responsivo
  * @author Juan Escobar - automatic
  * @createdAt 2024-10-06 20:07:18 - automatic
- * @updatedAt 2024-10-06 20:07:18 - automatic
+ * @updatedAt 2024-10-08 19:03:38 - automatic
  * @updatedUser Juan Escobar - automatic
  */
 declare const ResponsiveContainerProvider: (props: ResponsiveContainerProviderProps) => import("react").JSX.Element;

package/contexts/ThemeSettingsContext/ThemeSettingsContext.d.ts

@@ -12,8 +12,8 @@ declare const ThemeSettingsContext: import('react').Context<(Omit<Omit<import('z
  * Theme settings provider
  * @author Juan Escobar - automatic
  * @createdAt 2024-10-06 20:07:18 - automatic
- * @updatedAt 2024-10-06 20:07:18 - automatic
+ * @updatedAt 2024-10-08 19:28:36 - automatic
  * @updatedUser Juan Escobar - automatic
  */
-declare function ThemeSettingsProvider({ children, themeSettings }: ThemeSettingsProviderProps): import("react").JSX.Element;
+declare function ThemeSettingsProvider({ children, themeSettingsForced }: ThemeSettingsProviderProps): import("react").JSX.Element;
 export { ThemeSettingsProvider, ThemeSettingsContext };

package/contexts/ThemeSettingsContext/ThemeSettingsContext.js

@@ -1,32 +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 { createContext as a, useRef as c } from "react";
+import { useLocalStorageWithListener as p } from "@m4l/core";
+import { getUserThemeOptions as f, presetsOptionsMainColor as g } 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(
+import { d as r } from "./constants.js";
+const l = a(null);
+function x({ children: s, themeSettingsForced: t }) {
+  const [n, i] = p(
     "theme_setting",
-    {}
-  ), e = a();
+    r
+  ), o = {
+    ...r,
+    //Por si hay algo en el local storage incopatible con el default
+    ...n,
+    ...t || {}
+    //Si es forzado, se sobreescribe y por eso es el último
+  }, e = c();
   return e.current || (e.current = h({
-    networkOperation: s,
-    currentThemeSettings: {
-      ...l,
-      ...t,
-      ...n
-    },
-    themeOptions: p,
-    colorOption: S,
+    themeUserSettings: o,
+    themeOptions: f(o.themeMode, o.themeColor),
+    presetsOptionsColorMain: g,
+    //Para visibilidad de los colores en el radiogroup de SettingsLayout
     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 });
+    themeSettingsPersistFn: t ? void 0 : i
+    // Solo se instancia cuando esta en host, cuando esta storybook no se instancia, evitando guardar en localStorage
+  }), e.current.getState().settingsActions.init()), /* @__PURE__ */ m(l.Provider, { value: e.current, children: s });
 }
 export {
-  d as T,
-  b as a
+  l as T,
+  x as a
 };

package/contexts/ThemeSettingsContext/constants.d.ts

@@ -1,2 +1,2 @@
-import { ThemeSettingsType } from './types';
-export declare const defaultThemeSettings: ThemeSettingsType;
+import { ThemeUserSettings } from './types';
+export declare const defaultThemeSettings: ThemeUserSettings;

package/contexts/ThemeSettingsContext/constants.js

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

package/contexts/ThemeSettingsContext/index.d.ts

@@ -1,3 +1,3 @@
 export * from './ThemeSettingsContext';
-export type { ThemeSettingsType, ThemeMode } from './types';
+export type { ThemeUserSettings as ThemeSettingsType, ThemeUserMode as ThemeMode } from './types';
 export { defaultThemeSettings } from './constants';

package/contexts/ThemeSettingsContext/store.d.ts

@@ -4,7 +4,7 @@ import { WritableDraft } from 'immer/dist/internal';
  * Crea la tienda de configuración del tema
  * @author Juan Escobar - automatic
  * @createdAt 2024-10-06 20:07:18 - automatic
- * @updatedAt 2024-10-06 20:07:18 - automatic
+ * @updatedAt 2024-10-08 19:28:36 - automatic
  * @updatedUser Juan Escobar - automatic
  */
 export declare const createThemeSettingsStore: (initialState: InitialThemeSettingsStoreProps) => Omit<Omit<import('zustand').StoreApi<ThemeSettingsStateWithActions>, "setState"> & {

package/contexts/ThemeSettingsContext/store.js

@@ -1,99 +1,95 @@
-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") {
+import { createStore as c } from "zustand";
+import { devtools as l } from "zustand/middleware";
+import { immer as p } from "zustand/middleware/immer";
+import { getPaletteByPreset as a, typography as u, shadows as h, getColorPresets as d, createCustomShadows as f } from "@m4l/styles";
+import { alpha as U } from "@mui/system";
+import { d as s } from "./constants.js";
+function g(r, o = "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];
+  m && Object.keys(r).forEach((t) => {
+    const e = r[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 S = `--${o}-${t}`;
+      m.style.setProperty(S, e.toString());
+    } else typeof e == "object" && e !== null && g(e, `${o}-${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,
+const n = (r) => {
+  const o = r.themeUserSettings || s, m = o.themeMode === "light", t = a(o.themeColor), e = m ? t.light : t.dark;
+  r.themeOptions = {
+    ...r.themeOptions,
+    typography: u,
     palette: {
-      ...n.themeOptions?.palette ?? {},
+      ...r.themeOptions?.palette ?? {},
       ...e
     },
     shape: { borderRadius: 8 },
-    direction: r.themeDirection,
+    direction: o.themeDirection,
     shadows: m ? h.light : h.dark,
     customShadows: {
-      primary: `0 8px 16px 0 ${f(
-        a(r.themeColorPresets)?.main || "#fff",
+      primary: `0 8px 16px 0 ${U(
+        d(o.themeColor)?.main || "#fff",
         0.2
       )}`,
-      ...d(r.themeMode)
+      ...f(o.themeMode)
     },
-    stretch: r.themeStretch
-  }, g(n.themeOptions);
-}, i = (n) => {
-  n.setterThemeSettings && n.setterThemeSettings(n.currentThemeSettings);
-}, b = (n) => l(
-  u(
-    S((r, m) => ({
-      ...n,
+    stretch: o.themeStretch
+  }, g(r.themeOptions);
+}, i = (r) => {
+  r.themeSettingsPersistFn && r.themeSettingsPersistFn(r.themeUserSettings);
+}, P = (r) => c(
+  l(
+    p((o, m) => ({
+      ...r,
       settingsActions: {
         /**
          * Inicializa la tienda de configuración del tema
          * @author Juan Escobar - automatic
          * @createdAt 2024-10-06 20:07:18 - automatic
-         * @updatedAt 2024-10-06 20:07:18 - automatic
+         * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
         init: () => {
-          r((t) => {
-            o(t);
+          o((t) => {
+            n(t);
           });
         },
         /**
          * Establece la configuración del tema
          * @author Juan Escobar - automatic
          * @createdAt 2024-10-06 20:07:18 - automatic
-         * @updatedAt 2024-10-06 20:07:18 - automatic
+         * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
         setThemeSettings: (t) => {
-          r((e) => {
-            e.currentThemeSettings = { ...e.currentThemeSettings, ...t }, i(e), o(e);
+          o((e) => {
+            e.themeUserSettings = { ...e.themeUserSettings, ...t }, i(e), n(e);
           });
         },
         /**
          * Cambia el modo del tema
          * @author Juan Escobar - automatic
          * @createdAt 2024-10-06 20:07:18 - automatic
-         * @updatedAt 2024-10-06 20:07:18 - automatic
+         * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
         onChangeMode: (t) => {
-          r((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
+          o((e) => {
+            e.themeUserSettings = {
+              ...e.themeUserSettings,
               themeMode: t.target.value
-            }, i(e), o(e);
+            }, i(e), n(e);
           });
         },
         /**
          * Abre o cierra el panel de configuración del tema
          * @author Juan Escobar - automatic
          * @createdAt 2024-10-06 20:07:18 - automatic
-         * @updatedAt 2024-10-06 20:07:18 - automatic
+         * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
         handleOpen: () => {
-          r((t) => {
+          o((t) => {
             t.open = !t.open;
           });
         },
@@ -101,74 +97,74 @@ const o = (n) => {
          * Cambia la dirección del tema
          * @author Juan Escobar - automatic
          * @createdAt 2024-10-06 20:07:18 - automatic
-         * @updatedAt 2024-10-06 20:07:18 - automatic
+         * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
         onChangeDirection: (t) => {
-          r((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
+          o((e) => {
+            e.themeUserSettings = {
+              ...e.themeUserSettings,
               themeDirection: t.target.value
-            }, i(e), o(e);
+            }, i(e), n(e);
           });
         },
         /**
          * Cambia el color del tema
          * @author Juan Escobar - automatic
          * @createdAt 2024-10-06 20:07:18 - automatic
-         * @updatedAt 2024-10-06 20:07:18 - automatic
+         * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
         onChangeColor: (t) => {
-          r((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
-              themeColorPresets: t.target.value
-            }, i(e), o(e);
+          o((e) => {
+            e.themeUserSettings = {
+              ...e.themeUserSettings,
+              themeColor: t.target.value
+            }, i(e), n(e);
           });
         },
         /**
          * Cambia el diseño del tema
          * @author Juan Escobar - automatic
          * @createdAt 2024-10-06 20:07:18 - automatic
-         * @updatedAt 2024-10-06 20:07:18 - automatic
+         * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
         onChangeLayout: (t) => {
-          r((e) => {
-            e.currentThemeSettings = {
-              ...e.currentThemeSettings,
+          o((e) => {
+            e.themeUserSettings = {
+              ...e.themeUserSettings,
               themeLayout: t.target.value
-            }, i(e), o(e);
+            }, i(e), n(e);
           });
         },
         /**
          * Cambia el estiramiento del tema
          * @author Juan Escobar - automatic
          * @createdAt 2024-10-06 20:07:18 - automatic
-         * @updatedAt 2024-10-06 20:07:18 - automatic
+         * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
         onToggleStretch: () => {
-          r((t) => {
-            t.currentThemeSettings = {
-              ...t.currentThemeSettings,
-              themeStretch: !t.currentThemeSettings.themeStretch
-            }, i(t), o(t);
+          o((t) => {
+            t.themeUserSettings = {
+              ...t.themeUserSettings,
+              themeStretch: !t.themeUserSettings.themeStretch
+            }, i(t), n(t);
           });
         },
         /**
          * Resetea la configuración del tema
          * @author Juan Escobar - automatic
          * @createdAt 2024-10-06 20:07:18 - automatic
-         * @updatedAt 2024-10-06 20:07:18 - automatic
+         * @updatedAt 2024-10-08 19:28:36 - automatic
          * @updatedUser Juan Escobar - automatic
          */
         onResetSetting: () => {
-          r((t) => {
-            t.currentThemeSettings = {
-              ...c
-            }, i(t), o(t);
+          o((t) => {
+            t.themeUserSettings = {
+              ...s
+            }, i(t), n(t);
           });
         }
       }
@@ -177,5 +173,5 @@ const o = (n) => {
   )
 );
 export {
-  b as c
+  P as c
 };

package/contexts/ThemeSettingsContext/types.d.ts

@@ -1,50 +1,56 @@
-import { NetworkProps } from '@m4l/core';
-import { OurTheme, PresetsOptions, ThemeColorOptionsType } from '@m4l/styles';
-import { CssVarsTheme, Theme } from '@mui/material/styles';
+import { PresetsOptionsColorMain, ThemeUserColor } from '@m4l/styles';
+import { Theme } from '@mui/material/styles';
 import { ReactNode } from 'react';
-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: ThemeColorOptionsType;
-    themeStretch: ThemeStretch;
-    themeLayout: ThemeLayout;
-    isMobile: boolean;
+export type ThemeUserMode = 'light' | 'dark';
+export type ThemeUserDirection = 'rtl' | 'ltr';
+export type ThemeUserLayout = 'vertical' | 'horizontal';
+export type ThemeUserStretch = boolean;
+/**
+ * "ThemeSettingsType" son las configuraciones que el usuario escoge para ver la plataforma
+ * @createdAt 2024-10-08 13:22:53 - automatic
+ */
+export type ThemeUserSettings = {
+    themeMode: ThemeUserMode;
+    themeDirection: ThemeUserDirection;
+    themeColor: ThemeUserColor;
+    themeStretch: ThemeUserStretch;
+    themeLayout: ThemeUserLayout;
 };
 export interface ThemeSettingsStore {
-    networkOperation: (props: NetworkProps) => Promise<any>;
-    currentThemeSettings: ThemeSettingsType;
+    /**
+     * Configuraciones seleccionadas por el usuario, modo, dirección, color, estiramiento y layout
+     * @createdAt 2024-10-08 13:22:53 - automatic
+     */
+    themeUserSettings: ThemeUserSettings;
     /**
      * Contiene la configuración incial del tema como la paleta, tipografía, sombras, etc. También puede contener el tema convertido a css vars.
      * @createdAt 2024-10-06 20:07:18 - automatic
      */
-    themeOptions: (Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) | OurTheme;
-    colorOption: PresetsOptions;
+    themeOptions: Theme;
+    /**
+     * "presetsOptionsColorMain" es un array de objetos que contiene el nombre y el valor de los colores principales
+     * @createdAt 2024-10-08 13:22:53 - automatic
+     */
+    presetsOptionsColorMain: PresetsOptionsColorMain;
     /**
-     * "setterThemeSettings" es una función que se encarga de persistir en local storage los cambios de los settings
+     * "themeSettingsPersistFn" es una función que se encarga de persistir en local storage los cambios de los settings
      * Solo se instancia cuando esta en host, cuando esta storybook no se instancia
      * @author Juan Escobar - automatic
      * @createdAt 2024-10-06 20:07:18 - automatic
-     * @updatedAt 2024-10-06 20:07:18 - automatic
+     * @updatedAt 2024-10-08 19:28:36 - automatic
      * @updatedUser Juan Escobar - automatic
      */
-    setterThemeSettings?: (newValue: ThemeSettingsType) => void;
+    themeSettingsPersistFn?: (newValue: ThemeUserSettings) => void;
+    /**
+     * "open" es una variable que se encarga de abrir o cerrar el formulario
+     * @createdAt 2024-10-08 13:22:53 - automatic
+     */
     open: boolean;
 }
 export type DefaultThemeSettingsStoreProps = ThemeSettingsStore;
 export type InitialThemeSettingsStoreProps = DefaultThemeSettingsStoreProps;
 export interface ThemeSettingsStateWithActions extends ThemeSettingsStore {
     settingsActions: {
-        /**
-         * Inicializa la tienda de configuración del tema
-         * @author Juan Escobar - automatic
-         * @createdAt 2024-10-06 20:07:18 - automatic
-         * @updatedAt 2024-10-06 20:07:18 - automatic
-         * @updatedUser Juan Escobar - automatic
-         */
         init: () => void;
         onToggleStretch: VoidFunction;
         onResetSetting: VoidFunction;
@@ -53,10 +59,13 @@ export interface ThemeSettingsStateWithActions extends ThemeSettingsStore {
         onChangeColor: (event: React.ChangeEvent<HTMLInputElement>) => void;
         onChangeLayout: (event: React.ChangeEvent<HTMLInputElement>) => void;
         handleOpen: () => void;
-        setThemeSettings: (newValue: Partial<ThemeSettingsType>) => void;
+        setThemeSettings: (newValue: Partial<ThemeUserSettings>) => void;
     };
 }
 export type ThemeSettingsProviderProps = {
-    themeSettings?: ThemeSettingsType;
+    /**
+     * "themeSettingsForced" es una variable que se encarga de forzar las configuraciones del tema, normalmente en storybook
+     */
+    themeSettingsForced?: ThemeUserSettings;
     children: ReactNode;
 };

package/hooks/useIsMobile/index.d.ts

@@ -2,7 +2,7 @@
  * Hook to check if the device is a mobile device
  * @author Juan Escobar - automatic
  * @createdAt 2024-10-06 20:07:18 - automatic
- * @updatedAt 2024-10-06 20:07:18 - automatic
+ * @updatedAt 2024-10-08 19:28:36 - automatic
  * @updatedUser Juan Escobar - automatic
  */
-export declare const useIsMobile: () => boolean;
+export declare const useIsMobile: (isMobileForced?: boolean) => boolean;

package/hooks/useIsMobile/index.js

@@ -1,11 +1,13 @@
-import { useState as n, useEffect as o } from "react";
-import s from "lodash/throttle";
-const i = () => typeof navigator > "u" ? !1 : /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), l = () => {
-  const [t, r] = n(i());
-  return o(() => {
-    const e = s(
+import { useState as o, useEffect as s } from "react";
+import a from "lodash/throttle";
+const i = () => typeof navigator > "u" ? !1 : /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), f = (t) => {
+  const [r, n] = o(t || i());
+  return s(() => {
+    if (t === void 0)
+      return;
+    const e = a(
       () => {
-        r(i());
+        n(i());
       },
       200,
       {
@@ -15,8 +17,8 @@ const i = () => typeof navigator > "u" ? !1 : /Android|webOS|iPhone|iPad|iPod|Bl
     return window.addEventListener("resize", e), e(), () => {
       window.removeEventListener("resize", e), e.cancel();
     };
-  }, []), t;
+  }, [t]), r;
 };
 export {
-  l as u
+  f as u
 };

package/index.js

@@ -3,10 +3,10 @@ import { g as s } from "./contexts/LocalesContext/helper.js";
 import { F as m, a as p } from "./contexts/FormatterContext/index.js";
 import { L as f, a as i } from "./contexts/LocalesContext/index.js";
 import { R as u, a as l } from "./contexts/ResponsiveContainerContext/index.js";
-import { H as v, a as C } from "./contexts/HostThemeContext/index.js";
-import { d as g } from "./contexts/ThemeSettingsContext/constants.js";
+import { H as v, a as T } from "./contexts/HostThemeContext/index.js";
+import { d as h } from "./contexts/ThemeSettingsContext/constants.js";
 import { T as R, a as S } from "./contexts/ThemeSettingsContext/ThemeSettingsContext.js";
-import { u as P } from "./hooks/useFirstRender/index.js";
+import { u as F } from "./hooks/useFirstRender/index.js";
 import { u as L } from "./hooks/useFormatter/index.js";
 import { u as b } from "./hooks/useIsMountedRef/index.js";
 import { u as w } from "./hooks/useLocales/index.js";
@@ -17,25 +17,25 @@ import { u as D } from "./hooks/useHostTheme/index.js";
 import { u as N } from "./hooks/useResizeObserver/index.js";
 import { u as j } from "./hooks/useResponsive/index.js";
 import { u as B } from "./hooks/useThemSettingsStore/index.js";
-import { C as K } from "./utils/strings.js";
+import { c as K } from "./utils/strings.js";
 import { g as U } from "./utils/anchorEl.js";
 export {
-  K as Capitalize,
   m as FormatterContext,
   p as FormatterProvider,
   r as GlobalStyles,
   v as HostThemeContext,
-  C as HostThemeProvider,
+  T as HostThemeProvider,
   f as LocalesContext,
   i as LocalesProvider,
   u as ResponsiveContainerContext,
   l as ResponsiveContainerProvider,
   R as ThemeSettingsContext,
   S as ThemeSettingsProvider,
-  g as defaultThemeSettings,
+  K as capitalize,
+  h as defaultThemeSettings,
   U as getAnchorElPositionWindow,
   s as getLocaleFromNetwork,
-  P as useFirstRender,
+  F as useFirstRender,
   L as useFormatter,
   D as useHostTheme,
   M as useIsMobile,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "6.0.2",
+  "version": "7.0.0",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "publishConfig": {
@@ -18,7 +18,7 @@
   },
   "peerDependencies": {
     "@m4l/core": "^2.0.9",
-    "@m4l/styles": "^6.5.1",
+    "@m4l/styles": "^7.0.0",
     "@mui/material": "^5.15.19",
     "@mui/x-date-pickers": "^6.11.1",
     "@types/react": "^18.0.0",

package/utils/strings.d.ts

@@ -1 +1 @@
-export declare const Capitalize: (s: string) => string;
+export declare const capitalize: (s: string) => string;

package/utils/strings.js

@@ -1,4 +1,4 @@
 const a = (e) => e && e[0].toUpperCase() + e.slice(1) || "";
 export {
-  a as C
+  a as c
 };