fix(deps): update dependency @mui/material to v9 (#53)

* fix(deps): update dependency @mui/material to v9

* fix(deps): couple @mui/icons-material v9 and migrate system props

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Adam Moussa <adam@seahavenind.com>

package-lock.json

@@ -16,8 +16,8 @@
         "@fontsource/ibm-plex-sans": "^5.3.0",
         "@fontsource/ibm-plex-serif": "^5.3.0",
         "@generouted/react-router": "^1.20.2",
-        "@mui/icons-material": "^7.3.11",
+        "@mui/icons-material": "^9.3.1",
-        "@mui/material": "^7.3.11",
+        "@mui/material": "^9.3.1",
         "@mui/x-data-grid": "^9.12.0",
         "@seahaven-ap/shared": "workspace:*",
         "@tanstack/react-query": "^5.101.4",
@@ -2138,9 +2138,9 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "7.3.11",
+      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.11.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.3.1.tgz",
-      "integrity": "sha512-a7I/b/nBTdXYz2cOSlEmkQ9WWE1x8FHpqMhFPp+Y1VPFxcOw91G5ELOHARQAGSPy5V+UCgJua6K/1x70bAtQPw==",
+      "integrity": "sha512-IAyAFNQbT7hysJ9HXphiOmWJF7G1OglzHanqCgvQgH9LA2ydxtmaTBDbcBqw6euZesyShiwvpvbnYO1GY1AyXQ==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -2148,12 +2148,12 @@
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "7.3.11",
+      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.11.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.3.1.tgz",
-      "integrity": "sha512-+hz5ilwHZ3djd5es3sCErLioqe/NhZcYTsV/TNXZAMdJdb23F4xzJjqnnZdnurc3S1+ietcssRNqieOhPQLZ7Q==",
+      "integrity": "sha512-rZj5ccG7vkpV38o/l4ys+chfE9GFypmvZr9dSNBoYVCNBD9yC6KfKq1TYpEMshWbjic7GKQ8MA1LQlcpGgcq9Q==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6"
+        "@babel/runtime": "^7.29.7"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2163,7 +2163,7 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^7.3.11",
+        "@mui/material": "^9.3.1",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -2174,22 +2174,22 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "7.3.11",
+      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.11.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.3.1.tgz",
-      "integrity": "sha512-yq8bPc3LxOwKRWpcjRgDkYFmpM6aKlARfESTmOQcvLYFeJwtHte2tw6hJDrb8sk8wcvpDprHEHVaoUU0MslIkw==",
+      "integrity": "sha512-NahAEGIXqS1K0bA4th1jeFxBguS59NOcLbMA0vU+fSaPWKjtwGBGGHeTwlc9PSmzMjOZKceeFWESB8fVHr31hA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6",
+        "@babel/runtime": "^7.29.7",
-        "@mui/core-downloads-tracker": "^7.3.11",
+        "@mui/core-downloads-tracker": "^9.3.1",
-        "@mui/system": "^7.3.11",
+        "@mui/system": "^9.3.0",
-        "@mui/types": "^7.4.12",
+        "@mui/types": "^9.3.0",
-        "@mui/utils": "^7.3.11",
+        "@mui/utils": "^9.3.0",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.12",
         "clsx": "^2.1.1",
         "csstype": "^3.2.3",
         "prop-types": "^15.8.1",
-        "react-is": "^19.2.3",
+        "react-is": "^19.2.8",
         "react-transition-group": "^4.4.5"
       },
       "engines": {
@@ -2202,7 +2202,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^7.3.11",
+        "@mui/material-pigment-css": "^9.3.0",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -2223,13 +2223,13 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "7.3.11",
+      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.11.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.3.0.tgz",
-      "integrity": "sha512-9B+YKms0fRHbNrqp9tOT/DNbNnU5gyvJ1o3qAGXfq8GmZcbJnE3At9x07Zr/o0pkhzg4aDdwXVqe4+AcgtOCPA==",
+      "integrity": "sha512-ERvqk5pejf9aRnQcDILSWGtFmsEMiVxlQ4+xsVCjsEvmK0fV9BiVP/cQwAF5dwyDFbve4lTrlcgeFEecVzTNiA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6",
+        "@babel/runtime": "^7.29.7",
-        "@mui/utils": "^7.3.11",
+        "@mui/utils": "^9.3.0",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -2250,12 +2250,12 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "7.3.10",
+      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.10.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.3.0.tgz",
-      "integrity": "sha512-WxE9SiF8xskAQqGjsp0poXCkCqsoXFEsSr0HBXfApmGHR+DBnXRp+z46Vsltg4gpPM4Z96DeAQRpeAOnhNg7Ng==",
+      "integrity": "sha512-x9+KYxhjoHYZ4nioxdKnvQWdw0RScbhoZfQ4tv3Db742683U3wlYSp6zV6Us78dMFnKnyTrPTkQKyutp14gnKA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6",
+        "@babel/runtime": "^7.29.7",
         "@emotion/cache": "^11.14.0",
         "@emotion/serialize": "^1.3.3",
         "@emotion/sheet": "^1.4.0",
@@ -2284,16 +2284,16 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "7.3.11",
+      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.11.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.3.0.tgz",
-      "integrity": "sha512-7izwGWdNawAKpBKcRlx7f2gFnAAjmASBWvMcyX4YYEeLOFsbfGRbUYGInvnAcUeql3rPxI7F9Ft4oY2OLRz44g==",
+      "integrity": "sha512-0l4LqHJxZj65xSrioniGsxm7VNoGXonPo203oZjhBUvIDPeBqRTb7Mqc45Qxs6sO6WGR7WE/9cJ6lb4lkvHkjg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6",
+        "@babel/runtime": "^7.29.7",
-        "@mui/private-theming": "^7.3.11",
+        "@mui/private-theming": "^9.3.0",
-        "@mui/styled-engine": "^7.3.10",
+        "@mui/styled-engine": "^9.3.0",
-        "@mui/types": "^7.4.12",
+        "@mui/types": "^9.3.0",
-        "@mui/utils": "^7.3.11",
+        "@mui/utils": "^9.3.0",
         "clsx": "^2.1.1",
         "csstype": "^3.2.3",
         "prop-types": "^15.8.1"
@@ -2324,12 +2324,12 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.4.12",
+      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.3.0.tgz",
-      "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
+      "integrity": "sha512-2JSxyfpEFWNUB2vKs/T1BvkfyNisMHWph8bLMj8T0uHwmLl/0qfAwQkfwMT6kxLXN9uIum9AEbECXU8er3amIg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6"
+        "@babel/runtime": "^7.29.7"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -2341,17 +2341,17 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "7.3.11",
+      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.3.0.tgz",
-      "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
+      "integrity": "sha512-2HZdHwWJ6eB+7lVGSOHsByGw8jeRulT4g0NZ608Wb8Q57DE2jbNqrWPFuJsvkQQiBiTmlpvQL3i+/62zsiPrkw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6",
+        "@babel/runtime": "^7.29.7",
-        "@mui/types": "^7.4.12",
+        "@mui/types": "^9.3.0",
         "@types/prop-types": "^15.7.15",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
-        "react-is": "^19.2.3"
+        "react-is": "^19.2.8"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2409,53 +2409,6 @@
         }
       }
     },
