chore(deps): upgrade MUI to v9.0.1

- @mui /material: ^7.3.5 -> ^9.0.1
- @mui /icons-material: ^7.3.5 -> ^9.0.1
- Ran `npx @mui /codemod@latest v9.0.0/system-props src/`
(codemod output: 2 files transformed,
src/components/EmotionsView.tsx and
src/components/emotions/NowPlayingStrip.tsx).
Note: the umbrella `v9.0.0` transform does not exist in
@mui /codemod@9.0.1 - only the `v9.0.0/system-props` sub-rule
is shipped.
- Lockfile regenerated from scratch (no --legacy-peer-deps needed;
the SDK's transitive @mui /material@7.3.11 dedupe is harmless).
- Manual fix in src/theme.ts: MUI v9 removed the variant-color
combination slots (`outlinedPrimary`, `containedPrimary`, etc.)
from `MuiButton`'s `styleOverrides`. Migrated `outlinedPrimary`
to the new `variants` API
(`{ props: { variant: 'outlined', color: 'primary' }, style: ... }`).

Build verified locally with `npm run build`. Push goes to the
`chore/upgrade-mui-9` branch so the user can validate the deployed
Space before merging to `main`.

Co-authored-by: Cursor <cursoragent@cursor.com>

package-lock.json

@@ -10,8 +10,8 @@
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@mui/icons-material": "^7.3.5",
-        "@mui/material": "^7.3.5",
+        "@mui/icons-material": "^9.0.1",
+        "@mui/material": "^9.0.1",
         "@pollen-robotics/reachy-mini-sdk": "1.8.0-rc1-main.fd4354c",
         "react": "^19.2.5",
         "react-dom": "^19.2.5"
@@ -808,6 +808,265 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.0.1.tgz",
+      "integrity": "sha512-GzamIIhZ1bH77dq7eKaeyRgJdkypsxin4jBFq2EMs4lBWRR0LFO1CSVMsoebn/VvjcNrnrOrjy48MkrkQUK2iw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.0.1.tgz",
+      "integrity": "sha512-5PRpQjVLTNLyV/2J9J53Yz4R0tVbodG0BQDN2zQI1QBG1OPYM25ar+4N20eyFOfJT6zKglLzsnU70+zdVLaTkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^9.0.1",
+        "@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/material": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.0.1.tgz",
+      "integrity": "sha512-voyCpeUxcSWLN7KPZuq0pGCIt726T9K6kiVM3XUcywZDAlZSarLHaUxJVQpospbjjOzN53hwyjo8s6KoWl6utw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/core-downloads-tracker": "^9.0.1",
+        "@mui/system": "^9.0.1",
+        "@mui/types": "^9.0.0",
+        "@mui/utils": "^9.0.1",
+        "@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.4",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^9.0.1",
+        "@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"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.0.1.tgz",
+      "integrity": "sha512-pSIGq4Yw749KHEwlkYZWVERgHgwJELP6ODtBNUfV8V4oIb5H+h7IQDFXuk/b2oQccODK1enJAtiEzlgLZmq+8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/utils": "^9.0.1",
+        "prop-types": "^15.8.1"
+      },
+      "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/styled-engine": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.0.0.tgz",
+      "integrity": "sha512-9RLGdX4Jg0aQPRuvqh/OLzYSPlgd5zyEw5/1HIRfdavSiOd03WtUaGZH9/w1RoTYuRKwpgy0hpIFaMHIqPVIWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.0.1.tgz",
+      "integrity": "sha512-WvlioaLxk6ewUIOfh0StxUvOPDS1mCfzaulcudsL1brZNXuh0N9FMk7RpH7ImJKjEz412SEy/V/yvqmtxbqxCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/private-theming": "^9.0.1",
+        "@mui/styled-engine": "^9.0.0",
+        "@mui/types": "^9.0.0",
+        "@mui/utils": "^9.0.1",
+        "clsx": "^2.1.1",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.0.0.tgz",
+      "integrity": "sha512-i1cuFCAWN44b3AJWO7mh7tuh1sqbQSeVr/94oG0TX5uXivac8XalgE4/6fQZcmGZigzbQ35IXxj/4jLpRIBYZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.0.1.tgz",
+      "integrity": "sha512-f3UO3jNN1pYg5zxqXC81Bvv8hx5ACcYc0387382ZI7M5ono1heIwHYLrKsz85myguWdeVKPRZGmDdynWUBjK2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/types": "^9.0.0",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.4"
+      },
+      "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/@pollen-robotics/reachy-mini-sdk": {
+      "version": "1.8.0-rc1-main.fd4354c",
+      "resolved": "https://registry.npmjs.org/@pollen-robotics/reachy-mini-sdk/-/reachy-mini-sdk-1.8.0-rc1-main.fd4354c.tgz",
+      "integrity": "sha512-I/3cVtLbggPyhYEfp1v/jPZh6PgcVrY0eoaMF5qSXsoKNoX7qJVmcCzmsrZVM7Uf5o9FwQh8uFMORtZ0nWV8Ig==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@huggingface/hub": "^0.15.2",
+        "@mui/icons-material": "^7.3.5",
+        "@mui/material": "^7.3.5"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@pollen-robotics/reachy-mini-sdk/node_modules/@mui/core-downloads-tracker": {
       "version": "7.3.11",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.11.tgz",
       "integrity": "sha512-a7I/b/nBTdXYz2cOSlEmkQ9WWE1x8FHpqMhFPp+Y1VPFxcOw91G5ELOHARQAGSPy5V+UCgJua6K/1x70bAtQPw==",
@@ -817,7 +1076,7 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
-    "node_modules/@mui/icons-material": {
+    "node_modules/@pollen-robotics/reachy-mini-sdk/node_modules/@mui/icons-material": {
       "version": "7.3.11",
       "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.11.tgz",
       "integrity": "sha512-+hz5ilwHZ3djd5es3sCErLioqe/NhZcYTsV/TNXZAMdJdb23F4xzJjqnnZdnurc3S1+ietcssRNqieOhPQLZ7Q==",
@@ -843,7 +1102,7 @@
         }
       }
     },
