@m4l/graphics 7.2.11 → 7.2.12

package/components/GlobalStyles/getInputAutofillGlobalStyles.d.ts

@@ -0,0 +1,91 @@
+import { ExtendedTheme } from './getDateRangePickerPopupGlobalStyles';
+/**
+ * Data attribute for Storybook / Chromatic when real `:-webkit-autofill` cannot be triggered.
+ * Must stay in sync with the `:-webkit-autofill` rules in this file.
+ */
+export declare const M4L_CHROMATIC_AUTOFILL = "data-m4l-chromatic-autofill";
+/**
+ * Keyframes used to force a repaint so WebKit reapplies `WebkitTextFillColor` after autofill.
+ */
+export declare function getInputAutofillKeyframeStyles(theme: ExtendedTheme): {
+    '@keyframes m4lAutofillTextRepaint': {
+        '0%, 100%': {
+            color: string;
+        };
+    };
+};
+/**
+ * Nested selectors applied under `body` in `GlobalStyles` for native inputs/textareas:
+ * browser autofill overrides, optional Chromatic simulation, and consistent text selection.
+ */
+export declare function getInputAutofillBodyNestedStyles(theme: ExtendedTheme): {
+    [x: string]: {
+        WebkitTextFillColor: string;
+        color: string;
+        caretColor: string;
+    } | {
+        filter: string;
+        boxShadow: string;
+        WebkitBoxShadow: string;
+        color: string;
+        caretColor: string;
+        transition: string;
+        WebkitTextFillColor?: undefined;
+        backgroundColor?: undefined;
+    } | {
+        WebkitTextFillColor: string;
+        color: string;
+        caretColor: string;
+        boxShadow: string;
+        WebkitBoxShadow: string;
+        transition: string;
+        filter?: undefined;
+        backgroundColor?: undefined;
+    } | {
+        backgroundColor: string;
+        color: string;
+        WebkitTextFillColor: string;
+        filter?: undefined;
+        boxShadow?: undefined;
+        WebkitBoxShadow?: undefined;
+        caretColor?: undefined;
+        transition?: undefined;
+    };
+    '& input:-moz-autofill, & input:-moz-autofill-preview, & textarea:-moz-autofill, & textarea:-moz-autofill-preview': {
+        filter: string;
+        boxShadow: string;
+        WebkitBoxShadow: string;
+        color: string;
+        caretColor: string;
+        transition: string;
+    };
+    '& input:autofill, & input:autofill:hover, & input:autofill:focus, & input:autofill:active, & textarea:autofill, & textarea:autofill:hover, & textarea:autofill:focus, & textarea:autofill:active': {
+        WebkitTextFillColor: string;
+        color: string;
+        caretColor: string;
+        boxShadow: string;
+        WebkitBoxShadow: string;
+        transition: string;
+    };
+    "& input[data-m4l-chromatic-autofill=\"true\"], & textarea[data-m4l-chromatic-autofill=\"true\"]": {
+        WebkitTextFillColor: string;
+        color: string;
+        caretColor: string;
+        WebkitBoxShadow: string;
+        boxShadow: string;
+        transition: string;
+        borderRadius: string;
+        animation: string;
+    };
+    "& input[data-m4l-chromatic-autofill=\"true\"]::first-line, & textarea[data-m4l-chromatic-autofill=\"true\"]::first-line": {
+        WebkitTextFillColor: string;
+        color: string;
+        caretColor: string;
+    };
+    '& input::selection, & textarea::selection': {
+        backgroundColor: string;
+        color: string;
+        WebkitTextFillColor: string;
+    };
+};
+//# sourceMappingURL=getInputAutofillGlobalStyles.d.ts.map

package/components/GlobalStyles/getInputAutofillGlobalStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInputAutofillGlobalStyles.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/components/GlobalStyles/getInputAutofillGlobalStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAE3E;;;GAGG;AACH,eAAO,MAAM,sBAAsB,gCAAgC,CAAC;AA0BpE;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,aAAa;;;;;;EAQlE;AAED;;;GAGG;AACH,wBAAgB,gCAAgC,CAAC,KAAK,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DpE"}