-    "node_modules/@mui/x-data-grid/node_modules/@mui/types": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.3.0.tgz",
-      "integrity": "sha512-2JSxyfpEFWNUB2vKs/T1BvkfyNisMHWph8bLMj8T0uHwmLl/0qfAwQkfwMT6kxLXN9uIum9AEbECXU8er3amIg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-data-grid/node_modules/@mui/utils": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.3.0.tgz",
-      "integrity": "sha512-2HZdHwWJ6eB+7lVGSOHsByGw8jeRulT4g0NZ608Wb8Q57DE2jbNqrWPFuJsvkQQiBiTmlpvQL3i+/62zsiPrkw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7",
-        "@mui/types": "^9.3.0",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.8"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/x-internals": {
       "version": "9.12.0",
       "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-9.12.0.tgz",
@@ -2480,53 +2433,6 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/@mui/x-internals/node_modules/@mui/types": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.3.0.tgz",
-      "integrity": "sha512-2JSxyfpEFWNUB2vKs/T1BvkfyNisMHWph8bLMj8T0uHwmLl/0qfAwQkfwMT6kxLXN9uIum9AEbECXU8er3amIg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-internals/node_modules/@mui/utils": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.3.0.tgz",
-      "integrity": "sha512-2HZdHwWJ6eB+7lVGSOHsByGw8jeRulT4g0NZ608Wb8Q57DE2jbNqrWPFuJsvkQQiBiTmlpvQL3i+/62zsiPrkw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7",
-        "@mui/types": "^9.3.0",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.8"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/x-virtualizer": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@mui/x-virtualizer/-/x-virtualizer-0.7.0.tgz",
@@ -2550,53 +2456,6 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/@mui/x-virtualizer/node_modules/@mui/types": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.3.0.tgz",
-      "integrity": "sha512-2JSxyfpEFWNUB2vKs/T1BvkfyNisMHWph8bLMj8T0uHwmLl/0qfAwQkfwMT6kxLXN9uIum9AEbECXU8er3amIg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-virtualizer/node_modules/@mui/utils": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.3.0.tgz",
-      "integrity": "sha512-2HZdHwWJ6eB+7lVGSOHsByGw8jeRulT4g0NZ608Wb8Q57DE2jbNqrWPFuJsvkQQiBiTmlpvQL3i+/62zsiPrkw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.7",
-        "@mui/types": "^9.3.0",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.8"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

package.json

@@ -39,8 +39,8 @@
     "@fontsource/ibm-plex-sans": "^5.3.0",
     "@fontsource/ibm-plex-serif": "^5.3.0",
     "@generouted/react-router": "^1.20.2",
-    "@mui/icons-material": "^7.3.11",
+    "@mui/icons-material": "^9.3.1",
-    "@mui/material": "^7.3.11",
+    "@mui/material": "^9.3.1",
     "@mui/x-data-grid": "^9.12.0",
     "@seahaven-ap/shared": "workspace:*",
     "@tanstack/react-query": "^5.101.4",

src/components/ModuleStubPage.tsx

@@ -18,15 +18,36 @@ export function ModuleStubPage({ title, headline, body, testId }: ModuleStubProp
         py: 6,
       }}
     >
