@m4l/graphics 7.2.6 → 7.2.7

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,qDAgG3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/graphics/src/components/GlobalStyles/index.tsx"],"names":[],"mappings":"AASA;;;;;;GAMG;AACH,wBAAgB,YAAY,qDA8H3B"}

package/components/GlobalStyles/index.js

@@ -1,20 +1,54 @@
-import { jsx as e, Fragment as o } from "@emotion/react/jsx-runtime";
-import { useTheme as a } from "@mui/material/styles";
+import { jsx as o, Fragment as a } from "@emotion/react/jsx-runtime";
+import { useTheme as e } from "@mui/material/styles";
 import { GlobalStyles as i } from "@mui/material";
 import { globalRemSize as r } from "@m4l/styles";
-import { getDateRangePickerPopupGlobalStyles as s } from "./getDateRangePickerPopupGlobalStyles.js";
-function b() {
-  const t = a();
-  return /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+import { getDateRangePickerPopupGlobalStyles as n } from "./getDateRangePickerPopupGlobalStyles.js";
+function d() {
+  const t = e();
+  return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(
     i,
     {
       styles: {
-        ...s(t),
+        ...n(t),
+        // box-sizing is not inherited; apply to all elements so layout matches previous CssBaseline-like behavior
+        "*, *::before, *::after": {
+          boxSizing: "border-box"
+        },
         body: {
           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,
           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"
+          },
           ".rs-drawer .rs-drawer-dialog": {
             backgroundColor: "transparent!important"
           },
@@ -36,9 +70,6 @@ function b() {
             backgroundColor: `${t.vars.palette.default.focusOpacity}!important`,
             borderRadius: `${t.vars.size.borderRadius["r0-5"]}!important`
           },
-          "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active": {
-            color: t.vars.palette.text.primary
-          },
           "& #root": {
             width: "100%",
             height: "100%"
@@ -86,5 +117,5 @@ function b() {
   ) });
 }
 export {
-  b as GlobalStyles
+  d as GlobalStyles
 };

package/package.json

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