@m4l/graphics 0.1.29 → 0.1.30

package/contexts/HostThemeContext/index.9fe9854f.js

@@ -0,0 +1,50 @@
+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 n } from "@m4l/core";
+import { jsx as r, jsxs as F } from "react/jsx-runtime";
+const I = H(null);
+function b(h) {
+  const {
+    children: a,
+    hostThemeOptions: t,
+    fnComponentsOverrides: i,
+    isMicroFrontEnd: o
+  } = h, [s, m] = E(t), {
+    events_add_listener: f,
+    events_remove_listener: _,
+    events_emit: d
+  } = x(), [u, p] = E(!0), T = v(() => {
+    const e = O(s);
+    return e.components = i(e), e;
+  }, [s]), l = M((e) => {
+    m(e);
+  }, []);
+  return c(() => (o && f(n.EMMIT_EVENT_HOST_THEME_CHANGE, l), () => {
+    o && _(n.EMMIT_EVENT_HOST_THEME_CHANGE, l);
+  }), []), c(() => {
+    if (u) {
+      p(!1);
+      return;
+    }
+    o || (m(t), d(n.EMMIT_EVENT_HOST_THEME_CHANGE, t));
+  }, [t]), console.log("final theme", T), /* @__PURE__ */ r(I.Provider, {
+    value: {
+      hostThemeOptions: s,
+      fnComponentsOverrides: i
+    },
+    children: /* @__PURE__ */ r(N, {
+      injectFirst: !0,
+      children: /* @__PURE__ */ F(S, {
+        theme: T,
+        children: [/* @__PURE__ */ r(C, {
+          enableColorScheme: !0
+        }), a]
+      })
+    })
+  });
+}
+export {
+  I as H,
+  b as a
+};

package/contexts/{index.2f4a4040.js → index.8c4de295.js}

@@ -1,4 +1,4 @@
 import "./FormatterContext/index.92336f4c.js";
 import "./LocalesContext/index.5b555637.js";
 import "date-fns/locale/en-US";
-import "./HostThemeContext/index.a6a62c70.js";
+import "./HostThemeContext/index.9fe9854f.js";

package/hooks/index.64cf4fc4.js

@@ -0,0 +1,34 @@
+import { useRef as n, useEffect as s, useState as u, useContext as f } from "react";
+import { H as i } from "../contexts/HostThemeContext/index.9fe9854f.js";
+import "../contexts/FormatterContext/index.92336f4c.js";
+import "../contexts/LocalesContext/index.5b555637.js";
+import "@mui/material/styles";
+import "@mui/material/useMediaQuery";
+function T() {
+  const e = n(!0);
+  return s(
+    () => () => {
+      e.current = !1;
+    },
+    []
+  ), e;
+}
+function d(e) {
+  const [r, t] = u(!1), o = e || 100;
+  return s(() => (window.onscroll = () => {
+    window.pageYOffset > o ? t(!0) : t(!1);
+  }, () => {
+    window.onscroll = null;
+  }), [o]), r;
+}
+const h = () => {
+  const e = f(i);
+  if (!e)
+    throw new Error("useHostTheme context must be use inside HostThemeProvider");
+  return e;
+};
+export {
+  d as a,
+  h as b,
+  T as u
+};

package/hooks/index.d.ts

@@ -1,7 +1,7 @@
 export { useFirstRender } from './useFirstRender';
 export { useFormatter } from './useFormatter';
-export { useHostTheme } from './useHostTheme';
 export { useIsMountedRef } from './useIsMountedRef';
 export { useLocales } from './useLocales';
 export { useOffSetTop } from './useOffSetTop';
+export { useHostTheme } from './useHostTheme';
 export { useResponsive, useResponsiveDesktop } from './useResponsive';

package/hooks/useHostTheme/index.d.ts

@@ -1 +1 @@
-export declare const useHostTheme: () => import("../..").HostThemeType;
+export declare const useHostTheme: () => import("../../contexts/HostThemeContext/types").HostThemeType;

package/index.d.ts