-      <Stack spacing={2} maxWidth={640}>
+      <Stack
-        <Typography color="primary.dark" fontWeight={700}>
+        spacing={2}
+        sx={{
+          maxWidth: 640,
+        }}
+      >
+        <Typography
+          sx={{
+            color: "primary.dark",
+            fontWeight: 700,
+          }}
+        >
           {title}
         </Typography>
         <Typography variant="h3" component="h1" sx={{ fontWeight: 800, color: "text.primary" }}>
           {headline}
         </Typography>
-        <Typography color="text.secondary">{body}</Typography>
+        <Typography
-        <Typography variant="caption" color="text.secondary">
+          sx={{
+            color: "text.secondary",
+          }}
+        >
+          {body}
+        </Typography>
+        <Typography
+          variant="caption"
+          sx={{
+            color: "text.secondary",
+          }}
+        >
           parity stub — interactive UI without live module backend
         </Typography>
         <Box>

src/dashboard/DashboardGrids.tsx

@@ -152,7 +152,14 @@ export function DashboardGrids() {
           </Alert>
         ) : null}
 
-        <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 2 }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: "center",
+            mb: 2,
+          }}
+        >
           <Chip label="Action" variant="outlined" size="small" />
           <Chip label="Vendor" variant="outlined" size="small" />
           <Box sx={{ flexGrow: 1 }} />

src/dashboard/PaymentProcessingGrids.tsx

@@ -143,7 +143,15 @@ export function PaymentProcessingGrids() {
           Expedited payments are currently unavailable for you due to various factors. (parity stub)
         </Alert>
 
-        <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 2 }} flexWrap="wrap">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: "center",
+            flexWrap: "wrap",
+            mb: 2,
+          }}
+        >
           <Chip label="Vendor Name" variant="outlined" size="small" />
           <Chip label="Payment Method" variant="outlined" size="small" />
           <Chip label="Bank Account" variant="outlined" size="small" />