-    "node_modules/@mui/material": {
+    "node_modules/@pollen-robotics/reachy-mini-sdk/node_modules/@mui/material": {
       "version": "7.3.11",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.11.tgz",
       "integrity": "sha512-yq8bPc3LxOwKRWpcjRgDkYFmpM6aKlARfESTmOQcvLYFeJwtHte2tw6hJDrb8sk8wcvpDprHEHVaoUU0MslIkw==",
@@ -893,7 +1152,7 @@
         }
       }
     },
-    "node_modules/@mui/private-theming": {
+    "node_modules/@pollen-robotics/reachy-mini-sdk/node_modules/@mui/private-theming": {
       "version": "7.3.11",
       "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.11.tgz",
       "integrity": "sha512-9B+YKms0fRHbNrqp9tOT/DNbNnU5gyvJ1o3qAGXfq8GmZcbJnE3At9x07Zr/o0pkhzg4aDdwXVqe4+AcgtOCPA==",
@@ -920,7 +1179,7 @@
         }
       }
     },
-    "node_modules/@mui/styled-engine": {
+    "node_modules/@pollen-robotics/reachy-mini-sdk/node_modules/@mui/styled-engine": {
       "version": "7.3.10",
       "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.10.tgz",
       "integrity": "sha512-WxE9SiF8xskAQqGjsp0poXCkCqsoXFEsSr0HBXfApmGHR+DBnXRp+z46Vsltg4gpPM4Z96DeAQRpeAOnhNg7Ng==",
@@ -954,7 +1213,7 @@
         }
       }
     },