@@ -1,17 +1,4 @@
 export * from './components';
 export * from './contexts';
 export * from './hooks';
-export type { CustomShadowOptions } from './theme/shadows';
-export type { GradientsPaletteOptions } from './theme/palette';
-export type { ChartPaletteOptions } from './theme/palette';
-export type { GridPaletteOptions } from './theme/palette';
-export { defaultThemeOptions } from './theme/defaultThemeOptions';
-export { shadows, customShadows } from './theme/shadows';
-export * from './theme/stretch';
-export { palette, type ColorSchema } from './theme/palette';
-export { getColorPresets, colorPresets, defaultPreset } from './utils/getColorPresets';
-export { getFontValue as GetFontValue } from './utils/getFontValue';
-export * from './utils/strings';
-export { default as fnComponentsOverrides } from './theme/overrides';
-export type { HostThemeType } from './types';
-export * from './utils/anchorEl';
+export * from './utils';

package/index.js

@@ -1,18 +1,13 @@
-import { P as d } from "./components/ProgressBarStyle/index.fb6fd9ed.js";
-import { F as c, a as P } from "./contexts/FormatterContext/index.92336f4c.js";
-import { L as C, a as F, g } from "./contexts/LocalesContext/index.5b555637.js";
-import { H as L, a as T } from "./contexts/HostThemeContext/index.a6a62c70.js";
+import { P as l } from "./components/ProgressBarStyle/index.fb6fd9ed.js";
+import { F as d, a as F } from "./contexts/FormatterContext/index.92336f4c.js";
+import { L as g, a as v, g as C } from "./contexts/LocalesContext/index.5b555637.js";
+import { H as L, a as R } from "./contexts/HostThemeContext/index.9fe9854f.js";
 import { u as H } from "./hooks/useFirstRender/index.1e9b02fb.js";
-import { u as O } from "./hooks/useFormatter/index.57ac8cca.js";
-import { u as k } from "./hooks/useHostTheme/index.1c8e4ad7.js";
-import { u as y, a as z } from "./hooks/index.c13bc37e.js";
-import { u as B } from "./hooks/useLocales/index.f676279e.js";
-import { u as E, a as G } from "./hooks/useResponsive/index.fc5e1b4f.js";
-import { d as M } from "./theme/defaultThemeOptions.b2cdbe59.js";
-import { c as V, s as W } from "./theme/shadows.bf8dc290.js";
-import { p as q } from "./theme/palette.2baf72f5.js";
-import { C as K, a as Q, c as U, d as X, b as Y, g as Z } from "./utils/index.7ab4fc54.js";
-import { f as $ } from "./theme/overrides.7958c0ab.js";
+import { u as S } from "./hooks/useFormatter/index.57ac8cca.js";
+import { b as y, u as z, a as w } from "./hooks/index.64cf4fc4.js";
+import { u as D } from "./hooks/useLocales/index.f676279e.js";
+import { u as M, a as N } from "./hooks/useResponsive/index.fc5e1b4f.js";
+import { C as V, b as j, c as q, a as A, d as E, g as G, i as J, o as K, p as Q, f as U, r as W, e as X, h as Y } from "./utils/index.22212127.js";
 import "@mui/material/styles";
 import "@mui/material";
 import "react/jsx-runtime";
@@ -22,34 +17,36 @@ import "@mui/x-date-pickers/AdapterDateFns";
 import "@mui/x-date-pickers";
 import "date-fns/locale/en-US";
 import "@mui/material/useMediaQuery";
