@m4l/graphics 1.0.7 → 1.0.9

package/components/index.d8d41b1b.js

@@ -0,0 +1 @@
+

package/contexts/HostThemeContext/index.02e36f38.js

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

package/contexts/HostThemeContext/types.d.ts

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 export declare type EventFunListener = (...args: any[]) => void;
 export interface HostThemeType {
     hostThemeOptions: Theme;
-    fnComponentsOverrides: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => any;
+    fnComponentsOverrides: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => any;
 }
 export interface HostThemeProviderProps extends HostThemeType {
     isMicroFrontEnd: boolean;

package/contexts/ResponsiveContainerContext/constants.d.ts

@@ -1,2 +1,2 @@
-import { BreakPointsType } from './types';
+import { BreakPointsType } from "./types";
 export declare const BREAKPOINTS: BreakPointsType;

package/contexts/ResponsiveContainerContext/types.d.ts

@@ -19,7 +19,8 @@ export interface ResponsiveContainerState {
     isUpSm: boolean;
     isXs: boolean;
 }
-export declare type InitialResponsiveContainerProps = Pick<ResponsiveContainerState, 'breakPoint' | 'isUpSm' | 'isXs'>;
+export interface InitialResponsiveContainerProps extends Pick<ResponsiveContainerState, 'breakPoint' | 'isUpSm' | 'isXs'> {
+}
 export interface ResponsiveContainerStateWithActions extends ResponsiveContainerState {
     responsiveContainerActions: {
         setBreakpoint: (breakPoint: BreakpointType) => void;

package/contexts/ThemeSettingsContext/ThemeSettingsContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+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;
+}, "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 | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+declare function ThemeSettingsProvider({ children, themeSettings }: ThemeSettingsProviderProps): import("react").JSX.Element;
+export { ThemeSettingsProvider, ThemeSettingsContext };

package/contexts/ThemeSettingsContext/constants.d.ts

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

package/contexts/ThemeSettingsContext/index.d.ts

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

package/contexts/ThemeSettingsContext/store.d.ts

@@ -0,0 +1,12 @@
+import { InitialThemeSettingsStoreProps, ThemeSettingsStateWithActions } from './types';
+import { WritableDraft } from 'immer/dist/internal';
+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;
+}, "setState"> & {
+    setState(nextStateOrUpdater: ThemeSettingsStateWithActions | Partial<ThemeSettingsStateWithActions> | ((state: WritableDraft<ThemeSettingsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+};
+export declare type ThemeSettingsStore = ReturnType<typeof createThemeSettingsStore>;

package/contexts/ThemeSettingsContext/types.d.ts

@@ -0,0 +1,50 @@
+import { NetworkProps } from '@m4l/core';
+import { ThemeColorPresets } from '@m4l/styles';
+import { CssVarsTheme, Theme, PaletteColor } 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 = {
+    themeMode: ThemeMode;
+    themeDirection: ThemeDirection;
+    themeColorPresets: ThemeColorPresets;
+    themeStretch: ThemeStretch;
+    themeLayout: ThemeLayout;
+};
+export interface ThemeSettingsStore {
+    networkOperation: (props: NetworkProps) => Promise<any>;
+    currentThemeSettings: ThemeSettingsType;
+    currentPreset: PaletteColor;
+    themeOptions: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
+    colorOption: {
+        name: string | undefined;
+        value: string;
+    }[];
+    /**
+     * "setterThemeSettings" 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
+     */
+    setterThemeSettings?: (newValue: ThemeSettingsType) => void;
+    open: boolean;
+}
+export declare type DefaultThemeSettingsStoreProps = ThemeSettingsStore;
+export declare type InitialThemeSettingsStoreProps = DefaultThemeSettingsStoreProps;
+export interface ThemeSettingsStateWithActions extends ThemeSettingsStore {
+    settingsActions: {
+        init: () => void;
+        onToggleStretch: VoidFunction;
+        onResetSetting: VoidFunction;
+        onChangeMode: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onChangeDirection: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onChangeColor: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onChangeLayout: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        handleOpen: () => void;
+        setThemeSettings: (newValue: Partial<ThemeSettingsType>) => void;
+    };
+}
+export declare type ThemeSettingsProviderProps = {
+    themeSettings?: ThemeSettingsType;
+    children: ReactNode;
+};

package/contexts/index.1d935da9.js

@@ -0,0 +1,279 @@
+import { createContext as f, useRef as T, useMemo as k, useLayoutEffect as y, useEffect as b } from "react";
+import { c as v, d as R, i as P, l as M } from "../node_modules.7cdb697c.js";
+import { jsx as x } from "react/jsx-runtime";
+import { useNetwork as E, useLocalStorageWithListener as w } from "@m4l/core";
+import { getColorPresets as m, getColorState as d, typography as L, palette as S, SECONDARY as A, COMMON as N, ERROR as D, WARNING as z, INFO as W, SUCCESS as B, shadows as p, createCustomShadows as $, defaultThemeOptions as j, defaultPreset as _, colorPresets as F } from "@m4l/styles";
+import { alpha as I } from "@mui/system";
+import { u as U } from "../hooks/useFirstRender/index.1e9b02fb.js";
+const C = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, K = (r) => {
+  const t = {
+    ...r
+  };
+  return v(
+    R(
+      P((o, n) => ({
+        ...t,
+        responsiveContainerActions: {
+          setBreakpoint: (e) => {
+            o(
+              (i) => {
+                console.log("current breakpoint", e), i.breakPoint = e, i.isUpSm = e !== "xs" && e !== "sm", i.isXs = e == "xs";
+              }
+            );
+          }
+        }
+      })),
+      { name: "Responsive Relative Store" }
+    )
+  );
+}, X = f(null), te = (r) => {
+  const {
+    children: t,
+    observedDivRef: o
+  } = r, n = T();
+  n.current || (n.current = K({
+    breakPoint: "md",
+    isUpSm: !1,
+    isXs: !1
+  }));
+  const e = () => {
+    const s = o;
+    if (s instanceof HTMLElement && s.clientWidth) {
+      const c = Object.keys(C);
+      for (let l = 0; l < c.length; l++) {
+        const g = c[l];
+        if (s.clientWidth <= C[g]) {
+          n.current?.getState().responsiveContainerActions.setBreakpoint(g);
+          break;
+        }
+      }
+      console.log("node.clientWidth", s.clientWidth), console.log("onResizeMemo", n.current?.getState().breakPoint);
+    }
+  }, i = k(() => M.exports.throttle(e, 200, {
+    leading: !1,
+    trailing: !0
+  }), [e]);
+  return y(() => {
+    const s = () => {
+      i();
+    }, c = o;
+    if (c && c instanceof Element) {
+      const l = new ResizeObserver((g) => {
+        s();
+      });
+      return l.observe(c), () => {
+        l.disconnect();
+      };
+    }
+  }, [o]), /* @__PURE__ */ x(X.Provider, {
+    value: n.current,
+    children: t
+  });
+}, u = {
+  themeMode: "light",
+  themeDirection: "ltr",
+  themeColorPresets: "patronus",
+  themeLayout: "horizontal",
+  themeStretch: !1
+};
+function O(r, t = "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((n) => {
+    const e = r[n];
+    if (typeof e == "string" || typeof e == "number") {
+      const i = `--${t}-${n}`;
+      o.style.setProperty(i, e.toString());
+    } else
+      typeof e == "object" && e !== null && O(e, `${t}-${n}`);
+  });
+}
+const a = (r) => {
+  const t = r.currentThemeSettings || u;
+  console.log("getColorPresets", m(t.themeColorPresets)), console.log(
+    "getColorState",
+    d(t.themeColorPresets, t.themeMode)
+  );
+  const o = t.themeMode === "light";
+  r.themeOptions = {
+    ...r.themeOptions,
+    typography: L,
+    palette: {
+      ...r.themeOptions.palette,
+      ...o ? S.light : S.dark,
+      primary: m(t.themeColorPresets),
+      state: d(t.themeColorPresets, t.themeMode),
+      representative: t.themeMode === "light" ? m(t.themeColorPresets)?.light : m(t.themeColorPresets)?.darker,
+      secondary: {
+        ...A,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      common: {
+        ...N,
+        black: "#000",
+        white: "#fff",
+        background: "",
+        backgroundChannel: "",
+        onBackground: "",
+        onBackgroundChannel: ""
+      },
+      error: {
+        ...D,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      warning: {
+        ...z,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      info: {
+        ...W,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      success: {
+        ...B,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      }
+    },
+    shape: { borderRadius: 8 },
+    direction: t.themeDirection,
+    shadows: o ? p.light : p.dark,
+    customShadows: {
+      primary: `0 8px 16px 0 ${I(
+        m(t.themeColorPresets)?.main || "#fff",
+        0.2
+      )}`,
+      ...$(t.themeMode)
+    },
+    stretch: t.themeStretch
+  }, console.log("state.themeOptions", r.themeOptions), O(r.themeOptions);
+}, h = (r) => {
+  r.setterThemeSettings && r.setterThemeSettings(r.currentThemeSettings);
+}, q = (r) => v(
+  R(
+    P((t, o) => ({
+      ...r,
+      settingsActions: {
+        init: () => {
+          t((n) => {
+            a(n);
+          });
+        },
+        setThemeSettings: (n) => {
+          t((e) => {
+            e.currentThemeSettings = { ...e.currentThemeSettings, ...n }, h(e), a(e);
+          });
+        },
+        onChangeMode: (n) => {
+          t((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeMode: n.target.value
+            }, h(e), a(e);
+          });
+        },
+        handleOpen: () => {
+          t((n) => {
+            n.open = !n.open;
+          });
+        },
+        onChangeDirection: (n) => {
+          t((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeDirection: n.target.value
+            }, h(e), a(e);
+          });
+        },
+        onChangeColor: (n) => {
+          t((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeColorPresets: n.target.value
+            }, h(e), a(e);
+          });
+        },
+        onChangeLayout: (n) => {
+          t((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeLayout: n.target.value
+            }, h(e), a(e);
+          });
+        },
+        onToggleStretch: () => {
+          t((n) => {
+            n.currentThemeSettings = {
+              ...n.currentThemeSettings,
+              themeStretch: !n.currentThemeSettings.themeStretch
+            }, h(n), a(n);
+          });
+        },
+        onResetSetting: () => {
+          t((n) => {
+            n.currentThemeSettings = {
+              ...u
+            }, h(n), a(n);
+          });
+        }
+      }
+    })),
+    { name: "ExampleStore" }
+  )
+), G = f(null);
+function ne({
+  children: r,
+  themeSettings: t
+}) {
+  const {
+    networkOperation: o
+  } = E(), [n, e] = w("theme_setting", u), i = U([t]), s = T();
+  return s.current || (s.current = q({
+    networkOperation: o,
+    currentThemeSettings: {
+      ...t ?? n
+    },
+    themeOptions: j,
+    currentPreset: _,
+    colorOption: F.map((c) => ({
+      name: c.name,
+      value: c.main
+    })),
+    open: !1,
+    setterThemeSettings: t ? void 0 : e
+  }), s.current.getState().settingsActions.init()), b(() => {
+    !i && s.current && t && s.current.getState().settingsActions.setThemeSettings(t);
+  }, [t]), /* @__PURE__ */ x(G.Provider, {
+    value: s.current,
+    children: r
+  });
+}
+export {
+  X as R,
+  G as T,
+  te as a,
+  ne as b,
+  u as d
+};

package/contexts/index.d.ts

@@ -6,4 +6,5 @@ export type { BreakpointType } from './ResponsiveContainerContext/types';
 export type { NetworkLocaleType, LocaleType } from './LocalesContext/types';
 export { getLocaleFromNetwork } from './LocalesContext/helper';
 export * from './HostThemeContext';
+export * from './ThemeSettingsContext';
 export type { HostThemeType } from './HostThemeContext/types';

package/hooks/index.d.ts

@@ -8,3 +8,4 @@ export { useOffSetTop } from './useOffSetTop';
 export { useHostTheme } from './useHostTheme';
 export { useResizeObserver } from './useResizeObserver';
 export { useResponsiveDesktop } from './useResponsive';
+export { useThemeSettingsStore } from './useThemSettingsStore';

package/hooks/index.e4fb3c4e.js

@@ -0,0 +1,54 @@
+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.02e36f38.js";
+import { u as a } from "../node_modules.7cdb697c.js";
+import { T as l } from "../contexts/index.1d935da9.js";
+function S() {
+  const e = n(!0);
+  return r(
+    () => () => {
+      e.current = !1;
+    },
+    []
+  ), e;
+}
+function x(e) {
+  const [s, t] = i(!1), o = e || 100;
+  return r(() => (window.onscroll = () => {
+    window.pageYOffset > o ? t(!0) : t(!1);
+  }, () => {
+    window.onscroll = null;
+  }), [o]), s;
+}
+const h = () => {
+  const e = u(m);
+  if (!e)
+    throw new Error("useHostTheme context must be use inside HostThemeProvider");
+  return e;
+};
+function b(e) {
+  const s = n(null);
+  return c(() => {
+    const t = s?.current;
+    if (!t)
+      return;
+    const o = new ResizeObserver((f) => {
+      e(t, f[0]);
+    });
+    return o.observe(t), () => {
+      o.disconnect();
+    };
+  }, [e, s.current]), s;
+}
+function g(e, s) {
+  const t = u(l);
+  if (!t)
+    throw new Error("useSettingsStore context must be use inside SettignsContext");
+  return a(t, e, s);
+}
+export {
+  x as a,
+  h as b,
+  b as c,
+  g as d,
+  S as u
+};

package/hooks/useIsMobile/{index.e9f29b1d.js → index.1afbcd66.js}

@@ -1,17 +1,11 @@
 import { useState as n, useEffect as o } from "react";
-import { t as s } from "../../node_modules.9eeccca4.js";
+import { t as s } from "../../node_modules.7cdb697c.js";
 const t = () => typeof navigator > "u" ? !1 : /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), l = () => {
   const [i, r] = n(t());
   return o(() => {
-    const e = s(
-      () => {
-        r(t());
-      },
-      200,
-      {
-        trailing: !0
-      }
-    );
+    const e = s(() => {
+      r(t());
+    }, 200);
     return window.addEventListener("resize", e), e(), () => {
       window.removeEventListener("resize", e), e.cancel();
     };

package/hooks/useResponsive/{index.b336bec4.js → index.0881f166.js}

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

package/hooks/useThemSettingsStore/index.d.ts

@@ -0,0 +1,2 @@
+import { ThemeSettingsStateWithActions } from '../../contexts/ThemeSettingsContext/types';
+export declare function useThemeSettingsStore<T>(selector: (state: ThemeSettingsStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;

package/index.js

@@ -1,47 +1,52 @@
 import { G as l } from "./components/GlobalStyle/index.b7393a44.js";
-import { F as C, a as R } from "./contexts/FormatterContext/index.92336f4c.js";
-import { L as c, a as F, g as L } from "./contexts/LocalesContext/index.53f0b702.js";
-import { R as b, a as g } from "./contexts/index.68603471.js";
-import { H, a as T } from "./contexts/HostThemeContext/index.f53d14b8.js";
-import { u as k } from "./hooks/useFirstRender/index.1e9b02fb.js";
-import { u as z } from "./hooks/useFormatter/index.57ac8cca.js";
-import { b as I, u as M, a as O, c as y } from "./hooks/index.eebf9e43.js";
-import { u as D } from "./hooks/useLocales/index.d5a80aff.js";
-import { u as N, a as W } from "./hooks/useResponsive/index.b336bec4.js";
-import { u as q } from "./hooks/useIsMobile/index.e9f29b1d.js";
-import { C as J, g as K } from "./utils/index.6909c662.js";
+import { L as C, a as T, g } from "./contexts/LocalesContext/index.53f0b702.js";
+import { F as R, a as S } from "./contexts/FormatterContext/index.92336f4c.js";
+import { R as F, a as P, T as b, b as L, d as H } from "./contexts/index.1d935da9.js";
+import { H as w, a as z } from "./contexts/HostThemeContext/index.02e36f38.js";
+import { u as I } from "./hooks/useFirstRender/index.1e9b02fb.js";
+import { u as O } from "./hooks/useFormatter/index.57ac8cca.js";
+import { b as A, u as D, a as E, c as N, d as W } from "./hooks/index.e4fb3c4e.js";
+import { u as q } from "./hooks/useLocales/index.d5a80aff.js";
+import { u as J, a as K } from "./hooks/useResponsive/index.0881f166.js";
+import { u as U } from "./hooks/useIsMobile/index.1afbcd66.js";
+import { C as X, g as Y } from "./utils/index.6909c662.js";
 import "@mui/material/styles";
 import "@mui/material";
 import "@m4l/styles";
 import "react/jsx-runtime";
 import "react";
-import "@m4l/core";
 import "@mui/x-date-pickers/AdapterDateFns";
 import "@mui/x-date-pickers";
+import "@m4l/core";
 import "date-fns/locale/en-US";
-import "./node_modules.9eeccca4.js";
+import "./node_modules.7cdb697c.js";
 import "./commonjs.e3daa2e5.js";
+import "@mui/system";
 export {
-  J as Capitalize,
-  C as FormatterContext,
-  R as FormatterProvider,
+  X as Capitalize,
+  R as FormatterContext,
+  S as FormatterProvider,
   l as GlobalStyles,
-  H as HostThemeContext,
-  T as HostThemeProvider,
-  c as LocalesContext,
-  F as LocalesProvider,
-  b as ResponsiveContainerContext,
-  g as ResponsiveContainerProvider,
-  K as getAnchorElPositionWindow,
-  L as getLocaleFromNetwork,
-  k as useFirstRender,
-  z as useFormatter,
-  I as useHostTheme,
-  q as useIsMobile,
-  M as useIsMountedRef,
-  D as useLocales,
-  O as useOffSetTop,
-  y as useResizeObserver,
-  N as useResponsiveContainerStore,
-  W as useResponsiveDesktop
+  w as HostThemeContext,
+  z as HostThemeProvider,
+  C as LocalesContext,
+  T as LocalesProvider,
+  F as ResponsiveContainerContext,
+  P as ResponsiveContainerProvider,
+  b as ThemeSettingsContext,
+  L as ThemeSettingsProvider,
+  H as defaultThemeSettings,
+  Y as getAnchorElPositionWindow,
+  g as getLocaleFromNetwork,
+  I as useFirstRender,
+  O as useFormatter,
+  A as useHostTheme,
+  U as useIsMobile,
+  D as useIsMountedRef,
+  q as useLocales,
+  E as useOffSetTop,
+  N as useResizeObserver,
+  J as useResponsiveContainerStore,
+  K as useResponsiveDesktop,
+  W as useThemeSettingsStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "dependencies": {

package/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/components/index.8083534b.js

@@ -1,4 +0,0 @@
-import "@mui/material/styles";
-import "@mui/material";
-import "@m4l/styles";
-import "react/jsx-runtime";

package/contexts/HostThemeContext/index.f53d14b8.js

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

package/contexts/index.68603471.js

@@ -1,73 +0,0 @@
-import "./FormatterContext/index.92336f4c.js";
-import "./LocalesContext/index.53f0b702.js";
-import { createContext as p, useRef as v, useMemo as f, useLayoutEffect as d } from "react";
-import { c as R, d as u, i as x, l as h } from "../node_modules.9eeccca4.js";
-import { jsx as S } from "react/jsx-runtime";
-import "date-fns/locale/en-US";
-import "./HostThemeContext/index.f53d14b8.js";
-const m = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, b = (c) => {
-  const a = {
-    ...c
-  };
-  return R(
-    u(
-      x((o, n) => ({
-        ...a,
-        responsiveContainerActions: {
-          setBreakpoint: (e) => {
-            o((r) => {
-              r.breakPoint = e, r.isUpSm = e !== "xs" && e !== "sm", r.isXs = e == "xs";
-            });
-          }
-        }
-      })),
-      { name: "Responsive Relative Store" }
-    )
-  );
-}, C = p(null), B = (c) => {
-  const {
-    children: a,
-    observedDivRef: o
-  } = c, n = v();
-  n.current || (n.current = b({
-    breakPoint: "md",
-    isUpSm: !1,
-    isXs: !1
-  }));
-  const e = () => {
-    const i = o;
-    if (i instanceof HTMLElement && i.clientWidth) {
-      const t = Object.keys(m);
-      for (let s = 0; s < t.length; s++) {
-        const l = t[s];
-        if (i.clientWidth <= m[l]) {
-          n.current?.getState().responsiveContainerActions.setBreakpoint(l);
-          break;
-        }
-      }
-    }
-  }, r = f(() => h.exports.throttle(e, 200, {
-    leading: !1,
-    trailing: !0
-  }), [e]);
-  return d(() => {
-    const i = () => {
-      r();
-    }, t = o;
-    if (t && t instanceof Element) {
-      const s = new ResizeObserver((l) => {
-        i();
-      });
-      return s.observe(t), () => {
-        s.disconnect();
-      };
-    }
-  }, [o]), /* @__PURE__ */ S(C.Provider, {
-    value: n.current,
-    children: a
-  });
-};
-export {
-  C as R,
-  B as a
-};

package/hooks/index.eebf9e43.js

@@ -1,50 +0,0 @@
-import { useRef as r, useEffect as n, useState as f, useContext as i, useLayoutEffect as c } from "react";
-import { H as m } from "../contexts/HostThemeContext/index.f53d14b8.js";
-import "../contexts/FormatterContext/index.92336f4c.js";
-import "../contexts/LocalesContext/index.53f0b702.js";
-import "../contexts/index.68603471.js";
-import "../node_modules.9eeccca4.js";
-import "@m4l/styles";
-function h() {
-  const e = r(!0);
-  return n(
-    () => () => {
-      e.current = !1;
-    },
-    []
-  ), e;
-}
-function v(e) {
-  const [o, t] = f(!1), s = e || 100;
-  return n(() => (window.onscroll = () => {
-    window.pageYOffset > s ? t(!0) : t(!1);
-  }, () => {
-    window.onscroll = null;
-  }), [s]), o;
-}
-const x = () => {
-  const e = i(m);
-  if (!e)
-    throw new Error("useHostTheme context must be use inside HostThemeProvider");
-  return e;
-};
-function H(e) {
-  const o = r(null);
-  return c(() => {
-    const t = o?.current;
-    if (!t)
-      return;
-    const s = new ResizeObserver((u) => {
-      e(t, u[0]);
-    });
-    return s.observe(t), () => {
-      s.disconnect();
-    };
-  }, [e, o.current]), o;
-}
-export {
-  v as a,
-  x as b,
-  H as c,
-  h as u
-};