-    "node_modules/@mui/system": {
+    "node_modules/@pollen-robotics/reachy-mini-sdk/node_modules/@mui/system": {
       "version": "7.3.11",
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.11.tgz",
       "integrity": "sha512-7izwGWdNawAKpBKcRlx7f2gFnAAjmASBWvMcyX4YYEeLOFsbfGRbUYGInvnAcUeql3rPxI7F9Ft4oY2OLRz44g==",
@@ -994,7 +1253,7 @@
         }
       }
     },
-    "node_modules/@mui/types": {
+    "node_modules/@pollen-robotics/reachy-mini-sdk/node_modules/@mui/types": {
       "version": "7.4.12",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
       "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
@@ -1011,7 +1270,7 @@
         }
       }
     },
-    "node_modules/@mui/utils": {
+    "node_modules/@pollen-robotics/reachy-mini-sdk/node_modules/@mui/utils": {
       "version": "7.3.11",
       "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
       "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
@@ -1041,31 +1300,6 @@
         }
       }
     },
-    "node_modules/@pollen-robotics/reachy-mini-sdk": {
-      "version": "1.8.0-rc1-main.fd4354c",
-      "resolved": "https://registry.npmjs.org/@pollen-robotics/reachy-mini-sdk/-/reachy-mini-sdk-1.8.0-rc1-main.fd4354c.tgz",
-      "integrity": "sha512-I/3cVtLbggPyhYEfp1v/jPZh6PgcVrY0eoaMF5qSXsoKNoX7qJVmcCzmsrZVM7Uf5o9FwQh8uFMORtZ0nWV8Ig==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@emotion/react": "^11.14.0",
-        "@emotion/styled": "^11.14.1",
-        "@huggingface/hub": "^0.15.2",
-        "@mui/icons-material": "^7.3.5",
-        "@mui/material": "^7.3.5"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -2515,6 +2749,24 @@
           "optional": true
         }
       }
+    },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
     }
   }
 }

package.json

@@ -13,8 +13,8 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.5",
-    "@mui/material": "^7.3.5",
+    "@mui/icons-material": "^9.0.1",
+    "@mui/material": "^9.0.1",
     "@pollen-robotics/reachy-mini-sdk": "1.8.0-rc1-main.fd4354c",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"

src/components/EmotionsView.tsx

@@ -369,10 +369,11 @@ export default function EmotionsView({ robot }: EmotionsViewProps) {
             would snap because `auto` isn't an animatable value. */}
         <Stack
           direction="column"
-          alignItems="center"
-          justifyContent="center"
           spacing={2}
           sx={{
+            alignItems: "center",
+            justifyContent: "center",
+
             minHeight:
               scrollH != null
                 ? drillOpen
@@ -384,7 +385,9 @@ export default function EmotionsView({ robot }: EmotionsViewProps) {
                 : drillOpen
                   ? 'auto'
                   : '100%',
+
             px: 2,
+
             // When the panel opens, the section collapses to its
             // natural height which would otherwise glue the wheel
             // to the very top of the column. We add a chunk of
@@ -392,21 +395,22 @@ export default function EmotionsView({ robot }: EmotionsViewProps) {
             // up, just not all the way - keeps it visually anchored
             // and leaves room for the strip overlay above.
             pt: drillOpen ? '80px' : 2,
+
             // Just enough room for visual breathing + iOS safe area.
             // The "now playing" UI lives at the top of the view now,
             // so no bottom toaster to reserve room for.
             pb: drillOpen
               ? '12px'
               : 'calc(24px + env(safe-area-inset-bottom))',
+
             transition: transitionsReady
               ? // Clean ease-in-out (Material standard) - no overshoot,
                 // no snap, no spring punch at the end. Same curve in
                 // both directions so opening and closing the family
                 // panel feel symmetrical.
                 'min-height 400ms cubic-bezier(0.4, 0, 0.2, 1), padding-top 400ms cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 400ms cubic-bezier(0.4, 0, 0.2, 1)'
-              : 'none',
-          }}
-        >
+              : 'none'
+          }}>
           <ResponsiveWheel
             onSelect={handleSelect}
             onSpin={handleSpinSettled}
@@ -441,20 +445,17 @@ export default function EmotionsView({ robot }: EmotionsViewProps) {
             return (
               <Typography
                 variant="body2"
-                color="text.secondary"
                 align="center"
                 aria-hidden={hideHint}
                 sx={{
+                  color: "text.secondary",
                   maxWidth: 320,
                   opacity: hideHint ? 0 : 0.55,
                   visibility: hideHint ? 'hidden' : 'visible',
-                  transition: 'opacity 200ms ease',
-                }}
-              >
-                Tap a wedge to browse,
-                <br />
-                or hit the dice for a random spin.
-              </Typography>
+                  transition: 'opacity 200ms ease'
+                }}>Tap a wedge to browse,
+                                <br />or hit the dice for a random spin.
+                              </Typography>
             );
           })()}
         </Stack>
