@m4l/graphics 0.1.54 → 1.0.0

package/components/GlobalStyle/{index.94f31f63.js → index.c11ef3f3.js}

@@ -1,14 +1,15 @@
 import { useTheme as o } from "@mui/material/styles";
 import { GlobalStyles as e } from "@mui/material";
-import { globalRemSize as t } from "@m4l/styles";
+import { globalRemSize as r } from "@m4l/styles";
 import { jsx as a } from "react/jsx-runtime";
-function s() {
-  const r = o();
-  return /* @__PURE__ */ a(e, {
+function p() {
+  const t = o();
+  return console.log("theme test", t), /* @__PURE__ */ a(e, {
     styles: {
       body: {
-        backgroundColor: `${r.palette.background.background}!important`,
         textRendering: "geometricPrecision",
+        width: "100%",
+        height: "100vh",
         "*::-webkit-scrollbar": {
           width: "7px",
           height: "7px",
@@ -23,8 +24,12 @@ function s() {
           backgroundColor: "transparent"
         },
         "*::-webkit-scrollbar-thumb": {
-          background: r.palette.state.scrollBar,
+          background: t.vars.palette,
           borderRadius: "2px!important"
+        },
+        "& #root": {
+          width: "100%",
+          height: "100%"
         }
       },
       "#nprogress": {
@@ -35,9 +40,9 @@ function s() {
           height: 2,
           width: "100%",
           position: "fixed",
-          zIndex: r.zIndex.snackbar,
-          backgroundColor: r.palette.primary.main,
-          boxShadow: `0 0 2px ${r.palette.primary.main}`
+          zIndex: t.zIndex.snackbar,
+          backgroundColor: t.vars.palette.primary.main,
+          boxShadow: `0 0 2px ${t.vars.palette.primary.main}`
         },
         "& .peg": {
           right: 0,
@@ -47,18 +52,18 @@ function s() {
           display: "block",
           position: "absolute",
           transform: "rotate(3deg) translate(0px, -4px)",
-          boxShadow: `0 0 10px ${r.palette.primary.main}, 0 0 5px ${r.palette.primary.main}`
+          boxShadow: `0 0 10px ${t.vars.palette.primary.main}, 0 0 5px ${t.vars.palette.primary.main}`
         }
       },
       "& html": {
-        fontSize: t.desktop,
-        [r.breakpoints.down("sm")]: {
-          fontSize: t.mobile
+        fontSize: r.desktop,
+        [t.breakpoints.down("sm")]: {
+          fontSize: r.mobile
         }
       }
     }
   });
 }
 export {
-  s as G
+  p as G
 };

package/contexts/HostThemeContext/index.86691e12.js

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

package/contexts/HostThemeContext/types.d.ts

@@ -1,9 +1,9 @@
-import type { ThemeOptions, Theme } from '@mui/material/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: ThemeOptions;
-    fnComponentsOverrides: (theme: Theme) => any;
+    hostThemeOptions: Theme;
+    fnComponentsOverrides: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => any;
 }
 export interface HostThemeProviderProps extends HostThemeType {
     isMicroFrontEnd: boolean;

package/contexts/{index.2d1e9989.js → index.d28ab716.js}

@@ -1,10 +1,10 @@
 import "./FormatterContext/index.92336f4c.js";
 import "./LocalesContext/index.53f0b702.js";
 import { createContext as d, useRef as p, useMemo as v, useLayoutEffect as f } from "react";
-import { c as u, d as R, i as g, l as h } from "../node_modules.9690bbee.js";
+import { c as u, d as R, i as g, l as h } from "../node_modules.9eeccca4.js";
 import { jsx as x } from "react/jsx-runtime";
 import "date-fns/locale/en-US";
-import "./HostThemeContext/index.4291ba89.js";
+import "./HostThemeContext/index.86691e12.js";
 const m = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, S = (c) => {
   const a = {
     ...c

package/hooks/{index.2e0ca338.js → index.73785922.js}

@@ -1,9 +1,9 @@
 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.4291ba89.js";
+import { H as m } from "../contexts/HostThemeContext/index.86691e12.js";
 import "../contexts/FormatterContext/index.92336f4c.js";
 import "../contexts/LocalesContext/index.53f0b702.js";
-import "../contexts/index.2d1e9989.js";
-import "../node_modules.9690bbee.js";
+import "../contexts/index.d28ab716.js";
+import "../node_modules.9eeccca4.js";
 import "@m4l/styles";
 function h() {
   const e = r(!0);

package/hooks/useIsMobile/{index.c710a8a7.js → index.3de7c47a.js}

@@ -1,5 +1,5 @@
 import { useState as n, useEffect as o } from "react";
-import { t as s } from "../../node_modules.9690bbee.js";
+import { t as s } from "../../node_modules.9eeccca4.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(() => {

package/hooks/useResponsive/{index.70446acb.js → index.2b01d764.js}

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

package/index.js

@@ -1,14 +1,14 @@
-import { G as l } from "./components/GlobalStyle/index.94f31f63.js";
+import { G as l } from "./components/GlobalStyle/index.c11ef3f3.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.2d1e9989.js";
-import { H, a as T } from "./contexts/HostThemeContext/index.4291ba89.js";
+import { R as b, a as g } from "./contexts/index.d28ab716.js";
+import { H, a as T } from "./contexts/HostThemeContext/index.86691e12.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.2e0ca338.js";
+import { b as I, u as M, a as O, c as y } from "./hooks/index.73785922.js";
 import { u as D } from "./hooks/useLocales/index.d5a80aff.js";
-import { u as N, a as W } from "./hooks/useResponsive/index.70446acb.js";
-import { u as q } from "./hooks/useIsMobile/index.c710a8a7.js";
+import { u as N, a as W } from "./hooks/useResponsive/index.2b01d764.js";
+import { u as q } from "./hooks/useIsMobile/index.3de7c47a.js";
 import { C as J, g as K } from "./utils/index.6909c662.js";
 import "@mui/material/styles";
 import "@mui/material";
@@ -19,7 +19,7 @@ import "@m4l/core";
 import "@mui/x-date-pickers/AdapterDateFns";
 import "@mui/x-date-pickers";
 import "date-fns/locale/en-US";
-import "./node_modules.9690bbee.js";
+import "./node_modules.9eeccca4.js";
 import "./commonjs.e3daa2e5.js";
 export {
   J as Capitalize,

package/package.json

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

package/contexts/HostThemeContext/index.4291ba89.js

@@ -1,54 +0,0 @@
-import { createContext as H, useState as E, useMemo as v, useCallback as M, useEffect as c } from "react";
-import { CssBaseline as C } from "@mui/material";
-import { createTheme as O, StyledEngineProvider as N, ThemeProvider as S } from "@mui/material/styles";
-import { useHostTools as x, EmitEvents as r } from "@m4l/core";
-import { jsx as n, jsxs as F } from "react/jsx-runtime";
-const I = H(null);
-function b(l) {
-  const {
-    children: h,
-    hostThemeOptions: t,
-    fnComponentsOverrides: i,
-    isMicroFrontEnd: s
-  } = l, [o, m] = E(t), {
-    events_add_listener: a,
-    events_remove_listener: u,
-    events_emit: _
-  } = x(), [f, d] = E(!0), p = v(() => {
-    const e = O(o);
-    return e.components = i(e), e;
-  }, [o]), T = M((e) => {
-    setTimeout(() => {
-      m(e);
-    }, 0);
-  }, []);
-  return c(() => (s && a(r.EMMIT_EVENT_HOST_THEME_CHANGE, T), () => {
-    s && u(r.EMMIT_EVENT_HOST_THEME_CHANGE, T);
-  }), []), c(() => {
-    if (f) {
-      d(!1);
-      return;
-    }
-    s || (setTimeout(() => {
-      m(t);
-    }, 0), _(r.EMMIT_EVENT_HOST_THEME_CHANGE, t));
-  }, [t]), /* @__PURE__ */ n(I.Provider, {
-    value: {
-      hostThemeOptions: o,
-      fnComponentsOverrides: i
-    },
-    children: /* @__PURE__ */ n(N, {
-      injectFirst: !0,
-      children: /* @__PURE__ */ F(S, {
-        theme: p,
-        children: [/* @__PURE__ */ n(C, {
-          enableColorScheme: !0
-        }), h]
-      })
-    })
-  });
-}
-export {
-  I as H,
-  b as a
-};