-import "./theme/typography.63fff3ec.js";
-import "./vendor.3b4b3674.js";
+import "@m4l/graphics";
+import "./vendor.158914a7.js";
 export {
-  K as Capitalize,
-  c as FormatterContext,
-  P as FormatterProvider,
-  Q as GetFontValue,
+  V as Capitalize,
+  d as FormatterContext,
+  F as FormatterProvider,
   L as HostThemeContext,
-  T as HostThemeProvider,
-  C as LocalesContext,
-  F as LocalesProvider,
-  d as ProgressBarStyle,
-  U as colorPresets,
-  V as customShadows,
-  X as defaultPreset,
-  M as defaultThemeOptions,
-  $ as fnComponentsOverrides,
-  Y as getAnchorElPositionWindow,
-  Z as getColorPresets,
-  g as getLocaleFromNetwork,
-  q as palette,
-  W as shadows,
+  R as HostThemeProvider,
+  g as LocalesContext,
+  v as LocalesProvider,
+  l as ProgressBarStyle,
+  j as bluePreset,
+  q as colorPresets,
+  A as cyanPreset,
+  E as defaultPreset,
+  G as getColorPresets,
+  J as getFontValue,
+  C as getLocaleFromNetwork,
+  K as orangePreset,
+  Q as purplePreset,
+  U as pxToRem,
+  W as redPreset,
+  X as remToPx,
+  Y as responsiveFontSizes,
   H as useFirstRender,
-  O as useFormatter,
-  k as useHostTheme,
-  y as useIsMountedRef,
-  B as useLocales,
-  z as useOffSetTop,
-  E as useResponsive,
-  G as useResponsiveDesktop
+  S as useFormatter,
+  y as useHostTheme,
+  z as useIsMountedRef,
+  D as useLocales,
+  w as useOffSetTop,
+  M as useResponsive,
+  N as useResponsiveDesktop
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "license": "UNLICENSED",
   "author": "M4L Team",
   "dependencies": {
@@ -13,7 +13,7 @@
     "@mui/system": "^5.10.4",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react-toastify": "9.0.5"
   },
   "files": [
     "*"

package/utils/getColorPresets.d.ts

@@ -1,4 +1,4 @@
-import { ThemeColorPresets } from '../types';
+import { ThemeColorPresets } from '../../../m4l_styles/src/types';
 export declare const colorPresets: ({
     LightSelected: string;
     LightSelectedHover: string;

package/utils/index.22212127.js

@@ -0,0 +1,113 @@
+import { useResponsive as m } from "@m4l/graphics";
+import { useTheme as h } from "@mui/material/styles";
+import { p as s } from "../vendor.158914a7.js";
+const n = [
+  {
+    name: "default",
+    ...s.light.primary,
+    LightSelected: "#EBF9F1",
+    LightSelectedHover: "#D6F2E3",
+    DarkSelected: "#142827",
+    DarkSelectedHover: "#12342B"
+  },
+  {
+    name: "purple",
+    lighter: "#EBD6FD",
+    light: "#B985F4",
+    main: "#7635dc",
+    dark: "#431A9E",
+    darker: "#200A69",
+    contrastText: "#fff"
+  },
+  {
+    name: "cyan",
+    lighter: "#D1FFFC",
+    light: "#76F2FF",
+    main: "#1CCAFF",
+    dark: "#0E77B7",
+    darker: "#053D7A",
+    contrastText: s.light.grey[800]
+  },
+  {
+    name: "blue",
+    lighter: "#D1E9FC",
+    light: "#76B0F1",
+    main: "#2065D1",
+    dark: "#103996",
+    darker: "#061B64",
+    contrastText: "#fff"
+  },
+  {
+    name: "orange",
+    lighter: "#FEF4D4",
+    light: "#FED680",
+    main: "#fda92d",
+    dark: "#B66816",
+    darker: "#793908",
+    contrastText: s.light.grey[800]
+  },
+  {
+    name: "red",
+    lighter: "#FFE3D5",
+    light: "#FFC1AC",
+    main: "#FF3030",
+    dark: "#B71833",
+    darker: "#7A0930",
+    contrastText: "#fff"
+  }
+], u = n[0], f = n[1], F = n[2], y = n[3], k = n[4], x = n[5];
+function P(e) {
+  return {
+    purple: f,
+    cyan: F,
+    blue: y,
+    orange: k,
+    red: x,
+    default: u
+  }[e];
+}
+function D(e) {
+  return Math.round(parseFloat(e) * 16);
+}
+function a(e) {
+  return `${e / 16}rem`;
+}
+function b({ sm: e, md: t, lg: r }) {
+  return {
+    "@media (min-width:600px)": {
+      fontSize: a(e)
+    },
+    "@media (min-width:900px)": {
+      fontSize: a(t)
+    },
+    "@media (min-width:1200px)": {
+      fontSize: a(r)
+    }
+  };
+}
+function S() {
+  return [...h().breakpoints.keys].reverse().reduce((r, o) => {
+    const i = m("up", o);
+    return !r && i ? o : r;
+  }, null) || "xs";
+}
+function T(e) {
+  const t = h(), r = S(), o = t.breakpoints.up(r === "xl" ? "lg" : r), p = (e === "h1" || e === "h2" || e === "h3" || e === "h4" || e === "h5" || e === "h6") && t.typography[e][o] ? t.typography[e][o] : t.typography[e], c = D(p.fontSize), l = Number(t.typography[e].lineHeight) * c, { fontWeight: g, letterSpacing: d } = t.typography[e];
+  return { fontSize: c, lineHeight: l, fontWeight: g, letterSpacing: d };
+}
+const z = (e) => e && e[0].toUpperCase() + e.slice(1) || "";
+export {
+  z as C,
+  F as a,
+  y as b,
+  n as c,
+  u as d,
+  D as e,
+  a as f,
+  P as g,
+  b as h,
+  T as i,
+  k as o,
+  f as p,
+  x as r
+};

package/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './getColorPresets';
+export * from './getFontValue';
+export * from './strings';

package/{theme/palette.2baf72f5.js → vendor.158914a7.js}

@@ -1,4 +1,14 @@
 import { alpha as t } from "@mui/material/styles";
+import "./components/ProgressBarStyle/index.fb6fd9ed.js";
+import "./contexts/FormatterContext/index.92336f4c.js";
+import "./contexts/LocalesContext/index.5b555637.js";
+import "./contexts/HostThemeContext/index.9fe9854f.js";
+import "./hooks/useFirstRender/index.1e9b02fb.js";
+import "./hooks/useFormatter/index.57ac8cca.js";
+import "./hooks/index.64cf4fc4.js";
+import "./hooks/useLocales/index.f676279e.js";
+import "./hooks/useResponsive/index.fc5e1b4f.js";
+import "./utils/index.22212127.js";
 function r(c, l) {
   return `linear-gradient(to bottom, ${c}, ${l})`;
 }
@@ -20,13 +30,13 @@ const a = {
   main: "#1890FF",
   dark: "#0C53B7",
   darker: "#04297A"
-}, n = {
+}, o = {
   lighter: "#E9FCD4",
   light: "#AAF27F",
   main: "#54D62C",
   dark: "#229A16",
   darker: "#08660D"
-}, o = {
+}, n = {
   lighter: "#FFF7CD",
   light: "#FFE16A",
   main: "#FFC107",
@@ -60,10 +70,10 @@ const a = {
 }, s = {
   primary: r(a.light, a.main),
   info: r(i.light, i.main),
-  success: r(n.light, n.main),
-  warning: r(o.light, o.main),
+  success: r(o.light, o.main),
+  warning: r(n.light, n.main),
   error: r(d.light, d.main)
-}, f = {
+}, m = {
   violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
   blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
   green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
@@ -74,12 +84,12 @@ const a = {
   primary: { ...a, contrastText: "#fff" },
   secondary: { ...A, contrastText: "#fff" },
   info: { ...i, contrastText: "#fff" },
-  success: { ...n, contrastText: F[800] },
-  warning: { ...o, contrastText: F[800] },
+  success: { ...o, contrastText: F[800] },
+  warning: { ...n, contrastText: F[800] },
   error: { ...d, contrastText: "#fff" },
   grey: F,
   gradients: s,
-  chart: f,
+  chart: m,
   divider: F[50024],
   action: {
     hover: F[5008],
@@ -90,7 +100,7 @@ const a = {
     hoverOpacity: 0.08,
     disabledOpacity: 0.48
   }
-}, C = {
+}, R = {
   light: {
     ...e,
     mode: "light",
@@ -121,6 +131,5 @@ const a = {
   }
 };
 export {
-  F as G,
-  C as p
+  R as p
 };

package/contexts/HostThemeContext/index.a6a62c70.js

@@ -1,50 +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 o } 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, [r, m] = E(t), {
-    events_add_listener: a,
-    events_remove_listener: _,
-    events_emit: f
-  } = x(), [d, u] = E(!0), p = v(() => {
-    const e = O(r);
-    return e.components = i(e), e;
-  }, [r]), T = M((e) => {
-    m(e);
-  }, []);
-  return c(() => (s && a(o.EMMIT_EVENT_HOST_THEME_CHANGE, T), () => {
-    s && _(o.EMMIT_EVENT_HOST_THEME_CHANGE, T);
-  }), []), c(() => {
-    if (d) {
-      u(!1);
-      return;
-    }
-    s || (m(t), f(o.EMMIT_EVENT_HOST_THEME_CHANGE, t));
-  }, [t]), /* @__PURE__ */ n(I.Provider, {
-    value: {
-      hostThemeOptions: r,
-      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
-};

package/hooks/index.c13bc37e.js

@@ -1,27 +0,0 @@
-import { useRef as f, useEffect as s, useState as n } from "react";
-import "../contexts/FormatterContext/index.92336f4c.js";
-import "../contexts/HostThemeContext/index.a6a62c70.js";
-import "../contexts/LocalesContext/index.5b555637.js";
-import "@mui/material/styles";
-import "@mui/material/useMediaQuery";
-function m() {
-  const e = f(!0);
-  return s(
-    () => () => {
-      e.current = !1;
-    },
-    []
-  ), e;
-}
-function w(e) {
-  const [r, t] = n(!1), o = e || 100;
-  return s(() => (window.onscroll = () => {
-    window.pageYOffset > o ? t(!0) : t(!1);
-  }, () => {
-    window.onscroll = null;
-  }), [o]), r;
-}
-export {
-  w as a,
-  m as u
-};

package/hooks/useHostTheme/index.1c8e4ad7.js

@@ -1,11 +0,0 @@
-import { useContext as t } from "react";
-import { H as o } from "../../contexts/HostThemeContext/index.a6a62c70.js";
-const m = () => {
-  const e = t(o);
-  if (!e)
-    throw new Error("useHostTheme context must be use inside HostThemeProvider");
-  return e;
-};
-export {
-  m as u
-};

package/theme/breakpoints.d.ts

@@ -1,10 +0,0 @@
-export declare const breakpoints: {
-    values: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-    };
-};
-export default breakpoints;

package/theme/defaultThemeOptions.b2cdbe59.js

@@ -1,36 +0,0 @@
-import { alpha as a } from "@mui/material/styles";
-import { t as e } from "./typography.63fff3ec.js";
-import { p as r, G as t } from "./palette.2baf72f5.js";
-import { s as o, c as s } from "./shadows.bf8dc290.js";
-import { g as i } from "../utils/index.7ab4fc54.js";
-import { b as m } from "../vendor.3b4b3674.js";
-const f = {
-  typography: e,
-  breakpoints: m,
-  shadows: o.light,
-  customShadows: {
-    ...s.light,
-    primary: `0 8px 16px 0 ${a(i("default").main, 0.24)}`
-  },
-  palette: {
-    ...r.light,
-    primary: {
-      lighter: "#283829",
-      light: "#26372b",
-      main: "#00AB55",
-      dark: "#007B55",
-      darker: "#005249",
-      LightSelected: "#EBF9F1",
-      LightSelectedHover: "#D6F2E3",
-      DarkSelected: "#142827",
-      DarkSelectedHover: "#12342B"
-    },
-    text: { primary: t[800], secondary: t[700], disabled: t[500] },
-    secondary: {
-      main: "#34ac4e"
-    }
-  }
-};
-export {
-  f as d
-};

package/theme/defaultThemeOptions.d.ts

@@ -1,2 +0,0 @@
-import { ThemeOptions } from '@mui/material/styles';
-export declare const defaultThemeOptions: ThemeOptions;