@@ -491,7 +492,6 @@ export default function EmotionsView({ robot }: EmotionsViewProps) {
           </Box>
         )}
       </Box>
-
       <NowPlayingStrip
         status={status}
         currentId={nowPlayingId}

src/components/emotions/NowPlayingStrip.tsx

@@ -203,7 +203,6 @@ export default function NowPlayingStrip({
           }}
         />
       </Box>
-
       {/* Title block floating in the top-left. Two lines:
        *   - emotion name (primary, prominent)
        *   - duration · family (secondary, small caption)
@@ -213,19 +212,20 @@ export default function NowPlayingStrip({
        */}
       <Stack
         direction="row"
-        alignItems="center"
         spacing={1.5}
         sx={{
+          alignItems: "center",
           position: 'absolute',
           top: '12px',
           left: '16px',
+
           // No more Stop pill on the right: the title can breathe
           // all the way to the edge (minus a comfortable gutter so
           // long emotion names don't kiss the viewport border).
           right: '16px',
-          pointerEvents: 'none',
-        }}
-      >
+
+          pointerEvents: 'none'
+        }}>
         <Box
           aria-hidden
           sx={{
@@ -277,10 +277,11 @@ export default function NowPlayingStrip({
 
           <Stack
             direction="row"
-            alignItems="center"
             spacing={0.75}
-            sx={{ minWidth: 0 }}
-          >
+            sx={{
+              alignItems: "center",
+              minWidth: 0
+            }}>
             <Typography
               sx={{
                 fontSize: 13,
@@ -322,7 +323,6 @@ export default function NowPlayingStrip({
           </Stack>
         </Stack>
       </Stack>
-
     </Box>
   );
 }

src/theme.ts

@@ -92,16 +92,25 @@ function buildTheme(mode: 'light' | 'dark'): Theme {
           // a touch and inherit the text colour so the outline
           // matches the label hue (primary CTA reads as primary).
           outlined: { borderWidth: 1.5 },
-          outlinedPrimary: ({ theme }) => ({
-            borderColor: theme.palette.primary.main,
-            '&:hover': {
-              borderWidth: 1.5,
-              backgroundColor: `rgba(255, 149, 0, ${
-                theme.palette.mode === 'dark' ? 0.1 : 0.08
-              })`,
-            },
-          }),
         },
+        // MUI v9 removed variant-color combination slots like
+        // `outlinedPrimary` from `styleOverrides`. The migration
+        // path is the new `variants` API which matches on prop
+        // combinations and works the same way at runtime.
+        variants: [
+          {
+            props: { variant: 'outlined', color: 'primary' },
+            style: ({ theme }) => ({
+              borderColor: theme.palette.primary.main,
+              '&:hover': {
+                borderWidth: 1.5,
+                backgroundColor: `rgba(255, 149, 0, ${
+                  theme.palette.mode === 'dark' ? 0.1 : 0.08
+                })`,
+              },
+            }),
+          },
+        ],
       },
       MuiPaper: {
         styleOverrides: {