package/components/GlobalStyles/getInputAutofillGlobalStyles.js

@@ -0,0 +1,77 @@
+const o = "data-m4l-chromatic-autofill", a = "background-color 5000s ease-in-out 0s", f = [
+  "& input:-webkit-autofill",
+  "& input:-webkit-autofill:hover",
+  "& input:-webkit-autofill:focus",
+  "& input:-webkit-autofill:active",
+  "& textarea:-webkit-autofill",
+  "& textarea:-webkit-autofill:hover",
+  "& textarea:-webkit-autofill:focus",
+  "& textarea:-webkit-autofill:active"
+].join(", "), p = [
+  "& input:-webkit-autofill::first-line",
+  "& input:-webkit-autofill:hover::first-line",
+  "& input:-webkit-autofill:focus::first-line",
+  "& input:-webkit-autofill:active::first-line",
+  "& textarea:-webkit-autofill::first-line",
+  "& textarea:-webkit-autofill:hover::first-line",
+  "& textarea:-webkit-autofill:focus::first-line",
+  "& textarea:-webkit-autofill:active::first-line"
+].join(", ");
+function c(e) {
+  return {
+    "@keyframes m4lAutofillTextRepaint": {
+      "0%, 100%": {
+        color: e.vars.palette.text.primary
+      }
+    }
+  };
+}
+function x(e) {
+  const t = e.vars.palette.text.primary, i = "#20202000", n = e.vars.size.borderRadius["r1-5"], l = {
+    WebkitTextFillColor: `${t} !important`,
+    color: `${t} !important`,
+    caretColor: t,
+    // Solid inset fill matches the app surface; `transparent` fails against Chrome's autofill paint.
+    WebkitBoxShadow: `0 0 0 1000px ${i} inset !important`,
+    boxShadow: `0 0 0 1000px ${i} inset !important`,
+    transition: a,
+    borderRadius: n,
+    animation: "m4lAutofillTextRepaint 0.0001s forwards"
+  }, u = `& input[${o}="true"], & textarea[${o}="true"]`, s = `& input[${o}="true"]::first-line, & textarea[${o}="true"]::first-line`, r = {
+    WebkitTextFillColor: `${t} !important`,
+    color: `${t} !important`,
+    caretColor: t
+  };
+  return {
+    [f]: l,
+    [p]: r,
+    "& input:-moz-autofill, & input:-moz-autofill-preview, & textarea:-moz-autofill, & textarea:-moz-autofill-preview": {
+      filter: "none",
+      boxShadow: `0 0 0 1000px ${i} inset !important`,
+      WebkitBoxShadow: `0 0 0 1000px ${i} inset !important`,
+      color: `${t} !important`,
+      caretColor: t,
+      transition: a
+    },
+    "& input:autofill, & input:autofill:hover, & input:autofill:focus, & input:autofill:active, & textarea:autofill, & textarea:autofill:hover, & textarea:autofill:focus, & textarea:autofill:active": {
+      WebkitTextFillColor: `${t} !important`,
+      color: `${t} !important`,
+      caretColor: t,
+      boxShadow: `0 0 0 1000px ${i} inset !important`,
+      WebkitBoxShadow: `0 0 0 1000px ${i} inset !important`,
+      transition: a
+    },
+    [u]: l,
+    [s]: r,
+    "& input::selection, & textarea::selection": {
+      backgroundColor: e.vars.palette.primary.selectedOpacity,
+      color: t,
+      WebkitTextFillColor: t
+    }
+  };
+}
+export {
+  o as M4L_CHROMATIC_AUTOFILL,
+  x as getInputAutofillBodyNestedStyles,
+  c as getInputAutofillKeyframeStyles
+};

package/components/GlobalStyles/getScrollbarHoverRevealGlobalStyles.d.ts