@@ -203,8 +211,19 @@ export function PaymentProcessingGrids() {
             }}
             data-testid="payment-empty-stub"
           >
-            <Typography color="text.secondary">No Result Found</Typography>
+            <Typography
-            <Typography variant="caption" color="text.secondary">
+              sx={{
+                color: "text.secondary",
+              }}
+            >
+              No Result Found
+            </Typography>
+            <Typography
+              variant="caption"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
               parity stub
             </Typography>
           </Box>
@@ -212,7 +231,12 @@ export function PaymentProcessingGrids() {
 
         <Stack direction="row" spacing={4} sx={{ mt: 2 }} data-testid="payment-footer-totals">
           <Typography variant="body2">
-            <Box component="span" color="text.secondary">
+            <Box
+              component="span"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
               Total Due:{" "}
             </Box>
             <strong>
@@ -220,13 +244,23 @@ export function PaymentProcessingGrids() {
             </strong>
           </Typography>
           <Typography variant="body2">
-            <Box component="span" color="text.secondary">
+            <Box
+              component="span"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
               Total To Pay:{" "}
             </Box>
             <strong>$0.00</strong>
           </Typography>
           <Typography variant="body2">
-            <Box component="span" color="text.secondary">
+            <Box
+              component="span"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
               Estimated USD:{" "}
             </Box>
             <strong>$0.00</strong>

src/layout/AppShell.tsx

@@ -158,7 +158,15 @@ export function AppShell({ children }: AppShellProps): ReactElement {
             </Typography>
           </Box>
 
-          <Stack direction="row" spacing={2} alignItems="center" sx={{ ml: "auto", flexShrink: 0 }}>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{
+              alignItems: "center",
+              ml: "auto",
+              flexShrink: 0,
+            }}
+          >
             <IconButton
               color="inherit"
               aria-label="Notifications"
@@ -226,7 +234,13 @@ export function AppShell({ children }: AppShellProps): ReactElement {
             <ChevronRightIcon fontSize="small" />
           </IconButton>
         </Box>
-        <Stack spacing={0.5} alignItems="stretch" px={0.5}>
+        <Stack
+          spacing={0.5}
+          sx={{
+            alignItems: "stretch",
+            px: 0.5,
+          }}
+        >
           {navModules
             .filter((item) => !brand.hideModuleTestIds.includes(item.testId as never))
             .map((item) => {

src/pages/approvals/index.tsx

@@ -70,7 +70,14 @@ export default function ApprovalsInboxPage() {
       sortable: false,
       filterable: false,
       renderCell: (params: GridRenderCellParams<MockApprovalItem>) => (
-        <Stack direction="row" spacing={1} alignItems="center" sx={{ height: "100%" }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: "center",
+            height: "100%",
+          }}
+        >
           <Button
             size="small"
             variant="contained"
@@ -112,7 +119,13 @@ export default function ApprovalsInboxPage() {
           <Typography component="h1" variant="h1">
             Approvals
           </Typography>
-          <Typography color="text.secondary">Approver inbox of mock pending invoices.</Typography>
+          <Typography
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            Approver inbox of mock pending invoices.
+          </Typography>
         </Stack>
 
         {isLoading ? (

src/pages/invoices/[id].tsx

@@ -135,14 +135,20 @@ function InvoiceDetailView({ invoice }: InvoiceDetailViewProps) {
         <Stack
           direction={{ xs: "column", sm: "row" }}
           spacing={2}
-          justifyContent="space-between"
+          sx={{
-          alignItems={{ xs: "flex-start", sm: "center" }}
+            justifyContent: "space-between",
+            alignItems: { xs: "flex-start", sm: "center" },
+          }}
         >
           <Stack spacing={0.5}>
             <Typography component="h1" variant="h1" data-testid="invoice-detail-title">
               {invoice.invoiceNumber}
             </Typography>
-            <Typography color="text.secondary">
+            <Typography
+              sx={{
+                color: "text.secondary",
+              }}
+            >
               Status: {invoice.status.replace(/_/g, " ")} · Viewing as {user.name} ({user.role})
             </Typography>
           </Stack>
@@ -409,12 +415,23 @@ function InvoiceDetailView({ invoice }: InvoiceDetailViewProps) {
             {feedTab === "comments" ? (
               <Stack spacing={2} data-testid="invoice-comments-feed">
                 {invoice.comments.length === 0 ? (
-                  <Typography color="text.secondary">No comments yet.</Typography>
+                  <Typography
+                    sx={{
+                      color: "text.secondary",
+                    }}
+                  >
+                    No comments yet.
+                  </Typography>
                 ) : (
                   invoice.comments.map((comment) => (
                     <Box key={comment.id} data-testid={`invoice-comment-${comment.id}`}>
                       <Typography variant="subtitle2">{comment.authorName}</Typography>
-                      <Typography variant="body2" color="text.secondary">
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          color: "text.secondary",
+                        }}
+                      >
                         {new Date(comment.createdAt).toLocaleString()}
                       </Typography>
                       <Typography variant="body1" sx={{ mt: 0.5 }}>
@@ -445,12 +462,23 @@ function InvoiceDetailView({ invoice }: InvoiceDetailViewProps) {
             ) : (
               <Stack spacing={2} data-testid="invoice-activity-feed">
                 {invoice.activity.length === 0 ? (
-                  <Typography color="text.secondary">No activity yet.</Typography>
+                  <Typography
+                    sx={{
+                      color: "text.secondary",
+                    }}
+                  >
+                    No activity yet.
+                  </Typography>
                 ) : (
                   invoice.activity.map((entry) => (
                     <Box key={entry.id} data-testid={`invoice-activity-${entry.id}`}>
                       <Typography variant="subtitle2">{entry.actorName}</Typography>
-                      <Typography variant="body2" color="text.secondary">
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          color: "text.secondary",
+                        }}
+                      >
                         {new Date(entry.createdAt).toLocaleString()}
                       </Typography>
                       <Typography variant="body1" sx={{ mt: 0.5 }}>

src/pages/login.tsx

@@ -25,7 +25,13 @@ export default function LoginPage() {
           >
             {brand.wordmark}
           </Typography>
-          <Typography color="text.secondary">Sign in (mock auth — Cognito in AP-14)</Typography>
+          <Typography
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            Sign in (mock auth — Cognito in AP-14)
+          </Typography>
           <TextField label="Email" size="small" fullWidth defaultValue="adam@seahavenind.com" />
           <TextField label="Password" type="password" size="small" fullWidth defaultValue="mock" />
           <Button

src/pages/settings/index.tsx

@@ -44,7 +44,11 @@ export default function SettingsHubPage() {
           <Typography component="h1" variant="h1">
             Settings
           </Typography>
-          <Typography color="text.secondary">
+          <Typography
+            sx={{
+              color: "text.secondary",
+            }}
+          >
             Mock CRUD shells for master data used across Sea Haven AP.
           </Typography>
         </Stack>

src/settings/SettingsFormShell.tsx

@@ -93,7 +93,12 @@ function SettingsFormFields({
 
       {validationError ? <Alert severity="error">{validationError}</Alert> : null}
 
-      <Stack spacing={2} maxWidth={480}>
+      <Stack
+        spacing={2}
+        sx={{
+          maxWidth: 480,
+        }}
+      >
         {fields.map((field) => {
           if (field.type === "select") {
             return (

src/settings/SettingsListPage.tsx

@@ -46,14 +46,35 @@ export function SettingsListPage<R extends GridValidRowModel & { id: string }>({
 
   return (
     <Stack spacing={2}>
-      <Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={2}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+        }}
+      >
         <Stack spacing={0.5}>
           <Typography component="h1" variant="h1">
             {title}
           </Typography>
-          {description ? <Typography color="text.secondary">{description}</Typography> : null}
+          {description ? (
+            <Typography
+              sx={{
+                color: "text.secondary",
+              }}
+            >
+              {description}
+            </Typography>
+          ) : null}
         </Stack>
-        <Stack direction="row" spacing={1} alignItems="center">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: "center",
+          }}
+        >
           {actions}
           <Button variant="contained" onClick={onNew} data-testid={`${testId}-new`}>
             New