@@ -0,0 +1,56 @@
+import { ExtendedTheme } from './getDateRangePickerPopupGlobalStyles';
+/**
+ * Hybrid scrollbar styling for a **consistent gutter/thumb on Chromium/WebKit** (Chrome, Edge, Opera,
+ * Safari) via `::-webkit-scrollbar*` pseudo-elements, plus **Firefox-only** `scrollbar-color` /
+ * `scrollbar-width` inside `@supports (-moz-appearance: none)` so standard scrollbar properties never
+ * apply on Blink (mixing them with `::-webkit-scrollbar` breaks sizing).
+ *
+ * **Hide / reveal (WebKit):** The scrollbar gutter stays sized (`::-webkit-scrollbar` width/height).
+ * `--m4l-scrollbar-opacity` is `0` on `*` and `1` on `*:hover` / `*:focus-within`. The thumb uses
+ * `color-mix(in srgb, …)` with that variable so the thumb is fully transparent at `0` and uses the
+ * theme active color at `1`. This module does **not** add `@property`, `transition`, or
+ * `prefers-reduced-motion` rules; changes are effectively **instant** (a fade could be added by
+ * registering the custom property and transitioning it on `*`, but that is out of scope here).
+ *
+ * **Geometry (tokens):** `baseSpacings['sp1-5']` (thumb column), `sp0-5` (inset via transparent
+ * thumb border), `borderRadius['r1']`. Gutter = `calc(sp1-5 + sp0-5 + sp0-5)` on WebKit when
+ * visible. Firefox uses `scrollbar-width: none` by default and **`auto`** (platform default width)
+ * plus `scrollbar-color` when the container is hovered or has `:focus-within`; thumb radius is not
+ * controllable there.
+ */
+export declare function getScrollbarHoverRevealGlobalStyles(theme: ExtendedTheme): {
+    '*': {
+        '--m4l-scrollbar-opacity': number;
+    };
+    '*:hover, *:focus-within': {
+        '--m4l-scrollbar-opacity': number;
+    };
+    '@supports (-moz-appearance: none)': {
+        '*': {
+            scrollbarWidth: string;
+            scrollbarColor: string;
+        };
+        '*:hover, *:focus-within': {
+            scrollbarWidth: string;
+            scrollbarColor: string;
+        };
+    };
+    '*::-webkit-scrollbar': {
+        width: string;
+        height: string;
+    };
+    '*::-webkit-scrollbar-track': {
+        backgroundColor: string;
+    };
+    '*::-webkit-scrollbar-thumb': {
+        backgroundColor: string;
+        backgroundClip: string;
+        border: string;
+        borderRadius: string;
+        WebkitBorderRadius: string;
+    };
+    '*::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};
+//# sourceMappingURL=getScrollbarHoverRevealGlobalStyles.d.ts.map

package/components/GlobalStyles/getScrollbarHoverRevealGlobalStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScrollbarHoverRevealGlobalStyles.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/components/GlobalStyles/getScrollbarHoverRevealGlobalStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mCAAmC,CAAC,KAAK,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDvE"}

package/components/GlobalStyles/getScrollbarHoverRevealGlobalStyles.js

@@ -0,0 +1,44 @@
+function b(r) {
+  const a = `${r.vars.palette.default.active}`, o = "transparent", c = r.vars.size.baseSpacings["sp1-5"], t = r.vars.size.baseSpacings["sp0-5"], s = r.vars.size.borderRadius.r1, l = `calc(${c} + ${t} + ${t})`, i = `color-mix(in srgb, ${a} calc(var(--m4l-scrollbar-opacity, 0) * 100%), transparent)`;
+  return {
+    // Drive opacity from the scroll container; pseudos inherit the computed value via color-mix.
+    "*": {
+      "--m4l-scrollbar-opacity": 0
+    },
+    "*:hover, *:focus-within": {
+      "--m4l-scrollbar-opacity": 1
+    },
+    // Firefox — do not expose scrollbar-* on global `*` outside this block (avoids Chromium conflicts).
+    "@supports (-moz-appearance: none)": {
+      "*": {
+        scrollbarWidth: "none",
+        scrollbarColor: `${a} ${o}`
+      },
+      "*:hover, *:focus-within": {
+        scrollbarWidth: "auto",
+        scrollbarColor: `${a} ${o}`
+      }
+    },
+    // WebKit / Blink — fixed gutter; thumb alpha follows --m4l-scrollbar-opacity (see file doc).
+    "*::-webkit-scrollbar": {
+      width: `${l} !important`,
+      height: `${l} !important`
+    },
+    "*::-webkit-scrollbar-track": {
+      backgroundColor: o
+    },
+    "*::-webkit-scrollbar-thumb": {
+      backgroundColor: i,
+      backgroundClip: "padding-box",
+      border: `${t} solid transparent`,
+      borderRadius: s,
+      WebkitBorderRadius: s
+    },
+    "*::-webkit-scrollbar-corner": {
+      backgroundColor: o
+    }
+  };
+}
+export {
+  b as getScrollbarHoverRevealGlobalStyles
+};

package/components/GlobalStyles/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Estilos globales
+ * Application-wide global styles (MUI `GlobalStyles`).
  * @author Juan Escobar - automatic
  * @createdAt 2024-10-06 20:07:17 - automatic
  * @updatedAt 2024-10-06 20:07:18 - automatic

package/components/GlobalStyles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/components/GlobalStyles/index.tsx"],"names":[],"mappings":"AASA;;;;;;GAMG;AACH,wBAAgB,YAAY,qDA8H3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/components/GlobalStyles/index.tsx"],"names":[],"mappings":"AAcA;;;;;;GAMG;AACH,wBAAgB,YAAY,qDAwF3B"}

package/components/GlobalStyles/index.js

@@ -1,75 +1,43 @@
-import { jsx as o, Fragment as a } from "@emotion/react/jsx-runtime";
-import { useTheme as e } from "@mui/material/styles";
+import { jsx as t, Fragment as r } from "@emotion/react/jsx-runtime";
+import { useTheme as a } from "@mui/material/styles";
 import { GlobalStyles as i } from "@mui/material";
-import { globalRemSize as r } from "@m4l/styles";
+import { globalRemSize as o } from "@m4l/styles";
 import { getDateRangePickerPopupGlobalStyles as n } from "./getDateRangePickerPopupGlobalStyles.js";
-function d() {
-  const t = e();
-  return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(
+import { getScrollbarHoverRevealGlobalStyles as l } from "./getScrollbarHoverRevealGlobalStyles.js";
+import { getInputAutofillBodyNestedStyles as p, getInputAutofillKeyframeStyles as s } from "./getInputAutofillGlobalStyles.js";
+function x() {
+  const e = a();
+  return /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(
     i,
     {
       styles: {
-        ...n(t),
+        ...n(e),
+        ...l(e),
+        ...s(e),
         // box-sizing is not inherited; apply to all elements so layout matches previous CssBaseline-like behavior
         "*, *::before, *::after": {
           boxSizing: "border-box"
         },
         body: {
+          ...p(e),
           fontFamily: 'Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, Open Sans',
-          fontSize: t.typography.body1.fontSize,
-          lineHeight: t.typography.body1.lineHeight,
-          color: t.vars.palette.text.primary,
+          fontSize: e.typography.body1.fontSize,
+          lineHeight: e.typography.body1.lineHeight,
+          color: e.vars.palette.text.primary,
           textRendering: "geometricPrecision",
           width: "100%",
           height: "100vh",
-          backgroundColor: t.vars.palette.background.default,
-          // Autofill: transparent background so it blends with wrapper (Chrome/Safari/Firefox)
-          "& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active": {
-            WebkitTextFillColor: `${t.vars.palette.text.primary} !important`,
-            color: `${t.vars.palette.text.primary} !important`,
-            WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
-            boxShadow: "0 0 0 1000px transparent inset !important",
-            transition: "background-color 5000s ease-in-out 0s",
-            borderRadius: t.vars.size.borderRadius["r1-5"],
-            animation: "autofillTextRepaint 0.0001s forwards"
-          },
-          // Firefox: transparent so wrapper background shows through
-          "& input:-moz-autofill, & input:-moz-autofill-preview": {
-            filter: "none",
-            boxShadow: "0 0 0 1000px transparent inset !important",
-            WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
-            color: `${t.vars.palette.text.primary} !important`,
-            transition: "background-color 5000s ease-in-out 0s"
-          },
-          // Standard :autofill – transparent
-          "& input:autofill, & input:autofill:hover, & input:autofill:focus, & input:autofill:active": {
-            WebkitTextFillColor: `${t.vars.palette.text.primary} !important`,
-            color: `${t.vars.palette.text.primary} !important`,
-            boxShadow: "0 0 0 1000px transparent inset !important",
-            WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
-            transition: "background-color 5000s ease-in-out 0s"
-          },
+          backgroundColor: e.vars.palette.background.default,
           ".rs-drawer .rs-drawer-dialog": {
             backgroundColor: "transparent!important"
           },
           ".rs-picker-popup": {
-            zIndex: t.vars.zIndex.modal || 1300
+            zIndex: e.vars.zIndex.modal || 1300
           },
           "#rootIsolation": {
             width: "100vw",
             height: "100vh"
           },
-          "*::-webkit-scrollbar": {
-            width: `${t.vars.size.baseSpacings.sp1}!important`,
-            height: `${t.vars.size.baseSpacings.sp1}!important`
-          },
-          "*::-webkit-scrollbar-track": {
-            backgroundColor: "transparent"
-          },
-          "*::-webkit-scrollbar-thumb": {
-            backgroundColor: `${t.vars.palette.default.focusOpacity}!important`,
-            borderRadius: `${t.vars.size.borderRadius["r0-5"]}!important`
-          },
           "& #root": {
             width: "100%",
             height: "100%"
@@ -83,9 +51,9 @@ function d() {
             height: 2,
             width: "100%",
             position: "fixed",
-            zIndex: t.zIndex.snackbar,
-            backgroundColor: t.vars.palette.primary.main,
-            boxShadow: `0 0 2px ${t.vars.palette.primary.main}`
+            zIndex: e.zIndex.snackbar,
+            backgroundColor: e.vars.palette.primary.main,
+            boxShadow: `0 0 2px ${e.vars.palette.primary.main}`
           },
           "& .peg": {
             right: 0,
@@ -95,13 +63,13 @@ function d() {
             display: "block",
             position: "absolute",
             transform: "rotate(3deg) translate(0px, -4px)",
-            boxShadow: `0 0 10px ${t.vars.palette.primary.main}, 0 0 5px ${t.vars.palette.primary.main}`
+            boxShadow: `0 0 10px ${e.vars.palette.primary.main}, 0 0 5px ${e.vars.palette.primary.main}`
           }
         },
         "& html": {
-          fontSize: r.desktop,
-          [t.breakpoints.down("sm")]: {
-            fontSize: r.mobile
+          fontSize: o.desktop,
+          [e.breakpoints.down("sm")]: {
+            fontSize: o.mobile
           }
         },
         // Global styles for native tags html
@@ -117,5 +85,5 @@ function d() {
   ) });
 }
 export {
-  d as GlobalStyles
+  x as GlobalStyles
 };

package/components/index.d.ts

@@ -1,2 +1,3 @@
 export { GlobalStyles } from './GlobalStyles';
+export { M4L_CHROMATIC_AUTOFILL, getInputAutofillBodyNestedStyles, getInputAutofillKeyframeStyles, } from './GlobalStyles/getInputAutofillGlobalStyles';
 //# sourceMappingURL=index.d.ts.map

package/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/graphics/src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/graphics/src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EACL,sBAAsB,EACtB,gCAAgC,EAChC,8BAA8B,GAC/B,MAAM,6CAA6C,CAAC"}

package/contexts/HostThemeContext/index.js

@@ -24,7 +24,7 @@ function F(c) {
     return r.components = i(r), r;
   }, [m]);
   return /* @__PURE__ */ l(v, { theme: h, defaultMode: e.palette.mode, children: [
-    s ? /* @__PURE__ */ t(u, {}) : null,
+    s ? null : /* @__PURE__ */ t(u, {}),
     /* @__PURE__ */ t(
       T.Provider,
       {
@@ -33,7 +33,7 @@ function F(c) {
           fnComponentsOverrides: i
         },
         children: /* @__PURE__ */ l(C, { injectFirst: !0, children: [
-          s ? /* @__PURE__ */ t(f, { enableColorScheme: !0 }) : null,
+          s ? null : /* @__PURE__ */ t(f, { enableColorScheme: !0 }),
           d
         ] })
       }

package/index.js

@@ -1,79 +1,83 @@
-import { GlobalStyles as r } from "./components/GlobalStyles/index.js";
-import { getLocaleFromNetwork as p } from "./contexts/LocalesContext/helper.js";
-import { FormatterContext as n, FormatterProvider as s } from "./contexts/FormatterContext/index.js";
-import { AppearanceComponentContext as f, AppearanceComponentProvider as i } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
-import { createAppearanceComponentStore as C } from "./contexts/AppearanceComponentContext/AppearanceComponentStore.js";
-import { useAppearanceComponentStore as S } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
-import { LocalesContext as c, LocalesProvider as v } from "./contexts/LocalesContext/index.js";
-import { ResponsiveContainerContext as l, ResponsiveContainerProvider as d } from "./contexts/ResponsiveContainerContext/index.js";
-import { HostThemeContext as g, HostThemeProvider as P } from "./contexts/HostThemeContext/index.js";
-import { DeviceTypeContext as b, DeviceTypeProvider as y } from "./contexts/DeviceTypeContext/index.js";
-import { KEY_LOCAL_STORAGE_THEME_SETTINGS as k, defaultThemeSettings as E } from "./contexts/ThemeSettingsContext/constants.js";
-import { ThemeSettingsContext as M, ThemeSettingsProvider as H } from "./contexts/ThemeSettingsContext/ThemeSettingsContext.js";
-import { WithAppearanceContext as O } from "./decorators/WithAppearanceContext/WithAppearanceContext.js";
-import { MFIsolationAppStorybook as _ } from "./decorators/MFIsolationAppStorybook/MFIsolationAppStorybook.js";
-import { MFAppStorybook as z } from "./decorators/MFIsolationAppStorybook/subcomponents/MFAppStorybook/MFAppStorybook.js";
-import { WithStorybookThemeContext as G, createWithStorybookThemeContext as N } from "./decorators/WithStorybookThemeContext/WithStorybookThemeContext.js";
-import { useFirstRender as U } from "./hooks/useFirstRender/index.js";
-import { useComponentSize as j } from "./hooks/useComponentSize/useComponentSize.js";
-import { useFormatter as B } from "./hooks/useFormatter/index.js";
-import { useIsMountedRef as Q } from "./hooks/useIsMountedRef/index.js";
-import { useLocales as X } from "./hooks/useLocales/index.js";
-import { useResponsiveContainerStore as $ } from "./hooks/useResponsiveContainer/index.js";
-import { useUserAgent as oe } from "./hooks/useUserAgent/index.js";
-import { useIsMobile as te } from "./hooks/useIsMobile/index.js";
-import { useOffSetTop as me } from "./hooks/useOffSetTop.js";
-import { useHostTheme as se } from "./hooks/useHostTheme/index.js";
-import { useResizeObserver as fe } from "./hooks/useResizeObserver/index.js";
-import { useResponsiveDesktop as ae } from "./hooks/useResponsive/index.js";
-import { useThemeSettingsStore as ue } from "./hooks/useThemSettingsStore/index.js";
-import { usePaginate as Te } from "./hooks/usePaginate/index.js";
-import { useRows as ve } from "./hooks/useRows/index.js";
-import { capitalize as le } from "./utils/strings.js";
-import { getAnchorElPositionWindow as Ae } from "./utils/anchorEl.js";
-import { getContrastTextColor as Pe } from "./utils/getContrastTextColor/getContrastTextColor.js";
+import { GlobalStyles as t } from "./components/GlobalStyles/index.js";
+import { M4L_CHROMATIC_AUTOFILL as p, getInputAutofillBodyNestedStyles as m, getInputAutofillKeyframeStyles as n } from "./components/GlobalStyles/getInputAutofillGlobalStyles.js";
+import { getLocaleFromNetwork as x } from "./contexts/LocalesContext/helper.js";
+import { FormatterContext as i, FormatterProvider as a } from "./contexts/FormatterContext/index.js";
+import { AppearanceComponentContext as u, AppearanceComponentProvider as S } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
+import { createAppearanceComponentStore as T } from "./contexts/AppearanceComponentContext/AppearanceComponentStore.js";
+import { useAppearanceComponentStore as A } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
+import { LocalesContext as d, LocalesProvider as h } from "./contexts/LocalesContext/index.js";
+import { ResponsiveContainerContext as y, ResponsiveContainerProvider as R } from "./contexts/ResponsiveContainerContext/index.js";
+import { HostThemeContext as P, HostThemeProvider as F } from "./contexts/HostThemeContext/index.js";
+import { DeviceTypeContext as b, DeviceTypeProvider as M } from "./contexts/DeviceTypeContext/index.js";
+import { KEY_LOCAL_STORAGE_THEME_SETTINGS as E, defaultThemeSettings as O } from "./contexts/ThemeSettingsContext/constants.js";
+import { ThemeSettingsContext as H, ThemeSettingsProvider as W } from "./contexts/ThemeSettingsContext/ThemeSettingsContext.js";
+import { WithAppearanceContext as z } from "./decorators/WithAppearanceContext/WithAppearanceContext.js";
+import { MFIsolationAppStorybook as G } from "./decorators/MFIsolationAppStorybook/MFIsolationAppStorybook.js";
+import { MFAppStorybook as K } from "./decorators/MFIsolationAppStorybook/subcomponents/MFAppStorybook/MFAppStorybook.js";
+import { WithStorybookThemeContext as B, createWithStorybookThemeContext as Y } from "./decorators/WithStorybookThemeContext/WithStorybookThemeContext.js";
+import { useFirstRender as q } from "./hooks/useFirstRender/index.js";
+import { useComponentSize as Q } from "./hooks/useComponentSize/useComponentSize.js";
+import { useFormatter as X } from "./hooks/useFormatter/index.js";
+import { useIsMountedRef as $ } from "./hooks/useIsMountedRef/index.js";
+import { useLocales as oe } from "./hooks/useLocales/index.js";
+import { useResponsiveContainerStore as re } from "./hooks/useResponsiveContainer/index.js";
+import { useUserAgent as me } from "./hooks/useUserAgent/index.js";
+import { useIsMobile as se } from "./hooks/useIsMobile/index.js";
+import { useOffSetTop as fe } from "./hooks/useOffSetTop.js";
+import { useHostTheme as ae } from "./hooks/useHostTheme/index.js";
+import { useResizeObserver as ue } from "./hooks/useResizeObserver/index.js";
+import { useResponsiveDesktop as le } from "./hooks/useResponsive/index.js";
+import { useThemeSettingsStore as ce } from "./hooks/useThemSettingsStore/index.js";
+import { usePaginate as ve } from "./hooks/usePaginate/index.js";
+import { useRows as he } from "./hooks/useRows/index.js";
+import { capitalize as ye } from "./utils/strings.js";
+import { getAnchorElPositionWindow as Le } from "./utils/anchorEl.js";
+import { getContrastTextColor as Fe } from "./utils/getContrastTextColor/getContrastTextColor.js";
 export {
-  f as AppearanceComponentContext,
-  i as AppearanceComponentProvider,
+  u as AppearanceComponentContext,
+  S as AppearanceComponentProvider,
   b as DeviceTypeContext,
-  y as DeviceTypeProvider,
-  n as FormatterContext,
-  s as FormatterProvider,
-  r as GlobalStyles,
-  g as HostThemeContext,
-  P as HostThemeProvider,
-  k as KEY_LOCAL_STORAGE_THEME_SETTINGS,
-  c as LocalesContext,
-  v as LocalesProvider,
-  z as MFAppStorybook,
-  _ as MFIsolationAppStorybook,
-  l as ResponsiveContainerContext,
-  d as ResponsiveContainerProvider,
-  M as ThemeSettingsContext,
-  H as ThemeSettingsProvider,
-  O as WithAppearanceContext,
-  G as WithStorybookThemeContext,
-  le as capitalize,
-  C as createAppearanceComponentStore,
-  N as createWithStorybookThemeContext,
-  E as defaultThemeSettings,
-  Ae as getAnchorElPositionWindow,
-  Pe as getContrastTextColor,
-  p as getLocaleFromNetwork,
-  S as useAppearanceComponentStore,
-  j as useComponentSize,
-  U as useFirstRender,
-  B as useFormatter,
-  se as useHostTheme,
-  te as useIsMobile,
-  Q as useIsMountedRef,
-  X as useLocales,
-  me as useOffSetTop,
-  Te as usePaginate,
-  fe as useResizeObserver,
-  $ as useResponsiveContainerStore,
-  ae as useResponsiveDesktop,
-  ve as useRows,
-  ue as useThemeSettingsStore,
-  oe as useUserAgent
+  M as DeviceTypeProvider,
+  i as FormatterContext,
+  a as FormatterProvider,
+  t as GlobalStyles,
+  P as HostThemeContext,
+  F as HostThemeProvider,
+  E as KEY_LOCAL_STORAGE_THEME_SETTINGS,
+  d as LocalesContext,
+  h as LocalesProvider,
+  p as M4L_CHROMATIC_AUTOFILL,
+  K as MFAppStorybook,
+  G as MFIsolationAppStorybook,
+  y as ResponsiveContainerContext,
+  R as ResponsiveContainerProvider,
+  H as ThemeSettingsContext,
+  W as ThemeSettingsProvider,
+  z as WithAppearanceContext,
+  B as WithStorybookThemeContext,
+  ye as capitalize,
+  T as createAppearanceComponentStore,
+  Y as createWithStorybookThemeContext,
+  O as defaultThemeSettings,
+  Le as getAnchorElPositionWindow,
+  Fe as getContrastTextColor,
+  m as getInputAutofillBodyNestedStyles,
+  n as getInputAutofillKeyframeStyles,
+  x as getLocaleFromNetwork,
+  A as useAppearanceComponentStore,
+  Q as useComponentSize,
+  q as useFirstRender,
+  X as useFormatter,
+  ae as useHostTheme,
+  se as useIsMobile,
+  $ as useIsMountedRef,
+  oe as useLocales,
+  fe as useOffSetTop,
+  ve as usePaginate,
+  ue as useResizeObserver,
+  re as useResponsiveContainerStore,
+  le as useResponsiveDesktop,
+  he as useRows,
+  ce as useThemeSettingsStore,
+  me as useUserAgent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "7.2.11",
+  "version": "7.2.12",
   "publishConfig": {
     "access": "public"
   },

package/test/setup.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=setup.d.ts.map

package/test/setup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../../../../packages/graphics/src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/test/utils.d.ts

@@ -1,9 +0,0 @@
-import { cleanup, screen, renderHook } from '@testing-library/react';
-import { default as React, act } from 'react';
-/**
- * customRender
- */
-declare const customRender: (ui: React.ReactElement, options?: {}) => import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
-export { default as userEvent } from '@testing-library/user-event';
-export { customRender as render, renderHook, screen, cleanup, act };
-//# sourceMappingURL=utils.d.ts.map

package/test/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../packages/graphics/src/test/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAU,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAgC,MAAM,wBAAwB,CAAC;AAClF,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAWnC;;GAEG;AACH,QAAA,MAAM,YAAY,GAAI,IAAI,KAAK,CAAC,YAAY,EAAE,YAAY,iIASzD,CAAC;AACF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC"}