diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md
index cc0beb5bf4942d..cf53c1039f0f0e 100644
--- a/CHANGELOG.old.md
+++ b/CHANGELOG.old.md
@@ -98,7 +98,7 @@ A big thanks to the 16 contributors who made this release possible.
 - Fix incorrect indentation in migration guide (#47571) @sai6855
 - Enable MUI chat on Material UI demos (#46837) @siriwatknp
 - Add docs and website banner for Dev survey'25 (#47521) @prakhargupta1
-- Update Tailwind CSS v4 + Next.js Pages Router docs (#47546) @atharva3333
+- Update Tailwind CSS v4 + Next.js Pages Router docs (#47546) @atharva3333
 - Add warning callout to Sync plugin doc (#47511) @mapache-salvaje
 - Update typo in TailwindCSS v4 integration with Next.js docs (#47512) @TimKraemer
 - Fix link to contributing guide (#47473) @oliviertassinari
@@ -3738,7 +3738,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 
 - Link to pnpm installation docs (#42420) @aarongarciah
 - Remove LocalMonero (@oliviertassinari) (#42315) @github-actions[bot]
-- [material-ui] Fix typo in style interoperability with Tailwind CSS docs (@ZeeshanTamboli) (#42312) @github-actions[bot]
+- [material-ui] Fix typo in style interoperability with Tailwind CSS docs (@ZeeshanTamboli) (#42312) @github-actions[bot]
 - [material-ui][Pagination] Clarify pagination `page` prop API (@Mandar-Pandya) (#42265) @github-actions[bot]
 - [material-ui][Tabs] Improve the Basic Tabs demo (@MatheusEli) (#42426) @github-actions[bot]
 - [pigment-css] Fix duplication of content (#42410) @oliviertassinari
diff --git a/STYLING_V8_TODO.md b/STYLING_V8_TODO.md
new file mode 100644
index 00000000000000..70e6b3f01b0a4a
--- /dev/null
+++ b/STYLING_V8_TODO.md
@@ -0,0 +1,297 @@
+# Styling v8 — Emotion-free path TODO
+
+## Goal
+
+Material UI components ship their **own base styles as plain CSS files** (`@layer mui.default`,
+driven by `--mui-*` CSS variables). This base layer is shared by all consumers. Users who want
+Emotion (`sx`, `styled()`) keep using it without any changes. Users who don't want Emotion
+swap the engine and use one of two theme delivery paths.
+
+---
+
+## Path overview
+
+| | **Emotion path** | **Path A — CssThemeProvider** | **Path B — Static CSS** |
+|---|---|---|---|
+| Engine | `@mui/styled-engine` (Emotion) | `@mui/styled-engine-noop` | `@mui/styled-engine-noop` |
+| Base styles | `Component.css` | same | same |
+| Theme delivery | `ThemeProvider` (runtime) | `CssThemeProvider` (runtime) | `default-theme.css` (build-time) |
+| Custom theme | `createTheme()` → `ThemeProvider` | `createTheme({ cssVariables: true })` → `CssThemeProvider` | `generateThemeCss(createTheme(...))` → import `.css` |
+| `useColorScheme()` | ✅ via `ThemeProvider` | ✅ via `CssThemeProvider` | ✅ standalone hook (no provider) |
+| SSR flash prevention | ✅ `InitColorSchemeScript` | ✅ `InitColorSchemeScript` | ✅ `InitColorSchemeScript` |
+| `useTheme()` (JS values) | ✅ | ✅ | ❌ no theme context |
+| `sx` prop | ✅ | ❌ ignored + dev warning | ❌ ignored + dev warning |
+| `styled()` overrides | ✅ | ❌ | ❌ |
+| Analogy | — | Mantine | Radix Themes |
+
+**Breaking changes policy:** The Emotion path has zero breaking changes. Paths A and B are
+opt-in via the engine alias. `sx` is intentionally unsupported on both non-Emotion paths.
+
+---
+
+## Shared prerequisite — Component CSS conversion _(blocks both non-Emotion paths)_
+
+Both non-Emotion paths require components to have their styles extracted to co-located `.css`
+files. Without this, components have no base styles on the noop engine. This is the largest
+body of work and is independent of the provider/static choice.
+
+### The pattern (established by Slider)
+
+- `Slider.js` — `styled()` calls with empty payloads: `styled('span', { name, slot })({})`.
+  The engine alias determines at bundle time whether this is Emotion or noop.
+- `Slider.css` — all base styles inside `@layer mui.default`, using `--mui-*` CSS variables.
+  Auto-imported via a side-effect import at the top of `Slider.js`. Users never import it manually.
+- Both Emotion and noop users get the same visual output from the same component file.
+
+### CSS file convention
+
+- `@layer mui.default` wrapper for all rules.
+- Class naming: `.MuiX-slotName`, `.MuiX-variantName`, `.Mui-stateClass`.
+- Logical properties (`inset-block-start`, `inset-inline-start`) instead of `top`/`left`/`right`/`bottom`.
+- Media queries: `forced-colors`, `pointer: coarse`, `prefers-reduced-motion`.
+- Print: `print-color-adjust: exact` (not the deprecated `color-adjust`).
+
+### TODOs — component conversion
+
+- [ ] Verify `Slider.js` is a full drop-in for `SliderEmotion.js` under the Emotion engine.
+- [ ] Remove `SliderEmotion.js`, `SliderEmotion.d.ts`, and the `SliderEmotion` re-exports once confirmed.
+- [ ] Convert `Button` as the second pilot (variants × colors × states, ripple, focus-visible).
+- [ ] Capture a repeatable conversion checklist from the Slider + Button work.
+- [ ] Inventory remaining components and sequence the rollout.
+
+---
+
+## Shared prerequisite — Engine alias _(blocks both non-Emotion paths)_
+
+Aliasing `@mui/styled-engine` to `@mui/styled-engine-noop` is the single opt-in step for both
+non-Emotion paths. The noop engine exists and works. The gap is documentation.
+
+### TODOs — engine alias
+
+- [ ] Document per-bundler alias config (Vite, webpack, Next.js, esbuild).
+- [ ] Decide whether to also offer Option B or Option C for zero-config setup, or defer:
+  - **Option A (chosen approach, documented in `test/noop-vite-sandbox/vite.config.ts`)** —
+    bundler alias: user adds one alias rule to their bundler config (`@mui/styled-engine` →
+    `@mui/styled-engine-noop`). Works with any bundler, no import changes required, but requires
+    touching build config. End-user documentation is still a TODO above.
+  - **Option B — subpath imports** (e.g. `@mui/material/css/Slider`): a separate set of package
+    subpaths that resolve directly to the noop variant without any bundler config. Zero setup, but
+    users must change every component import in their app (`/Slider` → `/css/Slider`), making
+    migration tedious and mixing Emotion and noop imports in the same tree possible by accident.
+  - **Option C — `exports` condition**: `package.json` `exports` supports custom conditions (e.g.
+    `"mui-noop"`). Users activate it with a single bundler option (e.g. `resolve.conditions:
+    ['mui-noop']` in Vite), and all `@mui/material` imports automatically resolve to the noop
+    variant — no alias, no import changes. Cleanest DX, but custom conditions have uneven bundler
+    support and add permanent complexity to the package's `exports` map.
+- [ ] Add a CI test: build the non-Emotion entry point, assert **zero** `@emotion/*` modules.
+- [ ] Improve the noop engine dev warning: link to the migration guide, fire once per
+  component type rather than per instance.
+
+### Done — engine alias
+
+- ✅ `@mui/styled-engine-noop` — zero-runtime passthrough, warns on `sx`, stubs `keyframes`/`css`.
+- ✅ Confirmed: production build of `test/noop-vite-sandbox` contains zero `@emotion/*` runtime.
+  (The `__emotion_real` string in the output is a property-name guard in `@mui/system/createStyled`,
+  not an import.)
+- ✅ Two gotchas documented for Vite: `process.env.NODE_ENV` must be defined via `vite.config.ts`
+  `define`; a JSX-in-`.js` transform plugin is required because MUI source uses `.js` + JSX.
+
+---
+
+## Path A — CssThemeProvider _(non-Emotion, runtime)_
+
+The Mantine analogy. Users write `createTheme()` in JS, pass it to a provider. The provider
+renders CSS variables into the document at runtime — no Emotion, no build step. API-identical
+to `ThemeProvider` minus `sx` and `styled()`.
+
+### What users need to do (Path A)
+
+```tsx
+// 1. Alias engine in bundler config (see §Engine alias above)
+
+// 2. Create a theme (must use cssVariables: true)
+import { createTheme } from '@mui/material/styles';
+const theme = createTheme({ cssVariables: true, colorSchemes: { light: true, dark: true } });
+
+// 3. Wrap the app — no ThemeProvider, no Emotion
+import { CssThemeProvider } from '@mui/material/styles';
+<CssThemeProvider theme={theme}>
+  <App />
+</CssThemeProvider>
+
+// 4. Dark mode toggle
+import { useColorScheme } from '@mui/material/styles'; // from CssThemeProvider context
+const { mode, setMode } = useColorScheme();
+setMode('dark');
+
+// 5. JS theme values (breakpoints, transitions, spacing)
+import { useTheme } from '@mui/material/styles';
+const theme = useTheme(); // theme.breakpoints.up('md'), etc.
+```
+
+SSR flash prevention works the same as with `ThemeProvider`: place `<InitColorSchemeScript />`
+in `<head>` before React hydrates. No extra steps specific to `CssThemeProvider` — once
+`useCurrentColorScheme` is wired inside it with the same default storage keys and attribute,
+`InitColorSchemeScript` is automatically compatible.
+
+### TODOs — Path A
+
+- [ ] Build `CssThemeProvider` as a real provider:
+  - Wire `useCurrentColorScheme` internally using the same defaults as `ThemeProvider`
+    (`modeStorageKey: 'mui-mode'`, `colorSchemeStorageKey: 'mui-color-scheme'`,
+    `attribute: 'data-mui-color-scheme'`) so `InitColorSchemeScript` works out of the box
+    without any extra user steps.
+  - Provide a theme context so `useTheme()` works (currently missing despite JSDoc claiming otherwise).
+  - `disableTransitionOnChange` to suppress CSS transitions during color scheme switch.
+  - `defaultMode` prop (`'light' | 'dark' | 'system'`).
+  - `noSsr` prop to skip the hydration-safe default and read localStorage on first render,
+    matching `CssVarsProvider`'s `noSsr` behavior.
+- [ ] Fix `CssVarsInjector` for nested providers: use scoped injection (not a global
+  `<style id="mui-css-vars">`) so two `CssThemeProvider` instances don't overwrite each other.
+- [ ] Verify SSR: `CssVarsInjector` renders a `<style>` tag server-side; confirm no FOUC in
+  Next.js App Router and Pages Router.
+- [ ] Verify `documentNode` (iframe support).
+
+### Done — Path A
+
+- ✅ `CssVarsInjector` — injects CSS vars into document; renders `<style>` server-side, uses
+  `useInsertionEffect` client-side.
+- ✅ `RtlProvider` and `DefaultPropsProvider` wired in the current stub.
+- ✅ `CssThemeProvider` validates that the theme was created with `cssVariables: true`.
+
+---
+
+## Path B — Static CSS _(non-Emotion, build-time)_
+
+The Radix Themes analogy. A pre-generated `.css` file contains all `--mui-*` CSS variables for
+light and dark. Import it once. No provider, no JS runtime cost.
+
+### What users need to do (Path B)
+
+```tsx
+// 1. Alias engine in bundler config (see §Engine alias above)
+
+// 2. Import the pre-generated theme CSS once at the app root
+import '@mui/material/default-theme.css';
+// (or a custom-generated file — see §Custom theme below)
+
+// 3. SSR flash prevention (put in <head> before React hydrates)
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+<InitColorSchemeScript />
+// In a Vite SPA (no SSR), extract the script text to paste into index.html directly.
+// See §getInitColorSchemeScriptText below.
+
+// 4. Dark mode toggle — standalone hook, no provider
+import { useColorScheme } from '@mui/material/colorScheme'; // Emotion-free subpath
+const { mode, setMode } = useColorScheme();
+setMode('dark'); // writes localStorage + data-mui-color-scheme attribute
+
+// 5. (Optional) custom theme — generate CSS at build time
+import { generateThemeCss } from '@mui/material/generateThemeCss';
+import { createTheme } from '@mui/material/styles';
+// In a build script:
+const css = generateThemeCss(createTheme({ palette: { primary: { main: '#e91e63' } } }));
+fs.writeFileSync('my-theme.css', css);
+// Then import './my-theme.css' instead of default-theme.css
+```
+
+### TODOs — Path B
+
+- [ ] **Standalone `useColorScheme` hook** (`@mui/material/colorScheme` — new Emotion-free subpath):
+  - Reads/writes `data-mui-color-scheme` on `document.documentElement`.
+  - Persists mode under the same localStorage key as `InitColorSchemeScript` (`mui-mode`).
+  - Supports `'light' | 'dark' | 'system'`; `'system'` subscribes to
+    `window.matchMedia('(prefers-color-scheme: dark)')`.
+  - No Emotion, no React context provider.
+  - Must not be mixed with `ThemeProvider`'s `useColorScheme` in the same tree.
+- [ ] **`getInitColorSchemeScriptText(props?)`** — named export from
+  `@mui/material/InitColorSchemeScript` that returns the inline script as a string, so Vite SPAs
+  can paste it directly into `index.html` without a React wrapper.
+- [ ] **`generateThemeCss(options: ThemeOptions): string`** — thin wrapper over
+  `createTheme` + `styleSheetsToString(theme.generateStyleSheets())`. Forces
+  `colorSchemeSelector: 'data-mui-color-scheme'` so the output matches what
+  `InitColorSchemeScript` and the standalone hook expect. Published at
+  `@mui/material/generateThemeCss`.
+- [ ] Refactor `buildDefaultThemeCss.mts` to call `generateThemeCss({})` internally.
+- [ ] Document: CSS variable overrides (no build step needed for simple changes like
+  `--mui-palette-primary-main: #e91e63` in plain CSS).
+- [ ] Document `InitColorSchemeScript` as standalone (no `ThemeProvider` needed).
+
+### Done — Path B
+
+- ✅ `@mui/material/default-theme.css` — pre-generated, shipped, named `exports` entry.
+- ✅ `InitColorSchemeScript` — Emotion-free, same attribute + localStorage keys as
+  `default-theme.css`.
+- ✅ `buildDefaultThemeCss.mts` — internal build script that generates `default-theme.css`.
+- ✅ Component `.css` files auto-imported by component JS files (no manual import needed).
+- ✅ `test/noop-vite-sandbox` — Slider rendered on Path B with dark mode toggle (DOM-only).
+
+---
+
+## Comparison with Mantine and Radix Themes
+
+### Mantine → Path A (CssThemeProvider)
+
+Mantine dropped CSS-in-JS entirely in v7 and replaced it with CSS Modules + a runtime provider
+(`MantineProvider`) that injects CSS variables. Users still call `createTheme()` in JS and pass
+it as a prop. No build step for theming.
+
+**Key differences from MUI Path A:**
+- Mantine uses hashed CSS Module class names — no stable `.Mantine*` customization surface.
+  MUI keeps stable `.Mui*` class names; `@layer` solves the specificity problem without
+  sacrificing the class-name contract.
+- Mantine dropped CSS-in-JS with no compatibility layer. MUI's Path A co-exists with the
+  Emotion path — users migrate at their own pace.
+
+### Radix Themes → Path B (Static CSS)
+
+Radix Themes ships all styles as static CSS files. Theme tokens are CSS variables. No runtime,
+no JS theming engine. Customization is CSS variable overrides or a palette generation tool.
+
+**Key differences from MUI Path B:**
+- Radix's token space is fixed (12-step Radix Colors scales, ~6 accent choices). MUI has
+  ~400 computed variables — palette channels, alpha overlays, typography scale — derived from
+  `createTheme()`. The build-time `generateThemeCss()` fills this gap.
+- Radix has no `sx` on any path. MUI's Path B coexists with the Emotion path.
+
+### MUI's advantage over both
+
+Neither library offers both a zero-runtime path and a full `sx`/`styled()` path from the same
+component files. MUI will be the first to do this.
+
+---
+
+## Shared — Customization contract (`@layer`)
+
+- [ ] Document the override model: unlayered user CSS (and Tailwind v4 utilities) always win
+  over `@layer mui.default` — no specificity fight, no `!important`.
+- [ ] Validate layer ordering with Tailwind v3 (`@mui/tailwind` preset) and v4 (`@mui/tailwind/v4.css`).
+- [ ] Verify `slotProps.className` / `className` compose correctly with layered base styles for
+  all converted components.
+- [ ] Confirm: Emotion-generated class names (from `sx` / `styled()`) are not in any layer, so
+  they also win over `@layer mui.default` automatically.
+
+---
+
+## Shared — Bundle size validation
+
+- ✅ `test/noop-vite-sandbox` — Slider, Path B (static CSS). Baseline: **276 KB raw / 88 KB gzip JS**, 32 KB CSS.
+- ✅ `test/css-theme-provider-vite-sandbox` — Slider, Path A (CssThemeProvider, noop engine). Built; JS delta vs noop baseline to be measured.
+- ✅ `test/emotion-vite-sandbox` — Slider, Emotion path (ThemeProvider). Built; JS delta vs noop baseline to be measured.
+- [ ] Record actual bundle sizes for all three sandboxes and document the deltas in this file.
+- [ ] Add to size-snapshot tooling: regression if Emotion leaks into a non-Emotion build.
+
+---
+
+## Shared — Tests, types, docs
+
+- [ ] Run existing Slider tests under the Emotion engine — confirm no regression.
+- [ ] Run the same Slider tests under the noop engine — confirm visual and behavioral parity.
+- [ ] Update `index.d.ts` after `SliderEmotion` is removed.
+- [ ] Docs — Emotion path: note that base styles now come from a CSS file; `sx`/`styled()`
+  overrides layer on top as before.
+- [ ] Docs — Path A: `CssThemeProvider` setup guide, migration from `ThemeProvider`.
+- [ ] Docs — Path B: static CSS setup, `InitColorSchemeScript`, standalone `useColorScheme`,
+  `generateThemeCss()`, CSS variable overrides, Tailwind integration.
+- [ ] Clean up experiment pages (`static-theme-playground`, `slider-*-benchmark`,
+  `css-playground`, `emotion-playground`, `tailwind-playground`) before productionizing.
diff --git a/docs/data/material/integrations/tailwindcss/TailwindCard.js b/docs/data/material/integrations/tailwindcss/TailwindCard.js
new file mode 100644
index 00000000000000..a1201ec17ccf33
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/TailwindCard.js
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+
+function JobCard({ jobTitle, team, status, applicants, avatarColors }) {
+  const isActive = status === 'Active';
+  return (
+    <Card className="rounded-2xl border border-neutral-200 dark:border-neutral-700 shadow-none">
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 rounded-xl bg-indigo-100 dark:bg-indigo-950 flex items-center justify-center text-indigo-700 dark:text-indigo-300 font-semibold text-base">
+              {jobTitle[0]}
+            </div>
+            <div>
+              <p className="font-semibold text-neutral-900 dark:text-neutral-100 text-sm leading-tight">
+                {jobTitle}
+              </p>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                {team}
+              </p>
+            </div>
+          </div>
+          <Chip
+            label={status}
+            size="small"
+            className={
+              isActive
+                ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400 border-0 font-medium'
+                : 'bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-400 border-0 font-medium'
+            }
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <AvatarGroup max={3}>
+              {avatarColors.map((color, i) => (
+                <Avatar
+                  key={i}
+                  sx={{ width: 28, height: 28, fontSize: 12, bgcolor: color }}
+                />
+              ))}
+            </AvatarGroup>
+            <span className="text-xs text-neutral-500 dark:text-neutral-400">
+              {applicants} applicants
+            </span>
+          </div>
+          <span className="text-xs text-neutral-400 dark:text-neutral-500">
+            Remote
+          </span>
+        </div>
+      </CardContent>
+      <CardActions className="px-5 pb-4 pt-0">
+        <Button
+          size="small"
+          className="rounded-full normal-case text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-950 text-sm"
+        >
+          View details
+        </Button>
+        <Button
+          size="small"
+          variant="contained"
+          className="rounded-full normal-case bg-indigo-600 hover:bg-indigo-700 shadow-none text-sm ml-auto"
+        >
+          Apply
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}
+
+JobCard.propTypes = {
+  applicants: PropTypes.number.isRequired,
+  avatarColors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  jobTitle: PropTypes.string.isRequired,
+  status: PropTypes.oneOf(['Active', 'Pending']).isRequired,
+  team: PropTypes.string.isRequired,
+};
+
+export default function TailwindCard() {
+  return (
+    <div className="grid grid-cols-1 gap-4 w-full max-w-sm sm:max-w-2xl sm:grid-cols-2">
+      <JobCard
+        jobTitle="Frontend Developer"
+        team="Design Systems"
+        status="Active"
+        applicants={24}
+        avatarColors={['#6366f1', '#8b5cf6', '#ec4899']}
+      />
+      <JobCard
+        jobTitle="Backend Engineer"
+        team="Platform"
+        status="Pending"
+        applicants={11}
+        avatarColors={['#0ea5e9', '#14b8a6', '#f59e0b']}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/material/integrations/tailwindcss/TailwindCard.tsx b/docs/data/material/integrations/tailwindcss/TailwindCard.tsx
new file mode 100644
index 00000000000000..28db04c4403325
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/TailwindCard.tsx
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+
+interface JobCardProps {
+  jobTitle: string;
+  team: string;
+  status: 'Active' | 'Pending';
+  applicants: number;
+  avatarColors: string[];
+}
+
+function JobCard({
+  jobTitle,
+  team,
+  status,
+  applicants,
+  avatarColors,
+}: JobCardProps) {
+  const isActive = status === 'Active';
+  return (
+    <Card className="rounded-2xl border border-neutral-200 dark:border-neutral-700 shadow-none">
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 rounded-xl bg-indigo-100 dark:bg-indigo-950 flex items-center justify-center text-indigo-700 dark:text-indigo-300 font-semibold text-base">
+              {jobTitle[0]}
+            </div>
+            <div>
+              <p className="font-semibold text-neutral-900 dark:text-neutral-100 text-sm leading-tight">
+                {jobTitle}
+              </p>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                {team}
+              </p>
+            </div>
+          </div>
+          <Chip
+            label={status}
+            size="small"
+            className={
+              isActive
+                ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400 border-0 font-medium'
+                : 'bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-400 border-0 font-medium'
+            }
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <AvatarGroup max={3}>
+              {avatarColors.map((color, i) => (
+                <Avatar
+                  key={i}
+                  sx={{ width: 28, height: 28, fontSize: 12, bgcolor: color }}
+                />
+              ))}
+            </AvatarGroup>
+            <span className="text-xs text-neutral-500 dark:text-neutral-400">
+              {applicants} applicants
+            </span>
+          </div>
+          <span className="text-xs text-neutral-400 dark:text-neutral-500">
+            Remote
+          </span>
+        </div>
+      </CardContent>
+      <CardActions className="px-5 pb-4 pt-0">
+        <Button
+          size="small"
+          className="rounded-full normal-case text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-950 text-sm"
+        >
+          View details
+        </Button>
+        <Button
+          size="small"
+          variant="contained"
+          className="rounded-full normal-case bg-indigo-600 hover:bg-indigo-700 shadow-none text-sm ml-auto"
+        >
+          Apply
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}
+
+export default function TailwindCard() {
+  return (
+    <div className="grid grid-cols-1 gap-4 w-full max-w-sm sm:max-w-2xl sm:grid-cols-2">
+      <JobCard
+        jobTitle="Frontend Developer"
+        team="Design Systems"
+        status="Active"
+        applicants={24}
+        avatarColors={['#6366f1', '#8b5cf6', '#ec4899']}
+      />
+      <JobCard
+        jobTitle="Backend Engineer"
+        team="Platform"
+        status="Pending"
+        applicants={11}
+        avatarColors={['#0ea5e9', '#14b8a6', '#f59e0b']}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/material/integrations/tailwindcss/TailwindCard.tsx.preview b/docs/data/material/integrations/tailwindcss/TailwindCard.tsx.preview
new file mode 100644
index 00000000000000..cf198deb4e2606
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/TailwindCard.tsx.preview
@@ -0,0 +1,14 @@
+<JobCard
+  jobTitle="Frontend Developer"
+  team="Design Systems"
+  status="Active"
+  applicants={24}
+  avatarColors={['#6366f1', '#8b5cf6', '#ec4899']}
+/>
+<JobCard
+  jobTitle="Backend Engineer"
+  team="Platform"
+  status="Pending"
+  applicants={11}
+  avatarColors={['#0ea5e9', '#14b8a6', '#f59e0b']}
+/>
\ No newline at end of file
diff --git a/docs/data/material/integrations/tailwindcss/TailwindDisabledState.js b/docs/data/material/integrations/tailwindcss/TailwindDisabledState.js
new file mode 100644
index 00000000000000..7f47b691debe68
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/TailwindDisabledState.js
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Slider from '@mui/material/Slider';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Stack from '@mui/material/Stack';
+
+export default function TailwindDisabledState() {
+  return (
+    <Stack spacing={4} sx={{ maxWidth: 320, width: '100%' }}>
+      <div>
+        <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-3">
+          Volume — enabled vs disabled
+        </p>
+        <Stack spacing={2}>
+          {/* Tailwind's `mui-disabled:` variant adds opacity only when the
+               component has the `Mui-disabled` class applied by MUI */}
+          <Slider
+            defaultValue={70}
+            className="mui-disabled:opacity-40 mui-disabled:cursor-not-allowed"
+          />
+          <Slider
+            defaultValue={70}
+            disabled
+            className="mui-disabled:opacity-40 mui-disabled:cursor-not-allowed"
+          />
+        </Stack>
+      </div>
+      <div>
+        <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
+          Notifications — enabled vs disabled
+        </p>
+        <Stack spacing={1}>
+          <FormControlLabel
+            label="Marketing emails"
+            control={<Switch className="mui-disabled:opacity-50" />}
+          />
+          <FormControlLabel
+            label="Product updates (disabled)"
+            control={<Switch disabled className="mui-disabled:opacity-50" />}
+          />
+        </Stack>
+      </div>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/integrations/tailwindcss/TailwindDisabledState.tsx b/docs/data/material/integrations/tailwindcss/TailwindDisabledState.tsx
new file mode 100644
index 00000000000000..b2d80625f31186
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/TailwindDisabledState.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Slider from '@mui/material/Slider';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Stack from '@mui/material/Stack';
+
+export default function TailwindDisabledState() {
+  return (
+    <Stack spacing={4} sx={{ maxWidth: 320, width: '100%' }}>
+      <div>
+        <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-3">
+          Volume — enabled vs disabled
+        </p>
+        <Stack spacing={2}>
+          {/* Tailwind's `mui-disabled:` variant adds opacity only when the
+              component has the `Mui-disabled` class applied by MUI */}
+          <Slider
+            defaultValue={70}
+            className="mui-disabled:opacity-40 mui-disabled:cursor-not-allowed"
+          />
+          <Slider
+            defaultValue={70}
+            disabled
+            className="mui-disabled:opacity-40 mui-disabled:cursor-not-allowed"
+          />
+        </Stack>
+      </div>
+      <div>
+        <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">
+          Notifications — enabled vs disabled
+        </p>
+        <Stack spacing={1}>
+          <FormControlLabel
+            label="Marketing emails"
+            control={<Switch className="mui-disabled:opacity-50" />}
+          />
+          <FormControlLabel
+            label="Product updates (disabled)"
+            control={<Switch disabled className="mui-disabled:opacity-50" />}
+          />
+        </Stack>
+      </div>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/integrations/tailwindcss/TailwindFilterChips.js b/docs/data/material/integrations/tailwindcss/TailwindFilterChips.js
new file mode 100644
index 00000000000000..81e08d8cd930b2
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/TailwindFilterChips.js
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+
+const tags = ['React', 'TypeScript', 'CSS', 'Performance', 'Testing'];
+
+export default function TailwindFilterChips() {
+  const [selected, setSelected] = React.useState(['React', 'TypeScript']);
+
+  const handleChange = (_, newSelected) => {
+    setSelected(newSelected);
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <ToggleButtonGroup
+        value={selected}
+        onChange={handleChange}
+        className="flex-wrap gap-2 border-0"
+      >
+        {tags.map((tag) => (
+          <ToggleButton
+            key={tag}
+            value={tag}
+            className="
+              rounded-full px-4 py-1 text-sm normal-case m-0
+              border border-neutral-300 dark:border-neutral-600
+              bg-white dark:bg-neutral-900
+              text-neutral-700 dark:text-neutral-300
+              hover:bg-neutral-50 dark:hover:bg-neutral-800
+              mui-selected:bg-indigo-600 mui-selected:text-white
+              mui-selected:border-indigo-600 dark:mui-selected:bg-indigo-700
+            "
+          >
+            {tag}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+      <p className="text-sm text-neutral-500 dark:text-neutral-400">
+        {selected.length === 0
+          ? 'No filters active'
+          : `Active: ${selected.join(', ')}`}
+      </p>
+    </div>
+  );
+}
diff --git a/docs/data/material/integrations/tailwindcss/TailwindFilterChips.tsx b/docs/data/material/integrations/tailwindcss/TailwindFilterChips.tsx
new file mode 100644
index 00000000000000..9ad5eb006faf0c
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/TailwindFilterChips.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+
+const tags = ['React', 'TypeScript', 'CSS', 'Performance', 'Testing'];
+
+export default function TailwindFilterChips() {
+  const [selected, setSelected] = React.useState<string[]>(['React', 'TypeScript']);
+
+  const handleChange = (_: React.MouseEvent, newSelected: string[]) => {
+    setSelected(newSelected);
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <ToggleButtonGroup
+        value={selected}
+        onChange={handleChange}
+        className="flex-wrap gap-2 border-0"
+      >
+        {tags.map((tag) => (
+          <ToggleButton
+            key={tag}
+            value={tag}
+            className="
+              rounded-full px-4 py-1 text-sm normal-case m-0
+              border border-neutral-300 dark:border-neutral-600
+              bg-white dark:bg-neutral-900
+              text-neutral-700 dark:text-neutral-300
+              hover:bg-neutral-50 dark:hover:bg-neutral-800
+              mui-selected:bg-indigo-600 mui-selected:text-white
+              mui-selected:border-indigo-600 dark:mui-selected:bg-indigo-700
+            "
+          >
+            {tag}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+      <p className="text-sm text-neutral-500 dark:text-neutral-400">
+        {selected.length === 0
+          ? 'No filters active'
+          : `Active: ${selected.join(', ')}`}
+      </p>
+    </div>
+  );
+}
diff --git a/docs/data/material/integrations/tailwindcss/tailwindcss-components.md b/docs/data/material/integrations/tailwindcss/tailwindcss-components.md
new file mode 100644
index 00000000000000..d6dda70bce036c
--- /dev/null
+++ b/docs/data/material/integrations/tailwindcss/tailwindcss-components.md
@@ -0,0 +1,122 @@
+# Using the @mui/tailwind package
+
+<p class="description">The @mui/tailwind package provides a Tailwind CSS preset, plugin, and v4 CSS file that wire MUI's design tokens and component state classes into Tailwind.</p>
+
+## Installation
+
+```bash
+npm install @mui/tailwind
+```
+
+## Setup
+
+### Tailwind v4
+
+Import the CSS file in your global stylesheet after your `@import "tailwindcss"` line:
+
+```css title="global.css"
+@layer theme, base, mui.default, components, utilities;
+@import 'tailwindcss';
+@import '@mui/tailwind/v4.css';
+```
+
+`v4.css` adds three things:
+
+1. **Token mapping** — maps `--mui-palette-*`, `--mui-shadows-*`, and other MUI CSS variables to Tailwind theme tokens so utilities like `text-primary`, `bg-error/20`, and `shadow-8` work out of the box (requires `CssVarsProvider`)
+2. **State variants** — adds `mui-{state}:` and `mui-not-{state}:` modifier classes for every MUI component state class
+3. **MUI-aligned breakpoints** — sets `sm=600px`, `md=900px`, `lg=1200px`, `xl=1536px`
+
+### Tailwind v3
+
+Add the preset to `tailwind.config.js`:
+
+```js title="tailwind.config.js"
+module.exports = {
+  presets: [require('@mui/tailwind')],
+};
+```
+
+The preset extends the Tailwind theme with MUI color tokens (using channel variables for opacity modifier support) and includes the plugin automatically.
+
+If you only need the state variant plugin without the full preset:
+
+```js title="tailwind.config.js"
+module.exports = {
+  plugins: [require('@mui/tailwind/plugin')],
+};
+```
+
+## State variants
+
+The `@mui/tailwind` plugin adds `mui-{state}:` modifier classes that target MUI component state classes (`Mui-disabled`, `Mui-selected`, `Mui-error`, etc.).
+
+| Variant              | Targets             |
+| :------------------- | :------------------ |
+| `mui-disabled:`      | `.Mui-disabled`     |
+| `mui-selected:`      | `.Mui-selected`     |
+| `mui-error:`         | `.Mui-error`        |
+| `mui-focused:`       | `.Mui-focused`      |
+| `mui-focus-visible:` | `.Mui-focusVisible` |
+| `mui-checked:`       | `.Mui-checked`      |
+| `mui-expanded:`      | `.Mui-expanded`     |
+| `mui-active:`        | `.Mui-active`       |
+| `mui-readonly:`      | `.Mui-readOnly`     |
+| `mui-required:`      | `.Mui-required`     |
+| `mui-completed:`     | `.Mui-completed`    |
+
+Every variant has a `mui-not-{state}:` counterpart that matches when the class is absent.
+
+### Filter chips with `mui-selected:`
+
+The following demo shows `mui-selected:` styling applied to a `ToggleButtonGroup`.
+MUI adds the `Mui-selected` class to each `ToggleButton` when it is active,
+and the Tailwind variant applies the indigo styles only to those elements.
+
+{{"demo": "TailwindFilterChips.js"}}
+
+### Disabled state with `mui-disabled:`
+
+`mui-disabled:` targets elements where MUI has applied the `Mui-disabled` class.
+Because the variant selector is specific to the disabled state, the modifier
+applies only to the disabled component, leaving the enabled one untouched.
+
+{{"demo": "TailwindDisabledState.js"}}
+
+## Styling components with `className` and `slotProps`
+
+Use `className` to apply Tailwind utilities to a component's root element.
+Use `slotProps.{slot}.className` to reach interior elements.
+
+The following demo builds a job-listing card using only Tailwind utilities
+for visual design while keeping MUI components for structure and accessibility.
+
+{{"demo": "TailwindCard.js"}}
+
+## Layer ordering
+
+For Tailwind utilities to override MUI component styles **without `!important`**, MUI's styles must be inside a CSS layer with lower priority than Tailwind's `utilities` layer.
+
+With the Emotion-based setup, enable `enableCssLayer` to put MUI styles in `@layer mui`:
+
+```css title="global.css"
+@layer theme, base, mui, components, utilities;
+@import 'tailwindcss';
+```
+
+```tsx title="app/layout.tsx (Next.js App Router)"
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
+          {children}
+        </AppRouterCacheProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+With the CSS-based setup (`@mui/styled-engine-noop`), MUI component styles are already in `@layer mui.default`, so the layer ordering is automatic — Tailwind utilities win without any `!important`.
diff --git a/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md b/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md
index 5e71ba7454ed5e..53168d1ed0e5e5 100644
--- a/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md
+++ b/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md
@@ -151,6 +151,10 @@ Now you should see the autocomplete and syntax highlighting features when using
 
 ## Extend Material UI classes
 
+:::info
+Instead of copying this snippet, install the [`@mui/tailwind`](/material-ui/integrations/tailwindcss/tailwindcss-components/) package which ships the same token mapping alongside MUI state variants (`mui-disabled:`, `mui-selected:`, and more) and MUI-aligned breakpoints in a single import.
+:::
+
 If you want to use Material UI theme tokens in your Tailwind CSS classes, copy the snippet below into your CSS file.
 
 ```css title="global.css"
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index 8e0a20d22cb978..f0b4f37a94ab19 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -267,7 +267,7 @@ const pages: MuiPage[] = [
     children: [
       {
         pathname: '/material-ui/integrations/tailwindcss/tailwindcss-v4',
-        title: 'Tailwind CSS v4 integration',
+        title: 'Tailwind CSS v4 integration',
         newFeature: true,
       },
       {
diff --git a/docs/next.config.ts b/docs/next.config.ts
index 59d2fb68758422..450a70908cb1f1 100644
--- a/docs/next.config.ts
+++ b/docs/next.config.ts
@@ -90,6 +90,10 @@ export default withDocsInfra({
             workspaceRoot,
             'packages/mui-material/package.json',
           ),
+          '@mui/material/default-theme.css': path.resolve(
+            workspaceRoot,
+            'packages/mui-material/default-theme.css',
+          ),
           '@mui/material': path.resolve(workspaceRoot, 'packages/mui-material/src'),
 
           '@mui/internal-core-docs': path.resolve(workspaceRoot, 'packages-internal/core-docs/src'),
@@ -99,7 +103,20 @@ export default withDocsInfra({
           ),
           '@mui/icons-material': path.resolve(workspaceRoot, 'packages/mui-icons-material/lib'),
           '@mui/lab': path.resolve(workspaceRoot, 'packages/mui-lab/src'),
+          '@mui/tailwind': path.resolve(workspaceRoot, 'packages/mui-tailwind/src/preset.js'),
+          '@mui/tailwind/preset': path.resolve(
+            workspaceRoot,
+            'packages/mui-tailwind/src/preset.js',
+          ),
+          '@mui/tailwind/plugin': path.resolve(
+            workspaceRoot,
+            'packages/mui-tailwind/src/plugin.js',
+          ),
           '@mui/styled-engine': path.resolve(workspaceRoot, 'packages/mui-styled-engine/src'),
+          '@mui/styled-engine-noop': path.resolve(
+            workspaceRoot,
+            'packages/mui-styled-engine-noop/src',
+          ),
           '@mui/system/package.json': path.resolve(
             workspaceRoot,
             'packages/mui-system/package.json',
diff --git a/docs/package.json b/docs/package.json
index e2bd58e1b3668b..c7f862f05648a6 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -30,7 +30,9 @@
     "@mui/internal-markdown": "workspace:^",
     "@mui/lab": "workspace:*",
     "@mui/material": "workspace:^",
+    "@mui/tailwind": "workspace:^",
     "@mui/styled-engine": "workspace:^",
+    "@mui/styled-engine-noop": "workspace:^",
     "@mui/styled-engine-sc": "workspace:^",
     "@mui/stylis-plugin-rtl": "workspace:^",
     "@mui/system": "workspace:^",
diff --git a/docs/pages/experiments/css-playground.tsx b/docs/pages/experiments/css-playground.tsx
new file mode 100644
index 00000000000000..a248446d7bd01d
--- /dev/null
+++ b/docs/pages/experiments/css-playground.tsx
@@ -0,0 +1,264 @@
+'use client';
+import * as React from 'react';
+import { createTheme, CssThemeProvider, useTheme, type Theme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+
+// ---------- Themes ----------------------------------------------------------
+// Each theme must be created with `cssVariables: true` — that's the contract
+// of `CssThemeProvider`. Without it `generateStyleSheets` is undefined and
+// the imported component CSS files would have no variables to read.
+
+const themes = {
+  violet: createTheme({
+    cssVariables: { colorSchemeSelector: 'data-mui-color-scheme' },
+    colorSchemes: {
+      light: { palette: { primary: { main: '#7c3aed' }, secondary: { main: '#db2777' } } },
+      dark: { palette: { primary: { main: '#a78bfa' }, secondary: { main: '#f472b6' } } },
+    },
+    shape: { borderRadius: 12 },
+  }),
+  teal: createTheme({
+    cssVariables: { colorSchemeSelector: 'data-mui-color-scheme' },
+    colorSchemes: {
+      light: { palette: { primary: { main: '#0d9488' }, secondary: { main: '#f59e0b' } } },
+      dark: { palette: { primary: { main: '#2dd4bf' }, secondary: { main: '#fbbf24' } } },
+    },
+    shape: { borderRadius: 4 },
+    components: {
+      MuiSlider: {
+        defaultProps: { size: 'small' },
+      },
+    },
+  }),
+  blue: createTheme({
+    cssVariables: { colorSchemeSelector: 'data-mui-color-scheme' },
+    colorSchemes: {
+      light: { palette: { primary: { main: '#1d4ed8' }, secondary: { main: '#dc2626' } } },
+      dark: { palette: { primary: { main: '#60a5fa' }, secondary: { main: '#f87171' } } },
+    },
+    shape: { borderRadius: 8 },
+    components: {
+      MuiButton: { defaultProps: { disableElevation: true } },
+    },
+  }),
+} as const;
+
+type ThemeKey = keyof typeof themes;
+
+// ---------- Probe: reads theme via useTheme() -------------------------------
+// Demonstrates that JS-only theme values (breakpoints, transitions, spacing)
+// are reachable through React context — the whole reason `CssThemeProvider`
+// also wires up `SystemThemeProvider`, not just the CSS injector.
+
+function ThemeProbe() {
+  const theme = useTheme() as Theme;
+  // Re-render on resize so the breakpoint readout reflects reality.
+  const [width, setWidth] = React.useState<number | null>(null);
+  React.useEffect(() => {
+    const update = () => setWidth(window.innerWidth);
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  return (
+    <Box
+      component="dl"
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: 'max-content 1fr',
+        gap: '4px 16px',
+        m: 0,
+        fontSize: '0.85rem',
+        fontFamily: 'monospace',
+        color: 'text.secondary',
+      }}
+    >
+      <dt>theme.spacing(2)</dt>
+      <dd>{theme.spacing(2)}</dd>
+      <dt>theme.transitions.duration.shortest</dt>
+      <dd>{theme.transitions.duration.shortest}ms</dd>
+      <dt>theme.breakpoints.values.sm</dt>
+      <dd>{theme.breakpoints.values.sm}px</dd>
+      <dt>theme.palette.primary.main</dt>
+      <dd>{theme.palette.primary.main}</dd>
+      <dt>window.innerWidth</dt>
+      <dd>{width ?? '?'}px</dd>
+    </Box>
+  );
+}
+
+// ---------- Layout helpers --------------------------------------------------
+
+function Section({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <Box sx={{ mb: 5 }}>
+      <Typography
+        variant="overline"
+        sx={{
+          color: 'text.disabled',
+          fontWeight: 700,
+          letterSpacing: '0.1em',
+          display: 'block',
+          mb: 1.5,
+        }}
+      >
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
+
+// ---------- Page ------------------------------------------------------------
+
+type Mode = 'light' | 'dark';
+
+function Page({
+  themeKey,
+  setThemeKey,
+  mode,
+  setMode,
+}: {
+  themeKey: ThemeKey;
+  setThemeKey: (key: ThemeKey) => void;
+  mode: Mode;
+  setMode: (mode: Mode) => void;
+}) {
+  const [sliderValue, setSliderValue] = React.useState<number>(40);
+  const [chips, setChips] = React.useState(['React', 'CSS vars']);
+  const [textValue, setTextValue] = React.useState('');
+
+  function toggleChip(label: string) {
+    setChips((prev) => (prev.includes(label) ? prev.filter((c) => c !== label) : [...prev, label]));
+  }
+
+  return (
+    <Box
+      data-mui-color-scheme={mode}
+      sx={{
+        p: { xs: 3, md: 5 },
+        maxWidth: 760,
+        mx: 'auto',
+        minHeight: '100vh',
+        bgcolor: 'var(--mui-palette-background-default)',
+        color: 'var(--mui-palette-text-primary)',
+      }}
+    >
+      <Typography variant="h4" sx={{ fontWeight: 700, mb: 0.5 }}>
+        CssThemeProvider playground
+      </Typography>
+      <Typography variant="body2" sx={{ color: 'text.secondary', mb: 4 }}>
+        No Emotion <code>styled()</code>, no <code>sx</code>. All visuals come from the imported{' '}
+        <code>.css</code> files; <code>CssThemeProvider</code> only injects CSS variables and
+        exposes the theme via <code>useTheme()</code>.
+      </Typography>
+
+      {/* ── Theme switcher ────────────────────────────────────────────── */}
+      <Section label="Live theme switching">
+        <Stack direction="row" spacing={3} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
+          <ToggleButtonGroup
+            value={themeKey}
+            exclusive
+            onChange={(_, v) => v && setThemeKey(v as ThemeKey)}
+            size="small"
+          >
+            {(Object.keys(themes) as ThemeKey[]).map((key) => (
+              <ToggleButton key={key} value={key} sx={{ textTransform: 'capitalize', px: 2 }}>
+                {key}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+            <Typography variant="body2">Light</Typography>
+            <Switch
+              checked={mode === 'dark'}
+              onChange={(event) => setMode(event.target.checked ? 'dark' : 'light')}
+            />
+            <Typography variant="body2">Dark</Typography>
+          </Stack>
+        </Stack>
+        <Typography variant="caption" sx={{ display: 'block', mt: 1, color: 'text.disabled' }}>
+          Theme switching re-injects CSS variables into <code>&lt;head&gt;</code>. The dark/light
+          toggle only sets <code>data-mui-color-scheme</code> on the container — no re-render.
+        </Typography>
+      </Section>
+
+      {/* ── Components ────────────────────────────────────────────────── */}
+      <Section label="Buttons (default + color + disabled)">
+        <Stack direction="row" spacing={2} useFlexGap sx={{ flexWrap: 'wrap' }}>
+          <Button variant="contained">Primary</Button>
+          <Button variant="contained" color="secondary">
+            Secondary
+          </Button>
+          <Button variant="outlined">Outlined</Button>
+          <Button variant="text">Text</Button>
+          <Button variant="contained" disabled>
+            Disabled
+          </Button>
+        </Stack>
+      </Section>
+
+      <Section label="Slider (animations confirm the transition fallbacks)">
+        <Slider value={sliderValue} onChange={(_, v) => setSliderValue(v as number)} />
+        <Typography variant="body2" sx={{ mt: 0.5, color: 'text.secondary' }}>
+          Value: {sliderValue}. Drag the thumb — movement should ease, not snap.
+        </Typography>
+      </Section>
+
+      <Section label="TextField (color + focus + helper)">
+        <Stack spacing={2} sx={{ maxWidth: 400 }}>
+          <TextField
+            label="Default"
+            value={textValue}
+            onChange={(event) => setTextValue(event.target.value)}
+          />
+          <TextField label="Error state" error helperText="This field has an error" />
+        </Stack>
+      </Section>
+
+      <Section label="Chips (interactive)">
+        <Stack direction="row" spacing={1} useFlexGap sx={{ flexWrap: 'wrap' }}>
+          {['React', 'CSS vars', 'No Emotion', 'CssThemeProvider'].map((label) => (
+            <Chip
+              key={label}
+              label={label}
+              color={chips.includes(label) ? 'primary' : 'default'}
+              onClick={() => toggleChip(label)}
+            />
+          ))}
+        </Stack>
+      </Section>
+
+      <Section label="Switch">
+        <Switch defaultChecked />
+        <Switch />
+        <Switch defaultChecked color="secondary" />
+      </Section>
+
+      {/* ── Probe ─────────────────────────────────────────────────────── */}
+      <Section label="useTheme() snapshot — JS-only values reach the tree">
+        <ThemeProbe />
+      </Section>
+    </Box>
+  );
+}
+
+export default function CssPlayground() {
+  const [themeKey, setThemeKey] = React.useState<ThemeKey>('violet');
+  const [mode, setMode] = React.useState<Mode>('light');
+  return (
+    <CssThemeProvider theme={themes[themeKey]}>
+      <Page themeKey={themeKey} setThemeKey={setThemeKey} mode={mode} setMode={setMode} />
+    </CssThemeProvider>
+  );
+}
diff --git a/docs/pages/experiments/emotion-playground.tsx b/docs/pages/experiments/emotion-playground.tsx
new file mode 100644
index 00000000000000..774f2291a1bcf9
--- /dev/null
+++ b/docs/pages/experiments/emotion-playground.tsx
@@ -0,0 +1,299 @@
+'use client';
+import * as React from 'react';
+import { createTheme, ThemeProvider, styled, useColorScheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+
+// ---------- Themes ----------------------------------------------------------
+// Each theme defines a light and dark color scheme so the page can be inspected
+// in both modes. `cssVariables: true` opts into the CSS variables runtime so
+// `bgcolor: 'background.default'` and friends switch via CSS rather than
+// re-rendering with a different palette.
+
+const themes = {
+  violet: createTheme({
+    cssVariables: { colorSchemeSelector: 'data' },
+    colorSchemes: {
+      light: { palette: { primary: { main: '#7c3aed' }, secondary: { main: '#db2777' } } },
+      dark: { palette: { primary: { main: '#a78bfa' }, secondary: { main: '#f472b6' } } },
+    },
+    shape: { borderRadius: 12 },
+  }),
+  teal: createTheme({
+    cssVariables: { colorSchemeSelector: 'data' },
+    colorSchemes: {
+      light: { palette: { primary: { main: '#0d9488' }, secondary: { main: '#f59e0b' } } },
+      dark: { palette: { primary: { main: '#2dd4bf' }, secondary: { main: '#fbbf24' } } },
+    },
+    shape: { borderRadius: 4 },
+    components: {
+      MuiButton: {
+        styleOverrides: { root: { textTransform: 'uppercase', letterSpacing: '0.12em' } },
+      },
+    },
+  }),
+  blue: createTheme({
+    cssVariables: { colorSchemeSelector: 'data' },
+    colorSchemes: {
+      light: { palette: { primary: { main: '#1d4ed8' }, secondary: { main: '#dc2626' } } },
+      dark: { palette: { primary: { main: '#60a5fa' }, secondary: { main: '#f87171' } } },
+    },
+    shape: { borderRadius: 8 },
+    components: {
+      MuiButton: { defaultProps: { disableElevation: true } },
+    },
+  }),
+} as const;
+
+type ThemeKey = keyof typeof themes;
+
+// ---------- styled() example ------------------------------------------------
+
+const GlowButton = styled(Button)(({ theme }) => ({
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    inset: 0,
+    borderRadius: 'inherit',
+    background: `radial-gradient(ellipse at 50% 150%, ${theme.palette.primary.light}, transparent 70%)`,
+    opacity: 0,
+    transition: 'opacity 0.25s',
+    pointerEvents: 'none',
+  },
+  '&:hover::after': { opacity: 1 },
+  position: 'relative',
+  overflow: 'hidden',
+}));
+
+// ---------- Layout helpers --------------------------------------------------
+
+function Section({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <Box sx={{ mb: 5 }}>
+      <Typography
+        variant="overline"
+        sx={{
+          color: 'text.disabled',
+          fontWeight: 700,
+          letterSpacing: '0.1em',
+          display: 'block',
+          mb: 1.5,
+        }}
+      >
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
+
+// ---------- useMounted guard (avoid SSR hydration mismatch) ----------------
+
+function useMounted() {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+  return mounted;
+}
+
+// ---------- Page ------------------------------------------------------------
+
+function Page({
+  themeKey,
+  setThemeKey,
+}: {
+  themeKey: ThemeKey;
+  setThemeKey: (key: ThemeKey) => void;
+}) {
+  const { mode, setMode } = useColorScheme();
+  const mounted = useMounted();
+  const [sliderValue, setSliderValue] = React.useState<number>(40);
+  const [chips, setChips] = React.useState(['React', 'TypeScript']);
+
+  function toggleChip(label: string) {
+    setChips((prev) => (prev.includes(label) ? prev.filter((c) => c !== label) : [...prev, label]));
+  }
+
+  return (
+    <Box
+      sx={{
+        p: { xs: 3, md: 5 },
+        maxWidth: 760,
+        mx: 'auto',
+        minHeight: '100vh',
+        bgcolor: 'background.default',
+        color: 'text.primary',
+      }}
+    >
+      {/* Header */}
+      <Typography variant="h4" sx={{ fontWeight: 700, mb: 0.5 }}>
+        Emotion playground
+      </Typography>
+      <Typography variant="body2" sx={{ color: 'text.secondary', mb: 4 }}>
+        Explore <code>sx</code>, <code>styled()</code>, live theme switching, and{' '}
+        <code>createTheme</code> component overrides.
+      </Typography>
+
+      {/* ── Theme switcher ─────────────────────────────────────────────── */}
+      <Section label="Live theme">
+        <Stack direction="row" spacing={3} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
+          <ToggleButtonGroup
+            value={themeKey}
+            exclusive
+            onChange={(_, v) => v && setThemeKey(v as ThemeKey)}
+            size="small"
+          >
+            {(Object.keys(themes) as ThemeKey[]).map((key) => (
+              <ToggleButton key={key} value={key} sx={{ textTransform: 'capitalize', px: 2 }}>
+                {key}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+            <Typography variant="body2">Light</Typography>
+            <Switch
+              checked={mounted ? mode === 'dark' : false}
+              onChange={(event) => setMode(event.target.checked ? 'dark' : 'light')}
+            />
+            <Typography variant="body2">Dark</Typography>
+          </Stack>
+        </Stack>
+        <Typography variant="caption" sx={{ display: 'block', mt: 1, color: 'text.disabled' }}>
+          {themeKey === 'teal' && 'This theme overrides MuiButton — uppercase + wide tracking.'}
+          {themeKey === 'blue' && 'This theme sets disableElevation on all Buttons by default.'}
+          {themeKey === 'violet' && 'Default theme with rounded corners (borderRadius: 12).'}
+        </Typography>
+      </Section>
+
+      {/* ── sx prop ────────────────────────────────────────────────────── */}
+      <Section label="sx prop — theme-aware inline styles">
+        <Stack direction="row" spacing={2} useFlexGap sx={{ flexWrap: 'wrap' }}>
+          <Button variant="contained">Primary</Button>
+          <Button variant="contained" color="secondary">
+            Secondary
+          </Button>
+          <Button
+            variant="contained"
+            sx={{
+              background: (t) =>
+                `linear-gradient(135deg, ${t.palette.primary.main}, ${t.palette.secondary.main})`,
+              boxShadow: 'none',
+              '&:hover': { boxShadow: 4, filter: 'brightness(1.05)' },
+            }}
+          >
+            Gradient
+          </Button>
+          <Button variant="outlined" sx={{ borderWidth: 2, '&:hover': { borderWidth: 2 } }}>
+            Thick border
+          </Button>
+        </Stack>
+      </Section>
+
+      {/* ── styled() ───────────────────────────────────────────────────── */}
+      <Section label="styled() — component factory">
+        <Stack direction="row" spacing={2}>
+          <GlowButton variant="contained">Hover: glow effect</GlowButton>
+          <GlowButton variant="contained" color="secondary">
+            Secondary glow
+          </GlowButton>
+        </Stack>
+        <Typography variant="caption" sx={{ display: 'block', mt: 1, color: 'text.disabled' }}>
+          Radial gradient injected via <code>styled(Button)</code> using{' '}
+          <code>theme.palette.primary.light</code>.
+        </Typography>
+      </Section>
+
+      {/* ── Responsive sx ──────────────────────────────────────────────── */}
+      <Section label="Responsive sx values">
+        <Box
+          sx={{
+            p: { xs: 2, sm: 3, md: 4 },
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+            borderRadius: 2,
+            fontSize: { xs: '0.8rem', sm: '1rem', md: '1.15rem' },
+            transition: 'all 0.2s',
+          }}
+        >
+          Padding and font-size step up at 600 px (sm) and 900 px (md). Resize the window to see the
+          change.
+        </Box>
+      </Section>
+
+      {/* ── Slider sx ──────────────────────────────────────────────────── */}
+      <Section label="Slider with sx overrides">
+        <Slider
+          value={sliderValue}
+          onChange={(_, v) => setSliderValue(v as number)}
+          sx={{
+            // color: 'secondary.main',
+            // '& .MuiSlider-thumb': {
+            //   width: 22,
+            //   height: 22,
+            //   boxShadow: (t) => `0 0 0 7px ${t.palette.secondary.main}28`,
+            // },
+            // '& .MuiSlider-rail': { opacity: 0.3 },
+          }}
+        />
+        <Typography variant="body2" sx={{ mt: 0.5, color: 'text.secondary' }}>
+          Value: {sliderValue}
+        </Typography>
+      </Section>
+
+      {/* ── TextField sx ───────────────────────────────────────────────── */}
+      <Section label="TextField with sx slot targeting">
+        <Stack spacing={2} sx={{ maxWidth: 400 }}>
+          <TextField label="Default" />
+          <TextField
+            label="borderRadius × 4 via sx"
+            sx={{ '& .MuiOutlinedInput-root': { borderRadius: 4 } }}
+          />
+          <TextField label="Error state" error helperText="This field has an error" />
+        </Stack>
+      </Section>
+
+      {/* ── Chip interactive ───────────────────────────────────────────── */}
+      <Section label="Chips — toggled via sx color tokens">
+        <Stack direction="row" spacing={1} useFlexGap sx={{ flexWrap: 'wrap' }}>
+          {['React', 'TypeScript', 'Emotion', 'MUI', 'styled()'].map((label) => {
+            const active = chips.includes(label);
+            return (
+              <Chip
+                key={label}
+                label={label}
+                onClick={() => toggleChip(label)}
+                sx={{
+                  cursor: 'pointer',
+                  transition: 'all 0.15s',
+                  ...(active
+                    ? { bgcolor: 'primary.main', color: 'primary.contrastText' }
+                    : { bgcolor: 'action.hover' }),
+                  '&:hover': { filter: 'brightness(0.95)' },
+                }}
+              />
+            );
+          })}
+        </Stack>
+        <Typography variant="caption" sx={{ mt: 1, display: 'block', color: 'text.disabled' }}>
+          Active: {chips.join(', ') || 'none'}
+        </Typography>
+      </Section>
+    </Box>
+  );
+}
+
+export default function EmotionPlayground() {
+  const [themeKey, setThemeKey] = React.useState<ThemeKey>('violet');
+  return (
+    <ThemeProvider theme={themes[themeKey]}>
+      <Page themeKey={themeKey} setThemeKey={setThemeKey} />
+    </ThemeProvider>
+  );
+}
diff --git a/docs/pages/experiments/slider-css-benchmark.tsx b/docs/pages/experiments/slider-css-benchmark.tsx
new file mode 100644
index 00000000000000..5db7c03d66be01
--- /dev/null
+++ b/docs/pages/experiments/slider-css-benchmark.tsx
@@ -0,0 +1,83 @@
+'use client';
+import * as React from 'react';
+
+// Static CSS vars — no ThemeProvider, no Emotion runtime for the theme.
+// Generated by: pnpm -F @mui/material build:theme-css
+import '@mui/material/default-theme.css';
+
+import Box from '@mui/material/Box';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+// 100 sliders rendered with CSS-file styling only.
+// No sx prop, no Emotion theme injection.
+
+const COLORS = ['primary', 'secondary', 'error', 'warning', 'info', 'success'] as const;
+const SIZES = ['small', 'medium'] as const;
+
+type SliderConfig = {
+  color: (typeof COLORS)[number];
+  size: (typeof SIZES)[number];
+  defaultValue: number;
+  disabled: boolean;
+  marks: boolean;
+};
+
+function buildConfigs(count: number): SliderConfig[] {
+  return Array.from({ length: count }, (_, i) => ({
+    color: COLORS[i % COLORS.length],
+    size: SIZES[i % SIZES.length],
+    defaultValue: (i * 13) % 100,
+    disabled: i % 10 === 9,
+    marks: i % 3 === 0,
+  }));
+}
+
+const configs = buildConfigs(100);
+
+export default function SliderCssBenchmark() {
+  return (
+    <Box
+      sx={{
+        p: { xs: 3, md: 5 },
+        bgcolor: 'var(--mui-palette-background-default)',
+        color: 'var(--mui-palette-text-primary)',
+        minHeight: '100vh',
+      }}
+    >
+      <Typography variant="h5" sx={{ fontWeight: 700, mb: 0.5 }}>
+        CSS-only Slider benchmark
+      </Typography>
+      <Typography
+        variant="body2"
+        sx={{ color: 'var(--mui-palette-text-secondary)', mb: 4 }}
+      >
+        100 sliders — default CSS file, no Emotion, no ThemeProvider, no sx prop.
+      </Typography>
+
+      <Stack spacing={3}>
+        {configs.map((cfg, i) => (
+
+          <Box key={i}>
+            <Typography
+              variant="caption"
+              sx={{ color: 'var(--mui-palette-text-disabled)', display: 'block', mb: 0.5 }}
+            >
+              #{i + 1} · color={cfg.color} · size={cfg.size}
+              {cfg.disabled ? ' · disabled' : ''}
+              {cfg.marks ? ' · marks' : ''}
+            </Typography>
+            <Slider
+              defaultValue={cfg.defaultValue}
+              color={cfg.color}
+              size={cfg.size}
+              disabled={cfg.disabled}
+              marks={cfg.marks}
+            />
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/docs/pages/experiments/slider-emotion-benchmark.tsx b/docs/pages/experiments/slider-emotion-benchmark.tsx
new file mode 100644
index 00000000000000..20064be63b8071
--- /dev/null
+++ b/docs/pages/experiments/slider-emotion-benchmark.tsx
@@ -0,0 +1,99 @@
+'use client';
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+// 100 sliders rendered with Emotion + sx prop.
+// Each slider receives a unique sx override so Emotion generates a distinct class.
+
+const theme = createTheme({
+  cssVariables: { colorSchemeSelector: 'data-mui-color-scheme' },
+  colorSchemes: { light: true, dark: true },
+});
+
+const COLORS = ['primary', 'secondary', 'error', 'warning', 'info', 'success'] as const;
+const SIZES = ['small', 'medium'] as const;
+
+type SliderConfig = {
+  color: (typeof COLORS)[number];
+  size: (typeof SIZES)[number];
+  defaultValue: number;
+  disabled: boolean;
+  marks: boolean;
+  // sx values that vary per instance so Emotion can't cache a single class
+  thumbSize: number;
+  trackHeight: number;
+  opacity: number;
+};
+
+function buildConfigs(count: number): SliderConfig[] {
+  return Array.from({ length: count }, (_, i) => ({
+    color: COLORS[i % COLORS.length],
+    size: SIZES[i % SIZES.length],
+    defaultValue: (i * 13) % 100,
+    disabled: i % 10 === 9,
+    marks: i % 3 === 0,
+    thumbSize: 16 + (i % 8),
+    trackHeight: 3 + (i % 5),
+    opacity: 0.7 + (i % 4) * 0.075,
+  }));
+}
+
+const configs = buildConfigs(100);
+
+export default function SliderEmotionBenchmark() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Box
+        sx={{
+          p: { xs: 3, md: 5 },
+          bgcolor: 'background.default',
+          color: 'text.primary',
+          minHeight: '100vh',
+        }}
+      >
+        <Typography variant="h5" sx={{ fontWeight: 700, mb: 0.5 }}>
+          Emotion + sx Slider benchmark
+        </Typography>
+        <Typography variant="body2" sx={{ color: 'text.secondary', mb: 4 }}>
+          100 sliders — Emotion engine, ThemeProvider, each with a unique sx override.
+        </Typography>
+
+        <Stack spacing={3}>
+          {configs.map((cfg, i) => (
+            <Box key={i}>
+              <Typography
+                variant="caption"
+                sx={{ color: 'text.disabled', display: 'block', mb: 0.5 }}
+              >
+                #{i + 1} · color={cfg.color} · size={cfg.size} · thumbSize={cfg.thumbSize}
+                {cfg.disabled ? ' · disabled' : ''}
+                {cfg.marks ? ' · marks' : ''}
+              </Typography>
+              <Slider
+                defaultValue={cfg.defaultValue}
+                color={cfg.color}
+                size={cfg.size}
+                disabled={cfg.disabled}
+                marks={cfg.marks}
+                sx={{
+                  '& .MuiSlider-thumb': {
+                    width: cfg.thumbSize,
+                    height: cfg.thumbSize,
+                  },
+                  '& .MuiSlider-track': {
+                    height: cfg.trackHeight,
+                  },
+                  opacity: cfg.opacity,
+                }}
+              />
+            </Box>
+          ))}
+        </Stack>
+      </Box>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/pages/experiments/static-theme-playground.tsx b/docs/pages/experiments/static-theme-playground.tsx
new file mode 100644
index 00000000000000..ef2f7a2db77b5b
--- /dev/null
+++ b/docs/pages/experiments/static-theme-playground.tsx
@@ -0,0 +1,175 @@
+'use client';
+import * as React from 'react';
+
+// The pre-generated static CSS file — contains :root and
+// [data-mui-color-scheme="dark"] blocks with all MUI CSS variables.
+// Generated by: pnpm -F @mui/material build:theme-css
+import '@mui/material/default-theme.css';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+
+// ---------- Dark-mode toggle ------------------------------------------------
+// No ThemeProvider in this tree. We flip `data-mui-color-scheme` on
+// `document.documentElement` — matching the selectors the generated CSS uses.
+
+type Mode = 'light' | 'dark';
+
+function useDarkMode(): [Mode, (mode: Mode) => void] {
+  const [mode, setModeState] = React.useState<Mode>('light');
+
+  const setMode = React.useCallback((next: Mode) => {
+    document.documentElement.setAttribute('data-mui-color-scheme', next);
+    setModeState(next);
+  }, []);
+
+  return [mode, setMode];
+}
+
+// ---------- Layout helpers --------------------------------------------------
+
+function Section({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <Box sx={{ mb: 5 }}>
+      <Typography
+        variant="overline"
+        sx={{
+          color: 'var(--mui-palette-text-disabled)',
+          fontWeight: 700,
+          letterSpacing: '0.1em',
+          display: 'block',
+          mb: 1.5,
+        }}
+      >
+        {label}
+      </Typography>
+      {children}
+    </Box>
+  );
+}
+
+// ---------- Page ------------------------------------------------------------
+
+function Page({ mode, setMode }: { mode: Mode; setMode: (m: Mode) => void }) {
+  const [sliderValue, setSliderValue] = React.useState<number>(40);
+  const [chips, setChips] = React.useState(['React', 'CSS vars']);
+  const [textValue, setTextValue] = React.useState('');
+
+  function toggleChip(label: string) {
+    setChips((prev) =>
+      prev.includes(label) ? prev.filter((c) => c !== label) : [...prev, label],
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        p: { xs: 3, md: 5 },
+        maxWidth: 760,
+        mx: 'auto',
+        minHeight: '100vh',
+        bgcolor: 'var(--mui-palette-background-default)',
+        color: 'var(--mui-palette-text-primary)',
+      }}
+    >
+      <Typography variant="h4" sx={{ fontWeight: 700, mb: 0.5 }}>
+        Static theme playground
+      </Typography>
+      <Typography variant="body2" sx={{ color: 'var(--mui-palette-text-secondary)', mb: 4 }}>
+        No <code>ThemeProvider</code>, no Emotion runtime. All CSS variables come from{' '}
+        <code>default-theme.css</code> — a static file generated once at build time by{' '}
+        <code>scripts/buildDefaultThemeCss.mts</code>.
+      </Typography>
+
+      {/* ── Dark mode toggle ──────────────────────────────────────────── */}
+      <Section label="Dark mode (no re-render — just a DOM attribute flip)">
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <Typography variant="body2">Light</Typography>
+          <Switch
+            checked={mode === 'dark'}
+            onChange={(event) => setMode(event.target.checked ? 'dark' : 'light')}
+          />
+          <Typography variant="body2">Dark</Typography>
+        </Stack>
+        <Typography variant="caption" sx={{ display: 'block', mt: 1, color: 'var(--mui-palette-text-disabled)' }}>
+          Toggle calls{' '}
+          <code>document.documentElement.setAttribute(&quot;data-mui-color-scheme&quot;, ...)</code>
+          . No provider, no JS re-render needed.
+        </Typography>
+      </Section>
+
+      {/* ── Components ────────────────────────────────────────────────── */}
+      <Section label="Buttons (default + color + disabled)">
+        <Stack direction="row" spacing={2} useFlexGap sx={{ flexWrap: 'wrap' }}>
+          <Button variant="contained">Primary</Button>
+          <Button variant="contained" color="secondary">
+            Secondary
+          </Button>
+          <Button variant="outlined">Outlined</Button>
+          <Button variant="text">Text</Button>
+          <Button variant="contained" disabled>
+            Disabled
+          </Button>
+        </Stack>
+      </Section>
+
+      <Section label="Slider (animations confirm the transition fallbacks)">
+        <Slider value={sliderValue} onChange={(_, v) => setSliderValue(v as number)} />
+        <Typography variant="body2" sx={{ mt: 0.5, color: 'var(--mui-palette-text-secondary)' }}>
+          Value: {sliderValue}. Drag the thumb — movement should ease, not snap.
+        </Typography>
+      </Section>
+
+      <Section label="TextField (color + focus + helper)">
+        <Stack spacing={2} sx={{ maxWidth: 400 }}>
+          <TextField
+            label="Default"
+            value={textValue}
+            onChange={(event) => setTextValue(event.target.value)}
+          />
+          <TextField label="Error state" error helperText="This field has an error" />
+        </Stack>
+      </Section>
+
+      <Section label="Chips (interactive)">
+        <Stack direction="row" spacing={1} useFlexGap sx={{ flexWrap: 'wrap' }}>
+          {['React', 'CSS vars', 'No Provider', 'Static CSS'].map((label) => (
+            <Chip
+              key={label}
+              label={label}
+              color={chips.includes(label) ? 'primary' : 'default'}
+              onClick={() => toggleChip(label)}
+            />
+          ))}
+        </Stack>
+      </Section>
+
+      <Section label="Switch">
+        <Switch defaultChecked />
+        <Switch />
+        <Switch defaultChecked color="secondary" />
+      </Section>
+
+      <Section label="Toggle button group">
+        <ToggleButtonGroup value="center" exclusive size="small">
+          <ToggleButton value="left">Left</ToggleButton>
+          <ToggleButton value="center">Center</ToggleButton>
+          <ToggleButton value="right">Right</ToggleButton>
+        </ToggleButtonGroup>
+      </Section>
+    </Box>
+  );
+}
+
+export default function StaticThemePlayground() {
+  const [mode, setMode] = useDarkMode();
+  return <Page mode={mode} setMode={setMode} />;
+}
diff --git a/docs/pages/experiments/tailwind-playground.tsx b/docs/pages/experiments/tailwind-playground.tsx
new file mode 100644
index 00000000000000..1518500f24d2c3
--- /dev/null
+++ b/docs/pages/experiments/tailwind-playground.tsx
@@ -0,0 +1,291 @@
+'use client';
+import * as React from 'react';
+import { CssThemeProvider, createTheme } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+
+// ---------- Layout helpers --------------------------------------------------
+
+function Section({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="mb-10">
+      <p className="text-xs font-bold tracking-widest uppercase text-neutral-400 dark:text-neutral-500 mb-3">
+        {label}
+      </p>
+      {children}
+    </div>
+  );
+}
+
+// ---------- Page ------------------------------------------------------------
+
+const theme = createTheme({
+  cssVariables: { colorSchemeSelector: 'data-mui-color-scheme' },
+  colorSchemes: { light: true, dark: true },
+});
+
+// useMounted avoids SSR hydration mismatch on the Switch's checked prop
+function useMounted() {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+  return mounted;
+}
+
+function DarkModeToggle() {
+  const [dark, setDark] = React.useState(false);
+  const mounted = useMounted();
+
+  const toggle = (checked: boolean) => {
+    setDark(checked);
+    document.documentElement.setAttribute(
+      'data-mui-color-scheme',
+      checked ? 'dark' : 'light',
+    );
+  };
+
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+      <Typography variant="body2">Light</Typography>
+      <Switch
+        checked={mounted ? dark : false}
+        onChange={(event) => toggle(event.target.checked)}
+      />
+      <Typography variant="body2">Dark</Typography>
+    </Stack>
+  );
+}
+
+export default function TailwindPlayground() {
+  const [sliderValue, setSliderValue] = React.useState<number>(40);
+  const [pinkSliderValue, setPinkSliderValue] = React.useState<number>(65);
+  const [selected, setSelected] = React.useState<string[]>(['React', 'TypeScript']);
+  const [variant, setVariant] = React.useState<'rounded' | 'pill' | 'square'>('rounded');
+
+  const shapeClasses = { pill: 'rounded-full', square: 'rounded-none', rounded: 'rounded-lg' };
+  const shapeClass = shapeClasses[variant];
+
+  function toggleTag(tag: string) {
+    setSelected((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]));
+  }
+
+  return (
+    <CssThemeProvider theme={theme}>
+      <div className="p-6 md:p-10 max-w-3xl mx-auto min-h-screen bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100">
+        {/* Header */}
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ alignItems: 'flex-start', justifyContent: 'space-between', mb: 1 }}
+        >
+          <Typography variant="h4" className="font-bold">
+            Tailwind playground
+          </Typography>
+          <DarkModeToggle />
+        </Stack>
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-10">
+          MUI components styled with Tailwind utilities via <code>className</code>. Uses{' '}
+          <code>mui-&#123;state&#125;:</code> variants and Tailwind&apos;s responsive modifiers — no{' '}
+          <code>sx</code> prop needed.
+        </p>
+
+        {/* ── Buttons ────────────────────────────────────────────────────── */}
+        <Section label="Buttons — className overrides">
+          <div className="flex flex-wrap gap-3">
+            <Button variant="contained" className="rounded-full shadow-none normal-case">
+              Pill contained
+            </Button>
+            <Button
+              variant="outlined"
+              className="rounded-none border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-950 hover:border-indigo-600 normal-case"
+            >
+              Square outlined
+            </Button>
+            <Button
+              variant="contained"
+              className="bg-gradient-to-r from-violet-600 to-pink-600 border-0 shadow-none hover:opacity-90 normal-case rounded-xl"
+            >
+              Gradient
+            </Button>
+            <Button variant="contained" disabled className="mui-disabled:opacity-40 normal-case">
+              mui-disabled:opacity-40
+            </Button>
+          </div>
+        </Section>
+
+        {/* ── Shape variant switcher ─────────────────────────────────────── */}
+        <Section label="ToggleButtonGroup — mui-selected: variant">
+          <div className="flex flex-col gap-4">
+            <ToggleButtonGroup
+              value={variant}
+              exclusive
+              onChange={(_, v) => v && setVariant(v)}
+              className="gap-2 border-0"
+            >
+              {(['rounded', 'pill', 'square'] as const).map((v) => (
+                <ToggleButton
+                  key={v}
+                  value={v}
+                  className="
+                    capitalize border border-neutral-300 dark:border-neutral-600
+                    bg-white dark:bg-neutral-900
+                    text-neutral-700 dark:text-neutral-300
+                    hover:bg-neutral-50 dark:hover:bg-neutral-800
+                    mui-selected:bg-indigo-600 mui-selected:text-white
+                    mui-selected:border-indigo-600 dark:mui-selected:bg-indigo-700
+                    normal-case px-4
+                  "
+                >
+                  {v}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
+            {/* Live preview of selected shape */}
+            <div
+              className={`
+                inline-flex items-center justify-center px-5 py-2 text-sm font-medium
+                bg-indigo-600 text-white transition-all duration-200
+                ${shapeClass}
+              `}
+            >
+              Preview: {variant}
+            </div>
+          </div>
+        </Section>
+
+        {/* ── Filter chips ───────────────────────────────────────────────── */}
+        <Section label="Chips — manual Mui-selected + mui-selected: variant">
+          <div className="flex flex-wrap gap-2">
+            {['React', 'TypeScript', 'CSS', 'Tailwind', 'MUI'].map((tag) => (
+              <Chip
+                key={tag}
+                label={tag}
+                onClick={() => toggleTag(tag)}
+                className={`
+                  cursor-pointer transition-colors normal-case
+                  border border-neutral-300 dark:border-neutral-600
+                  mui-selected:bg-indigo-600 mui-selected:text-white
+                  mui-selected:border-indigo-600 dark:mui-selected:bg-indigo-700
+                  ${selected.includes(tag) ? 'Mui-selected' : ''}
+                `}
+              />
+            ))}
+          </div>
+          <p className="mt-2 text-xs text-neutral-400 dark:text-neutral-500">
+            Active: {selected.join(', ') || 'none'}
+          </p>
+        </Section>
+
+        {/* ── Slider ─────────────────────────────────────────────────────── */}
+        <Section label="Slider — Tailwind width, responsive, and color override">
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-1">
+              <Slider
+                value={sliderValue}
+                onChange={(_, v) => setSliderValue(v as number)}
+                className="w-full sm:w-80"
+              />
+              <p className="text-xs text-neutral-400 dark:text-neutral-500">
+                Default color — value: {sliderValue}
+              </p>
+            </div>
+            <div className="flex flex-col gap-1">
+              {/*
+               * TODO: Slider.css hardcodes hover/focus box-shadow to
+               * rgba(var(--mui-palette-*-mainChannel) / 0.16) instead of using
+               * color-mix(in srgb, currentColor 16%, transparent).
+               * Until that's fixed, override the thumb states explicitly here.
+               */}
+              <Slider
+                value={pinkSliderValue}
+                onChange={(_, v) => setPinkSliderValue(v as number)}
+                className="
+                  w-full sm:w-80 text-pink-500 dark:text-green-500
+                  [&_.MuiSlider-thumb:hover]:shadow-[0px_0px_0px_8px_color-mix(in_srgb,_theme(colors.pink.500)_16%,_transparent)]
+                  [&_.MuiSlider-thumb.Mui-focusVisible]:shadow-[0px_0px_0px_8px_color-mix(in_srgb,_theme(colors.pink.500)_16%,_transparent)]
+                  [&_.MuiSlider-thumb.Mui-active]:shadow-[0px_0px_0px_14px_color-mix(in_srgb,_theme(colors.pink.500)_16%,_transparent)]
+                "
+              />
+              <p className="text-xs text-neutral-400 dark:text-neutral-500">
+                <code>className=&quot;text-pink-500&quot;</code> — track &amp; thumb use{' '}
+                <code>currentColor</code>; hover/focus overridden manually until Slider.css is
+                updated — value: {pinkSliderValue}
+              </p>
+            </div>
+          </div>
+        </Section>
+
+        {/* ── TextField ──────────────────────────────────────────────────── */}
+        <Section label="TextField — mui-focused: + mui-error: variants">
+          <div className="flex flex-col gap-4 max-w-sm">
+            <TextField
+              label="Focused ring (mui-focused:)"
+              className="
+                [&_.MuiOutlinedInput-root]:transition-shadow
+                [&_.MuiOutlinedInput-root.Mui-focused]:ring-2
+                [&_.MuiOutlinedInput-root.Mui-focused]:ring-indigo-500/30
+                [&_.MuiOutlinedInput-root.Mui-focused]:ring-offset-0
+              "
+            />
+            <TextField
+              label="Error state"
+              error
+              helperText="mui-error: styling applies here"
+              className="
+                [&_.MuiFormHelperText-root]:font-semibold
+                [&_.MuiOutlinedInput-root.Mui-error]:bg-red-50
+                dark:[&_.MuiOutlinedInput-root.Mui-error]:bg-red-950/30
+              "
+            />
+          </div>
+        </Section>
+
+        {/* ── Responsive layout ──────────────────────────────────────────── */}
+        <Section label="Responsive grid — Tailwind sm: / md: breakpoints">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+            {['Buttons', 'Inputs', 'Feedback', 'Navigation', 'Surfaces', 'Data display'].map(
+              (name) => (
+                <div
+                  key={name}
+                  className="rounded-xl border border-neutral-200 dark:border-neutral-700 p-4 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-default"
+                >
+                  {name}
+                </div>
+              ),
+            )}
+          </div>
+          <p className="mt-2 text-xs text-neutral-400 dark:text-neutral-500">
+            1 column → 2 at sm (600 px) → 3 at md (900 px)
+          </p>
+        </Section>
+
+        {/* ── Stack + spacing ────────────────────────────────────────────── */}
+        <Section label="Mixed: Tailwind layout + MUI components">
+          <div className="flex flex-wrap items-center gap-3 p-4 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700">
+            <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-300 flex-1">
+              Component toolbar
+            </span>
+            <Stack direction="row" spacing={1}>
+              <Button size="small" variant="outlined" className="normal-case rounded-full">
+                Cancel
+              </Button>
+              <Button
+                size="small"
+                variant="contained"
+                className="normal-case rounded-full shadow-none"
+              >
+                Save
+              </Button>
+            </Stack>
+          </div>
+        </Section>
+      </div>
+    </CssThemeProvider>
+  );
+}
diff --git a/docs/pages/global.css b/docs/pages/global.css
index 2e7ff043d25b9f..dc3acf9c2cdfd4 100644
--- a/docs/pages/global.css
+++ b/docs/pages/global.css
@@ -1,3 +1,34 @@
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);
 @config '../tailwind.config.mjs';
+
+/* Make Tailwind's `dark:` variant follow MUI's `colorSchemeSelector: 'data'`
+   so JS toggles via `useColorScheme()` flip Tailwind utilities too. */
+@custom-variant dark (&:where([data-mui-color-scheme='dark'], [data-mui-color-scheme='dark'] *));
+
+/* ── @mui/tailwind: MUI state variants ─────────────────────────────────────
+   Enables `mui-{state}:` and `mui-not-{state}:` modifier classes.
+   Example: `mui-disabled:opacity-50 mui-selected:bg-indigo-600/10`
+   ────────────────────────────────────────────────────────────────────────── */
+@custom-variant mui-active (&.Mui-active);
+@custom-variant mui-not-active (&:not(.Mui-active));
+@custom-variant mui-checked (&.Mui-checked);
+@custom-variant mui-not-checked (&:not(.Mui-checked));
+@custom-variant mui-completed (&.Mui-completed);
+@custom-variant mui-not-completed (&:not(.Mui-completed));
+@custom-variant mui-disabled (&.Mui-disabled);
+@custom-variant mui-not-disabled (&:not(.Mui-disabled));
+@custom-variant mui-error (&.Mui-error);
+@custom-variant mui-not-error (&:not(.Mui-error));
+@custom-variant mui-expanded (&.Mui-expanded);
+@custom-variant mui-not-expanded (&:not(.Mui-expanded));
+@custom-variant mui-focused (&.Mui-focused);
+@custom-variant mui-not-focused (&:not(.Mui-focused));
+@custom-variant mui-focus-visible (&.Mui-focusVisible);
+@custom-variant mui-not-focus-visible (&:not(.Mui-focusVisible));
+@custom-variant mui-readonly (&.Mui-readOnly);
+@custom-variant mui-not-readonly (&:not(.Mui-readOnly));
+@custom-variant mui-required (&.Mui-required);
+@custom-variant mui-not-required (&:not(.Mui-required));
+@custom-variant mui-selected (&.Mui-selected);
+@custom-variant mui-not-selected (&:not(.Mui-selected));
diff --git a/docs/pages/material-ui/integrations/tailwindcss/tailwindcss-components.js b/docs/pages/material-ui/integrations/tailwindcss/tailwindcss-components.js
new file mode 100644
index 00000000000000..596e915c6d2a35
--- /dev/null
+++ b/docs/pages/material-ui/integrations/tailwindcss/tailwindcss-components.js
@@ -0,0 +1,6 @@
+import { MarkdownDocs } from '@mui/internal-core-docs/MarkdownDocs';
+import * as pageProps from 'docs/data/material/integrations/tailwindcss/tailwindcss-components.md?muiMarkdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}
diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js
index 8d3777630b369b..92de4cdc92596e 100644
--- a/docs/src/modules/components/MaterialUIExampleCollection.js
+++ b/docs/src/modules/components/MaterialUIExampleCollection.js
@@ -42,7 +42,7 @@ const examples = [
     src: '/static/images/examples/remix.svg',
   },
   {
-    name: 'Tailwind CSS + Vite',
+    name: 'Tailwind CSS + Vite',
     label: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-tailwind-ts',
     src: '/static/images/examples/tailwindcss.svg',
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 00f55bd886bd63..b9ab7ebc527b04 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -165,7 +165,7 @@
     "/material-ui/guides/composition": "Composition",
     "/material-ui/guides/content-security-policy": "Content Security Policy",
     "/material-ui/integrations": "Integrations",
-    "/material-ui/integrations/tailwindcss/tailwindcss-v4": "Tailwind CSS v4 integration",
+    "/material-ui/integrations/tailwindcss/tailwindcss-v4": "Tailwind CSS v4 integration",
     "/material-ui/integrations/nextjs": "Next.js integration",
     "/material-ui/integrations/routing": "Routing libraries",
     "/material-ui/integrations/styled-components": "Usage with styled-components",
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 010ee11d9f7078..3c1a7248191792 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -350,6 +350,14 @@ export default defineConfig(
       'no-console': 'off',
     },
   },
+  {
+    files: [`test/noop-vite-sandbox/**/*${EXTENSION_TS}`],
+    rules: {
+      'import/extensions': 'off',
+      'import/no-unresolved': 'off',
+      'import/no-relative-packages': 'off',
+    },
+  },
   {
     files: ['docs/src/pages/premium-themes/onepirate/modules/form/RFTextField.js'],
     rules: {
diff --git a/examples/material-ui-vite-tailwind-ts/index.html b/examples/material-ui-vite-tailwind-ts/index.html
index 08f00fdd1a23ad..d61d090c14098c 100644
--- a/examples/material-ui-vite-tailwind-ts/index.html
+++ b/examples/material-ui-vite-tailwind-ts/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="initial-scale=1, width=device-width" />
-    <title>Vite + Material UI + TS + Tailwind CSS</title>
+    <title>Vite + Material UI + TS + Tailwind CSS</title>
     <!-- Fonts to support Material Design -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/package.json b/package.json
index 81fe29b5cfe654..3e483aaa279711 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,7 @@
     "@eslint/compat": "2.0.5",
     "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.27",
     "@mui/internal-bundle-size-checker": "1.0.9-canary.78",
-    "@mui/internal-code-infra": "0.0.4-canary.45",
+    "@mui/internal-code-infra": "https://pkg.pr.new/mui/mui-public/@mui/internal-code-infra@56fef1c",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-netlify-cache": "0.0.3-canary.5",
     "@mui/internal-scripts": "workspace:^",
diff --git a/packages-internal/api-docs-builder-core/materialUi/projectSettings.ts b/packages-internal/api-docs-builder-core/materialUi/projectSettings.ts
index a52477fe5e64cd..231bbc3567ebd3 100644
--- a/packages-internal/api-docs-builder-core/materialUi/projectSettings.ts
+++ b/packages-internal/api-docs-builder-core/materialUi/projectSettings.ts
@@ -38,7 +38,11 @@ export const projectSettings: ProjectSettings = {
   getComponentInfo: getMaterialUiComponentInfo,
   translationLanguages: LANGUAGES,
   skipComponent(filename: string) {
-    return filename.match(/(ThemeProvider|CssVarsProvider|DefaultPropsProvider)/) !== null;
+    return (
+      filename.match(
+        /(ThemeProvider|CssVarsProvider|DefaultPropsProvider|SliderEmotion|CssVarsInjector|CssThemeProvider)/,
+      ) !== null
+    );
   },
   translationPagesDirectory: 'docs/translations/api-docs',
   generateClassName,
diff --git a/packages/mui-material/default-theme.css b/packages/mui-material/default-theme.css
new file mode 100644
index 00000000000000..e266e007b457e3
--- /dev/null
+++ b/packages/mui-material/default-theme.css
@@ -0,0 +1,414 @@
+/*
+ * MUI default theme — generated by scripts/buildDefaultThemeCss.mts
+ * DO NOT EDIT MANUALLY.
+ *
+ * Import this file once at the root of your application:
+ *   import "@mui/material/default-theme.css";
+ *
+ * Then toggle dark mode by setting:
+ *   document.documentElement.setAttribute("data-mui-color-scheme", "dark");
+ */
+:root {
+  --mui-spacing: 8px;
+  --mui-shape-borderRadius: 4px;
+  --mui-shadows-0: none;
+  --mui-shadows-1: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
+  --mui-shadows-2: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
+  --mui-shadows-3: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12);
+  --mui-shadows-4: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
+  --mui-shadows-5: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12);
+  --mui-shadows-6: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
+  --mui-shadows-7: 0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12);
+  --mui-shadows-8: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+  --mui-shadows-9: 0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12);
+  --mui-shadows-10: 0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12);
+  --mui-shadows-11: 0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12);
+  --mui-shadows-12: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
+  --mui-shadows-13: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12);
+  --mui-shadows-14: 0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12);
+  --mui-shadows-15: 0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12);
+  --mui-shadows-16: 0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12);
+  --mui-shadows-17: 0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12);
+  --mui-shadows-18: 0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12);
+  --mui-shadows-19: 0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12);
+  --mui-shadows-20: 0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12);
+  --mui-shadows-21: 0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12);
+  --mui-shadows-22: 0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12);
+  --mui-shadows-23: 0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12);
+  --mui-shadows-24: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);
+  --mui-transitions-easing-easeInOut: cubic-bezier(0.4, 0, 0.2, 1);
+  --mui-transitions-easing-easeOut: cubic-bezier(0.0, 0, 0.2, 1);
+  --mui-transitions-easing-easeIn: cubic-bezier(0.4, 0, 1, 1);
+  --mui-transitions-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
+  --mui-transitions-duration-shortest: 150ms;
+  --mui-transitions-duration-shorter: 200ms;
+  --mui-transitions-duration-short: 250ms;
+  --mui-transitions-duration-standard: 300ms;
+  --mui-transitions-duration-complex: 375ms;
+  --mui-transitions-duration-enteringScreen: 225ms;
+  --mui-transitions-duration-leavingScreen: 195ms;
+  --mui-zIndex-mobileStepper: 1000;
+  --mui-zIndex-fab: 1050;
+  --mui-zIndex-speedDial: 1050;
+  --mui-zIndex-appBar: 1100;
+  --mui-zIndex-drawer: 1200;
+  --mui-zIndex-modal: 1300;
+  --mui-zIndex-snackbar: 1400;
+  --mui-zIndex-tooltip: 1500;
+  --mui-font-h1: 300 6rem/1.167 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-h2: 300 3.75rem/1.2 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-h3: 400 3rem/1.167 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-h4: 400 2.125rem/1.235 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-h5: 400 1.5rem/1.334 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-h6: 500 1.25rem/1.6 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-subtitle1: 400 1rem/1.75 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-subtitle2: 500 0.875rem/1.57 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-body1: 400 1rem/1.5 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-body2: 400 0.875rem/1.43 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-button: 500 0.875rem/1.75 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-caption: 400 0.75rem/1.66 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-overline: 400 0.75rem/2.66 "Roboto", "Helvetica", "Arial", sans-serif;
+  --mui-font-inherit: inherit inherit/inherit inherit;
+}
+:root, [data-mui-color-scheme="light"] {
+  color-scheme: light;
+  --mui-palette-common-black: #000;
+  --mui-palette-common-white: #fff;
+  --mui-palette-common-background: #fff;
+  --mui-palette-common-onBackground: #000;
+  --mui-palette-common-backgroundChannel: 255 255 255;
+  --mui-palette-common-onBackgroundChannel: 0 0 0;
+  --mui-palette-primary-main: #1976d2;
+  --mui-palette-primary-light: #42a5f5;
+  --mui-palette-primary-dark: #1565c0;
+  --mui-palette-primary-contrastText: #fff;
+  --mui-palette-primary-mainChannel: 25 118 210;
+  --mui-palette-primary-lightChannel: 66 165 245;
+  --mui-palette-primary-darkChannel: 21 101 192;
+  --mui-palette-primary-contrastTextChannel: 255 255 255;
+  --mui-palette-secondary-main: #9c27b0;
+  --mui-palette-secondary-light: #ba68c8;
+  --mui-palette-secondary-dark: #7b1fa2;
+  --mui-palette-secondary-contrastText: #fff;
+  --mui-palette-secondary-mainChannel: 156 39 176;
+  --mui-palette-secondary-lightChannel: 186 104 200;
+  --mui-palette-secondary-darkChannel: 123 31 162;
+  --mui-palette-secondary-contrastTextChannel: 255 255 255;
+  --mui-palette-error-main: #d32f2f;
+  --mui-palette-error-light: #ef5350;
+  --mui-palette-error-dark: #c62828;
+  --mui-palette-error-contrastText: #fff;
+  --mui-palette-error-mainChannel: 211 47 47;
+  --mui-palette-error-lightChannel: 239 83 80;
+  --mui-palette-error-darkChannel: 198 40 40;
+  --mui-palette-error-contrastTextChannel: 255 255 255;
+  --mui-palette-warning-main: #ed6c02;
+  --mui-palette-warning-light: #ff9800;
+  --mui-palette-warning-dark: #e65100;
+  --mui-palette-warning-contrastText: #fff;
+  --mui-palette-warning-mainChannel: 237 108 2;
+  --mui-palette-warning-lightChannel: 255 152 0;
+  --mui-palette-warning-darkChannel: 230 81 0;
+  --mui-palette-warning-contrastTextChannel: 255 255 255;
+  --mui-palette-info-main: #0288d1;
+  --mui-palette-info-light: #03a9f4;
+  --mui-palette-info-dark: #01579b;
+  --mui-palette-info-contrastText: #fff;
+  --mui-palette-info-mainChannel: 2 136 209;
+  --mui-palette-info-lightChannel: 3 169 244;
+  --mui-palette-info-darkChannel: 1 87 155;
+  --mui-palette-info-contrastTextChannel: 255 255 255;
+  --mui-palette-success-main: #2e7d32;
+  --mui-palette-success-light: #4caf50;
+  --mui-palette-success-dark: #1b5e20;
+  --mui-palette-success-contrastText: #fff;
+  --mui-palette-success-mainChannel: 46 125 50;
+  --mui-palette-success-lightChannel: 76 175 80;
+  --mui-palette-success-darkChannel: 27 94 32;
+  --mui-palette-success-contrastTextChannel: 255 255 255;
+  --mui-palette-grey-50: #fafafa;
+  --mui-palette-grey-100: #f5f5f5;
+  --mui-palette-grey-200: #eeeeee;
+  --mui-palette-grey-300: #e0e0e0;
+  --mui-palette-grey-400: #bdbdbd;
+  --mui-palette-grey-500: #9e9e9e;
+  --mui-palette-grey-600: #757575;
+  --mui-palette-grey-700: #616161;
+  --mui-palette-grey-800: #424242;
+  --mui-palette-grey-900: #212121;
+  --mui-palette-grey-A100: #f5f5f5;
+  --mui-palette-grey-A200: #eeeeee;
+  --mui-palette-grey-A400: #bdbdbd;
+  --mui-palette-grey-A700: #616161;
+  --mui-palette-text-primary: rgba(0, 0, 0, 0.87);
+  --mui-palette-text-secondary: rgba(0, 0, 0, 0.6);
+  --mui-palette-text-disabled: rgba(0, 0, 0, 0.38);
+  --mui-palette-text-primaryChannel: 0 0 0;
+  --mui-palette-text-secondaryChannel: 0 0 0;
+  --mui-palette-divider: rgba(0, 0, 0, 0.12);
+  --mui-palette-background-paper: #fff;
+  --mui-palette-background-default: #fff;
+  --mui-palette-background-defaultChannel: 255 255 255;
+  --mui-palette-background-paperChannel: 255 255 255;
+  --mui-palette-action-active: rgba(0, 0, 0, 0.54);
+  --mui-palette-action-hover: rgba(0, 0, 0, 0.04);
+  --mui-palette-action-hoverOpacity: 0.04;
+  --mui-palette-action-selected: rgba(0, 0, 0, 0.08);
+  --mui-palette-action-selectedOpacity: 0.08;
+  --mui-palette-action-disabled: rgba(0, 0, 0, 0.26);
+  --mui-palette-action-disabledBackground: rgba(0, 0, 0, 0.12);
+  --mui-palette-action-disabledOpacity: 0.38;
+  --mui-palette-action-focus: rgba(0, 0, 0, 0.12);
+  --mui-palette-action-focusOpacity: 0.12;
+  --mui-palette-action-activatedOpacity: 0.12;
+  --mui-palette-action-activeChannel: 0 0 0;
+  --mui-palette-action-selectedChannel: 0 0 0;
+  --mui-palette-Alert-errorColor: rgb(95, 33, 32);
+  --mui-palette-Alert-infoColor: rgb(1, 67, 97);
+  --mui-palette-Alert-successColor: rgb(30, 70, 32);
+  --mui-palette-Alert-warningColor: rgb(102, 60, 0);
+  --mui-palette-Alert-errorFilledBg: var(--mui-palette-error-main, #d32f2f);
+  --mui-palette-Alert-infoFilledBg: var(--mui-palette-info-main, #0288d1);
+  --mui-palette-Alert-successFilledBg: var(--mui-palette-success-main, #2e7d32);
+  --mui-palette-Alert-warningFilledBg: var(--mui-palette-warning-main, #ed6c02);
+  --mui-palette-Alert-errorFilledColor: #fff;
+  --mui-palette-Alert-infoFilledColor: #fff;
+  --mui-palette-Alert-successFilledColor: #fff;
+  --mui-palette-Alert-warningFilledColor: #fff;
+  --mui-palette-Alert-errorStandardBg: rgb(253, 237, 237);
+  --mui-palette-Alert-infoStandardBg: rgb(229, 246, 253);
+  --mui-palette-Alert-successStandardBg: rgb(237, 247, 237);
+  --mui-palette-Alert-warningStandardBg: rgb(255, 244, 229);
+  --mui-palette-Alert-errorIconColor: var(--mui-palette-error-main, #d32f2f);
+  --mui-palette-Alert-infoIconColor: var(--mui-palette-info-main, #0288d1);
+  --mui-palette-Alert-successIconColor: var(--mui-palette-success-main, #2e7d32);
+  --mui-palette-Alert-warningIconColor: var(--mui-palette-warning-main, #ed6c02);
+  --mui-palette-AppBar-defaultBg: var(--mui-palette-grey-100, #f5f5f5);
+  --mui-palette-Avatar-defaultBg: var(--mui-palette-grey-400, #bdbdbd);
+  --mui-palette-Button-inheritContainedBg: var(--mui-palette-grey-300, #e0e0e0);
+  --mui-palette-Button-inheritContainedHoverBg: var(--mui-palette-grey-A100, #f5f5f5);
+  --mui-palette-Chip-defaultBorder: var(--mui-palette-grey-400, #bdbdbd);
+  --mui-palette-Chip-defaultAvatarColor: var(--mui-palette-grey-700, #616161);
+  --mui-palette-Chip-defaultIconColor: var(--mui-palette-grey-700, #616161);
+  --mui-palette-FilledInput-bg: rgba(0, 0, 0, 0.06);
+  --mui-palette-FilledInput-hoverBg: rgba(0, 0, 0, 0.09);
+  --mui-palette-FilledInput-disabledBg: rgba(0, 0, 0, 0.12);
+  --mui-palette-LinearProgress-primaryBg: rgb(167, 202, 237);
+  --mui-palette-LinearProgress-secondaryBg: rgb(217, 172, 224);
+  --mui-palette-LinearProgress-errorBg: rgb(238, 175, 175);
+  --mui-palette-LinearProgress-infoBg: rgb(158, 209, 237);
+  --mui-palette-LinearProgress-successBg: rgb(175, 205, 177);
+  --mui-palette-LinearProgress-warningBg: rgb(248, 199, 158);
+  --mui-palette-Skeleton-bg: rgba(var(--mui-palette-text-primaryChannel, undefined) / 0.11);
+  --mui-palette-Slider-primaryTrack: rgb(167, 202, 237);
+  --mui-palette-Slider-secondaryTrack: rgb(217, 172, 224);
+  --mui-palette-Slider-errorTrack: rgb(238, 175, 175);
+  --mui-palette-Slider-infoTrack: rgb(158, 209, 237);
+  --mui-palette-Slider-successTrack: rgb(175, 205, 177);
+  --mui-palette-Slider-warningTrack: rgb(248, 199, 158);
+  --mui-palette-SnackbarContent-bg: rgb(50, 50, 50);
+  --mui-palette-SnackbarContent-color: #fff;
+  --mui-palette-SpeedDialAction-fabHoverBg: rgb(216, 216, 216);
+  --mui-palette-StepConnector-border: var(--mui-palette-grey-400, #bdbdbd);
+  --mui-palette-StepContent-border: var(--mui-palette-grey-400, #bdbdbd);
+  --mui-palette-Switch-defaultColor: var(--mui-palette-common-white, #fff);
+  --mui-palette-Switch-defaultDisabledColor: var(--mui-palette-grey-100, #f5f5f5);
+  --mui-palette-Switch-primaryDisabledColor: rgb(167, 202, 237);
+  --mui-palette-Switch-secondaryDisabledColor: rgb(217, 172, 224);
+  --mui-palette-Switch-errorDisabledColor: rgb(238, 175, 175);
+  --mui-palette-Switch-infoDisabledColor: rgb(158, 209, 237);
+  --mui-palette-Switch-successDisabledColor: rgb(175, 205, 177);
+  --mui-palette-Switch-warningDisabledColor: rgb(248, 199, 158);
+  --mui-palette-TableCell-border: rgba(224, 224, 224, 1);
+  --mui-palette-Tooltip-bg: rgba(97, 97, 97, 0.92);
+  --mui-palette-dividerChannel: 0 0 0;
+  --mui-opacity-inputPlaceholder: 0.42;
+  --mui-opacity-inputUnderline: 0.42;
+  --mui-opacity-switchTrackDisabled: 0.12;
+  --mui-opacity-switchTrack: 0.38;
+}
+[data-mui-color-scheme="dark"] {
+  color-scheme: dark;
+  --mui-palette-common-black: #000;
+  --mui-palette-common-white: #fff;
+  --mui-palette-common-background: #000;
+  --mui-palette-common-onBackground: #fff;
+  --mui-palette-common-backgroundChannel: 0 0 0;
+  --mui-palette-common-onBackgroundChannel: 255 255 255;
+  --mui-palette-primary-main: #90caf9;
+  --mui-palette-primary-light: #e3f2fd;
+  --mui-palette-primary-dark: #42a5f5;
+  --mui-palette-primary-contrastText: rgba(0, 0, 0, 0.87);
+  --mui-palette-primary-mainChannel: 144 202 249;
+  --mui-palette-primary-lightChannel: 227 242 253;
+  --mui-palette-primary-darkChannel: 66 165 245;
+  --mui-palette-primary-contrastTextChannel: 0 0 0;
+  --mui-palette-secondary-main: #ce93d8;
+  --mui-palette-secondary-light: #f3e5f5;
+  --mui-palette-secondary-dark: #ab47bc;
+  --mui-palette-secondary-contrastText: rgba(0, 0, 0, 0.87);
+  --mui-palette-secondary-mainChannel: 206 147 216;
+  --mui-palette-secondary-lightChannel: 243 229 245;
+  --mui-palette-secondary-darkChannel: 171 71 188;
+  --mui-palette-secondary-contrastTextChannel: 0 0 0;
+  --mui-palette-error-main: #f44336;
+  --mui-palette-error-light: #e57373;
+  --mui-palette-error-dark: #d32f2f;
+  --mui-palette-error-contrastText: #fff;
+  --mui-palette-error-mainChannel: 244 67 54;
+  --mui-palette-error-lightChannel: 229 115 115;
+  --mui-palette-error-darkChannel: 211 47 47;
+  --mui-palette-error-contrastTextChannel: 255 255 255;
+  --mui-palette-warning-main: #ffa726;
+  --mui-palette-warning-light: #ffb74d;
+  --mui-palette-warning-dark: #f57c00;
+  --mui-palette-warning-contrastText: rgba(0, 0, 0, 0.87);
+  --mui-palette-warning-mainChannel: 255 167 38;
+  --mui-palette-warning-lightChannel: 255 183 77;
+  --mui-palette-warning-darkChannel: 245 124 0;
+  --mui-palette-warning-contrastTextChannel: 0 0 0;
+  --mui-palette-info-main: #29b6f6;
+  --mui-palette-info-light: #4fc3f7;
+  --mui-palette-info-dark: #0288d1;
+  --mui-palette-info-contrastText: rgba(0, 0, 0, 0.87);
+  --mui-palette-info-mainChannel: 41 182 246;
+  --mui-palette-info-lightChannel: 79 195 247;
+  --mui-palette-info-darkChannel: 2 136 209;
+  --mui-palette-info-contrastTextChannel: 0 0 0;
+  --mui-palette-success-main: #66bb6a;
+  --mui-palette-success-light: #81c784;
+  --mui-palette-success-dark: #388e3c;
+  --mui-palette-success-contrastText: rgba(0, 0, 0, 0.87);
+  --mui-palette-success-mainChannel: 102 187 106;
+  --mui-palette-success-lightChannel: 129 199 132;
+  --mui-palette-success-darkChannel: 56 142 60;
+  --mui-palette-success-contrastTextChannel: 0 0 0;
+  --mui-palette-grey-50: #fafafa;
+  --mui-palette-grey-100: #f5f5f5;
+  --mui-palette-grey-200: #eeeeee;
+  --mui-palette-grey-300: #e0e0e0;
+  --mui-palette-grey-400: #bdbdbd;
+  --mui-palette-grey-500: #9e9e9e;
+  --mui-palette-grey-600: #757575;
+  --mui-palette-grey-700: #616161;
+  --mui-palette-grey-800: #424242;
+  --mui-palette-grey-900: #212121;
+  --mui-palette-grey-A100: #f5f5f5;
+  --mui-palette-grey-A200: #eeeeee;
+  --mui-palette-grey-A400: #bdbdbd;
+  --mui-palette-grey-A700: #616161;
+  --mui-palette-text-primary: #fff;
+  --mui-palette-text-secondary: rgba(255, 255, 255, 0.7);
+  --mui-palette-text-disabled: rgba(255, 255, 255, 0.5);
+  --mui-palette-text-icon: rgba(255, 255, 255, 0.5);
+  --mui-palette-text-primaryChannel: 255 255 255;
+  --mui-palette-text-secondaryChannel: 255 255 255;
+  --mui-palette-divider: rgba(255, 255, 255, 0.12);
+  --mui-palette-background-paper: #121212;
+  --mui-palette-background-default: #121212;
+  --mui-palette-background-defaultChannel: 18 18 18;
+  --mui-palette-background-paperChannel: 18 18 18;
+  --mui-palette-action-active: #fff;
+  --mui-palette-action-hover: rgba(255, 255, 255, 0.08);
+  --mui-palette-action-hoverOpacity: 0.08;
+  --mui-palette-action-selected: rgba(255, 255, 255, 0.16);
+  --mui-palette-action-selectedOpacity: 0.16;
+  --mui-palette-action-disabled: rgba(255, 255, 255, 0.3);
+  --mui-palette-action-disabledBackground: rgba(255, 255, 255, 0.12);
+  --mui-palette-action-disabledOpacity: 0.38;
+  --mui-palette-action-focus: rgba(255, 255, 255, 0.12);
+  --mui-palette-action-focusOpacity: 0.12;
+  --mui-palette-action-activatedOpacity: 0.24;
+  --mui-palette-action-activeChannel: 255 255 255;
+  --mui-palette-action-selectedChannel: 255 255 255;
+  --mui-palette-Alert-errorColor: rgb(244, 199, 199);
+  --mui-palette-Alert-infoColor: rgb(184, 231, 251);
+  --mui-palette-Alert-successColor: rgb(204, 232, 205);
+  --mui-palette-Alert-warningColor: rgb(255, 226, 183);
+  --mui-palette-Alert-errorFilledBg: var(--mui-palette-error-dark, #d32f2f);
+  --mui-palette-Alert-infoFilledBg: var(--mui-palette-info-dark, #0288d1);
+  --mui-palette-Alert-successFilledBg: var(--mui-palette-success-dark, #388e3c);
+  --mui-palette-Alert-warningFilledBg: var(--mui-palette-warning-dark, #f57c00);
+  --mui-palette-Alert-errorFilledColor: #fff;
+  --mui-palette-Alert-infoFilledColor: #fff;
+  --mui-palette-Alert-successFilledColor: #fff;
+  --mui-palette-Alert-warningFilledColor: rgba(0, 0, 0, 0.87);
+  --mui-palette-Alert-errorStandardBg: rgb(22, 11, 11);
+  --mui-palette-Alert-infoStandardBg: rgb(7, 19, 24);
+  --mui-palette-Alert-successStandardBg: rgb(12, 19, 13);
+  --mui-palette-Alert-warningStandardBg: rgb(25, 18, 7);
+  --mui-palette-Alert-errorIconColor: var(--mui-palette-error-main, #f44336);
+  --mui-palette-Alert-infoIconColor: var(--mui-palette-info-main, #29b6f6);
+  --mui-palette-Alert-successIconColor: var(--mui-palette-success-main, #66bb6a);
+  --mui-palette-Alert-warningIconColor: var(--mui-palette-warning-main, #ffa726);
+  --mui-palette-AppBar-defaultBg: var(--mui-palette-grey-900, #212121);
+  --mui-palette-AppBar-darkBg: var(--mui-palette-background-paper, #121212);
+  --mui-palette-AppBar-darkColor: var(--mui-palette-text-primary, #fff);
+  --mui-palette-Avatar-defaultBg: var(--mui-palette-grey-600, #757575);
+  --mui-palette-Button-inheritContainedBg: var(--mui-palette-grey-800, #424242);
+  --mui-palette-Button-inheritContainedHoverBg: var(--mui-palette-grey-700, #616161);
+  --mui-palette-Chip-defaultBorder: var(--mui-palette-grey-700, #616161);
+  --mui-palette-Chip-defaultAvatarColor: var(--mui-palette-grey-300, #e0e0e0);
+  --mui-palette-Chip-defaultIconColor: var(--mui-palette-grey-300, #e0e0e0);
+  --mui-palette-FilledInput-bg: rgba(255, 255, 255, 0.09);
+  --mui-palette-FilledInput-hoverBg: rgba(255, 255, 255, 0.13);
+  --mui-palette-FilledInput-disabledBg: rgba(255, 255, 255, 0.12);
+  --mui-palette-LinearProgress-primaryBg: rgb(72, 101, 124);
+  --mui-palette-LinearProgress-secondaryBg: rgb(103, 73, 108);
+  --mui-palette-LinearProgress-errorBg: rgb(122, 33, 27);
+  --mui-palette-LinearProgress-infoBg: rgb(20, 91, 123);
+  --mui-palette-LinearProgress-successBg: rgb(51, 93, 53);
+  --mui-palette-LinearProgress-warningBg: rgb(127, 83, 19);
+  --mui-palette-Skeleton-bg: rgba(var(--mui-palette-text-primaryChannel, undefined) / 0.13);
+  --mui-palette-Slider-primaryTrack: rgb(72, 101, 124);
+  --mui-palette-Slider-secondaryTrack: rgb(103, 73, 108);
+  --mui-palette-Slider-errorTrack: rgb(122, 33, 27);
+  --mui-palette-Slider-infoTrack: rgb(20, 91, 123);
+  --mui-palette-Slider-successTrack: rgb(51, 93, 53);
+  --mui-palette-Slider-warningTrack: rgb(127, 83, 19);
+  --mui-palette-SnackbarContent-bg: rgb(250, 250, 250);
+  --mui-palette-SnackbarContent-color: rgba(0, 0, 0, 0.87);
+  --mui-palette-SpeedDialAction-fabHoverBg: rgb(53, 53, 53);
+  --mui-palette-StepConnector-border: var(--mui-palette-grey-600, #757575);
+  --mui-palette-StepContent-border: var(--mui-palette-grey-600, #757575);
+  --mui-palette-Switch-defaultColor: var(--mui-palette-grey-300, #e0e0e0);
+  --mui-palette-Switch-defaultDisabledColor: var(--mui-palette-grey-600, #757575);
+  --mui-palette-Switch-primaryDisabledColor: rgb(64, 90, 112);
+  --mui-palette-Switch-secondaryDisabledColor: rgb(92, 66, 97);
+  --mui-palette-Switch-errorDisabledColor: rgb(109, 30, 24);
+  --mui-palette-Switch-infoDisabledColor: rgb(18, 81, 110);
+  --mui-palette-Switch-successDisabledColor: rgb(45, 84, 47);
+  --mui-palette-Switch-warningDisabledColor: rgb(114, 75, 17);
+  --mui-palette-TableCell-border: rgba(81, 81, 81, 1);
+  --mui-palette-Tooltip-bg: rgba(97, 97, 97, 0.92);
+  --mui-palette-dividerChannel: 255 255 255;
+  --mui-opacity-inputPlaceholder: 0.5;
+  --mui-opacity-inputUnderline: 0.7;
+  --mui-opacity-switchTrackDisabled: 0.2;
+  --mui-opacity-switchTrack: 0.3;
+  --mui-overlays-0: none;
+  --mui-overlays-1: linear-gradient(rgba(255 255 255 / 0.051), rgba(255 255 255 / 0.051));
+  --mui-overlays-2: linear-gradient(rgba(255 255 255 / 0.069), rgba(255 255 255 / 0.069));
+  --mui-overlays-3: linear-gradient(rgba(255 255 255 / 0.082), rgba(255 255 255 / 0.082));
+  --mui-overlays-4: linear-gradient(rgba(255 255 255 / 0.092), rgba(255 255 255 / 0.092));
+  --mui-overlays-5: linear-gradient(rgba(255 255 255 / 0.101), rgba(255 255 255 / 0.101));
+  --mui-overlays-6: linear-gradient(rgba(255 255 255 / 0.108), rgba(255 255 255 / 0.108));
+  --mui-overlays-7: linear-gradient(rgba(255 255 255 / 0.114), rgba(255 255 255 / 0.114));
+  --mui-overlays-8: linear-gradient(rgba(255 255 255 / 0.119), rgba(255 255 255 / 0.119));
+  --mui-overlays-9: linear-gradient(rgba(255 255 255 / 0.124), rgba(255 255 255 / 0.124));
+  --mui-overlays-10: linear-gradient(rgba(255 255 255 / 0.128), rgba(255 255 255 / 0.128));
+  --mui-overlays-11: linear-gradient(rgba(255 255 255 / 0.132), rgba(255 255 255 / 0.132));
+  --mui-overlays-12: linear-gradient(rgba(255 255 255 / 0.135), rgba(255 255 255 / 0.135));
+  --mui-overlays-13: linear-gradient(rgba(255 255 255 / 0.139), rgba(255 255 255 / 0.139));
+  --mui-overlays-14: linear-gradient(rgba(255 255 255 / 0.142), rgba(255 255 255 / 0.142));
+  --mui-overlays-15: linear-gradient(rgba(255 255 255 / 0.145), rgba(255 255 255 / 0.145));
+  --mui-overlays-16: linear-gradient(rgba(255 255 255 / 0.147), rgba(255 255 255 / 0.147));
+  --mui-overlays-17: linear-gradient(rgba(255 255 255 / 0.15), rgba(255 255 255 / 0.15));
+  --mui-overlays-18: linear-gradient(rgba(255 255 255 / 0.152), rgba(255 255 255 / 0.152));
+  --mui-overlays-19: linear-gradient(rgba(255 255 255 / 0.155), rgba(255 255 255 / 0.155));
+  --mui-overlays-20: linear-gradient(rgba(255 255 255 / 0.157), rgba(255 255 255 / 0.157));
+  --mui-overlays-21: linear-gradient(rgba(255 255 255 / 0.159), rgba(255 255 255 / 0.159));
+  --mui-overlays-22: linear-gradient(rgba(255 255 255 / 0.161), rgba(255 255 255 / 0.161));
+  --mui-overlays-23: linear-gradient(rgba(255 255 255 / 0.163), rgba(255 255 255 / 0.163));
+  --mui-overlays-24: linear-gradient(rgba(255 255 255 / 0.165), rgba(255 255 255 / 0.165));
+}
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index 3ae0abbb4a2557..e47ec66a8d1848 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -26,6 +26,7 @@
   },
   "scripts": {
     "build": "code-infra build --flat",
+    "build:theme-css": "esbuild scripts/buildDefaultThemeCss.mts --bundle --loader:.js=jsx --jsx-factory=React.createElement --jsx-import-source=react --platform=node --format=esm --outfile=/tmp/buildTheme.mjs && OUTFILE=default-theme.css node /tmp/buildTheme.mjs",
     "release": "pnpm build && pnpm publish",
     "test": "pnpm --workspace-root test:unit --project \"*:@mui/material\"",
     "typescript": "tsc -p tsconfig.json",
@@ -113,6 +114,7 @@
     "./transitions": "./src/transitions/index.ts",
     "./useLazyRipple": "./src/useLazyRipple/index.ts",
     "./version": "./src/version/index.ts",
+    "./default-theme.css": "./default-theme.css",
     "./*": "./src/*/index.js"
   },
   "pigment-css": {
diff --git a/packages/mui-material/scripts/buildDefaultThemeCss.mts b/packages/mui-material/scripts/buildDefaultThemeCss.mts
new file mode 100644
index 00000000000000..b41b8074506a3a
--- /dev/null
+++ b/packages/mui-material/scripts/buildDefaultThemeCss.mts
@@ -0,0 +1,68 @@
+/**
+ * Generates `default-theme.css` — a static CSS file containing all MUI CSS
+ * custom properties for the default light and dark color schemes.
+ *
+ * Usage:
+ *   pnpm -F @mui/material build:theme-css
+ *
+ * The output file is meant to be imported by applications that want to consume
+ * MUI components via pre-built CSS files (no Emotion / styled-components) and
+ * do not need runtime theme injection. Color-scheme switching is handled by
+ * toggling `data-mui-color-scheme="dark"` on `document.documentElement`.
+ *
+ * Run with tsx so TypeScript source can be imported directly without a prior
+ * build step:
+ *   node_modules/.bin/tsx packages/mui-material/scripts/buildDefaultThemeCss.mts
+ */
+import { writeFileSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+
+import createTheme from '../src/styles/createTheme.js';
+import styleSheetsToString from '@mui/system/cssVars/styleSheetsToString.js';
+
+// When bundled with esbuild the file runs from /tmp; use process.env.OUTFILE or
+// resolve relative to the current working directory (repo root) instead.
+const outFile = process.env.OUTFILE
+  ? resolve(process.env.OUTFILE)
+  : join(process.cwd(), 'packages/mui-material/default-theme.css');
+
+// Build the default MUI theme with CSS variables enabled.
+// `colorSchemeSelector: 'data-mui-color-scheme'` makes the dark-scheme
+// variables live under `[data-mui-color-scheme="dark"]`, which is the
+// convention used by both MUI's own toggle helpers and the Tailwind
+// `dark:` variant defined in docs/pages/global.css.
+const theme = createTheme({
+  cssVariables: { colorSchemeSelector: 'data-mui-color-scheme' },
+  colorSchemes: { light: true, dark: true },
+});
+
+const themeWithVars = theme as typeof theme & {
+  generateStyleSheets?: () => Record<string, any>[];
+};
+
+if (typeof themeWithVars.generateStyleSheets !== 'function') {
+  throw new Error(
+    'theme.generateStyleSheets is not a function. ' +
+      'Make sure the theme is created with `cssVariables: true`.',
+  );
+}
+
+const css = styleSheetsToString(themeWithVars.generateStyleSheets());
+
+const header = [
+  '/*',
+  ' * MUI default theme — generated by scripts/buildDefaultThemeCss.mts',
+  ' * DO NOT EDIT MANUALLY.',
+  ' *',
+  ' * Import this file once at the root of your application:',
+  ' *   import "@mui/material/default-theme.css";',
+  ' *',
+  ' * Then toggle dark mode by setting:',
+  ' *   document.documentElement.setAttribute("data-mui-color-scheme", "dark");',
+  ' */',
+  '',
+].join('\n');
+
+writeFileSync(outFile, header + css, 'utf8');
+// eslint-disable-next-line no-console
+console.log(`✔  Written ${outFile}`);
diff --git a/packages/mui-material/src/Slider/Slider.css b/packages/mui-material/src/Slider/Slider.css
new file mode 100644
index 00000000000000..8eaadb4c859f5e
--- /dev/null
+++ b/packages/mui-material/src/Slider/Slider.css
@@ -0,0 +1,462 @@
+@layer mui.default {
+  .MuiSlider-root {
+    border-radius: 12px;
+    box-sizing: content-box;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  @media print {
+    .MuiSlider-root {
+      print-color-adjust: exact;
+      -webkit-print-color-adjust: exact;
+    }
+  }
+
+  .MuiSlider-root.MuiSlider-trackFalse .MuiSlider-track {
+    display: none;
+  }
+
+  .MuiSlider-root.MuiSlider-dragging .MuiSlider-thumb,
+  .MuiSlider-root.MuiSlider-dragging .MuiSlider-track {
+    transition: none;
+  }
+
+  .MuiSlider-root.MuiSlider-colorPrimary {
+    color: var(--mui-palette-primary-main);
+  }
+  .MuiSlider-root.MuiSlider-colorSecondary {
+    color: var(--mui-palette-secondary-main);
+  }
+  .MuiSlider-root.MuiSlider-colorWarning {
+    color: var(--mui-palette-warning-main);
+  }
+  .MuiSlider-root.MuiSlider-colorError {
+    color: var(--mui-palette-error-main);
+  }
+  .MuiSlider-root.MuiSlider-colorSuccess {
+    color: var(--mui-palette-success-main);
+  }
+  .MuiSlider-root.MuiSlider-colorInfo {
+    color: var(--mui-palette-info-main);
+  }
+
+  .MuiSlider-root.MuiSlider-horizontal {
+    height: 4px;
+    width: 100%;
+    padding-block: 13px;
+  }
+
+  @media (pointer: coarse) {
+    .MuiSlider-root.MuiSlider-horizontal {
+      padding-block: 20px;
+    }
+  }
+
+  .MuiSlider-root.MuiSlider-horizontal.MuiSlider-sizeSmall {
+    height: 2px;
+  }
+
+  .MuiSlider-root.MuiSlider-horizontal.MuiSlider-marked {
+    margin-block-end: 20px;
+  }
+
+  .MuiSlider-root.MuiSlider-vertical {
+    height: 100%;
+    width: 4px;
+    padding-inline: 13px;
+  }
+
+  @media (pointer: coarse) {
+    .MuiSlider-root.MuiSlider-vertical {
+      padding-inline: 20px;
+    }
+  }
+
+  .MuiSlider-root.MuiSlider-vertical.MuiSlider-sizeSmall {
+    width: 2px;
+  }
+
+  .MuiSlider-root.MuiSlider-vertical.MuiSlider-marked {
+    margin-inline-end: 44px;
+  }
+
+  .MuiSlider-root.Mui-disabled {
+    pointer-events: none;
+    cursor: default;
+    color: var(--mui-palette-grey-400);
+  }
+
+  .MuiSlider-rail {
+    display: block;
+    position: absolute;
+    border-radius: inherit;
+    background-color: currentColor;
+    opacity: 0.38;
+  }
+
+  @media (forced-colors: active) {
+    .MuiSlider-rail {
+      border: 1px solid transparent;
+      box-sizing: border-box;
+    }
+  }
+
+  .MuiSlider-rail.MuiSlider-horizontal {
+    width: 100%;
+    height: inherit;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+
+  .MuiSlider-rail.MuiSlider-vertical {
+    height: 100%;
+    width: inherit;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  .MuiSlider-rail.MuiSlider-trackInverted {
+    opacity: 1;
+  }
+
+  .MuiSlider-track {
+    display: block;
+    position: absolute;
+    border-radius: inherit;
+    border: 1px solid currentColor;
+    background-color: currentColor;
+    transition:
+      left var(--mui-transitions-duration-shortest) var(--mui-transitions-easing-easeInOut),
+      width var(--mui-transitions-duration-shortest) var(--mui-transitions-easing-easeInOut),
+      bottom var(--mui-transitions-duration-shortest) var(--mui-transitions-easing-easeInOut),
+      height var(--mui-transitions-duration-shortest) var(--mui-transitions-easing-easeInOut);
+  }
+
+  .MuiSlider-track.MuiSlider-trackInverted.MuiSlider-colorPrimary {
+    background-color: var(--mui-palette-Slider-primaryTrack);
+    border-color: var(--mui-palette-Slider-primaryTrack);
+  }
+
+  .MuiSlider-track.MuiSlider-trackInverted.MuiSlider-colorSecondary {
+    background-color: var(--mui-palette-Slider-secondaryTrack);
+    border-color: var(--mui-palette-Slider-secondaryTrack);
+  }
+
+  .MuiSlider-track.MuiSlider-trackInverted.MuiSlider-colorError {
+    background-color: var(--mui-palette-Slider-errorTrack);
+    border-color: var(--mui-palette-Slider-errorTrack);
+  }
+
+  .MuiSlider-track.MuiSlider-trackInverted.MuiSlider-colorInfo {
+    background-color: var(--mui-palette-Slider-infoTrack);
+    border-color: var(--mui-palette-Slider-infoTrack);
+  }
+
+  .MuiSlider-track.MuiSlider-trackInverted.MuiSlider-colorSuccess {
+    background-color: var(--mui-palette-Slider-successTrack);
+    border-color: var(--mui-palette-Slider-successTrack);
+  }
+
+  .MuiSlider-track.MuiSlider-trackInverted.MuiSlider-colorWarning {
+    background-color: var(--mui-palette-Slider-warningTrack);
+    border-color: var(--mui-palette-Slider-warningTrack);
+  }
+
+  @media (forced-colors: none) {
+    .MuiSlider-track.MuiSlider-sizeSmall {
+      border: none;
+    }
+  }
+
+  .MuiSlider-track.MuiSlider-horizontal {
+    height: inherit;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+
+  .MuiSlider-track.MuiSlider-vertical {
+    width: inherit;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  .MuiSlider-track.MuiSlider-trackFalse {
+    display: none;
+  }
+
+  .MuiSlider-thumb {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    outline: 0;
+    background-color: currentColor;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      box-shadow var(--mui-transitions-duration-shortest) var(--mui-transitions-easing-easeInOut),
+      left var(--mui-transitions-duration-shortest) var(--mui-transitions-easing-easeInOut),
+      bottom var(--mui-transitions-duration-shortest) var(--mui-transitions-easing-easeInOut);
+  }
+
+  @media (forced-colors: active) {
+    .MuiSlider-thumb {
+      border: 1px solid ButtonBorder;
+    }
+  }
+
+  .MuiSlider-thumb::before {
+    position: absolute;
+    content: '';
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    box-shadow: var(--mui-shadows-2);
+  }
+
+  .MuiSlider-thumb::after {
+    position: absolute;
+    content: '';
+    border-radius: 50%;
+    width: 42px;
+    height: 42px;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorPrimary:hover,
+  .MuiSlider-thumb.MuiSlider-thumbColorPrimary.Mui-focusVisible {
+    box-shadow: 0px 0px 0px 8px rgba(var(--mui-palette-primary-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorPrimary.Mui-active {
+    box-shadow: 0px 0px 0px 14px rgba(var(--mui-palette-primary-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorSecondary:hover,
+  .MuiSlider-thumb.MuiSlider-thumbColorSecondary.Mui-focusVisible {
+    box-shadow: 0px 0px 0px 8px rgba(var(--mui-palette-secondary-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorSecondary.Mui-active {
+    box-shadow: 0px 0px 0px 14px rgba(var(--mui-palette-secondary-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorError:hover,
+  .MuiSlider-thumb.MuiSlider-thumbColorError.Mui-focusVisible {
+    box-shadow: 0px 0px 0px 8px rgba(var(--mui-palette-error-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorError.Mui-active {
+    box-shadow: 0px 0px 0px 14px rgba(var(--mui-palette-error-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorInfo:hover,
+  .MuiSlider-thumb.MuiSlider-thumbColorInfo.Mui-focusVisible {
+    box-shadow: 0px 0px 0px 8px rgba(var(--mui-palette-info-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorInfo.Mui-active {
+    box-shadow: 0px 0px 0px 14px rgba(var(--mui-palette-info-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorSuccess:hover,
+  .MuiSlider-thumb.MuiSlider-thumbColorSuccess.Mui-focusVisible {
+    box-shadow: 0px 0px 0px 8px rgba(var(--mui-palette-success-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorSuccess.Mui-active {
+    box-shadow: 0px 0px 0px 14px rgba(var(--mui-palette-success-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorWarning:hover,
+  .MuiSlider-thumb.MuiSlider-thumbColorWarning.Mui-focusVisible {
+    box-shadow: 0px 0px 0px 8px rgba(var(--mui-palette-warning-mainChannel) / 0.16);
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbColorWarning.Mui-active {
+    box-shadow: 0px 0px 0px 14px rgba(var(--mui-palette-warning-mainChannel) / 0.16);
+  }
+
+  @media (hover: none) {
+    .MuiSlider-thumb.MuiSlider-thumbColorPrimary:hover,
+    .MuiSlider-thumb.MuiSlider-thumbColorSecondary:hover,
+    .MuiSlider-thumb.MuiSlider-thumbColorError:hover,
+    .MuiSlider-thumb.MuiSlider-thumbColorInfo:hover,
+    .MuiSlider-thumb.MuiSlider-thumbColorSuccess:hover,
+    .MuiSlider-thumb.MuiSlider-thumbColorWarning:hover {
+      box-shadow: none;
+    }
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbSizeSmall {
+    width: 12px;
+    height: 12px;
+  }
+
+  .MuiSlider-thumb.MuiSlider-thumbSizeSmall::before {
+    box-shadow: none;
+  }
+
+  .MuiSlider-thumb.MuiSlider-horizontal {
+    inset-block-start: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  [dir='rtl'] .MuiSlider-thumb.MuiSlider-horizontal {
+    transform: translate(50%, -50%);
+  }
+
+  .MuiSlider-thumb.MuiSlider-vertical {
+    inset-inline-start: 50%;
+    transform: translate(-50%, 50%);
+  }
+
+  .MuiSlider-thumb.Mui-disabled:hover {
+    box-shadow: none;
+  }
+
+  .MuiSlider-valueLabel {
+    z-index: 1;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    line-height: 1.43;
+    letter-spacing: 0.01071em;
+    font-weight: 500;
+    transition: transform var(--mui-transitions-duration-shortest)
+      var(--mui-transitions-easing-easeInOut);
+    position: absolute;
+    background-color: var(--mui-palette-grey-600);
+    border-radius: 2px;
+    color: var(--mui-palette-common-white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem 0.75rem;
+  }
+
+  .MuiSlider-valueLabel.MuiSlider-horizontal {
+    transform: translateY(-100%) scale(0);
+    inset-block-start: -10px;
+    transform-origin: block-end center;
+  }
+
+  .MuiSlider-valueLabel.MuiSlider-horizontal::before {
+    position: absolute;
+    content: '';
+    width: 8px;
+    height: 8px;
+    transform: translate(-50%, 50%) rotate(45deg);
+    background-color: inherit;
+    inset-block-end: 0;
+    inset-inline-start: 50%;
+  }
+
+  .MuiSlider-valueLabel.MuiSlider-horizontal.MuiSlider-valueLabelOpen {
+    transform: translateY(-100%) scale(1);
+  }
+
+  .MuiSlider-valueLabel.MuiSlider-vertical {
+    transform: translateY(-50%) scale(0);
+    inset-inline-end: 30px;
+    inset-block-start: 50%;
+    transform-origin: inline-end center;
+  }
+
+  .MuiSlider-valueLabel.MuiSlider-vertical::before {
+    position: absolute;
+    content: '';
+    width: 8px;
+    height: 8px;
+    transform: translate(-50%, -50%) rotate(45deg);
+    background-color: inherit;
+    inset-inline-end: -8px;
+    inset-block-start: 50%;
+  }
+
+  .MuiSlider-valueLabel.MuiSlider-vertical.MuiSlider-valueLabelOpen {
+    transform: translateY(-50%) scale(1);
+  }
+
+  .MuiSlider-valueLabel.MuiSlider-sizeSmall {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .MuiSlider-valueLabel.MuiSlider-vertical.MuiSlider-sizeSmall {
+    inset-inline-end: 20px;
+  }
+
+  .MuiSlider-mark {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    border-radius: 1px;
+    background-color: currentColor;
+  }
+
+  .MuiSlider-mark.MuiSlider-horizontal {
+    inset-block-start: 50%;
+    transform: translate(-1px, -50%);
+  }
+
+  [dir='rtl'] .MuiSlider-mark.MuiSlider-horizontal {
+    transform: translate(1px, -50%);
+  }
+
+  .MuiSlider-mark.MuiSlider-vertical {
+    inset-inline-start: 50%;
+    transform: translate(-50%, 1px);
+  }
+
+  .MuiSlider-mark.MuiSlider-markActive {
+    background-color: var(--mui-palette-background-paper);
+    opacity: 0.8;
+  }
+
+  .MuiSlider-markLabel {
+    font-size: 0.875rem;
+    line-height: 1.43;
+    letter-spacing: 0.01071em;
+    color: var(--mui-palette-text-secondary);
+    position: absolute;
+    white-space: nowrap;
+  }
+
+  .MuiSlider-markLabel.MuiSlider-horizontal {
+    inset-block-start: 30px;
+    transform: translateX(-50%);
+  }
+
+  [dir='rtl'] .MuiSlider-markLabel.MuiSlider-horizontal {
+    transform: translateX(50%);
+  }
+
+  @media (pointer: coarse) {
+    .MuiSlider-markLabel.MuiSlider-horizontal {
+      inset-block-start: 40px;
+    }
+  }
+
+  .MuiSlider-markLabel.MuiSlider-vertical {
+    inset-inline-start: 36px;
+    transform: translateY(50%);
+  }
+
+  @media (pointer: coarse) {
+    .MuiSlider-markLabel.MuiSlider-vertical {
+      inset-inline-start: 44px;
+    }
+  }
+
+  .MuiSlider-markLabel.MuiSlider-markLabelActive {
+    color: var(--mui-palette-text-primary);
+  }
+}
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index 19f2609a74a92f..af90021f6cbfb4 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -8,14 +8,13 @@ import { useRtl } from '@mui/system/RtlProvider';
 import isHostComponent from '@mui/utils/isHostComponent';
 import { useSlider, valueToPercent } from './useSlider';
 import { styled } from '../zero-styled';
-import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import useSlot from '../utils/useSlot';
 import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import capitalize from '../utils/capitalize';
-import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import BaseSliderValueLabel from './SliderValueLabel';
-import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
+import { getSliderUtilityClass } from './sliderClasses';
+import './Slider.css';
 
 function Identity(x) {
   return x;
@@ -37,374 +36,35 @@ export const SliderRoot = styled('span', {
       ownerState.track === false && styles.trackFalse,
     ];
   },
-})(
-  memoTheme(({ theme }) => ({
-    borderRadius: 12,
-    boxSizing: 'content-box',
-    display: 'inline-block',
-    position: 'relative',
-    cursor: 'pointer',
-    touchAction: 'none',
-    WebkitTapHighlightColor: 'transparent',
-    '@media print': {
-      colorAdjust: 'exact',
-    },
-    [`&.${sliderClasses.disabled}`]: {
-      pointerEvents: 'none',
-      cursor: 'default',
-      color: (theme.vars || theme).palette.grey[400],
-    },
-    [`&.${sliderClasses.dragging}`]: {
-      [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
-        transition: 'none',
-      },
-    },
-    variants: [
-      ...Object.entries(theme.palette)
-        .filter(createSimplePaletteValueFilter())
-        .map(([color]) => ({
-          props: { color },
-          style: {
-            color: (theme.vars || theme).palette[color].main,
-          },
-        })),
-      {
-        props: { orientation: 'horizontal' },
-        style: {
-          height: 4,
-          width: '100%',
-          padding: '13px 0',
-          // The primary input mechanism of the device includes a pointing device of limited accuracy.
-          '@media (pointer: coarse)': {
-            // Reach 42px touch target, about ~8mm on screen.
-            padding: '20px 0',
-          },
-        },
-      },
-      {
-        props: { orientation: 'horizontal', size: 'small' },
-        style: {
-          height: 2,
-        },
-      },
-      {
-        props: { orientation: 'horizontal', marked: true },
-        style: {
-          marginBottom: 20,
-        },
-      },
-      {
-        props: { orientation: 'vertical' },
-        style: {
-          height: '100%',
-          width: 4,
-          padding: '0 13px',
-          // The primary input mechanism of the device includes a pointing device of limited accuracy.
-          '@media (pointer: coarse)': {
-            // Reach 42px touch target, about ~8mm on screen.
-            padding: '0 20px',
-          },
-        },
-      },
-      {
-        props: { orientation: 'vertical', size: 'small' },
-        style: {
-          width: 2,
-        },
-      },
-      {
-        props: { orientation: 'vertical', marked: true },
-        style: {
-          marginRight: 44,
-        },
-      },
-    ],
-  })),
-);
+})({});
 
 export const SliderRail = styled('span', {
   name: 'MuiSlider',
   slot: 'Rail',
-})({
-  display: 'block',
-  position: 'absolute',
-  borderRadius: 'inherit',
-  backgroundColor: 'currentColor',
-  opacity: 0.38,
-  '@media (forced-colors: active)': {
-    border: '1px solid transparent',
-    boxSizing: 'border-box',
-  },
-  variants: [
-    {
-      props: { orientation: 'horizontal' },
-      style: {
-        width: '100%',
-        height: 'inherit',
-        top: '50%',
-        transform: 'translateY(-50%)',
-      },
-    },
-    {
-      props: { orientation: 'vertical' },
-      style: {
-        height: '100%',
-        width: 'inherit',
-        left: '50%',
-        transform: 'translateX(-50%)',
-      },
-    },
-    {
-      props: { track: 'inverted' },
-      style: {
-        opacity: 1,
-      },
-    },
-  ],
-});
+})({});
 
 export const SliderTrack = styled('span', {
   name: 'MuiSlider',
   slot: 'Track',
-})(
-  memoTheme(({ theme }) => {
-    return {
-      display: 'block',
-      position: 'absolute',
-      borderRadius: 'inherit',
-      border: '1px solid currentColor',
-      backgroundColor: 'currentColor',
-      transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], {
-        duration: theme.transitions.duration.shortest,
-      }),
-      variants: [
-        {
-          props: { size: 'small' },
-          style: {
-            '@media (forced-colors: none)': {
-              border: 'none',
-            },
-          },
-        },
-        {
-          props: { orientation: 'horizontal' },
-          style: {
-            height: 'inherit',
-            top: '50%',
-            transform: 'translateY(-50%)',
-          },
-        },
-        {
-          props: { orientation: 'vertical' },
-          style: {
-            width: 'inherit',
-            left: '50%',
-            transform: 'translateX(-50%)',
-          },
-        },
-        {
-          props: { track: false },
-          style: {
-            display: 'none',
-          },
-        },
-        ...Object.entries(theme.palette)
-          .filter(createSimplePaletteValueFilter())
-          .map(([color]) => ({
-            props: { color, track: 'inverted' },
-            style: {
-              ...(theme.vars
-                ? {
-                    backgroundColor: theme.vars.palette.Slider[`${color}Track`],
-                    borderColor: theme.vars.palette.Slider[`${color}Track`],
-                  }
-                : {
-                    backgroundColor: theme.lighten(theme.palette[color].main, 0.62),
-                    borderColor: theme.lighten(theme.palette[color].main, 0.62),
-                    ...theme.applyStyles('dark', {
-                      backgroundColor: theme.darken(theme.palette[color].main, 0.5),
-                    }),
-                    ...theme.applyStyles('dark', {
-                      borderColor: theme.darken(theme.palette[color].main, 0.5),
-                    }),
-                  }),
-            },
-          })),
-      ],
-    };
-  }),
-);
+})({});
 
 export const SliderThumb = styled('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
-})(
-  memoTheme(({ theme }) => ({
-    position: 'absolute',
-    width: 20,
-    height: 20,
-    boxSizing: 'border-box',
-    borderRadius: '50%',
-    outline: 0,
-    backgroundColor: 'currentColor',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
-      duration: theme.transitions.duration.shortest,
-    }),
-    '@media (forced-colors: active)': {
-      border: '1px solid ButtonBorder',
-    },
-    '&::before': {
-      position: 'absolute',
-      content: '""',
-      borderRadius: 'inherit',
-      width: '100%',
-      height: '100%',
-      boxShadow: (theme.vars || theme).shadows[2],
-    },
-    '&::after': {
-      position: 'absolute',
-      content: '""',
-      borderRadius: '50%',
-      // 42px is the hit target
-      width: 42,
-      height: 42,
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-    },
-    [`&.${sliderClasses.disabled}`]: {
-      '&:hover': {
-        boxShadow: 'none',
-      },
-    },
-    variants: [
-      {
-        props: { size: 'small' },
-        style: {
-          width: 12,
-          height: 12,
-          '&::before': {
-            boxShadow: 'none',
-          },
-        },
-      },
-      {
-        props: { orientation: 'horizontal' },
-        style: {
-          top: '50%',
-          transform: 'translate(-50%, -50%)',
-        },
-      },
-      {
-        props: { orientation: 'vertical' },
-        style: {
-          left: '50%',
-          transform: 'translate(-50%, 50%)',
-        },
-      },
-      ...Object.entries(theme.palette)
-        .filter(createSimplePaletteValueFilter())
-        .map(([color]) => ({
-          props: { color },
-          style: {
-            [`&:hover, &.${sliderClasses.focusVisible}`]: {
-              boxShadow: `0px 0px 0px 8px ${theme.alpha((theme.vars || theme).palette[color].main, 0.16)}`,
-              '@media (hover: none)': {
-                boxShadow: 'none',
-              },
-            },
-            [`&.${sliderClasses.active}`]: {
-              boxShadow: `0px 0px 0px 14px ${theme.alpha((theme.vars || theme).palette[color].main, 0.16)}`,
-            },
-          },
-        })),
-    ],
-  })),
-);
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+    return [
+      styles.thumb,
+      styles[`thumbColor${capitalize(ownerState.color)}`],
+      ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size)}`],
+    ];
+  },
+})({});
 
 const SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
-})(
-  memoTheme(({ theme }) => ({
-    zIndex: 1,
-    whiteSpace: 'nowrap',
-    ...theme.typography.body2,
-    fontWeight: 500,
-    transition: theme.transitions.create(['transform'], {
-      duration: theme.transitions.duration.shortest,
-    }),
-    position: 'absolute',
-    backgroundColor: (theme.vars || theme).palette.grey[600],
-    borderRadius: 2,
-    color: (theme.vars || theme).palette.common.white,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '0.25rem 0.75rem',
-    variants: [
-      {
-        props: { orientation: 'horizontal' },
-        style: {
-          transform: 'translateY(-100%) scale(0)',
-          top: '-10px',
-          transformOrigin: 'bottom center',
-          '&::before': {
-            position: 'absolute',
-            content: '""',
-            width: 8,
-            height: 8,
-            transform: 'translate(-50%, 50%) rotate(45deg)',
-            backgroundColor: 'inherit',
-            bottom: 0,
-            left: '50%',
-          },
-          [`&.${sliderClasses.valueLabelOpen}`]: {
-            transform: 'translateY(-100%) scale(1)',
-          },
-        },
-      },
-      {
-        props: { orientation: 'vertical' },
-        style: {
-          transform: 'translateY(-50%) scale(0)',
-          right: '30px',
-          top: '50%',
-          transformOrigin: 'right center',
-          '&::before': {
-            position: 'absolute',
-            content: '""',
-            width: 8,
-            height: 8,
-            transform: 'translate(-50%, -50%) rotate(45deg)',
-            backgroundColor: 'inherit',
-            right: -8,
-            top: '50%',
-          },
-          [`&.${sliderClasses.valueLabelOpen}`]: {
-            transform: 'translateY(-50%) scale(1)',
-          },
-        },
-      },
-      {
-        props: { size: 'small' },
-        style: {
-          fontSize: theme.typography.pxToRem(12),
-          padding: '0.25rem 0.5rem',
-        },
-      },
-      {
-        props: { orientation: 'vertical', size: 'small' },
-        style: {
-          right: '20px',
-        },
-      },
-    ],
-  })),
-);
+})({});
 
 SliderValueLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -440,79 +100,13 @@ export const SliderMark = styled('span', {
 
     return [styles.mark, markActive && styles.markActive];
   },
-})(
-  memoTheme(({ theme }) => ({
-    position: 'absolute',
-    width: 2,
-    height: 2,
-    borderRadius: 1,
-    backgroundColor: 'currentColor',
-    variants: [
-      {
-        props: { orientation: 'horizontal' },
-        style: {
-          top: '50%',
-          transform: 'translate(-1px, -50%)',
-        },
-      },
-      {
-        props: { orientation: 'vertical' },
-        style: {
-          left: '50%',
-          transform: 'translate(-50%, 1px)',
-        },
-      },
-      {
-        props: { markActive: true },
-        style: {
-          backgroundColor: (theme.vars || theme).palette.background.paper,
-          opacity: 0.8,
-        },
-      },
-    ],
-  })),
-);
+})({});
 
 export const SliderMarkLabel = styled('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
   shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'markLabelActive',
-})(
-  memoTheme(({ theme }) => ({
-    ...theme.typography.body2,
-    color: (theme.vars || theme).palette.text.secondary,
-    position: 'absolute',
-    whiteSpace: 'nowrap',
-    variants: [
-      {
-        props: { orientation: 'horizontal' },
-        style: {
-          top: 30,
-          transform: 'translateX(-50%)',
-          '@media (pointer: coarse)': {
-            top: 40,
-          },
-        },
-      },
-      {
-        props: { orientation: 'vertical' },
-        style: {
-          left: 36,
-          transform: 'translateY(50%)',
-          '@media (pointer: coarse)': {
-            left: 44,
-          },
-        },
-      },
-      {
-        props: { markLabelActive: true },
-        style: {
-          color: (theme.vars || theme).palette.text.primary,
-        },
-      },
-    ],
-  })),
-);
+})({});
 
 const useUtilityClasses = (ownerState) => {
   const { disabled, dragging, marked, orientation, track, classes, color, size } = ownerState;
@@ -523,20 +117,49 @@ const useUtilityClasses = (ownerState) => {
       disabled && 'disabled',
       dragging && 'dragging',
       marked && 'marked',
+      orientation === 'horizontal' && 'horizontal',
       orientation === 'vertical' && 'vertical',
       track === 'inverted' && 'trackInverted',
       track === false && 'trackFalse',
       color && `color${capitalize(color)}`,
       size && `size${capitalize(size)}`,
     ],
-    rail: ['rail'],
-    track: ['track'],
+    rail: [
+      'rail',
+      orientation === 'horizontal' && 'horizontal',
+      track === 'inverted' && 'trackInverted',
+      orientation === 'vertical' && 'vertical',
+    ],
+    track: [
+      'track',
+      orientation === 'horizontal' && 'horizontal',
+      track === 'inverted' && 'trackInverted',
+      orientation === 'vertical' && 'vertical',
+      color && `color${capitalize(color)}`,
+      size && `size${capitalize(size)}`,
+    ],
     mark: ['mark'],
     markActive: ['markActive'],
-    markLabel: ['markLabel'],
+    markLabel: [
+      'markLabel',
+      orientation === 'horizontal' && 'horizontal',
+      orientation === 'vertical' && 'vertical',
+    ],
     markLabelActive: ['markLabelActive'],
-    valueLabel: ['valueLabel'],
-    thumb: ['thumb', disabled && 'disabled'],
+    valueLabel: [
+      'valueLabel',
+      size && `size${capitalize(size)}`,
+      orientation === 'horizontal' && 'horizontal',
+      orientation === 'vertical' && 'vertical',
+    ],
+    thumb: [
+      'thumb',
+      disabled && 'disabled',
+      size && `thumbSize${capitalize(size)}`,
+      color && `thumbColor${capitalize(color)}`,
+      orientation === 'horizontal' && 'horizontal',
+      orientation === 'vertical' && 'vertical',
+    ],
     active: ['active'],
     disabled: ['disabled'],
     focusVisible: ['focusVisible'],
diff --git a/packages/mui-material/src/Slider/SliderEmotion.d.ts b/packages/mui-material/src/Slider/SliderEmotion.d.ts
new file mode 100644
index 00000000000000..3ad7e4da4dd181
--- /dev/null
+++ b/packages/mui-material/src/Slider/SliderEmotion.d.ts
@@ -0,0 +1,358 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { Mark } from './useSlider.types';
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
+import { Theme } from '../styles';
+import { OverrideProps, OverridableComponent } from '../OverridableComponent';
+import SliderValueLabelComponent from './SliderValueLabel';
+import { SliderClasses } from './sliderClasses';
+
+export interface SliderPropsColorOverrides {}
+
+export interface SliderPropsSizeOverrides {}
+
+export interface SliderSlots {
+  /**
+   * The component that renders the root.
+   * @default 'span'
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the track.
+   * @default 'span'
+   */
+  track: React.ElementType;
+  /**
+   * The component that renders the rail.
+   * @default 'span'
+   */
+  rail: React.ElementType;
+  /**
+   * The component that renders the thumb.
+   * @default 'span'
+   */
+  thumb: React.ElementType;
+  /**
+   * The component that renders the mark.
+   * @default 'span'
+   */
+  mark: React.ElementType;
+  /**
+   * The component that renders the mark label.
+   * @default 'span'
+   */
+  markLabel: React.ElementType;
+  /**
+   * The component that renders the value label.
+   * @default SliderValueLabel
+   */
+  valueLabel: React.ElementType;
+  /**
+   * The component that renders the input.
+   * @default 'input'
+   */
+  input: React.ElementType;
+}
+
+export interface SliderRootSlotPropsOverrides {}
+export interface SliderTrackSlotPropsOverrides {}
+export interface SliderRailSlotPropsOverrides {}
+export interface SliderThumbSlotPropsOverrides {}
+export interface SliderMarkSlotPropsOverrides {}
+export interface SliderMarkLabelSlotPropsOverrides {}
+export interface SliderValueLabelSlotPropsOverrides {}
+export interface SliderInputSlotPropsOverrides {}
+
+export type SliderSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  SliderSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the available props are based on the span element.
+     */
+    root: SlotProps<'span', SliderRootSlotPropsOverrides, SliderOwnerState>;
+    /**
+     * Props forwarded to the track slot.
+     * By default, the available props are based on the span element.
+     */
+    track: SlotProps<'span', SliderTrackSlotPropsOverrides, SliderOwnerState>;
+    /**
+     * Props forwarded to the rail slot.
+     * By default, the available props are based on the span element.
+     */
+    rail: SlotProps<'span', SliderRailSlotPropsOverrides, SliderOwnerState>;
+    /**
+     * Props forwarded to the thumb slot.
+     * By default, the available props are based on the span element.
+     */
+    thumb: SlotProps<'span', SliderThumbSlotPropsOverrides, SliderOwnerState>;
+    /**
+     * Props forwarded to the mark slot.
+     * By default, the available props are based on the span element.
+     */
+    mark: SlotProps<'span', SliderMarkSlotPropsOverrides, SliderOwnerState>;
+    /**
+     * Props forwarded to the mark label slot.
+     * By default, the available props are based on the span element.
+     */
+    markLabel: SlotProps<'span', SliderMarkLabelSlotPropsOverrides, SliderOwnerState>;
+    /**
+     * Props forwarded to the value label slot.
+     * By default, the available props are based on the [SliderValueLabel](https://mui.com/material-ui/api/slider/) component.
+     */
+    valueLabel: SlotComponentProps<
+      typeof SliderValueLabelComponent,
+      SliderValueLabelSlotPropsOverrides,
+      SliderOwnerState
+    >;
+    /**
+     * Props forwarded to the input slot.
+     * By default, the available props are based on the input element.
+     */
+    input: SlotProps<'input', SliderInputSlotPropsOverrides, SliderOwnerState>;
+  }
+>;
+
+export interface SliderOwnerState extends SliderProps {
+  dragging: boolean;
+  marked: boolean;
+  focusedThumbIndex: number;
+}
+
+export interface SliderOwnProps<Value extends number | readonly number[]> {
+  /**
+   * The label of the slider.
+   */
+  'aria-label'?: string | undefined;
+  /**
+   * The id of the element containing a label for the slider.
+   */
+  'aria-labelledby'?: string | undefined;
+  /**
+   * A string value that provides a user-friendly name for the current value of the slider.
+   */
+  'aria-valuetext'?: string | undefined;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color?:
+    | OverridableStringUnion<
+        'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+        SliderPropsColorOverrides
+      >
+    | undefined;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SliderClasses> | undefined;
+  /**
+   * @ignore
+   */
+  className?: string | undefined;
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue?: Value | undefined;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
+   * @default false
+   */
+  disableSwap?: boolean | undefined;
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
+   * This is important for screen reader users.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaLabel?: ((index: number) => string) | undefined;
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
+   * This is important for screen reader users.
+   * @param {number} value The thumb label's value to format.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaValueText?: ((value: number, index: number) => string) | undefined;
+  /**
+   * Marks indicate predetermined values to which the user can move the slider.
+   * If `true` the marks are spaced according the value of the `step` prop.
+   * If an array, it should contain objects with `value` and an optional `label` keys.
+   * @default false
+   */
+  marks?: boolean | readonly Mark[] | undefined;
+  /**
+   * The maximum allowed value of the slider.
+   * Should not be equal to min.
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The minimum allowed value of the slider.
+   * Should not be equal to max.
+   * @default 0
+   */
+  min?: number | undefined;
+  /**
+   * Name attribute of the hidden `input` element.
+   */
+  name?: string | undefined;
+  /**
+   * Callback function that is fired when the slider's value changed.
+   *
+   * @param {Event} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
+   * @param {Value} value The new value.
+   * @param {number} activeThumb Index of the currently moved thumb.
+   */
+  onChange?: ((event: Event, value: Value, activeThumb: number) => void) | undefined;
+  /**
+   * Callback function that is fired when the pointer or touch interaction ends.
+   *
+   * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {Value} value The new value.
+   */
+  onChangeCommitted?: ((event: React.SyntheticEvent | Event, value: Value) => void) | undefined;
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical' | undefined;
+  /**
+   * A transformation function, to change the scale of the slider.
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  scale?: ((value: number) => number) | undefined;
+  /**
+   * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
+   * @default 10
+   */
+  shiftStep?: number | undefined;
+  /**
+   * The size of the slider.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium', SliderPropsSizeOverrides> | undefined;
+  /**
+   * The granularity with which the slider can step through values. (A "discrete" slider.)
+   * The `min` prop serves as the origin for the valid values.
+   * We recommend (max - min) to be evenly divisible by the step.
+   *
+   * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+   * @default 1
+   */
+  step?: number | null | undefined;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme> | undefined;
+  /**
+   * Tab index attribute of the hidden `input` element.
+   */
+  tabIndex?: number | undefined;
+  /**
+   * The track presentation:
+   *
+   * - `normal` the track will render a bar representing the slider value.
+   * - `inverted` the track will render a bar representing the remaining slider value.
+   * - `false` the track will render without a bar.
+   * @default 'normal'
+   */
+  track?: 'normal' | false | 'inverted' | undefined;
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value?: Value | undefined;
+  /**
+   * Controls when the value label is displayed:
+   *
+   * - `auto` the value label will display when the thumb is hovered or focused.
+   * - `on` will display persistently.
+   * - `off` will never display.
+   * @default 'off'
+   */
+  valueLabelDisplay?: 'on' | 'auto' | 'off' | undefined;
+  /**
+   * The format function the value label's value.
+   *
+   * When a function is provided, it should have the following signature:
+   *
+   * - {number} value The value label's value to format
+   * - {number} index The value label's index to format
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode) | undefined;
+}
+
+export interface SliderTypeMap<
+  RootComponent extends React.ElementType = 'span',
+  AdditionalProps = {},
+  Value extends number | readonly number[] = number | number[],
+> {
+  props: AdditionalProps & SliderOwnProps<Value> & SliderSlotsAndSlotProps;
+  defaultComponent: RootComponent;
+}
+
+export type SliderComponent<Value extends number | readonly number[]> = OverridableComponent<
+  SliderTypeMap<'span', {}, Value>
+>;
+
+export type SliderType = SliderComponent<number> &
+  SliderComponent<number[]> &
+  SliderComponent<readonly number[]> &
+  SliderComponent<number | number[]>;
+
+export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactElement<unknown>;
+  index: number;
+  open: boolean;
+  value: React.ReactNode;
+}
+
+type SliderRootProps = NonNullable<SliderTypeMap['props']['slotProps']>['root'];
+type SliderMarkProps = NonNullable<SliderTypeMap['props']['slotProps']>['mark'];
+type SliderMarkLabelProps = NonNullable<SliderTypeMap['props']['slotProps']>['markLabel'];
+type SliderRailProps = NonNullable<SliderTypeMap['props']['slotProps']>['rail'];
+type SliderTrackProps = NonNullable<SliderTypeMap['props']['slotProps']>['track'];
+type SliderThumbProps = NonNullable<SliderTypeMap['props']['slotProps']>['thumb'];
+
+export declare const SliderRoot: React.FC<SliderRootProps>;
+export declare const SliderMark: React.FC<SliderMarkProps>;
+export declare const SliderMarkLabel: React.FC<SliderMarkLabelProps>;
+export declare const SliderRail: React.FC<SliderRailProps>;
+export declare const SliderTrack: React.FC<SliderTrackProps>;
+export declare const SliderThumb: React.FC<SliderThumbProps>;
+export declare const SliderValueLabel: React.FC<SliderValueLabelProps>;
+
+/**
+ * @internal Duplicated Slider component based on Emotion.
+ */
+declare const Slider: SliderType;
+
+export type SliderProps<
+  RootComponent extends React.ElementType = SliderTypeMap['defaultComponent'],
+  AdditionalProps = {},
+  Value extends number | readonly number[] = number | number[],
+> = OverrideProps<SliderTypeMap<RootComponent, AdditionalProps, Value>, RootComponent> & {
+  component?: React.ElementType | undefined;
+};
+
+export default Slider;
diff --git a/packages/mui-material/src/Slider/SliderEmotion.js b/packages/mui-material/src/Slider/SliderEmotion.js
new file mode 100644
index 00000000000000..79dbaad8fe3f37
--- /dev/null
+++ b/packages/mui-material/src/Slider/SliderEmotion.js
@@ -0,0 +1,1079 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import chainPropTypes from '@mui/utils/chainPropTypes';
+import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
+import isHostComponent from '@mui/utils/isHostComponent';
+import { useSlider, valueToPercent } from './useSlider';
+import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
+import { useDefaultProps } from '../DefaultPropsProvider';
+import useSlot from '../utils/useSlot';
+import slotShouldForwardProp from '../styles/slotShouldForwardProp';
+import capitalize from '../utils/capitalize';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
+import BaseSliderValueLabel from './SliderValueLabel';
+import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
+
+function Identity(x) {
+  return x;
+}
+
+export const SliderRoot = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [
+      styles.root,
+      styles[`color${capitalize(ownerState.color)}`],
+      ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`],
+      ownerState.marked && styles.marked,
+      ownerState.orientation === 'vertical' && styles.vertical,
+      ownerState.track === 'inverted' && styles.trackInverted,
+      ownerState.track === false && styles.trackFalse,
+    ];
+  },
+})(
+  memoTheme(({ theme }) => ({
+    borderRadius: 12,
+    boxSizing: 'content-box',
+    display: 'inline-block',
+    position: 'relative',
+    cursor: 'pointer',
+    touchAction: 'none',
+    WebkitTapHighlightColor: 'transparent',
+    '@media print': {
+      colorAdjust: 'exact',
+    },
+    [`&.${sliderClasses.disabled}`]: {
+      pointerEvents: 'none',
+      cursor: 'default',
+      color: (theme.vars || theme).palette.grey[400],
+    },
+    [`&.${sliderClasses.dragging}`]: {
+      [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
+        transition: 'none',
+      },
+    },
+    variants: [
+      ...Object.entries(theme.palette)
+        .filter(createSimplePaletteValueFilter())
+        .map(([color]) => ({
+          props: { color },
+          style: {
+            color: (theme.vars || theme).palette[color].main,
+          },
+        })),
+      {
+        props: { orientation: 'horizontal' },
+        style: {
+          height: 4,
+          width: '100%',
+          padding: '13px 0',
+          // The primary input mechanism of the device includes a pointing device of limited accuracy.
+          '@media (pointer: coarse)': {
+            // Reach 42px touch target, about ~8mm on screen.
+            padding: '20px 0',
+          },
+        },
+      },
+      {
+        props: { orientation: 'horizontal', size: 'small' },
+        style: {
+          height: 2,
+        },
+      },
+      {
+        props: { orientation: 'horizontal', marked: true },
+        style: {
+          marginBottom: 20,
+        },
+      },
+      {
+        props: { orientation: 'vertical' },
+        style: {
+          height: '100%',
+          width: 4,
+          padding: '0 13px',
+          // The primary input mechanism of the device includes a pointing device of limited accuracy.
+          '@media (pointer: coarse)': {
+            // Reach 42px touch target, about ~8mm on screen.
+            padding: '0 20px',
+          },
+        },
+      },
+      {
+        props: { orientation: 'vertical', size: 'small' },
+        style: {
+          width: 2,
+        },
+      },
+      {
+        props: { orientation: 'vertical', marked: true },
+        style: {
+          marginRight: 44,
+        },
+      },
+    ],
+  })),
+);
+
+export const SliderRail = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})({
+  display: 'block',
+  position: 'absolute',
+  borderRadius: 'inherit',
+  backgroundColor: 'currentColor',
+  opacity: 0.38,
+  '@media (forced-colors: active)': {
+    border: '1px solid transparent',
+    boxSizing: 'border-box',
+  },
+  variants: [
+    {
+      props: { orientation: 'horizontal' },
+      style: {
+        width: '100%',
+        height: 'inherit',
+        top: '50%',
+        transform: 'translateY(-50%)',
+      },
+    },
+    {
+      props: { orientation: 'vertical' },
+      style: {
+        height: '100%',
+        width: 'inherit',
+        left: '50%',
+        transform: 'translateX(-50%)',
+      },
+    },
+    {
+      props: { track: 'inverted' },
+      style: {
+        opacity: 1,
+      },
+    },
+  ],
+});
+
+export const SliderTrack = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Track',
+})(
+  memoTheme(({ theme }) => {
+    return {
+      display: 'block',
+      position: 'absolute',
+      borderRadius: 'inherit',
+      border: '1px solid currentColor',
+      backgroundColor: 'currentColor',
+      transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], {
+        duration: theme.transitions.duration.shortest,
+      }),
+      variants: [
+        {
+          props: { size: 'small' },
+          style: {
+            '@media (forced-colors: none)': {
+              border: 'none',
+            },
+          },
+        },
+        {
+          props: { orientation: 'horizontal' },
+          style: {
+            height: 'inherit',
+            top: '50%',
+            transform: 'translateY(-50%)',
+          },
+        },
+        {
+          props: { orientation: 'vertical' },
+          style: {
+            width: 'inherit',
+            left: '50%',
+            transform: 'translateX(-50%)',
+          },
+        },
+        {
+          props: { track: false },
+          style: {
+            display: 'none',
+          },
+        },
+        ...Object.entries(theme.palette)
+          .filter(createSimplePaletteValueFilter())
+          .map(([color]) => ({
+            props: { color, track: 'inverted' },
+            style: {
+              ...(theme.vars
+                ? {
+                    backgroundColor: theme.vars.palette.Slider[`${color}Track`],
+                    borderColor: theme.vars.palette.Slider[`${color}Track`],
+                  }
+                : {
+                    backgroundColor: theme.lighten(theme.palette[color].main, 0.62),
+                    borderColor: theme.lighten(theme.palette[color].main, 0.62),
+                    ...theme.applyStyles('dark', {
+                      backgroundColor: theme.darken(theme.palette[color].main, 0.5),
+                    }),
+                    ...theme.applyStyles('dark', {
+                      borderColor: theme.darken(theme.palette[color].main, 0.5),
+                    }),
+                  }),
+            },
+          })),
+      ],
+    };
+  }),
+);
+
+export const SliderThumb = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Thumb',
+})(
+  memoTheme(({ theme }) => ({
+    position: 'absolute',
+    width: 20,
+    height: 20,
+    boxSizing: 'border-box',
+    borderRadius: '50%',
+    outline: 0,
+    backgroundColor: 'currentColor',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
+      duration: theme.transitions.duration.shortest,
+    }),
+    '@media (forced-colors: active)': {
+      border: '1px solid ButtonBorder',
+    },
+    '&::before': {
+      position: 'absolute',
+      content: '""',
+      borderRadius: 'inherit',
+      width: '100%',
+      height: '100%',
+      boxShadow: (theme.vars || theme).shadows[2],
+    },
+    '&::after': {
+      position: 'absolute',
+      content: '""',
+      borderRadius: '50%',
+      // 42px is the hit target
+      width: 42,
+      height: 42,
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+    },
+    [`&.${sliderClasses.disabled}`]: {
+      '&:hover': {
+        boxShadow: 'none',
+      },
+    },
+    variants: [
+      {
+        props: { size: 'small' },
+        style: {
+          width: 12,
+          height: 12,
+          '&::before': {
+            boxShadow: 'none',
+          },
+        },
+      },
+      {
+        props: { orientation: 'horizontal' },
+        style: {
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+        },
+      },
+      {
+        props: { orientation: 'vertical' },
+        style: {
+          left: '50%',
+          transform: 'translate(-50%, 50%)',
+        },
+      },
+      ...Object.entries(theme.palette)
+        .filter(createSimplePaletteValueFilter())
+        .map(([color]) => ({
+          props: { color },
+          style: {
+            [`&:hover, &.${sliderClasses.focusVisible}`]: {
+              boxShadow: `0px 0px 0px 8px ${theme.alpha((theme.vars || theme).palette[color].main, 0.16)}`,
+              '@media (hover: none)': {
+                boxShadow: 'none',
+              },
+            },
+            [`&.${sliderClasses.active}`]: {
+              boxShadow: `0px 0px 0px 14px ${theme.alpha((theme.vars || theme).palette[color].main, 0.16)}`,
+            },
+          },
+        })),
+    ],
+  })),
+);
+
+const SliderValueLabel = styled(BaseSliderValueLabel, {
+  name: 'MuiSlider',
+  slot: 'ValueLabel',
+})(
+  memoTheme(({ theme }) => ({
+    zIndex: 1,
+    whiteSpace: 'nowrap',
+    ...theme.typography.body2,
+    fontWeight: 500,
+    transition: theme.transitions.create(['transform'], {
+      duration: theme.transitions.duration.shortest,
+    }),
+    position: 'absolute',
+    backgroundColor: (theme.vars || theme).palette.grey[600],
+    borderRadius: 2,
+    color: (theme.vars || theme).palette.common.white,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '0.25rem 0.75rem',
+    variants: [
+      {
+        props: { orientation: 'horizontal' },
+        style: {
+          transform: 'translateY(-100%) scale(0)',
+          top: '-10px',
+          transformOrigin: 'bottom center',
+          '&::before': {
+            position: 'absolute',
+            content: '""',
+            width: 8,
+            height: 8,
+            transform: 'translate(-50%, 50%) rotate(45deg)',
+            backgroundColor: 'inherit',
+            bottom: 0,
+            left: '50%',
+          },
+          [`&.${sliderClasses.valueLabelOpen}`]: {
+            transform: 'translateY(-100%) scale(1)',
+          },
+        },
+      },
+      {
+        props: { orientation: 'vertical' },
+        style: {
+          transform: 'translateY(-50%) scale(0)',
+          right: '30px',
+          top: '50%',
+          transformOrigin: 'right center',
+          '&::before': {
+            position: 'absolute',
+            content: '""',
+            width: 8,
+            height: 8,
+            transform: 'translate(-50%, -50%) rotate(45deg)',
+            backgroundColor: 'inherit',
+            right: -8,
+            top: '50%',
+          },
+          [`&.${sliderClasses.valueLabelOpen}`]: {
+            transform: 'translateY(-50%) scale(1)',
+          },
+        },
+      },
+      {
+        props: { size: 'small' },
+        style: {
+          fontSize: theme.typography.pxToRem(12),
+          padding: '0.25rem 0.5rem',
+        },
+      },
+      {
+        props: { orientation: 'vertical', size: 'small' },
+        style: {
+          right: '20px',
+        },
+      },
+    ],
+  })),
+);
+
+SliderValueLabel.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * @ignore
+   */
+  index: PropTypes.number.isRequired,
+  /**
+   * @ignore
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  value: PropTypes.node,
+};
+
+export { SliderValueLabel };
+
+export const SliderMark = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Mark',
+  shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'markActive',
+  overridesResolver: (props, styles) => {
+    const { markActive } = props;
+
+    return [styles.mark, markActive && styles.markActive];
+  },
+})(
+  memoTheme(({ theme }) => ({
+    position: 'absolute',
+    width: 2,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: 'currentColor',
+    variants: [
+      {
+        props: { orientation: 'horizontal' },
+        style: {
+          top: '50%',
+          transform: 'translate(-1px, -50%)',
+        },
+      },
+      {
+        props: { orientation: 'vertical' },
+        style: {
+          left: '50%',
+          transform: 'translate(-50%, 1px)',
+        },
+      },
+      {
+        props: { markActive: true },
+        style: {
+          backgroundColor: (theme.vars || theme).palette.background.paper,
+          opacity: 0.8,
+        },
+      },
+    ],
+  })),
+);
+
+export const SliderMarkLabel = styled('span', {
+  name: 'MuiSlider',
+  slot: 'MarkLabel',
+  shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'markLabelActive',
+})(
+  memoTheme(({ theme }) => ({
+    ...theme.typography.body2,
+    color: (theme.vars || theme).palette.text.secondary,
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    variants: [
+      {
+        props: { orientation: 'horizontal' },
+        style: {
+          top: 30,
+          transform: 'translateX(-50%)',
+          '@media (pointer: coarse)': {
+            top: 40,
+          },
+        },
+      },
+      {
+        props: { orientation: 'vertical' },
+        style: {
+          left: 36,
+          transform: 'translateY(50%)',
+          '@media (pointer: coarse)': {
+            left: 44,
+          },
+        },
+      },
+      {
+        props: { markLabelActive: true },
+        style: {
+          color: (theme.vars || theme).palette.text.primary,
+        },
+      },
+    ],
+  })),
+);
+
+const useUtilityClasses = (ownerState) => {
+  const { disabled, dragging, marked, orientation, track, classes, color, size } = ownerState;
+
+  const slots = {
+    root: [
+      'root',
+      disabled && 'disabled',
+      dragging && 'dragging',
+      marked && 'marked',
+      orientation === 'vertical' && 'vertical',
+      track === 'inverted' && 'trackInverted',
+      track === false && 'trackFalse',
+      color && `color${capitalize(color)}`,
+      size && `size${capitalize(size)}`,
+    ],
+    rail: ['rail'],
+    track: ['track'],
+    mark: ['mark'],
+    markActive: ['markActive'],
+    markLabel: ['markLabel'],
+    markLabelActive: ['markLabelActive'],
+    valueLabel: ['valueLabel'],
+    thumb: ['thumb', disabled && 'disabled'],
+    active: ['active'],
+    disabled: ['disabled'],
+    focusVisible: ['focusVisible'],
+  };
+
+  return composeClasses(slots, getSliderUtilityClass, classes);
+};
+
+const Forward = ({ children }) => children;
+
+/**
+ * @internal Duplicated Slider component based on Emotion.
+ */
+const Slider = React.forwardRef(function Slider(inProps, ref) {
+  const props = useDefaultProps({ props: inProps, name: 'MuiSlider' });
+
+  const isRtl = useRtl();
+
+  const {
+    'aria-label': ariaLabel,
+    'aria-valuetext': ariaValuetext,
+    'aria-labelledby': ariaLabelledby,
+    color = 'primary',
+    classes: classesProp,
+    className,
+    disableSwap = false,
+    disabled = false,
+    getAriaLabel,
+    getAriaValueText,
+    marks: marksProp = false,
+    max = 100,
+    min = 0,
+    name,
+    onChange,
+    onChangeCommitted,
+    orientation = 'horizontal',
+    shiftStep = 10,
+    size = 'medium',
+    step = 1,
+    scale = Identity,
+    slotProps = {},
+    slots = {},
+    tabIndex,
+    track = 'normal',
+    value: valueProp,
+    valueLabelDisplay = 'off',
+    valueLabelFormat = Identity,
+    ...other
+  } = props;
+
+  const ownerState = {
+    ...props,
+    isRtl,
+    max,
+    min,
+    classes: classesProp,
+    disabled,
+    disableSwap,
+    orientation,
+    marks: marksProp,
+    color,
+    size,
+    step,
+    shiftStep,
+    scale,
+    track,
+    valueLabelDisplay,
+    valueLabelFormat,
+  };
+
+  const {
+    axisProps,
+    getRootProps,
+    getHiddenInputProps,
+    getThumbProps,
+    open,
+    active,
+    axis,
+    focusedThumbIndex,
+    range,
+    dragging,
+    marks,
+    values,
+    trackOffset,
+    trackLeap,
+    getThumbStyle,
+  } = useSlider({ ...ownerState, rootRef: ref });
+
+  ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label);
+  ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+
+  const classes = useUtilityClasses(ownerState);
+
+  const externalForwardedProps = {
+    slots,
+    slotProps,
+  };
+
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: SliderRoot,
+    getSlotProps: getRootProps,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    ownerState,
+    className: [classes.root, className],
+  });
+
+  const [RailSlot, railProps] = useSlot('rail', {
+    elementType: SliderRail,
+    externalForwardedProps,
+    ownerState,
+    className: classes.rail,
+  });
+
+  const [TrackSlot, trackProps] = useSlot('track', {
+    elementType: SliderTrack,
+    externalForwardedProps,
+    additionalProps: {
+      style: {
+        ...axisProps[axis].offset(trackOffset),
+        ...axisProps[axis].leap(trackLeap),
+      },
+    },
+    ownerState,
+    className: classes.track,
+  });
+
+  const [ThumbSlot, thumbProps] = useSlot('thumb', {
+    elementType: SliderThumb,
+    getSlotProps: getThumbProps,
+    externalForwardedProps,
+    ownerState,
+    className: classes.thumb,
+  });
+
+  const [ValueLabelSlot, valueLabelProps] = useSlot('valueLabel', {
+    elementType: SliderValueLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.valueLabel,
+  });
+
+  const [MarkSlot, markProps] = useSlot('mark', {
+    elementType: SliderMark,
+    externalForwardedProps,
+    ownerState,
+    className: classes.mark,
+  });
+
+  const [MarkLabelSlot, markLabelProps] = useSlot('markLabel', {
+    elementType: SliderMarkLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.markLabel,
+  });
+
+  const [InputSliderSlot, inputSliderProps] = useSlot('input', {
+    elementType: 'input',
+    getSlotProps: getHiddenInputProps,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  return (
+    <RootSlot {...rootProps}>
+      <RailSlot {...railProps} />
+      <TrackSlot {...trackProps} />
+      {marks
+        .filter((mark) => mark.value >= min && mark.value <= max)
+        .map((mark, index) => {
+          const percent = valueToPercent(mark.value, min, max);
+          const style = axisProps[axis].offset(percent);
+
+          let markActive;
+          if (track === false) {
+            markActive = values.includes(mark.value);
+          } else {
+            markActive =
+              (track === 'normal' &&
+                (range
+                  ? mark.value >= values[0] && mark.value <= values[values.length - 1]
+                  : mark.value <= values[0])) ||
+              (track === 'inverted' &&
+                (range
+                  ? mark.value <= values[0] || mark.value >= values[values.length - 1]
+                  : mark.value >= values[0]));
+          }
+
+          return (
+            <React.Fragment key={index}>
+              <MarkSlot
+                data-index={index}
+                {...markProps}
+                {...(!isHostComponent(MarkSlot) && {
+                  markActive,
+                })}
+                style={{ ...style, ...markProps.style }}
+                className={clsx(markProps.className, {
+                  [classes.markActive]: markActive,
+                })}
+              />
+              {mark.label != null ? (
+                <MarkLabelSlot
+                  aria-hidden
+                  data-index={index}
+                  {...markLabelProps}
+                  {...(!isHostComponent(MarkLabelSlot) && {
+                    markLabelActive: markActive,
+                  })}
+                  style={{ ...style, ...markLabelProps.style }}
+                  className={clsx(classes.markLabel, markLabelProps.className, {
+                    [classes.markLabelActive]: markActive,
+                  })}
+                >
+                  {mark.label}
+                </MarkLabelSlot>
+              ) : null}
+            </React.Fragment>
+          );
+        })}
+      {values.map((value, index) => {
+        const percent = valueToPercent(value, min, max);
+        const style = axisProps[axis].offset(percent);
+
+        const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
+
+        return (
+          /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
+          <ValueLabelComponent
+            key={index}
+            {...(!isHostComponent(ValueLabelComponent) && {
+              valueLabelFormat,
+              valueLabelDisplay,
+              value:
+                typeof valueLabelFormat === 'function'
+                  ? valueLabelFormat(scale(value), index)
+                  : valueLabelFormat,
+              index,
+              open: open === index || active === index || valueLabelDisplay === 'on',
+              disabled,
+            })}
+            {...valueLabelProps}
+          >
+            <ThumbSlot
+              data-index={index}
+              {...thumbProps}
+              className={clsx(classes.thumb, thumbProps.className, {
+                [classes.active]: active === index,
+                [classes.focusVisible]: focusedThumbIndex === index,
+              })}
+              style={{
+                ...style,
+                ...getThumbStyle(index),
+                ...thumbProps.style,
+              }}
+            >
+              <InputSliderSlot
+                data-index={index}
+                aria-label={getAriaLabel ? getAriaLabel(index) : ariaLabel}
+                aria-valuenow={scale(value)}
+                aria-labelledby={ariaLabelledby}
+                aria-valuetext={
+                  getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext
+                }
+                value={values[index]}
+                {...inputSliderProps}
+              />
+            </ThumbSlot>
+          </ValueLabelComponent>
+        );
+      })}
+    </RootSlot>
+  );
+});
+
+Slider.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The label of the slider.
+   */
+  'aria-label': chainPropTypes(PropTypes.string, (props) => {
+    const range = Array.isArray(props.value || props.defaultValue);
+
+    if (range && props['aria-label'] != null) {
+      return new Error(
+        'MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.',
+      );
+    }
+
+    return null;
+  }),
+  /**
+   * The id of the element containing a label for the slider.
+   */
+  'aria-labelledby': PropTypes.string,
+  /**
+   * A string value that provides a user-friendly name for the current value of the slider.
+   */
+  'aria-valuetext': chainPropTypes(PropTypes.string, (props) => {
+    const range = Array.isArray(props.value || props.defaultValue);
+
+    if (range && props['aria-valuetext'] != null) {
+      return new Error(
+        'MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.',
+      );
+    }
+
+    return null;
+  }),
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']),
+    PropTypes.string,
+  ]),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
+   * @default false
+   */
+  disableSwap: PropTypes.bool,
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
+   * This is important for screen reader users.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaLabel: PropTypes.func,
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
+   * This is important for screen reader users.
+   * @param {number} value The thumb label's value to format.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaValueText: PropTypes.func,
+  /**
+   * Marks indicate predetermined values to which the user can move the slider.
+   * If `true` the marks are spaced according the value of the `step` prop.
+   * If an array, it should contain objects with `value` and an optional `label` keys.
+   * @default false
+   */
+  marks: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.node,
+        value: PropTypes.number.isRequired,
+      }),
+    ),
+    PropTypes.bool,
+  ]),
+  /**
+   * The maximum allowed value of the slider.
+   * Should not be equal to min.
+   * @default 100
+   */
+  max: PropTypes.number,
+  /**
+   * The minimum allowed value of the slider.
+   * Should not be equal to max.
+   * @default 0
+   */
+  min: PropTypes.number,
+  /**
+   * Name attribute of the hidden `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * Callback function that is fired when the slider's value changed.
+   *
+   * @param {Event} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
+   * @param {Value} value The new value.
+   * @param {number} activeThumb Index of the currently moved thumb.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Callback function that is fired when the pointer or touch interaction ends.
+   *
+   * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {Value} value The new value.
+   */
+  onChangeCommitted: PropTypes.func,
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * A transformation function, to change the scale of the slider.
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  scale: PropTypes.func,
+  /**
+   * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
+   * @default 10
+   */
+  shiftStep: PropTypes.number,
+  /**
+   * The size of the slider.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['small', 'medium']),
+    PropTypes.string,
+  ]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.shape({
+        children: PropTypes.element,
+        className: PropTypes.string,
+        open: PropTypes.bool,
+        style: PropTypes.object,
+        value: PropTypes.node,
+        valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
+      }),
+    ]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    mark: PropTypes.elementType,
+    markLabel: PropTypes.elementType,
+    rail: PropTypes.elementType,
+    root: PropTypes.elementType,
+    thumb: PropTypes.elementType,
+    track: PropTypes.elementType,
+    valueLabel: PropTypes.elementType,
+  }),
+  /**
+   * The granularity with which the slider can step through values. (A "discrete" slider.)
+   * The `min` prop serves as the origin for the valid values.
+   * We recommend (max - min) to be evenly divisible by the step.
+   *
+   * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+   * @default 1
+   */
+  step: PropTypes.number,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  /**
+   * Tab index attribute of the hidden `input` element.
+   */
+  tabIndex: PropTypes.number,
+  /**
+   * The track presentation:
+   *
+   * - `normal` the track will render a bar representing the slider value.
+   * - `inverted` the track will render a bar representing the remaining slider value.
+   * - `false` the track will render without a bar.
+   * @default 'normal'
+   */
+  track: PropTypes.oneOf(['inverted', 'normal', false]),
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  /**
+   * Controls when the value label is displayed:
+   *
+   * - `auto` the value label will display when the thumb is hovered or focused.
+   * - `on` will display persistently.
+   * - `off` will never display.
+   * @default 'off'
+   */
+  valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
+  /**
+   * The format function the value label's value.
+   *
+   * When a function is provided, it should have the following signature:
+   *
+   * - {number} value The value label's value to format
+   * - {number} index The value label's index to format
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+};
+
+export default Slider;
diff --git a/packages/mui-material/src/Slider/index.d.ts b/packages/mui-material/src/Slider/index.d.ts
index ac3427028230ed..e8ca127600583e 100644
--- a/packages/mui-material/src/Slider/index.d.ts
+++ b/packages/mui-material/src/Slider/index.d.ts
@@ -1,5 +1,7 @@
 export { default } from './Slider';
 export * from './Slider';
 
+export { default as SliderEmotion } from './SliderEmotion';
+
 export { default as sliderClasses } from './sliderClasses';
 export * from './sliderClasses';
diff --git a/packages/mui-material/src/Slider/index.js b/packages/mui-material/src/Slider/index.js
index ac3427028230ed..e8ca127600583e 100644
--- a/packages/mui-material/src/Slider/index.js
+++ b/packages/mui-material/src/Slider/index.js
@@ -1,5 +1,7 @@
 export { default } from './Slider';
 export * from './Slider';
 
+export { default as SliderEmotion } from './SliderEmotion';
+
 export { default as sliderClasses } from './sliderClasses';
 export * from './sliderClasses';
diff --git a/packages/mui-material/src/index.test.js b/packages/mui-material/src/index.test.js
index ba50fa794efd6d..7945331d9b8dca 100644
--- a/packages/mui-material/src/index.test.js
+++ b/packages/mui-material/src/index.test.js
@@ -7,7 +7,7 @@ import { expect } from 'chai';
 import * as MaterialUI from './index';
 
 // To skip them in the undefined exports test
-// These are checked in the build process (scripts/build.mjs)
+// These are checked in the build process
 const versionExports = ['version', 'major', 'minor', 'patch', 'prerelease'];
 
 describe('material-ui', () => {
diff --git a/packages/mui-material/src/styles/CssThemeProvider.test.tsx b/packages/mui-material/src/styles/CssThemeProvider.test.tsx
new file mode 100644
index 00000000000000..5638e1d302fe07
--- /dev/null
+++ b/packages/mui-material/src/styles/CssThemeProvider.test.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer } from '@mui/internal-test-utils';
+import { createTheme } from '@mui/material/styles';
+import CssThemeProvider from './CssThemeProvider';
+import useTheme from './useTheme';
+
+describe('CssThemeProvider', () => {
+  const { render } = createRenderer();
+
+  afterEach(() => {
+    document.querySelectorAll('[id$="-css-vars"]').forEach((el) => el.remove());
+  });
+
+  it('throws when the theme was not created with cssVariables: true', () => {
+    const theme = createTheme();
+    expect(() => render(<CssThemeProvider theme={theme}>{null}</CssThemeProvider>)).to.throw(
+      'MUI: CssThemeProvider requires a theme created with `cssVariables: true`',
+    );
+  });
+
+  it('throws when passed a theme function', () => {
+    const themeFn = () => createTheme({ cssVariables: true });
+    expect(() => render(<CssThemeProvider theme={themeFn}>{null}</CssThemeProvider>)).to.throw(
+      'MUI: CssThemeProvider does not accept a theme function',
+    );
+  });
+
+  it('injects CSS variables into <head>', () => {
+    const theme = createTheme({ cssVariables: true });
+    render(
+      <CssThemeProvider theme={theme}>
+        <div />
+      </CssThemeProvider>,
+    );
+    const style = document.getElementById('mui-css-vars');
+    expect(style).not.to.equal(null);
+    expect(style!.textContent).to.include('--mui-palette-primary-main');
+  });
+
+  it('makes the theme available via useTheme()', () => {
+    const theme = createTheme({
+      cssVariables: true,
+      palette: { primary: { main: '#ff0000' } },
+    });
+    let observed: any;
+    function Probe() {
+      observed = useTheme();
+      return null;
+    }
+    render(
+      <CssThemeProvider theme={theme}>
+        <Probe />
+      </CssThemeProvider>,
+    );
+    // Theme is wrapped in CSS-vars mode — palette values are var() strings,
+    // but transitions/breakpoints/spacing/etc. remain plain JS values.
+    expect(observed).not.to.equal(undefined);
+    expect(observed.breakpoints).to.be.an('object');
+    expect(observed.spacing(2)).to.equal('16px');
+    expect(observed.transitions.duration.shortest).to.equal(150);
+  });
+
+  it('uses the cssVarPrefix to namespace the injected <style> id', () => {
+    const theme = createTheme({ cssVariables: { cssVarPrefix: 'demo' } });
+    render(
+      <CssThemeProvider theme={theme}>
+        <div />
+      </CssThemeProvider>,
+    );
+    expect(document.getElementById('demo-css-vars')).not.to.equal(null);
+    expect(document.getElementById('mui-css-vars')).to.equal(null);
+  });
+});
diff --git a/packages/mui-material/src/styles/CssThemeProvider.tsx b/packages/mui-material/src/styles/CssThemeProvider.tsx
new file mode 100644
index 00000000000000..9047f9173ad825
--- /dev/null
+++ b/packages/mui-material/src/styles/CssThemeProvider.tsx
@@ -0,0 +1,106 @@
+'use client';
+import * as React from 'react';
+import type { DefaultTheme } from '@mui/system';
+import RtlProvider from '@mui/system/RtlProvider';
+import DefaultPropsProvider from '@mui/system/DefaultPropsProvider';
+import CssVarsInjector from './CssVarsInjector';
+import THEME_ID from './identifier';
+
+export interface CssThemeProviderProps<Theme = DefaultTheme> {
+  children?: React.ReactNode;
+  /**
+   * A theme created with `createTheme({ cssVariables: true })`.
+   * The theme must expose `generateStyleSheets` so the CSS variables can
+   * be injected into the document. Plain themes (without `cssVariables`)
+   * are not supported because the imported component CSS files reference
+   * variables that would never be generated, leaving components unstyled.
+   */
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+  /**
+   * The document to inject the `<style>` tag of CSS variables into.
+   * Forwarded to `CssVarsInjector` so the provider works correctly when
+   * rendered inside an iframe.
+   * @default document
+   */
+  documentNode?: Document | undefined;
+  /**
+   * A nonce attribute to add to the injected `<style>` tag.
+   */
+  nonce?: string | undefined;
+}
+
+interface ThemeLike {
+  generateStyleSheets?: (() => Array<Record<string, any>>) | undefined;
+  cssVarPrefix?: string | undefined;
+  components?: Record<string, any> | undefined;
+  direction?: 'ltr' | 'rtl' | undefined;
+}
+
+function resolveTheme(theme: any): ThemeLike {
+  return (THEME_ID in theme ? theme[THEME_ID] : theme) as ThemeLike;
+}
+
+/**
+ * A lightweight ThemeProvider for the CSS-only path.
+ *
+ * Unlike the default `ThemeProvider`, this component does not pull in the
+ * color-scheme switching logic of `CssVarsProvider`. It only:
+ *
+ * 1. Makes the theme available via `useTheme()` (for JS-only values such as
+ *    `theme.breakpoints`, `theme.transitions.create`, `theme.spacing`).
+ * 2. Injects the theme's CSS variables via `CssVarsInjector`.
+ * 3. Sets up `RtlProvider` and `DefaultPropsProvider` so components honour
+ *    direction and `theme.components.MuiX.defaultProps`.
+ *
+ * Use this provider when consuming Material UI components purely via the
+ * shipped `.css` files (no Emotion `styled()` usage).
+ *
+ * The theme **must** be created with `cssVariables: true`. Otherwise the
+ * imported `.css` files reference variables that are never generated and
+ * components render unstyled.
+ */
+export default function CssThemeProvider<Theme = DefaultTheme>({
+  theme: themeInput,
+  children,
+  documentNode,
+  nonce,
+}: CssThemeProviderProps<Theme>) {
+  const resolved = React.useMemo(() => {
+    if (typeof themeInput === 'function') {
+      // Functional themes are only meaningful when an outer theme exists.
+      // CssThemeProvider is intended for the simple, top-level use case;
+      // surfacing this as an error is clearer than silently doing nothing.
+      throw /* minify-error */ new Error(
+        'MUI: CssThemeProvider does not accept a theme function. ' +
+          'Pass a theme object created with `createTheme({ cssVariables: true })` instead. ' +
+          'See https://mui.com/r/css-theme-provider for more info.',
+      );
+    }
+    return resolveTheme(themeInput);
+  }, [themeInput]);
+
+  if (typeof resolved.generateStyleSheets !== 'function') {
+    throw /* minify-error */ new Error(
+      'MUI: CssThemeProvider requires a theme created with `cssVariables: true`. ' +
+        'Without it, the imported component CSS files reference variables that are never generated, ' +
+        'leaving components unstyled. ' +
+        'See https://mui.com/r/css-theme-provider for more info.',
+    );
+  }
+
+  const rtl = resolved.direction === 'rtl';
+
+  // ToDo Silviu: CSS at build time is simpler. It might make people harder to migrate, especially for intensive usage of JS.
+  // Enable the css layer. 1. Import the css file without layers. 2. For customization, use the css layer. For tw you use classnames, and for our css we use the layer.
+  // Maybe css layer by default.
+  // in the end, no theme provider, just a theme builder that will generate css files for that theme.
+  return (
+    // ToDo Silviu: Maybe export RTLProvide separately.
+    <RtlProvider value={rtl}>
+      <DefaultPropsProvider value={resolved.components}>
+        <CssVarsInjector theme={resolved} documentNode={documentNode} nonce={nonce} />
+        {children}
+      </DefaultPropsProvider>
+    </RtlProvider>
+  );
+}
diff --git a/packages/mui-material/src/styles/CssVarsInjector.test.tsx b/packages/mui-material/src/styles/CssVarsInjector.test.tsx
new file mode 100644
index 00000000000000..8f9004b5f02455
--- /dev/null
+++ b/packages/mui-material/src/styles/CssVarsInjector.test.tsx
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer } from '@mui/internal-test-utils';
+import CssVarsInjector from './CssVarsInjector';
+
+const makeTheme = (sheets: Array<Record<string, any>> = [], cssVarPrefix?: string) => ({
+  generateStyleSheets: () => sheets,
+  cssVarPrefix,
+});
+
+const DEFAULT_STYLE_ID = 'mui-css-vars';
+const STYLE_ID = DEFAULT_STYLE_ID;
+
+function getStyleId(cssVarPrefix?: string) {
+  return cssVarPrefix ? `${cssVarPrefix}-css-vars` : DEFAULT_STYLE_ID;
+}
+
+describe('CssVarsInjector', () => {
+  const { render } = createRenderer();
+
+  afterEach(() => {
+    // Clean up any injected <style> tags between tests
+    document.querySelectorAll('[id$="-css-vars"]').forEach((el) => el.remove());
+  });
+
+  it('injects a <style> tag into <head> on mount', () => {
+    const theme = makeTheme([{ ':root': { '--mui-spacing': '8px' } }]);
+    render(<CssVarsInjector theme={theme} />);
+
+    const style = document.getElementById(STYLE_ID);
+    expect(style).not.to.equal(null);
+    expect(style!.parentNode).to.equal(document.head);
+  });
+
+  it('renders null into the React tree (no <style> inside the container)', () => {
+    const theme = makeTheme([{ ':root': { '--mui-spacing': '8px' } }]);
+    const { container } = render(<CssVarsInjector theme={theme} />);
+
+    expect(container.querySelector(`#${STYLE_ID}`)).to.equal(null);
+  });
+
+  it('sets textContent to the serialized CSS', () => {
+    const theme = makeTheme([
+      { ':root': { '--mui-spacing': '8px', '--mui-zIndex-modal': '1300' } },
+    ]);
+    render(<CssVarsInjector theme={theme} />);
+
+    const style = document.getElementById(STYLE_ID)!;
+    expect(style.textContent).to.include('--mui-spacing: 8px');
+    expect(style.textContent).to.include('--mui-zIndex-modal: 1300');
+  });
+
+  it('does not create a duplicate tag on re-render', () => {
+    const theme = makeTheme([{ ':root': { '--mui-spacing': '8px' } }]);
+    const { rerender } = render(<CssVarsInjector theme={theme} />);
+    rerender(<CssVarsInjector theme={theme} />);
+
+    const tags = document.head.querySelectorAll(`#${STYLE_ID}`);
+    expect(tags.length).to.equal(1);
+  });
+
+  it('updates textContent when the theme changes', () => {
+    const theme1 = makeTheme([{ ':root': { '--mui-spacing': '8px' } }]);
+    const theme2 = makeTheme([{ ':root': { '--mui-spacing': '16px' } }]);
+
+    const { rerender } = render(<CssVarsInjector theme={theme1} />);
+    expect(document.getElementById(STYLE_ID)!.textContent).to.include('--mui-spacing: 8px');
+
+    rerender(<CssVarsInjector theme={theme2} />);
+    expect(document.getElementById(STYLE_ID)!.textContent).to.include('--mui-spacing: 16px');
+  });
+
+  it('moves an existing tag from the React tree into <head>', () => {
+    // Simulate an SSR-rendered <style> that landed inside the document body
+    // (as Next.js Pages Router places it inside #__next).
+    const existingStyle = document.createElement('style');
+    existingStyle.id = STYLE_ID;
+    existingStyle.textContent = ':root { --mui-spacing: 8px; }';
+    document.body.appendChild(existingStyle);
+
+    const theme = makeTheme([{ ':root': { '--mui-spacing': '8px' } }]);
+    render(<CssVarsInjector theme={theme} />);
+
+    const style = document.getElementById(STYLE_ID);
+    expect(style!.parentNode).to.equal(document.head);
+    expect(document.body.querySelector(`#${STYLE_ID}`)).to.equal(null);
+  });
+
+  it('sets the nonce attribute when provided', () => {
+    const theme = makeTheme([{ ':root': { '--mui-spacing': '8px' } }]);
+    render(<CssVarsInjector theme={theme} nonce="abc123" />);
+
+    const style = document.getElementById(STYLE_ID)!;
+    expect(style.getAttribute('nonce')).to.equal('abc123');
+  });
+
+  it('handles an empty generateStyleSheets result without error', () => {
+    const theme = makeTheme([]);
+    render(<CssVarsInjector theme={theme} />);
+
+    const style = document.getElementById(STYLE_ID);
+    expect(style).not.to.equal(null);
+    expect(style!.textContent).to.equal('');
+  });
+
+  it('handles a theme without generateStyleSheets without error', () => {
+    render(<CssVarsInjector theme={{}} />);
+
+    const style = document.getElementById(STYLE_ID);
+    expect(style).not.to.equal(null);
+    expect(style!.textContent).to.equal('');
+  });
+
+  it('uses a per-prefix style ID to avoid collisions between multiple demos', () => {
+    const themeA = makeTheme([{ ':root': { '--a-spacing': '8px' } }], 'a');
+    const themeB = makeTheme([{ ':root': { '--b-spacing': '16px' } }], 'b');
+
+    render(<CssVarsInjector theme={themeA} />);
+    render(<CssVarsInjector theme={themeB} />);
+
+    const styleA = document.getElementById(getStyleId('a'))!;
+    const styleB = document.getElementById(getStyleId('b'))!;
+    expect(styleA).not.to.equal(null);
+    expect(styleB).not.to.equal(null);
+    expect(styleA.textContent).to.include('--a-spacing: 8px');
+    expect(styleB.textContent).to.include('--b-spacing: 16px');
+    // Neither should have overwritten the other
+    expect(styleA.textContent).not.to.include('--b-spacing');
+    expect(styleB.textContent).not.to.include('--a-spacing');
+  });
+
+  it('injects into the provided documentNode (iframe scenario)', () => {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    const iframeDoc = iframe.contentDocument!;
+
+    const theme = makeTheme([{ ':root': { '--mui-spacing': '8px' } }]);
+    render(<CssVarsInjector theme={theme} documentNode={iframeDoc} />);
+
+    expect(iframeDoc.getElementById(STYLE_ID)).not.to.equal(null);
+    expect(iframeDoc.getElementById(STYLE_ID)!.parentNode).to.equal(iframeDoc.head);
+    // Top-level document must not have it
+    expect(document.getElementById(STYLE_ID)).to.equal(null);
+
+    document.body.removeChild(iframe);
+  });
+});
diff --git a/packages/mui-material/src/styles/CssVarsInjector.tsx b/packages/mui-material/src/styles/CssVarsInjector.tsx
new file mode 100644
index 00000000000000..4bdda9eeccbbd2
--- /dev/null
+++ b/packages/mui-material/src/styles/CssVarsInjector.tsx
@@ -0,0 +1,76 @@
+import { styleSheetsToString } from '@mui/system';
+import * as React from 'react';
+
+interface CssVarsInjectorProps {
+  theme: {
+    generateStyleSheets?: (() => Array<Record<string, any>>) | undefined;
+    cssVarPrefix?: string | undefined;
+  };
+  nonce?: string | undefined;
+  /**
+   * The document to inject the `<style>` tag into. Defaults to `document`.
+   * `CssVarsProvider` forwards its `documentNode` prop, so the iframe case
+   * works correctly when the provider is rendered inside an iframe.
+   */
+  documentNode?: Document | undefined;
+}
+
+const DEFAULT_STYLE_ID = 'mui-css-vars';
+
+function getStyleId(cssVarPrefix: string | undefined) {
+  return cssVarPrefix ? `${cssVarPrefix}-css-vars` : DEFAULT_STYLE_ID;
+}
+
+// ToDo Silviu: default dark, switch to dark then refresh, nested providers with different modes.
+export default function CssVarsInjector({ theme, nonce, documentNode }: CssVarsInjectorProps) {
+  const styleId = getStyleId(theme.cssVarPrefix);
+  const css = React.useMemo(
+    () => styleSheetsToString(theme.generateStyleSheets?.() ?? []),
+    [theme],
+  );
+
+  // Client: insert/update the <style> tag directly in <head> before any paint.
+  // useInsertionEffect is the earliest possible hook — it runs synchronously
+  // before React commits DOM mutations, so styles are in place before any
+  // component layout or paint. Returning null from render keeps the React tree
+  // clean (no <style> node inside #__next).
+  React.useInsertionEffect(() => {
+    const doc = documentNode ?? (typeof document === 'undefined' ? null : document);
+    if (!doc) {
+      return;
+    }
+    let style = doc.getElementById(styleId) as HTMLStyleElement | null;
+    if (!style) {
+      style = doc.createElement('style');
+      style.id = styleId;
+      if (nonce) {
+        style.setAttribute('nonce', nonce);
+      }
+    }
+    // SSR rendered the <style> tag inside the React tree (e.g. inside #__next
+    // for Next.js Pages Router). Move it to <head> so it cascades correctly
+    // and won't be removed if the React tree unmounts.
+    if (style.parentNode !== doc.head) {
+      doc.head.insertBefore(style, doc.head.firstChild);
+    }
+    if (style.textContent !== css) {
+      style.textContent = css;
+    }
+  }, [css, nonce, documentNode, styleId]);
+
+  // Server: render the <style> tag into the HTML stream so CSS vars are
+  // available before any JS executes (prevents FOUC). On the client this
+  // branch is never reached — the effect above handles injection instead.
+  if (typeof window === 'undefined') {
+    return (
+      <style
+        id={styleId}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: css }}
+        {...(nonce ? { nonce } : {})}
+      />
+    );
+  }
+
+  return null;
+}
diff --git a/packages/mui-material/src/styles/ThemeProviderWithVars.tsx b/packages/mui-material/src/styles/ThemeProviderWithVars.tsx
index 533448510aca67..9576f52928b855 100644
--- a/packages/mui-material/src/styles/ThemeProviderWithVars.tsx
+++ b/packages/mui-material/src/styles/ThemeProviderWithVars.tsx
@@ -6,6 +6,7 @@ import createTheme from './createTheme';
 import createTypography from './createTypography';
 import THEME_ID from './identifier';
 import { defaultConfig } from '../InitColorSchemeScript/InitColorSchemeScript';
+import CssVarsInjector from './CssVarsInjector';
 
 const {
   CssVarsProvider: InternalCssVarsProvider,
@@ -33,6 +34,7 @@ const {
 
     return newTheme;
   },
+  CssVarsInjector,
 });
 
 let warnedOnce = false;
diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts
index 2e995e808eab82..d29b97648e7c50 100644
--- a/packages/mui-material/src/styles/index.d.ts
+++ b/packages/mui-material/src/styles/index.d.ts
@@ -169,3 +169,7 @@ export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
 // Private methods for creating parts of the theme
 export { default as private_createTypography } from './createTypography';
 export { default as private_excludeVariablesFromRoot } from './excludeVariablesFromRoot';
+
+export { default as CssVarsInjector } from './CssVarsInjector';
+export { default as CssThemeProvider } from './CssThemeProvider';
+export type { CssThemeProviderProps } from './CssThemeProvider';
diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js
index e670636d7b4e67..f0377946144e3b 100644
--- a/packages/mui-material/src/styles/index.js
+++ b/packages/mui-material/src/styles/index.js
@@ -52,3 +52,7 @@ export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
 export { default as private_createTypography } from './createTypography';
 export { default as private_createMixins } from './createMixins';
 export { default as private_excludeVariablesFromRoot } from './excludeVariablesFromRoot';
+
+export { styleSheetsToString } from '@mui/system';
+export { default as CssVarsInjector } from './CssVarsInjector';
+export { default as CssThemeProvider } from './CssThemeProvider';
diff --git a/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts b/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts
index fe48bf4f40d0a3..684e102c043c00 100644
--- a/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts
+++ b/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts
@@ -1,7 +1,7 @@
 export default function shouldSkipGeneratingVar(keys: string[]) {
   return (
     !!keys[0].match(
-      /(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction|transitions)/,
+      /(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction)/,
     ) ||
     !!keys[0].match(/sxConfig$/) || // ends with sxConfig
     (keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/))
diff --git a/packages/mui-styled-engine-noop/README.md b/packages/mui-styled-engine-noop/README.md
new file mode 100644
index 00000000000000..5a4991cb42dc75
--- /dev/null
+++ b/packages/mui-styled-engine-noop/README.md
@@ -0,0 +1,11 @@
+# @mui/styled-engine-noop
+
+This package is a wrapper around the `@emotion/react` package.
+It also provides a shared interface that can be used with other styled engines, like styled-components.
+It is used internally in the `@mui/system` package.
+
+## Documentation
+
+<!-- #default-branch-switch -->
+
+Visit [https://mui.com/material-ui/integrations/styled-components/](https://mui.com/material-ui/integrations/styled-components/) to view the full documentation.
diff --git a/packages/mui-styled-engine-noop/package.json b/packages/mui-styled-engine-noop/package.json
new file mode 100644
index 00000000000000..2e55de8d98ee77
--- /dev/null
+++ b/packages/mui-styled-engine-noop/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@mui/styled-engine-noop",
+  "version": "10.0.0-alpha.0",
+  "author": "MUI Team",
+  "description": "styled() API noop package for interoperability with CSS in JS libraries.",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "react-component",
+    "mui",
+    "emotion"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mui/material-ui.git",
+    "directory": "packages/mui-styled-engine-noop"
+  },
+  "bugs": {
+    "url": "https://github.com/mui/material-ui/issues"
+  },
+  "homepage": "https://mui.com/system/styled/",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "scripts": {
+    "build": "code-infra build --flat --skipTsc",
+    "release": "pnpm build && pnpm publish",
+    "test": "pnpm --workspace-root test:unit --project \"*:@mui/styled-engine-noop\"",
+    "typescript": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.29.2",
+    "csstype": "^3.2.3",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@types/chai": "5.2.3",
+    "@types/react": "19.2.14",
+    "@emotion/react": "11.14.0",
+    "chai": "6.2.2",
+    "react": "19.2.4"
+  },
+  "peerDependencies": {},
+  "peerDependenciesMeta": {},
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "directory": "build"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "exports": {
+    ".": "./src/index.js",
+    "./*": "./src/*/index.js"
+  }
+}
diff --git a/packages/mui-styled-engine-noop/src/GlobalStyles/GlobalStyles.d.ts b/packages/mui-styled-engine-noop/src/GlobalStyles/GlobalStyles.d.ts
new file mode 100644
index 00000000000000..0d6af5c9d1d5f6
--- /dev/null
+++ b/packages/mui-styled-engine-noop/src/GlobalStyles/GlobalStyles.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Interpolation } from '@emotion/react';
+
+export interface GlobalStylesProps<Theme = {}> {
+  defaultTheme?: object | undefined;
+  styles: Interpolation<Theme>;
+}
+
+export default function GlobalStyles<Theme = {}>(
+  props: GlobalStylesProps<Theme>,
+): React.JSX.Element;
diff --git a/packages/mui-styled-engine-noop/src/GlobalStyles/GlobalStyles.js b/packages/mui-styled-engine-noop/src/GlobalStyles/GlobalStyles.js
new file mode 100644
index 00000000000000..2df92571bb9331
--- /dev/null
+++ b/packages/mui-styled-engine-noop/src/GlobalStyles/GlobalStyles.js
@@ -0,0 +1,5 @@
+'use client';
+
+export default function GlobalStyles() {
+  return null;
+}
diff --git a/packages/mui-styled-engine-noop/src/GlobalStyles/index.d.ts b/packages/mui-styled-engine-noop/src/GlobalStyles/index.d.ts
new file mode 100644
index 00000000000000..a815f5c4a572b2
--- /dev/null
+++ b/packages/mui-styled-engine-noop/src/GlobalStyles/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './GlobalStyles';
+export * from './GlobalStyles';
diff --git a/packages/mui-styled-engine-noop/src/GlobalStyles/index.js b/packages/mui-styled-engine-noop/src/GlobalStyles/index.js
new file mode 100644
index 00000000000000..48e20189092434
--- /dev/null
+++ b/packages/mui-styled-engine-noop/src/GlobalStyles/index.js
@@ -0,0 +1 @@
+export { default } from './GlobalStyles';
diff --git a/packages/mui-styled-engine-noop/src/StyledEngineProvider/StyledEngineProvider.d.ts b/packages/mui-styled-engine-noop/src/StyledEngineProvider/StyledEngineProvider.d.ts
new file mode 100644
index 00000000000000..f62068b3bc0ab7
--- /dev/null
+++ b/packages/mui-styled-engine-noop/src/StyledEngineProvider/StyledEngineProvider.d.ts
@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface StyledEngineProviderProps {
+  children?: React.ReactNode;
+  injectFirst?: boolean | undefined;
+}
+
+export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;
diff --git a/packages/mui-styled-engine-noop/src/StyledEngineProvider/StyledEngineProvider.js b/packages/mui-styled-engine-noop/src/StyledEngineProvider/StyledEngineProvider.js
new file mode 100644
index 00000000000000..c4f5375f7760da
--- /dev/null
+++ b/packages/mui-styled-engine-noop/src/StyledEngineProvider/StyledEngineProvider.js
@@ -0,0 +1,6 @@
+'use client';
+
+export default function StyledEngineProvider(props) {
+  const { children } = props;
+  return children;
+}
diff --git a/packages/mui-styled-engine-noop/src/StyledEngineProvider/index.d.ts b/packages/mui-styled-engine-noop/src/StyledEngineProvider/index.d.ts
new file mode 100644
index 00000000000000..7fdd272b28e6ca
--- /dev/null
+++ b/packages/mui-styled-engine-noop/src/StyledEngineProvider/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './StyledEngineProvider';
+export * from './StyledEngineProvider';
diff --git a/packages/mui-styled-engine-noop/src/StyledEngineProvider/index.js b/packages/mui-styled-engine-noop/src/StyledEngineProvider/index.js
new file mode 100644
index 00000000000000..30cd6986a545fa
--- /dev/null
+++ b/packages/mui-styled-engine-noop/src/StyledEngineProvider/index.js
@@ -0,0 +1 @@
+export { default } from './StyledEngineProvider';
diff --git a/packages/mui-styled-engine-noop/src/index.d.ts b/packages/mui-styled-engine-noop/src/index.d.ts
new file mode 100644
index 00000000000000..bf231894c8437c
--- /dev/null
+++ b/packages/mui-styled-engine-noop/src/index.d.ts
@@ -0,0 +1,54 @@
+export { default as StyledEngineProvider } from './StyledEngineProvider';
+
+export { default as GlobalStyles } from './GlobalStyles';
+export * from './GlobalStyles';
+
+export declare const ThemeContext: React.Context<null>;
+export function keyframes(arg: any): string;
+export function css(arg: any): string;
+
+/**
+ * For internal usage in `@mui/system` package
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_mutateStyles(
+  tag: React.ElementType,
+  processor: (styles: any) => any,
+): void;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles(styles: any): object;
+
+export interface SerializedStyles {
+  name: string;
+  styles: string;
+  map?: string | undefined;
+  next?: SerializedStyles | undefined;
+}
+
+export type Keyframes = {
+  name: string;
+  styles: string;
+  anim: number;
+  toString: () => string;
+} & string;
+
+export function shouldForwardProp(propName: PropertyKey): boolean;
+
+/** Same as StyledOptions but shouldForwardProp must be a type guard */
+export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
+  label?: string | undefined;
+  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
+  target?: string | undefined;
+}
+
+export interface CSSObject {}
+
+export type Interpolation = any;
+
+export interface CreateMUIStyled<A, B, C> {
+  <ComponentType, ForwardedProps>(
+    component: ComponentType,
+    options: object,
+  ): React.ComponentType<ForwardedProps & A & B & C>;
+}
diff --git a/packages/mui-styled-engine-noop/src/index.js b/packages/mui-styled-engine-noop/src/index.js
new file mode 100644
index 00000000000000..13a2f556d6540e
--- /dev/null
+++ b/packages/mui-styled-engine-noop/src/index.js
@@ -0,0 +1,62 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+const defaultShouldForwardProp = (prop) =>
+  prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+
+export default function styled(Tag, options) {
+  const { shouldForwardProp } = options || {};
+  const finalShouldForwardProp = shouldForwardProp || defaultShouldForwardProp;
+
+  let warnedAboutSx = false;
+
+  const Component = React.forwardRef(function StyledComponent(props, ref) {
+    if (process.env.NODE_ENV !== 'production' && !warnedAboutSx && props.sx !== undefined) {
+      warnedAboutSx = true;
+      const componentName =
+        typeof Tag === 'string' ? `<${Tag}>` : Tag.displayName || Tag.name || 'a component';
+      console.error(
+        `MUI: The \`sx\` prop was used on ${componentName} but \`@mui/styled-engine-noop\` is active. ` +
+          'The `sx` prop will be ignored. Use Tailwind CSS classes via the `className` prop for styling instead.',
+      );
+    }
+
+    const { as: asProp, ...restProps } = props;
+    const FinalTag = asProp || Tag;
+
+    const forwardedProps = Object.fromEntries(
+      Object.entries(restProps).filter(([prop]) => finalShouldForwardProp(prop)),
+    );
+
+    return <FinalTag {...forwardedProps} ref={ref} />;
+  });
+
+  Component.propTypes = {
+    as: PropTypes.elementType,
+    sx: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.object]),
+  };
+
+  return () => Component;
+}
+
+export function keyframes() {
+  return 'animation-name';
+}
+
+export function css() {
+  return '';
+}
+
+export const ThemeContext = React.createContext(null);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_mutateStyles(_tag, _processor) {}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles(_styles) {
+  return '';
+}
+
+export { default as StyledEngineProvider } from './StyledEngineProvider';
+export { default as GlobalStyles } from './GlobalStyles';
diff --git a/packages/mui-styled-engine-noop/tsconfig.json b/packages/mui-styled-engine-noop/tsconfig.json
new file mode 100644
index 00000000000000..52d43eaaa9b975
--- /dev/null
+++ b/packages/mui-styled-engine-noop/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"]
+}
diff --git a/packages/mui-system/src/ThemeProvider/useLayerOrder.test.tsx b/packages/mui-system/src/ThemeProvider/useLayerOrder.test.tsx
index 96cfa96390f4c9..091a521945e294 100644
--- a/packages/mui-system/src/ThemeProvider/useLayerOrder.test.tsx
+++ b/packages/mui-system/src/ThemeProvider/useLayerOrder.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { ThemeContext } from '@mui/styled-engine';
+import { ThemeProvider } from '@mui/private-theming';
 import { createRenderer } from '@mui/internal-test-utils';
 import useLayerOrder from './useLayerOrder';
 
@@ -48,9 +48,9 @@ describe('useLayerOrder', () => {
 
   it('do nothing if upperTheme exists to avoid duplicate elements', () => {
     render(
-      <ThemeContext.Provider value={{ modularCssLayers: true }}>
+      <ThemeProvider theme={{ modularCssLayers: true }}>
         <TestComponent theme={{}} />
-      </ThemeContext.Provider>,
+      </ThemeProvider>,
     );
     expect(document.head.firstChild?.nodeName).not.to.equal('STYLE');
   });
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
index 680a74a4556675..53ea7c168c7405 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
@@ -155,6 +155,15 @@ export default function createCssVarsProvider<
      * variants from those tokens.
      */
     resolveTheme?: ((theme: any) => any) | undefined; // the type is any because it depends on the design system.
+    /**
+     * A React component that injects the CSS variables `<style>` tag.
+     * When provided, replaces the default `GlobalStyles`-based injection.
+     * Must accept `{ theme: { generateStyleSheets: () => Array<Record<string, any>> }, nonce?: string }`.
+     */
+    CssVarsInjector?:
+      | React.ComponentType<{ theme: any; nonce?: string | undefined }>
+      | null
+      | undefined;
   },
 ): CreateCssVarsProviderResult<ColorScheme, Identifier>;
 
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 0ac8b48bb49e93..2290e09f9a4cf2 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ThemeProvider from '../ThemeProvider';
@@ -29,6 +28,7 @@ export default function createCssVarsProvider(options) {
     disableTransitionOnChange: designSystemTransitionOnChange = false,
     defaultColorScheme,
     resolveTheme,
+    CssVarsInjector = null,
   } = options;
 
   const defaultContext = {
@@ -315,8 +315,8 @@ export default function createCssVarsProvider(options) {
         <ThemeProvider themeId={scopedTheme ? themeId : undefined} theme={memoTheme}>
           {children}
         </ThemeProvider>
-        {shouldGenerateStyleSheet && (
-          <GlobalStyles styles={memoTheme.generateStyleSheets?.() || []} />
+        {shouldGenerateStyleSheet && CssVarsInjector && (
+          <CssVarsInjector theme={memoTheme} documentNode={documentNode} />
         )}
       </React.Fragment>
     );
diff --git a/packages/mui-system/src/cssVars/cssVarsParser.ts b/packages/mui-system/src/cssVars/cssVarsParser.ts
index c1876b18f1abc1..2f8ef8655fa092 100644
--- a/packages/mui-system/src/cssVars/cssVarsParser.ts
+++ b/packages/mui-system/src/cssVars/cssVarsParser.ts
@@ -87,6 +87,10 @@ const getCssValue = (keys: string[], value: string | number) => {
       // CSS property that are unitless
       return value;
     }
+    if (keys[0] === 'transitions' && keys[1] === 'duration') {
+      // transition duration is in ms, unit is required
+      return `${value}ms`;
+    }
     const lastKey = keys[keys.length - 1];
     if (lastKey.toLowerCase().includes('opacity')) {
       // opacity values are unitless
diff --git a/packages/mui-system/src/cssVars/index.ts b/packages/mui-system/src/cssVars/index.ts
index 63df8b222a9817..76ddbdcc59ab08 100644
--- a/packages/mui-system/src/cssVars/index.ts
+++ b/packages/mui-system/src/cssVars/index.ts
@@ -11,3 +11,4 @@ export type { ExtractTypographyTokens } from './prepareTypographyVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';
 export { createGetColorSchemeSelector } from './getColorSchemeSelector';
 export type { StorageManager } from './localStorageManager';
+export { default as styleSheetsToString } from './styleSheetsToString';
diff --git a/packages/mui-system/src/cssVars/styleSheetsToString.test.ts b/packages/mui-system/src/cssVars/styleSheetsToString.test.ts
new file mode 100644
index 00000000000000..c9149f3496b6bf
--- /dev/null
+++ b/packages/mui-system/src/cssVars/styleSheetsToString.test.ts
@@ -0,0 +1,126 @@
+import { expect } from 'chai';
+import styleSheetsToString from './styleSheetsToString';
+
+describe('styleSheetsToString', () => {
+  it('returns an empty string for an empty array', () => {
+    expect(styleSheetsToString([])).to.equal('');
+  });
+
+  it('returns an empty string when all sheets are empty objects', () => {
+    expect(styleSheetsToString([{}, {}])).to.equal('');
+  });
+
+  it('skips a selector block whose vars object is empty', () => {
+    const sheets = [{ ':root': {} }];
+    expect(styleSheetsToString(sheets)).to.equal('');
+  });
+
+  it('serializes a single flat selector block', () => {
+    const sheets = [{ ':root': { '--mui-spacing': '8px', '--mui-zIndex-modal': '1300' } }];
+    expect(styleSheetsToString(sheets)).to.equal(
+      ':root {\n  --mui-spacing: 8px;\n  --mui-zIndex-modal: 1300;\n}\n',
+    );
+  });
+
+  it('serializes multiple separate sheets with the same selector without merging them', () => {
+    // Sheet 0: spacing vars on :root
+    // Sheet 1: palette vars also on :root (media mode, light default)
+    // These must NOT be merged — order must be preserved.
+    const sheets = [
+      { ':root': { '--mui-spacing': '8px' } },
+      { ':root': { '--mui-palette-primary-main': '#1976d2', 'color-scheme': 'light' } },
+    ];
+    const result = styleSheetsToString(sheets);
+    expect(result).to.equal(
+      ':root {\n  --mui-spacing: 8px;\n}\n' +
+        ':root {\n  --mui-palette-primary-main: #1976d2;\n  color-scheme: light;\n}\n',
+    );
+  });
+
+  it('serializes a two-key sheet (dark split block — data-* mode)', () => {
+    // When colorSchemeSelector is 'data-mui-color-scheme' and dark is non-default,
+    // generateStyleSheets emits one object with two keys for the dark scheme.
+    const sheets = [
+      {
+        '[data-mui-color-scheme="dark"]': {
+          '--mui-overlays-0': 'rgba(255,255,255,0.05)',
+        },
+        ':root, [data-mui-color-scheme="dark"]': {
+          '--mui-palette-primary-main': '#90caf9',
+          'color-scheme': 'dark',
+        },
+      },
+    ];
+    const result = styleSheetsToString(sheets);
+    expect(result).to.equal(
+      '[data-mui-color-scheme="dark"] {\n  --mui-overlays-0: rgba(255,255,255,0.05);\n}\n' +
+        ':root, [data-mui-color-scheme="dark"] {\n  --mui-palette-primary-main: #90caf9;\n  color-scheme: dark;\n}\n',
+    );
+  });
+
+  it('serializes a @media block (media mode)', () => {
+    const sheets = [
+      {
+        '@media (prefers-color-scheme: dark)': {
+          ':root': { '--mui-palette-primary-main': '#90caf9', 'color-scheme': 'dark' },
+        },
+      },
+    ];
+    const result = styleSheetsToString(sheets);
+    expect(result).to.equal(
+      '@media (prefers-color-scheme: dark) {\n' +
+        '  :root {\n' +
+        '    --mui-palette-primary-main: #90caf9;\n' +
+        '    color-scheme: dark;\n' +
+        '  }\n' +
+        '}\n',
+    );
+  });
+
+  it('serializes a sheet with both a flat :root key and a @media key (dark-default media mode)', () => {
+    // When colorSchemeSelector='media' and defaultColorScheme='dark', Sheet 1 has
+    // both ':root' (dark palette) and '@media (prefers-color-scheme: dark)' (excluded vars)
+    // in the same sheet object.
+    const sheets = [
+      {
+        ':root': { '--mui-palette-primary-main': '#90caf9', 'color-scheme': 'dark' },
+        '@media (prefers-color-scheme: dark)': {
+          ':root': { '--mui-overlays-0': 'rgba(255,255,255,0.05)' },
+        },
+      },
+    ];
+    const result = styleSheetsToString(sheets);
+    expect(result).to.equal(
+      ':root {\n  --mui-palette-primary-main: #90caf9;\n  color-scheme: dark;\n}\n' +
+        '@media (prefers-color-scheme: dark) {\n' +
+        '  :root {\n' +
+        '    --mui-overlays-0: rgba(255,255,255,0.05);\n' +
+        '  }\n' +
+        '}\n',
+    );
+  });
+
+  it('serializes class-based selectors', () => {
+    const sheets = [
+      { ':root, .light': { '--mui-palette-primary-main': '#1976d2' } },
+      { '.dark': { '--mui-palette-primary-main': '#90caf9' } },
+    ];
+    const result = styleSheetsToString(sheets);
+    expect(result).to.equal(
+      ':root, .light {\n  --mui-palette-primary-main: #1976d2;\n}\n' +
+        '.dark {\n  --mui-palette-primary-main: #90caf9;\n}\n',
+    );
+  });
+
+  it('serializes a custom rootSelector (:host)', () => {
+    const sheets = [
+      { ':host': { '--mui-spacing': '8px' } },
+      { ':host, .light': { '--mui-palette-primary-main': '#1976d2' } },
+    ];
+    const result = styleSheetsToString(sheets);
+    expect(result).to.equal(
+      ':host {\n  --mui-spacing: 8px;\n}\n' +
+        ':host, .light {\n  --mui-palette-primary-main: #1976d2;\n}\n',
+    );
+  });
+});
diff --git a/packages/mui-system/src/cssVars/styleSheetsToString.ts b/packages/mui-system/src/cssVars/styleSheetsToString.ts
new file mode 100644
index 00000000000000..f484d2e28cd991
--- /dev/null
+++ b/packages/mui-system/src/cssVars/styleSheetsToString.ts
@@ -0,0 +1,65 @@
+/**
+ * Convert an array of style sheets to a CSS string.
+ *
+ * The input is the output of `theme.generateStyleSheets()` — an array of objects.
+ * Each object maps a top-level key to either:
+ *
+ *   1. A flat var map `{ cssVarName: value }` — for plain selectors (`:root`,
+ *      `[data-mui-color-scheme="dark"]`, `.dark`, etc.)
+ *
+ *   2. A nested selector map `{ innerSelector: { cssVarName: value } }` — for
+ *      `@media (prefers-color-scheme: ...)` blocks emitted when `colorSchemeSelector`
+ *      is `'media'`.
+ *
+ * Multiple entries with the same selector are preserved in order and must NOT
+ * be merged (e.g. two `:root` blocks for base vars and contrast vars).
+ *
+ * @param sheets The style sheets to convert.
+ * @returns A CSS string.
+ */
+/**
+ * Convert a camelCase JS property name to a hyphenated CSS property name.
+ * CSS custom properties (`--*`) are returned unchanged.
+ *
+ * e.g. `colorScheme` → `color-scheme`, `--mui-palette-primary-main` → `--mui-palette-primary-main`
+ */
+function toCssProp(prop: string): string {
+  if (prop.startsWith('--')) {
+    return prop;
+  }
+  return prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+
+function styleSheetsToString(sheets: Array<Record<string, any>>): string {
+  let css = '';
+  for (const sheet of sheets) {
+    for (const [selector, vars] of Object.entries(sheet)) {
+      if (selector.startsWith('@')) {
+        // @media wrapper: { '@media (...)': { ':root': { prop: value } } }
+        let inner = '';
+        for (const [innerSelector, innerVars] of Object.entries(vars as Record<string, any>)) {
+          const body = Object.entries(innerVars as Record<string, string | number>)
+            .map(([prop, value]) => `    ${toCssProp(prop)}: ${value};`)
+            .join('\n');
+          if (body) {
+            inner += `  ${innerSelector} {\n${body}\n  }\n`;
+          }
+        }
+        if (inner) {
+          css += `${selector} {\n${inner}}\n`;
+        }
+      } else {
+        // Flat selector: { 'selector': { prop: value } }
+        const body = Object.entries(vars as Record<string, string | number>)
+          .map(([prop, value]) => `  ${toCssProp(prop)}: ${value};`)
+          .join('\n');
+        if (body) {
+          css += `${selector} {\n${body}\n}\n`;
+        }
+      }
+    }
+  }
+  return css;
+}
+
+export default styleSheetsToString;
diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts
index a4de854333999a..f890fe14934a22 100644
--- a/packages/mui-system/src/index.d.ts
+++ b/packages/mui-system/src/index.d.ts
@@ -138,3 +138,5 @@ export { default as Stack } from './Stack';
 export * from './Stack';
 
 export * from './version';
+
+export { default as styleSheetsToString } from './cssVars/styleSheetsToString';
diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js
index 5d9c9d81ae5ee4..1f22395c55d597 100644
--- a/packages/mui-system/src/index.js
+++ b/packages/mui-system/src/index.js
@@ -80,3 +80,5 @@ export * from './Grid';
 
 export { default as Stack } from './Stack/Stack';
 export * from './Stack';
+
+export { default as styleSheetsToString } from './cssVars/styleSheetsToString';
diff --git a/packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.js b/packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.js
index 172955fe7a2bfb..6de2c136632847 100644
--- a/packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.js
+++ b/packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.js
@@ -1,14 +1,22 @@
 'use client';
-import * as React from 'react';
-import { ThemeContext } from '@mui/styled-engine';
+import { useTheme as usePrivateTheme } from '@mui/private-theming';
 
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
 
 function useTheme(defaultTheme = null) {
-  const contextTheme = React.useContext(ThemeContext);
-  return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
+  // Read from the `@mui/private-theming` context. Both `SystemThemeProvider`
+  // (Emotion path) and the lightweight `CssThemeProvider` (CSS-only path)
+  // write to this context, so a single read covers every supported setup.
+  //
+  // Importing `ThemeContext` from `@mui/styled-engine` here used to force
+  // Emotion into the bundle of every component that called `useTheme()`
+  // (i.e. every MUI component). Reading only from private-theming lets the
+  // tree-shaker drop Emotion when an app uses `CssThemeProvider` without
+  // `styled()` or `sx`.
+  const theme = usePrivateTheme();
+  return !theme || isObjectEmpty(theme) ? defaultTheme : theme;
 }
 
 export default useTheme;
diff --git a/packages/mui-tailwind/package.json b/packages/mui-tailwind/package.json
new file mode 100644
index 00000000000000..e2ae11c8b73a09
--- /dev/null
+++ b/packages/mui-tailwind/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@mui/tailwind",
+  "version": "10.0.0-alpha.0",
+  "author": "MUI Team",
+  "description": "Tailwind CSS preset and plugin for Material UI.",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "mui",
+    "tailwind",
+    "tailwindcss",
+    "preset",
+    "plugin"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mui/material-ui.git",
+    "directory": "packages/mui-tailwind"
+  },
+  "bugs": {
+    "url": "https://github.com/mui/material-ui/issues"
+  },
+  "homepage": "https://mui.com/",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "directory": "build"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": "./src/preset.js",
+    "./preset": "./src/preset.js",
+    "./plugin": "./src/plugin.js",
+    "./v4.css": "./src/v4.css"
+  }
+}
diff --git a/packages/mui-tailwind/src/plugin.js b/packages/mui-tailwind/src/plugin.js
new file mode 100644
index 00000000000000..f9aeced68a5f9d
--- /dev/null
+++ b/packages/mui-tailwind/src/plugin.js
@@ -0,0 +1,34 @@
+const plugin = require('tailwindcss/plugin');
+
+/**
+ * MUI state classes that components apply to themselves.
+ * Maps the variant name to the Mui- class that triggers it.
+ */
+const MUI_STATES = {
+  active: 'Mui-active',
+  checked: 'Mui-checked',
+  completed: 'Mui-completed',
+  disabled: 'Mui-disabled',
+  error: 'Mui-error',
+  expanded: 'Mui-expanded',
+  focused: 'Mui-focused',
+  'focus-visible': 'Mui-focusVisible',
+  readonly: 'Mui-readOnly',
+  required: 'Mui-required',
+  selected: 'Mui-selected',
+};
+
+/**
+ * Tailwind plugin that adds `mui-{state}:` and `mui-not-{state}:` variants
+ * for every MUI component state class.
+ *
+ * Usage (Tailwind v3 or v4 via `@plugin`):
+ *   <Slider className="mui-disabled:opacity-50 mui-error:text-error" />
+ *   <MenuItem className="mui-selected:bg-primary/10 mui-focused:bg-primary/5" />
+ */
+module.exports = plugin(({ addVariant }) => {
+  Object.entries(MUI_STATES).forEach(([variant, muiClass]) => {
+    addVariant(`mui-${variant}`, `&.${muiClass}`);
+    addVariant(`mui-not-${variant}`, `&:not(.${muiClass})`);
+  });
+});
diff --git a/packages/mui-tailwind/src/preset.js b/packages/mui-tailwind/src/preset.js
new file mode 100644
index 00000000000000..20bdb024e5685c
--- /dev/null
+++ b/packages/mui-tailwind/src/preset.js
@@ -0,0 +1,136 @@
+const muiPlugin = require('./plugin');
+
+/**
+ * Helper: builds a palette color group that supports Tailwind's opacity modifiers
+ * (e.g. `bg-primary/50`) using MUI's pre-computed channel variables.
+ *
+ * MUI exposes `--mui-palette-{color}-mainChannel` as space-separated R G B so
+ * Tailwind can compose `rgb(R G B / <alpha-value>)` at the utility level.
+ */
+function paletteColor(name) {
+  const v = (suffix) => `--mui-palette-${name}-${suffix}`;
+  return {
+    DEFAULT: `rgb(var(${v('mainChannel')}) / <alpha-value>)`,
+    light: `rgb(var(${v('lightChannel')}) / <alpha-value>)`,
+    dark: `rgb(var(${v('darkChannel')}) / <alpha-value>)`,
+    contrast: `var(${v('contrastText')})`,
+  };
+}
+
+/**
+ * Tailwind v3 preset for Material UI.
+ *
+ * Usage in `tailwind.config.js`:
+ *   module.exports = { presets: [require('@mui/tailwind')] };
+ *
+ * What you get:
+ * - MUI palette colors as Tailwind colors (with opacity modifier support)
+ * - MUI breakpoints aligned to `sm/md/lg/xl`
+ * - MUI elevation shadows (`shadow-1` … `shadow-24`)
+ * - MUI border-radius token (`rounded-mui`)
+ * - MUI z-index scale
+ * - `mui-{state}:` and `mui-not-{state}:` variants
+ */
+module.exports = {
+  darkMode: ['class', '[data-mui-color-scheme="dark"]'],
+
+  theme: {
+    // Override Tailwind's default screens to match MUI breakpoints.
+    // `xs` is intentionally omitted — it maps to 0px (the default / no breakpoint).
+    screens: {
+      sm: '600px',
+      md: '900px',
+      lg: '1200px',
+      xl: '1536px',
+      '2xl': '1920px',
+    },
+
+    extend: {
+      colors: {
+        // Semantic palette — opacity modifiers supported via channel vars
+        primary: paletteColor('primary'),
+        secondary: paletteColor('secondary'),
+        error: paletteColor('error'),
+        warning: paletteColor('warning'),
+        info: paletteColor('info'),
+        success: paletteColor('success'),
+
+        // Text colors
+        // MUI text colors are pre-mixed rgba values; use var() directly.
+        // Opacity modifiers are not supported for these.
+        text: {
+          primary: 'var(--mui-palette-text-primary)',
+          secondary: 'var(--mui-palette-text-secondary)',
+          disabled: 'var(--mui-palette-text-disabled)',
+          icon: 'var(--mui-palette-text-icon)',
+        },
+
+        // Surface / background colors
+        background: {
+          default: 'var(--mui-palette-background-default)',
+          paper: 'var(--mui-palette-background-paper)',
+        },
+
+        // Divider
+        divider: 'var(--mui-palette-divider)',
+
+        // Action state colors
+        action: {
+          active: 'var(--mui-palette-action-active)',
+          hover: 'var(--mui-palette-action-hover)',
+          selected: 'var(--mui-palette-action-selected)',
+          disabled: 'var(--mui-palette-action-disabled)',
+          'disabled-bg': 'var(--mui-palette-action-disabledBackground)',
+          focus: 'var(--mui-palette-action-focus)',
+        },
+
+        // Material grey scale — used for neutral surfaces and borders
+        grey: {
+          50: 'var(--mui-palette-grey-50)',
+          100: 'var(--mui-palette-grey-100)',
+          200: 'var(--mui-palette-grey-200)',
+          300: 'var(--mui-palette-grey-300)',
+          400: 'var(--mui-palette-grey-400)',
+          500: 'var(--mui-palette-grey-500)',
+          600: 'var(--mui-palette-grey-600)',
+          700: 'var(--mui-palette-grey-700)',
+          800: 'var(--mui-palette-grey-800)',
+          900: 'var(--mui-palette-grey-900)',
+          A100: 'var(--mui-palette-grey-A100)',
+          A200: 'var(--mui-palette-grey-A200)',
+          A400: 'var(--mui-palette-grey-A400)',
+          A700: 'var(--mui-palette-grey-A700)',
+        },
+      },
+
+      // MUI elevation shadows (0–24 matching Material Design levels)
+      boxShadow: Object.fromEntries(
+        Array.from({ length: 25 }, (_, i) => [i, `var(--mui-shadows-${i})`]),
+      ),
+
+      // MUI shape token
+      borderRadius: {
+        mui: 'calc(var(--mui-shape-borderRadius) * 1px)',
+      },
+
+      // MUI z-index scale
+      zIndex: {
+        mobileStepper: '1000',
+        fab: '1050',
+        'speed-dial': '1050',
+        'app-bar': '1100',
+        drawer: '1200',
+        modal: '1300',
+        snackbar: '1400',
+        tooltip: '1500',
+      },
+
+      // MUI font family
+      fontFamily: {
+        mui: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
+      },
+    },
+  },
+
+  plugins: [muiPlugin],
+};
diff --git a/packages/mui-tailwind/src/v4.css b/packages/mui-tailwind/src/v4.css
new file mode 100644
index 00000000000000..5c24f13edb7555
--- /dev/null
+++ b/packages/mui-tailwind/src/v4.css
@@ -0,0 +1,232 @@
+/**
+ * @mui/tailwind — Tailwind CSS v4 integration for Material UI
+ *
+ * Usage in your global CSS file:
+ *
+ *   @layer theme, base, mui.default, components, utilities;
+ *   @import "tailwindcss";
+ *   @import "@mui/tailwind/v4.css";
+ *
+ * What you get:
+ * - MUI palette colors as Tailwind color utilities (`text-primary`, `bg-error/50`, …)
+ * - MUI typography tokens as font utilities (`font-h1`, `font-body2`, …)
+ * - MUI breakpoints aligned to Tailwind (`sm=600px`, `md=900px`, `lg=1200px`, `xl=1536px`)
+ * - MUI elevation shadows (`shadow-1` … `shadow-24`)
+ * - MUI border-radius token (`rounded-mui`)
+ * - MUI z-index scale (`z-drawer`, `z-modal`, …)
+ * - `mui-{state}:` and `mui-not-{state}:` variants for MUI component states
+ */
+
+/* ─── Breakpoints ────────────────────────────────────────────────────────────
+   Override Tailwind defaults so `sm:`, `md:`, `lg:`, `xl:` map to MUI's values.
+   `xs` is not defined — it maps to 0px, i.e., the default (no breakpoint).
+ ─────────────────────────────────────────────────────────────────────────── */
+@theme {
+  --breakpoint-sm: 37.5rem; /* 600px */
+  --breakpoint-md: 56.25rem; /* 900px */
+  --breakpoint-lg: 75rem; /* 1200px */
+  --breakpoint-xl: 96rem; /* 1536px */
+  --breakpoint-2xl: 120rem; /* 1920px */
+}
+
+/* ─── Design tokens ──────────────────────────────────────────────────────────
+   `@theme inline` means Tailwind references these variables at the point of
+   use instead of inlining the values, so the tokens respond to MUI's runtime
+   theme (dark mode, custom palette) automatically.
+ ─────────────────────────────────────────────────────────────────────────── */
+@theme inline {
+  /* Semantic palette -------------------------------------------------------- */
+  --color-primary: var(--mui-palette-primary-main);
+  --color-primary-light: var(--mui-palette-primary-light);
+  --color-primary-dark: var(--mui-palette-primary-dark);
+  --color-primary-contrast: var(--mui-palette-primary-contrastText);
+
+  --color-secondary: var(--mui-palette-secondary-main);
+  --color-secondary-light: var(--mui-palette-secondary-light);
+  --color-secondary-dark: var(--mui-palette-secondary-dark);
+  --color-secondary-contrast: var(--mui-palette-secondary-contrastText);
+
+  --color-error: var(--mui-palette-error-main);
+  --color-error-light: var(--mui-palette-error-light);
+  --color-error-dark: var(--mui-palette-error-dark);
+  --color-error-contrast: var(--mui-palette-error-contrastText);
+
+  --color-warning: var(--mui-palette-warning-main);
+  --color-warning-light: var(--mui-palette-warning-light);
+  --color-warning-dark: var(--mui-palette-warning-dark);
+  --color-warning-contrast: var(--mui-palette-warning-contrastText);
+
+  --color-info: var(--mui-palette-info-main);
+  --color-info-light: var(--mui-palette-info-light);
+  --color-info-dark: var(--mui-palette-info-dark);
+  --color-info-contrast: var(--mui-palette-info-contrastText);
+
+  --color-success: var(--mui-palette-success-main);
+  --color-success-light: var(--mui-palette-success-light);
+  --color-success-dark: var(--mui-palette-success-dark);
+  --color-success-contrast: var(--mui-palette-success-contrastText);
+
+  /* Text -------------------------------------------------------------------- */
+  --color-text-primary: var(--mui-palette-text-primary);
+  --color-text-secondary: var(--mui-palette-text-secondary);
+  --color-text-disabled: var(--mui-palette-text-disabled);
+  --color-text-icon: var(--mui-palette-text-icon);
+
+  /* Surfaces ---------------------------------------------------------------- */
+  --color-background-default: var(--mui-palette-background-default);
+  --color-background-paper: var(--mui-palette-background-paper);
+  --color-divider: var(--mui-palette-divider);
+
+  /* Action states ----------------------------------------------------------- */
+  --color-action-active: var(--mui-palette-action-active);
+  --color-action-hover: var(--mui-palette-action-hover);
+  --color-action-selected: var(--mui-palette-action-selected);
+  --color-action-disabled: var(--mui-palette-action-disabled);
+  --color-action-disabled-bg: var(--mui-palette-action-disabledBackground);
+  --color-action-focus: var(--mui-palette-action-focus);
+
+  /* Grey scale -------------------------------------------------------------- */
+  --color-grey-50: var(--mui-palette-grey-50);
+  --color-grey-100: var(--mui-palette-grey-100);
+  --color-grey-200: var(--mui-palette-grey-200);
+  --color-grey-300: var(--mui-palette-grey-300);
+  --color-grey-400: var(--mui-palette-grey-400);
+  --color-grey-500: var(--mui-palette-grey-500);
+  --color-grey-600: var(--mui-palette-grey-600);
+  --color-grey-700: var(--mui-palette-grey-700);
+  --color-grey-800: var(--mui-palette-grey-800);
+  --color-grey-900: var(--mui-palette-grey-900);
+  --color-grey-A100: var(--mui-palette-grey-A100);
+  --color-grey-A200: var(--mui-palette-grey-A200);
+  --color-grey-A400: var(--mui-palette-grey-A400);
+  --color-grey-A700: var(--mui-palette-grey-A700);
+
+  /* Typography -------------------------------------------------------------- */
+  --font-h1: var(--mui-font-h1);
+  --font-h2: var(--mui-font-h2);
+  --font-h3: var(--mui-font-h3);
+  --font-h4: var(--mui-font-h4);
+  --font-h5: var(--mui-font-h5);
+  --font-h6: var(--mui-font-h6);
+  --font-subtitle1: var(--mui-font-subtitle1);
+  --font-subtitle2: var(--mui-font-subtitle2);
+  --font-body1: var(--mui-font-body1);
+  --font-body2: var(--mui-font-body2);
+  --font-button: var(--mui-font-button);
+  --font-caption: var(--mui-font-caption);
+  --font-overline: var(--mui-font-overline);
+
+  /* Letter spacing (typography-specific, not covered by Tailwind defaults) -- */
+  --tracking-h1: -0.01562em;
+  --tracking-h2: -0.00833em;
+  --tracking-h4: 0.00735em;
+  --tracking-h6: 0.0075em;
+  --tracking-subtitle1: 0.00938em;
+  --tracking-subtitle2: 0.00714em;
+  --tracking-body1: 0.00938em;
+  --tracking-body2: 0.01071em;
+  --tracking-button: 0.02857em;
+  --tracking-caption: 0.03333em;
+  --tracking-overline: 0.08333em;
+
+  /* Elevation shadows (0–24 Material Design levels) ------------------------- */
+  --shadow-0: var(--mui-shadows-0);
+  --shadow-1: var(--mui-shadows-1);
+  --shadow-2: var(--mui-shadows-2);
+  --shadow-3: var(--mui-shadows-3);
+  --shadow-4: var(--mui-shadows-4);
+  --shadow-5: var(--mui-shadows-5);
+  --shadow-6: var(--mui-shadows-6);
+  --shadow-7: var(--mui-shadows-7);
+  --shadow-8: var(--mui-shadows-8);
+  --shadow-9: var(--mui-shadows-9);
+  --shadow-10: var(--mui-shadows-10);
+  --shadow-11: var(--mui-shadows-11);
+  --shadow-12: var(--mui-shadows-12);
+  --shadow-13: var(--mui-shadows-13);
+  --shadow-14: var(--mui-shadows-14);
+  --shadow-15: var(--mui-shadows-15);
+  --shadow-16: var(--mui-shadows-16);
+  --shadow-17: var(--mui-shadows-17);
+  --shadow-18: var(--mui-shadows-18);
+  --shadow-19: var(--mui-shadows-19);
+  --shadow-20: var(--mui-shadows-20);
+  --shadow-21: var(--mui-shadows-21);
+  --shadow-22: var(--mui-shadows-22);
+  --shadow-23: var(--mui-shadows-23);
+  --shadow-24: var(--mui-shadows-24);
+
+  /* Shape ------------------------------------------------------------------- */
+  --radius-mui: calc(var(--mui-shape-borderRadius) * 1px);
+
+  /* Z-index scale ----------------------------------------------------------- */
+  --z-mobile-stepper: 1000;
+  --z-fab: 1050;
+  --z-speed-dial: 1050;
+  --z-app-bar: 1100;
+  --z-drawer: 1200;
+  --z-modal: 1300;
+  --z-snackbar: 1400;
+  --z-tooltip: 1500;
+
+  /* Opacity (action states) ------------------------------------------------- */
+  --opacity-hover: var(--mui-palette-action-hoverOpacity);
+  --opacity-selected: var(--mui-palette-action-selectedOpacity);
+  --opacity-disabled: var(--mui-palette-action-disabledOpacity);
+  --opacity-focus: var(--mui-palette-action-focusOpacity);
+  --opacity-activated: var(--mui-palette-action-activatedOpacity);
+}
+
+/* ─── Custom utilities ───────────────────────────────────────────────────────
+   These generate class names from the token namespaces above.
+   Example: `typography-h1`, `elevation-4`
+ ─────────────────────────────────────────────────────────────────────────── */
+@utility typography-* {
+  font: --value(--font-*);
+}
+
+@utility elevation-* {
+  box-shadow: --value(--shadow-*);
+}
+
+/* ─── State variants ─────────────────────────────────────────────────────────
+   `mui-{state}:` targets elements that have the corresponding Mui- class.
+   Use `mui-not-{state}:` to target elements that do NOT have that class.
+
+   Examples:
+     <Slider className="mui-disabled:opacity-50" />
+     <MenuItem className="mui-selected:bg-primary/10 mui-focused:bg-primary/5" />
+     <TextField slotProps={{ root: { className: 'mui-error:ring-2 mui-error:ring-error' } }} />
+ ─────────────────────────────────────────────────────────────────────────── */
+@custom-variant mui-active (&.Mui-active);
+@custom-variant mui-not-active (&:not(.Mui-active));
+
+@custom-variant mui-checked (&.Mui-checked);
+@custom-variant mui-not-checked (&:not(.Mui-checked));
+
+@custom-variant mui-completed (&.Mui-completed);
+@custom-variant mui-not-completed (&:not(.Mui-completed));
+
+@custom-variant mui-disabled (&.Mui-disabled);
+@custom-variant mui-not-disabled (&:not(.Mui-disabled));
+
+@custom-variant mui-error (&.Mui-error);
+@custom-variant mui-not-error (&:not(.Mui-error));
+
+@custom-variant mui-expanded (&.Mui-expanded);
+@custom-variant mui-not-expanded (&:not(.Mui-expanded));
+
+@custom-variant mui-focused (&.Mui-focused);
+@custom-variant mui-not-focused (&:not(.Mui-focused));
+
+@custom-variant mui-focus-visible (&.Mui-focusVisible);
+@custom-variant mui-not-focus-visible (&:not(.Mui-focusVisible));
+
+@custom-variant mui-readonly (&.Mui-readOnly);
+@custom-variant mui-not-readonly (&:not(.Mui-readOnly));
+
+@custom-variant mui-required (&.Mui-required);
+@custom-variant mui-not-required (&:not(.Mui-required));
+
+@custom-variant mui-selected (&.Mui-selected);
+@custom-variant mui-not-selected (&:not(.Mui-selected));
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c47f093ca5994..c281c4dac8f542 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,13 +54,13 @@ importers:
     dependencies:
       '@netlify/functions':
         specifier: ^5.2.0
-        version: 5.2.0
+        version: 5.2.1
       '@slack/bolt':
         specifier: ^4.7.2
         version: 4.7.2(@types/express@5.0.0)
       '@vitest/eslint-plugin':
         specifier: ^1.6.16
-        version: 1.6.16(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3)(vitest@4.0.13)
+        version: 1.6.17(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3)(vitest@4.0.13)
       babel-plugin-transform-import-meta:
         specifier: ^2.3.3
         version: 2.3.3(@babel/core@7.29.0)
@@ -88,10 +88,10 @@ importers:
         version: 2.0.8-canary.27(@babel/core@7.29.0)
       '@mui/internal-bundle-size-checker':
         specifier: 1.0.9-canary.78
-        version: 1.0.9-canary.78(@types/node@20.19.39)(esbuild@0.27.2)(jiti@2.6.1)(rolldown@1.0.0-rc.17)(rollup@4.46.2)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)
+        version: 1.0.9-canary.78(@types/node@20.19.39)(esbuild@0.27.2)(jiti@2.6.1)(rolldown@1.0.1)(rollup@4.46.2)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)
       '@mui/internal-code-infra':
-        specifier: 0.0.4-canary.45
-        version: 0.0.4-canary.45(@next/eslint-plugin-next@15.5.16)(@types/node@20.19.39)(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(jest-diff@30.2.0)(postcss@8.5.14)(prettier@3.8.3)(stylelint@17.11.0(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)
+        specifier: https://pkg.pr.new/mui/mui-public/@mui/internal-code-infra@56fef1c
+        version: https://pkg.pr.new/mui/mui-public/@mui/internal-code-infra@56fef1c(@next/eslint-plugin-next@15.5.16)(@types/node@20.19.39)(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(jest-diff@30.2.0)(postcss@8.5.14)(prettier@3.8.3)(stylelint@17.11.0(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:packages-internal/docs-utils/build
@@ -299,6 +299,9 @@ importers:
       '@mui/styled-engine':
         specifier: workspace:^
         version: link:../packages/mui-styled-engine/build
+      '@mui/styled-engine-noop':
+        specifier: workspace:^
+        version: link:../packages/mui-styled-engine-noop/build
       '@mui/styled-engine-sc':
         specifier: workspace:^
         version: link:../packages/mui-styled-engine-sc/build
@@ -308,6 +311,9 @@ importers:
       '@mui/system':
         specifier: workspace:^
         version: link:../packages/mui-system/build
+      '@mui/tailwind':
+        specifier: workspace:^
+        version: link:../packages/mui-tailwind/build
       '@mui/types':
         specifier: workspace:^
         version: link:../packages/mui-types/build
@@ -349,10 +355,10 @@ importers:
         version: 10.0.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@tailwindcss/postcss':
         specifier: ^4.2.4
-        version: 4.2.4
+        version: 4.3.0
       '@tanstack/react-query':
         specifier: ^5.100.9
-        version: 5.100.9(react@19.2.6)
+        version: 5.100.10(react@19.2.6)
       '@tanstack/react-virtual':
         specifier: ^3.13.24
         version: 3.13.24(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -421,7 +427,7 @@ importers:
         version: 1.5.0
       markdown-to-jsx:
         specifier: ^9.7.16
-        version: 9.7.16(react@19.2.6)
+        version: 9.8.0(react@19.2.6)
       material-ui-popup-state:
         specifier: ^5.3.7
         version: 5.3.7(@mui/material@packages+mui-material+build)(@types/react@19.2.14)(react@19.2.6)
@@ -484,7 +490,7 @@ importers:
         version: 4.4.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react-virtuoso:
         specifier: ^4.18.6
-        version: 4.18.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 4.18.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react-window:
         specifier: ^2.2.7
         version: 2.2.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -993,7 +999,7 @@ importers:
         version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6)
       '@mui/material':
         specifier: 9.0.0
-        version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@mui/material-pigment-css@9.0.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@5.9.3))(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@mui/material-pigment-css@9.0.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@6.0.3))(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: ^19.2.6
         version: 19.2.6
@@ -1248,7 +1254,7 @@ importers:
         version: link:../mui-system/build
       '@pigment-css/react':
         specifier: 0.0.30
-        version: 0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@5.9.3)
+        version: 0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@6.0.3)
     devDependencies:
       react:
         specifier: 19.2.6
@@ -1328,6 +1334,35 @@ importers:
         version: 19.2.6
     publishDirectory: build
 
+  packages/mui-styled-engine-noop:
+    dependencies:
+      '@babel/runtime':
+        specifier: ^7.29.2
+        version: 7.29.2
+      csstype:
+        specifier: ^3.2.3
+        version: 3.2.3
+      prop-types:
+        specifier: ^15.8.1
+        version: 15.8.1
+    devDependencies:
+      '@emotion/react':
+        specifier: 11.14.0
+        version: 11.14.0(@types/react@19.2.14)(react@19.2.4)
+      '@types/chai':
+        specifier: 5.2.3
+        version: 5.2.3
+      '@types/react':
+        specifier: 19.2.14
+        version: 19.2.14
+      chai:
+        specifier: 6.2.2
+        version: 6.2.2
+      react:
+        specifier: 19.2.4
+        version: 19.2.4
+    publishDirectory: build
+
   packages/mui-styled-engine-sc:
     dependencies:
       '@babel/runtime':
@@ -1457,6 +1492,13 @@ importers:
         version: 6.4.1(patch_hash=383c648dfdb5dfc82fbe414d54027d8c982a01c6320370f0ecfdb387e753c09f)(css-to-react-native@3.2.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
     publishDirectory: build
 
+  packages/mui-tailwind:
+    dependencies:
+      tailwindcss:
+        specifier: '>=3.0.0'
+        version: 4.2.4
+    publishDirectory: build
+
   packages/mui-types:
     dependencies:
       '@babel/runtime':
@@ -1646,8 +1688,88 @@ importers:
         specifier: 0.12.7
         version: 0.12.7
 
+  test/css-theme-provider-vite-sandbox:
+    dependencies:
+      '@mui/material':
+        specifier: workspace:*
+        version: link:../../packages/mui-material/build
+      '@mui/styled-engine-noop':
+        specifier: workspace:*
+        version: link:../../packages/mui-styled-engine-noop/build
+      '@mui/system':
+        specifier: workspace:*
+        version: link:../../packages/mui-system/build
+      '@mui/utils':
+        specifier: workspace:*
+        version: link:../../packages/mui-utils/build
+      react:
+        specifier: ^19.2.6
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.6
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@types/react':
+        specifier: ^19.0.0
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.0.0
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: ^5.1.1
+        version: 5.1.1(vite@7.3.1(@types/node@20.19.39)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@20.19.39)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)
+
   test/e2e: {}
 
+  test/emotion-vite-sandbox:
+    dependencies:
+      '@emotion/react':
+        specifier: ^11.14.0
+        version: 11.14.0(@types/react@19.2.14)(react@19.2.6)
+      '@emotion/styled':
+        specifier: ^11.14.0
+        version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6)
+      '@mui/material':
+        specifier: workspace:*
+        version: link:../../packages/mui-material/build
+      '@mui/styled-engine':
+        specifier: workspace:*
+        version: link:../../packages/mui-styled-engine/build
+      '@mui/system':
+        specifier: workspace:*
+        version: link:../../packages/mui-system/build
+      '@mui/utils':
+        specifier: workspace:*
+        version: link:../../packages/mui-utils/build
+      react:
+        specifier: ^19.2.6
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.6
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@types/react':
+        specifier: ^19.0.0
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.0.0
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: ^5.1.1
+        version: 5.1.1(vite@7.3.1(@types/node@20.19.39)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@20.19.39)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)
+
   test/moduleResolution:
     dependencies:
       '@mui/icons-material':
@@ -1657,6 +1779,43 @@ importers:
         specifier: workspace:^
         version: link:../../packages/mui-material/build
 
+  test/noop-vite-sandbox:
+    dependencies:
+      '@mui/material':
+        specifier: workspace:*
+        version: link:../../packages/mui-material/build
+      '@mui/styled-engine-noop':
+        specifier: workspace:*
+        version: link:../../packages/mui-styled-engine-noop/build
+      '@mui/system':
+        specifier: workspace:*
+        version: link:../../packages/mui-system/build
+      '@mui/utils':
+        specifier: workspace:*
+        version: link:../../packages/mui-utils/build
+      react:
+        specifier: ^19.2.6
+        version: 19.2.6
+      react-dom:
+        specifier: ^19.2.6
+        version: 19.2.6(react@19.2.6)
+    devDependencies:
+      '@types/react':
+        specifier: ^19.0.0
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.0.0
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: ^5.1.1
+        version: 5.1.1(vite@7.3.1(@types/node@20.19.39)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0))
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@20.19.39)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)
+
 packages:
 
   '@aashutoshrathi/word-wrap@1.2.6':
@@ -2463,8 +2622,8 @@ packages:
       '@csstools/css-parser-algorithms': ^3.0.5
       '@csstools/css-tokenizer': ^3.0.4
 
-  '@csstools/css-calc@3.2.0':
-    resolution: {integrity: sha512-bR9e6o2BDB12jzN/gIbjHa5wLJ4UjD1CB9pM7ehlc0ddk6EBz+yYS1EV2MF55/HUxrHcB/hehAyt5vhsA3hx7w==}
+  '@csstools/css-calc@3.2.1':
+    resolution: {integrity: sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       '@csstools/css-parser-algorithms': ^4.0.0
@@ -2489,8 +2648,8 @@ packages:
     peerDependencies:
       '@csstools/css-tokenizer': ^4.0.0
 
-  '@csstools/css-syntax-patches-for-csstree@1.1.3':
-    resolution: {integrity: sha512-SH60bMfrRCJF3morcdk57WklujF4Jr/EsQUzqkarfHXEFcAR1gg7fS/chAE922Sehgzc1/+Tz5H3Ypa1HiEKrg==}
+  '@csstools/css-syntax-patches-for-csstree@1.1.4':
+    resolution: {integrity: sha512-wgsqt92b7C7tQhIdPNxj0n9zuUbQlvAuI1exyzeNrOKOi62SD7ren8zqszmpVREjAOqg8cD2FqYhQfAuKjk4sw==}
     peerDependencies:
       css-tree: ^3.2.1
     peerDependenciesMeta:
@@ -3354,8 +3513,9 @@ packages:
   '@mui/core-downloads-tracker@9.0.0':
     resolution: {integrity: sha512-uwQNGkhv0lf7ufxw6QXev77BW6pWbW+7uxYjU5+rfp4lBkFtMEgJCsarTM3Tn+i0lGx6+Ol2u88JdGXr0GDskA==}
 
-  '@mui/internal-babel-plugin-display-name@1.0.4-canary.19':
-    resolution: {integrity: sha512-1lE15actVuCg/7h06tpyxoFG27q4zXk0qF28rAsM4DEj/B4kt3P4hJAgbGt4AInobw4f9O+Bl1WRVxR192gNgw==}
+  '@mui/internal-babel-plugin-display-name@https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-display-name@56fef1cc85488b1eb32117151cf972c76f619373':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-display-name@56fef1cc85488b1eb32117151cf972c76f619373}
+    version: 1.0.2
     peerDependencies:
       '@babel/core': 7.29.0
       '@babel/preset-react': ^7.28.5
@@ -3366,8 +3526,16 @@ packages:
     peerDependencies:
       '@babel/core': 7.29.0
 
-  '@mui/internal-babel-plugin-resolve-imports@2.0.7-canary.36':
-    resolution: {integrity: sha512-hpaB0I5jkQ9EHxSMkiyJribAmrFRdSl00aP1uZwKIIUv57YJQrK6e9tjNaU8qWBKUXWy3QUXAzSUZFrar+Rx+w==}
+  '@mui/internal-babel-plugin-minify-errors@https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-minify-errors@56fef1cc85488b1eb32117151cf972c76f619373':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-minify-errors@56fef1cc85488b1eb32117151cf972c76f619373}
+    version: 2.0.6
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@babel/core': 7.29.0
+
+  '@mui/internal-babel-plugin-resolve-imports@https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-resolve-imports@56fef1cc85488b1eb32117151cf972c76f619373':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-resolve-imports@56fef1cc85488b1eb32117151cf972c76f619373}
+    version: 2.0.5
     peerDependencies:
       '@babel/core': 7.29.0
 
@@ -3375,8 +3543,9 @@ packages:
     resolution: {integrity: sha512-gwkMQNLhRn/Cg+l7xkHUC4bIF+P8NPhAWsSd4LhwfY4wv8r6vfEQUTd8pnIhxJrMQ8iGykcXJVgod2LdApj05g==}
     hasBin: true
 
-  '@mui/internal-code-infra@0.0.4-canary.45':
-    resolution: {integrity: sha512-g1QIE2Pr3FXZBA74FdSczXQ7MNMEi4iHcqlq6tWEi3DFhA/ypTkweNk3/bCyWEBNTn8TVS6ze91WJ3PvT0twOg==}
+  '@mui/internal-code-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-code-infra@56fef1c':
+    resolution: {tarball: https://pkg.pr.new/mui/mui-public/@mui/internal-code-infra@56fef1c}
+    version: 0.0.3
     hasBin: true
     peerDependencies:
       '@next/eslint-plugin-next': '*'
@@ -3816,8 +3985,8 @@ packages:
     resolution: {integrity: sha512-Kd9h8wNOzBN/s8F7aLAwgE7fNR1rHmf0Qjsu+c0ADxe8dZUFkuh0Q5S0bOdmMCBf8aLcC5JnKtEsRpXJ2/qOmg==}
     engines: {node: '>=8.3.0'}
 
-  '@mui/x-internal-gestures@9.1.0':
-    resolution: {integrity: sha512-XLUN06sFdlRTTPB2GF7X0/RkBRkjgyB85gO4B3XGyChkni/qPMUYQPz2JGvXNtq1+N1ExkCEjAkYB+HUqPxgmQ==}
+  '@mui/x-internal-gestures@9.2.0':
+    resolution: {integrity: sha512-VQ+2mFskgAhCyuIrbkp6//eSwvGiHMurv0yIU+cztMHAHhbkwQSxq3dJDzcAjWawy7e//6TocIYaHL9PFK1vVg==}
 
   '@mui/x-internals@9.1.0':
     resolution: {integrity: sha512-fVezTa1lU+Hb3y9UMI8D/iWXADhs0I8PaZqoh2LOUXjGEUJmKqwsRD19ZXInZsH2yu+YS0dqYMPDvzjYTTyo+Q==}
@@ -3831,8 +4000,8 @@ packages:
     peerDependencies:
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@mui/x-telemetry@9.1.0':
-    resolution: {integrity: sha512-PSmsRmum+gzwSJ2C6VoZYsUeZAm6WUJWNGhcmYqCC+JvIUw9JXElPQFkmP7DDyzcfjdOp/TlY2eQF7Y3h6xsQQ==}
+  '@mui/x-telemetry@9.2.0':
+    resolution: {integrity: sha512-nHsTbsmPs8s+Cz8+Bu80/T8EXUzbURFOduX9t34WeByKywpJNf1Fh20jzSYAPkmCsN9TbrabZ3Q3Hq8o+W6c+A==}
     engines: {node: '>=14.0.0'}
 
   '@mui/x-tree-view@9.1.0':
@@ -4058,8 +4227,8 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
-  '@netlify/functions@5.2.0':
-    resolution: {integrity: sha512-Pj93qeQd1tkQ5xm9gWJZmBf/1riLYqYHc0OzFukrJomrj82Ott53Rr/Q88H1ms5cF+P5QXRKWmA2JSxSybKfjA==}
+  '@netlify/functions@5.2.1':
+    resolution: {integrity: sha512-F1CCXeWC/4E/mj8La38WwFJ6oyymTBeIWYO87nyjN0L8mvb0tugcMsu+V6QkUllMtnBezdM0ApCaY+eWGmnj+g==}
     engines: {node: '>=18.0.0'}
 
   '@netlify/types@2.6.0':
@@ -4148,18 +4317,10 @@ packages:
     engines: {node: ^20.17.0 || >=22.9.0}
     hasBin: true
 
-  '@npmcli/config@8.3.4':
-    resolution: {integrity: sha512-01rtHedemDNhUXdicU7s+QYz/3JyV5Naj84cvdXGH4mgCdL+agmSYaLF4LUG4vMCLzhBO8YtS0gPpH1FGvbgAw==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   '@npmcli/fs@4.0.0':
     resolution: {integrity: sha512-/xGlezI6xfGO9NwuJlnwz/K14qD1kCSAGtacBHnGzeAIuJGazcp45KP5NuyARXoKb7cwulAGWVsbeSxdG/cb0Q==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
-  '@npmcli/git@5.0.8':
-    resolution: {integrity: sha512-liASfw5cqhjNW9UFd+ruwwdEf/lbOAQjLL2XY2dFW/bkJheXDYZgOyul/4gVvEV4BWkTXjYGmDqMw9uegdbJNQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   '@npmcli/git@6.0.3':
     resolution: {integrity: sha512-GUYESQlxZRAdhs3UhbB6pVRNUELQOHXwK9ruDkwmCv2aZ5y0SApQzUJCg02p3A7Ue2J5hxvlk1YI53c00NmRyQ==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -4178,10 +4339,6 @@ packages:
     engines: {node: ^20.17.0 || >=22.9.0}
     hasBin: true
 
-  '@npmcli/map-workspaces@3.0.6':
-    resolution: {integrity: sha512-tkYs0OYnzQm6iIRdfy+LcLBjcKuQCeE5YLb8KnrIlutJfheNaPvPpgoFEyEFgbjzl5PLZ3IA/BWAwRU0eHuQDA==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   '@npmcli/map-workspaces@5.0.3':
     resolution: {integrity: sha512-o2grssXo1e774E5OtEwwrgoszYRh0lqkJH+Pb9r78UcqdGJRDRfhpM8DvZPjzNLLNYeD/rNbjOKM3Ss5UABROw==}
     engines: {node: ^20.17.0 || >=22.9.0}
@@ -4190,10 +4347,6 @@ packages:
     resolution: {integrity: sha512-94GLSYhLXF2t2LAC7pDwLaM4uCARzxShyAQKsirmlNcpidH89VA4/+K1LbJmRMgz5gy65E/QBBWQdUvGLe2Frg==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  '@npmcli/name-from-folder@2.0.0':
-    resolution: {integrity: sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   '@npmcli/name-from-folder@3.0.0':
     resolution: {integrity: sha512-61cDL8LUc9y80fXn+lir+iVt8IS0xHqEKwPu/5jCjxQTVoSCmkXvw4vbMrzAMtmghz3/AkiBjhHkDKUH+kf7kA==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -4210,18 +4363,10 @@ packages:
     resolution: {integrity: sha512-uuG5HZFXLfyFKqg8QypsmgLQW7smiRjVc45bqD/ofZZcR/uxEjgQU8qDPv0s9TEeMUiAAU/GC5bR6++UdTirIQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  '@npmcli/package-json@5.2.1':
-    resolution: {integrity: sha512-f7zYC6kQautXHvNbLEWgD/uGu1+xCn9izgqBfgItWSx22U0ZDekxN08A1vM8cTxj/cRVe0Q94Ode+tdoYmIOOQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   '@npmcli/package-json@7.0.2':
     resolution: {integrity: sha512-0ylN3U5htO1SJTmy2YI78PZZjLkKUGg7EKgukb2CRi0kzyoDr0cfjHAzi7kozVhj2V3SxN1oyKqZ2NSo40z00g==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  '@npmcli/promise-spawn@7.0.2':
-    resolution: {integrity: sha512-xhfYPXoV5Dy4UkY0D+v2KkwvnDfiA/8Mt3sWCGI/hM03NsYIH8ZaG6QzS9x7pje5vHZBZJ2v6VRFVTWACnqcmQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   '@npmcli/promise-spawn@8.0.3':
     resolution: {integrity: sha512-Yb00SWaL4F8w+K8YGhQ55+xE4RUNdMHV43WZGsiTM92gS+lC0mGsn7I4hLug7pbao035S6bj3Y3w0cUNGLfmkg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -4497,8 +4642,8 @@ packages:
     resolution: {integrity: sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==}
     engines: {node: '>=8.0.0'}
 
-  '@oxc-project/types@0.127.0':
-    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
+  '@oxc-project/types@0.130.0':
+    resolution: {integrity: sha512-ibD2usx9JRu7f5pu2tMKMI4cpA4NgXJQoYRP4pQ7Pxmn1l6k/53qWtQWZayhYy3X4QZkt90Ot+mJEaeXouio6Q==}
 
   '@pigment-css/react@0.0.30':
     resolution: {integrity: sha512-aNvpOgbv+M9+YV2wKk3CIyiiiF+8S6KJJKDKGzhFWOVWeQFZBgTOjBHhL/0SyAnCOVjDg2sSXOEElIdEQywXKQ==}
@@ -4510,8 +4655,8 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@pkgr/core@0.2.9':
-    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+  '@pkgr/core@0.2.7':
+    resolution: {integrity: sha512-YLT9Zo3oNPJoBjBc4q8G2mjU4tqIbf5CEOORbUUr48dCD9q3umJ3IPlVqOqDakPfd2HuwccBaqlGhN4Gmr5OWg==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
   '@playwright/test@1.59.1':
@@ -4564,97 +4709,97 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.17':
-    resolution: {integrity: sha512-s70pVGhw4zqGeFnXWvAzJDlvxhlRollagdCCKRgOsgUOH3N1l0LIxf83AtGzmb5SiVM4Hjl5HyarMRfdfj3DaQ==}
+  '@rolldown/binding-android-arm64@1.0.1':
+    resolution: {integrity: sha512-fJI3I0r3C3Oj/zdBCpaCmBRZYf07xpaq4yCfDDoSFm+beWNzbIl26puW8RraUdugoJw/95zerNOn6jasAhzSmg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.17':
-    resolution: {integrity: sha512-4ksWc9n0mhlZpZ9PMZgTGjeOPRu8MB1Z3Tz0Mo02eWfWCHMW1zN82Qz/pL/rC+yQa+8ZnutMF0JjJe7PjwasYw==}
+  '@rolldown/binding-darwin-arm64@1.0.1':
+    resolution: {integrity: sha512-cKnAhWEsV7TPcA/5EAteDp6KcJZBQ2G+BqE7zayMMi7kMvwRsbv7WT9aOnn0WNl4SKEIf43vjS31iUPu80nzXg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.17':
-    resolution: {integrity: sha512-SUSDOI6WwUVNcWxd02QEBjLdY1VPHvlEkw6T/8nYG322iYWCTxRb1vzk4E+mWWYehTp7ERibq54LSJGjmouOsw==}
+  '@rolldown/binding-darwin-x64@1.0.1':
+    resolution: {integrity: sha512-YKrVwQjIRBPo+5G/u03wGjbdy4q7pyzCe93DK9VJ7zkVmeg8LJ7GbgsiHWdR4xSoe4CAXRD7Bcjgbtr64bkXNg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.17':
-    resolution: {integrity: sha512-hwnz3nw9dbJ05EDO/PvcjaaewqqDy7Y1rn1UO81l8iIK1GjenME75dl16ajbvSSMfv66WXSRCYKIqfgq2KCfxw==}
+  '@rolldown/binding-freebsd-x64@1.0.1':
+    resolution: {integrity: sha512-z/oBsREo46SsFqBwYtFe0kpJeBijAT48O/WXLI4suiCLBkr03RTtTJMCzSdDd2znlh8VJizL09XVkQgk8IZonw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.17':
-    resolution: {integrity: sha512-IS+W7epTcwANmFSQFrS1SivEXHtl1JtuQA9wlxrZTcNi6mx+FDOYrakGevvvTwgj2JvWiK8B29/qD9BELZPyXQ==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.1':
+    resolution: {integrity: sha512-ik8q7GM11zxvYxFc2PeDcT6TBvhCQMaUxfph/M5l9sKuTs/Sjg3L+Byw0F7w0ZVLBZmx30P+gG0ECzzN+MFcmQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.17':
-    resolution: {integrity: sha512-e6usGaHKW5BMNZOymS1UcEYGowQMWcgZ71Z17Sl/h2+ZziNJ1a9n3Zvcz6LdRyIW5572wBCTH/Z+bKuZouGk9Q==}
+  '@rolldown/binding-linux-arm64-gnu@1.0.1':
+    resolution: {integrity: sha512-QoSx2EkyrrdZ6kcyE8stqZ62t0Yra8Fs5ia9lOxJrh6TMQJK7gQKmscdTHf7pOXKREKrVwOtJcQG3qVSfc866A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17':
-    resolution: {integrity: sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg==}
+  '@rolldown/binding-linux-arm64-musl@1.0.1':
+    resolution: {integrity: sha512-uwNwFpwKeNiZawfAWBgg0VIztPTV3ihhh1vV334h9ivnNLorxnQMU6Fz8wG1Zb4Qh9LC1/MkcyT3YlDXG3Rsgg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17':
-    resolution: {integrity: sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA==}
+  '@rolldown/binding-linux-ppc64-gnu@1.0.1':
+    resolution: {integrity: sha512-zY1bul7OWr7DFBiJ++wofXvnr8B45ce3QsQUhKrIhXsygAh7bTkwyeM1bi1a2g5C/yC/N8TZyGDEoMfm/l9mpg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17':
-    resolution: {integrity: sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA==}
+  '@rolldown/binding-linux-s390x-gnu@1.0.1':
+    resolution: {integrity: sha512-0frlsT/f4Ft6I7SMESTKnF3cZsdicQn1dCMkF/jT9wDLE+gGoiQfv1nmT9e+s7s/fekvvy6tZM2jHvI2tkbJDQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17':
-    resolution: {integrity: sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA==}
+  '@rolldown/binding-linux-x64-gnu@1.0.1':
+    resolution: {integrity: sha512-XABVmGp9Tg0WspTVvwduTc4fpqy6JnAUrSQe6OuyqD/03nI7r0O9OWUkMIwFrjKAIqolvqoA4ZrJppgwE0Gxmw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.17':
-    resolution: {integrity: sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw==}
+  '@rolldown/binding-linux-x64-musl@1.0.1':
+    resolution: {integrity: sha512-bV4fzswuzVcKD90o/VM6QqKxnxlDq0g2BISDLNVmxrnhpv1DDbyPhCIjYfvzYLV+MvkKKnQt2Q6AO86SEBULUQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.17':
-    resolution: {integrity: sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA==}
+  '@rolldown/binding-openharmony-arm64@1.0.1':
+    resolution: {integrity: sha512-/Mh0Zhq3OP7fVs0kcQHZP6lZEthMGTaSf8UBQYSFEZDWGXXlEC+nJ6EqenaK2t4LBXMe3A+K/G2BVXXdtOr4PQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.17':
-    resolution: {integrity: sha512-LEXei6vo0E5wTGwpkJ4KoT3OZJRnglwldt5ziLzOlc6qqb55z4tWNq2A+PFqCJuvWWdP53CVhG1Z9NtToDPJrA==}
+  '@rolldown/binding-wasm32-wasi@1.0.1':
+    resolution: {integrity: sha512-+1xc9X45l8ufsBAm6Gjvx2qDRIY9lTVt0cgWNcJ+1gdhXvkbxePA60yRTwSTuXL09CMhyJmjpV7E3NoyxbqFQQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.17':
-    resolution: {integrity: sha512-gUmyzBl3SPMa6hrqFUth9sVfcLBlYsbMzBx5PlexMroZStgzGqlZ26pYG89rBb45Mnia+oil6YAIFeEWGWhoZA==}
+  '@rolldown/binding-win32-arm64-msvc@1.0.1':
+    resolution: {integrity: sha512-1D+UqZdfnuR+Jy1GgMJwi85bD40H21uNmOPRWQhw4oRSuolZ/B5rixZ45DK2KXOTCvmVCecauWgEhbw8bI7tOw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.17':
-    resolution: {integrity: sha512-3hkiolcUAvPB9FLb3UZdfjVVNWherN1f/skkGWJP/fgSQhYUZpSIRr0/I8ZK9TkF3F7kxvJAk0+IcKvPHk9qQg==}
+  '@rolldown/binding-win32-x64-msvc@1.0.1':
+    resolution: {integrity: sha512-INAycaWuhlOK3wk4mRHGsdgwYWmd9cChdPdE9bwWmy6rn9VqVNYNFGhOdXrofXUxwHIncSiPNb8tNm8knDVIeQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -4662,8 +4807,8 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.47':
     resolution: {integrity: sha512-8QagwMH3kNCuzD8EWL8R2YPW5e4OrHNSAHRFDdmFqEwEaD/KcNKjVoumo+gP2vW5eKB2UPbM6vTYiGZX0ixLnw==}
 
-  '@rolldown/pluginutils@1.0.0-rc.17':
-    resolution: {integrity: sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg==}
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
   '@rollup/rollup-android-arm-eabi@4.46.2':
     resolution: {integrity: sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==}
@@ -4853,12 +4998,12 @@ packages:
     resolution: {integrity: sha512-qYy07je71WnEHgRwmw12DlAnZLi5HXmdlI2WUzUK2LH/rYXQpP6uEg462S5CwfE8FoCKUdIigHtYnOOfzZH1lQ==}
     engines: {node: '>= 18', npm: '>= 8.6.0'}
 
-  '@slack/types@2.20.1':
-    resolution: {integrity: sha512-eWX2mdt1ktpn8+40iiMc404uGrih+2fxiky3zBcPjtXKj6HLRdYlmhrPkJi7JTJm8dpXR6BWVWEDBXtaWMKD6A==}
+  '@slack/types@2.21.1':
+    resolution: {integrity: sha512-I8vmSjNYWsaxuWPx6dz4yeh0h7vRBWbgAMK14LEmblbZ404BtrPbXs6jDPx4cYgGf8msDGF4A9opLZBu21FViQ==}
     engines: {node: '>= 12.13.0', npm: '>= 6.12.0'}
 
-  '@slack/web-api@7.15.1':
-    resolution: {integrity: sha512-y+TAF7TszcmFzbVtBkFqAdBwKSoD+8shkNxhp4WIfFwXmCKdFje9WD6evROApPa2FTy1v1uc9yBaJs3609PPgg==}
+  '@slack/web-api@7.16.0':
+    resolution: {integrity: sha512-68SAV77uuGKuhyyaRytX8UijVnqSLsTSKslGXw17cjQYXn+jtNl7gbaEjHgC5x2rhCuFdahBrEC2VCLppbzReg==}
     engines: {node: '>= 18', npm: '>= 8.6.0'}
 
   '@standard-schema/spec@1.0.0':
@@ -4867,69 +5012,69 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
-  '@tailwindcss/node@4.2.4':
-    resolution: {integrity: sha512-Ai7+yQPxz3ddrDQzFfBKdHEVBg0w3Zl83jnjuwxnZOsnH9pGn93QHQtpU0p/8rYWxvbFZHneni6p1BSLK4DkGA==}
+  '@tailwindcss/node@4.3.0':
+    resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
 
-  '@tailwindcss/oxide-android-arm64@4.2.4':
-    resolution: {integrity: sha512-e7MOr1SAn9U8KlZzPi1ZXGZHeC5anY36qjNwmZv9pOJ8E4Q6jmD1vyEHkQFmNOIN7twGPEMXRHmitN4zCMN03g==}
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    resolution: {integrity: sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.2.4':
-    resolution: {integrity: sha512-tSC/Kbqpz/5/o/C2sG7QvOxAKqyd10bq+ypZNf+9Fi2TvbVbv1zNpcEptcsU7DPROaSbVgUXmrzKhurFvo5eDg==}
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    resolution: {integrity: sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.2.4':
-    resolution: {integrity: sha512-yPyUXn3yO/ufR6+Kzv0t4fCg2qNr90jxXc5QqBpjlPNd0NqyDXcmQb/6weunH/MEDXW5dhyEi+agTDiqa3WsGg==}
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    resolution: {integrity: sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.2.4':
-    resolution: {integrity: sha512-BoMIB4vMQtZsXdGLVc2z+P9DbETkiopogfWZKbWwM8b/1Vinbs4YcUwo+kM/KeLkX3Ygrf4/PsRndKaYhS8Eiw==}
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    resolution: {integrity: sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.4':
-    resolution: {integrity: sha512-7pIHBLTHYRAlS7V22JNuTh33yLH4VElwKtB3bwchK/UaKUPpQ0lPQiOWcbm4V3WP2I6fNIJ23vABIvoy2izdwA==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    resolution: {integrity: sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==}
     engines: {node: '>= 20'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.4':
-    resolution: {integrity: sha512-+E4wxJ0ZGOzSH325reXTWB48l42i93kQqMvDyz5gqfRzRZ7faNhnmvlV4EPGJU3QJM/3Ab5jhJ5pCRUsKn6OQw==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    resolution: {integrity: sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.4':
-    resolution: {integrity: sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.4':
-    resolution: {integrity: sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.2.4':
-    resolution: {integrity: sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==}
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@tailwindcss/oxide-wasm32-wasi@4.2.4':
-    resolution: {integrity: sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==}
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
     bundledDependencies:
@@ -4940,30 +5085,30 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.4':
-    resolution: {integrity: sha512-L9BXqxC4ToVgwMFqj3pmZRqyHEztulpUJzCxUtLjobMCzTPsGt1Fa9enKbOpY2iIyVtaHNeNvAK8ERP/64sqGQ==}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    resolution: {integrity: sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.4':
-    resolution: {integrity: sha512-ESlKG0EpVJQwRjXDDa9rLvhEAh0mhP1sF7sap9dNZT0yyl9SAG6T7gdP09EH0vIv0UNTlo6jPWyujD6559fZvw==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    resolution: {integrity: sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.2.4':
-    resolution: {integrity: sha512-9El/iI069DKDSXwTvB9J4BwdO5JhRrOweGaK25taBAvBXyXqJAX+Jqdvs8r8gKpsI/1m0LeJLyQYTf/WLrBT1Q==}
+  '@tailwindcss/oxide@4.3.0':
+    resolution: {integrity: sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==}
     engines: {node: '>= 20'}
 
-  '@tailwindcss/postcss@4.2.4':
-    resolution: {integrity: sha512-wgAVj6nUWAolAu8YFvzT2cTBIElWHkjZwFYovF+xsqKsW2ADxM/X2opxj5NsF/qVccAOjRNe8X2IdPzMsWyHTg==}
+  '@tailwindcss/postcss@4.3.0':
+    resolution: {integrity: sha512-Jm05Tjx+9yCLGv5qw1c+84Psds8MnyrEQYCB+FFk2lgGiUjlRqdxke4mVTuYrj2xnVZqKim2Apr5ySuQRYAw/w==}
 
-  '@tanstack/query-core@5.100.9':
-    resolution: {integrity: sha512-SJSFw1S8+kQ0+knv/XGfrbocWoAlT7vDKsSImtLx3ZPQmEcR46hkDjLSvynSy25N8Ms4tIEini1FuBd5k7IscQ==}
+  '@tanstack/query-core@5.100.10':
+    resolution: {integrity: sha512-8UR0yJR+GiQ40m3lPhUr0xbfAupe6GSQiksSBSa9SM2NjezFyxXCIA69/lz8cSoNKZLrw1/PktIyQBJcVeMi3w==}
 
-  '@tanstack/react-query@5.100.9':
-    resolution: {integrity: sha512-Oa44XkaI3kCNN6ME0KByU3xT3SEUNOMfZpHxL6+wFoTm+OeUFYHKdeYVe0aOXlRDm/f15sgLwEt2HDorIdW8+A==}
+  '@tanstack/react-query@5.100.10':
+    resolution: {integrity: sha512-FLaZf2RCrA/Zgp4aiu5tG3TyasTRO7aZ99skxQpr3Hg/zXOhu6yq5FZCYQ/tRaJtM9ylnoK8tFK7PolXQadv6Q==}
     peerDependencies:
       react: ^18 || ^19
 
@@ -5048,9 +5193,6 @@ packages:
   '@types/chance@1.1.8':
     resolution: {integrity: sha512-isycXjm4a88/zl3n9lfgMcEClR9wUi+m72lkE9MvEbkgZDQrKzolWbonBiUqDNAJFIwO9GKjzmJFq79qtKVTAQ==}
 
-  '@types/concat-stream@2.0.3':
-    resolution: {integrity: sha512-3qe4oQAPNwVNwK4C9c8u+VJqv9kez+2MR4qJpoPFfXtgxxif1QbFusvXzK0/Wra2VX07smostI2VMmJNSpZjuQ==}
-
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
@@ -5102,9 +5244,6 @@ packages:
   '@types/esrecurse@4.3.1':
     resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
 
-  '@types/estree-jsx@1.0.5':
-    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
-
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -5134,9 +5273,6 @@ packages:
   '@types/ip@1.1.3':
     resolution: {integrity: sha512-64waoJgkXFTYnCYDUWgSATJ/dXEBanVkaP5d4Sbk7P6U7cTTMhxVyROTckc6JKdwCrgnAjZMn0k3177aQxtDEA==}
 
-  '@types/is-empty@1.2.3':
-    resolution: {integrity: sha512-4J1l5d79hoIvsrKh5VUKVRA1aIdsOb10Hu5j3J2VfP/msDnfTdGPmNp2E1Wg+vs97Bktzo+MZePFFXSGoykYJw==}
-
   '@types/jscodeshift@0.12.0':
     resolution: {integrity: sha512-Jr2fQbEoDmjwEa92TreR/mX2t9iAaY/l5P/GKezvK4BodXahex60PDLXaQR0vAgP0KfCzc1CivHusQB9NhzX8w==}
 
@@ -5234,9 +5370,6 @@ packages:
   '@types/stylis@4.2.7':
     resolution: {integrity: sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==}
 
-  '@types/supports-color@8.1.3':
-    resolution: {integrity: sha512-Hy6UMpxhE3j1tLpl27exp1XqHD7n8chAiNPzWfz16LPZoMMoSc4dzLl6w9qijkEb/r5O1ozdu1CWGA2L83ZeZg==}
-
   '@types/tough-cookie@4.0.5':
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
 
@@ -5487,8 +5620,8 @@ packages:
       '@vitest/browser':
         optional: true
 
-  '@vitest/eslint-plugin@1.6.16':
-    resolution: {integrity: sha512-2pBN1F1JXq6zTSaYC58CMJa7pGxXIRsLfOioeZM4cPE3pRdSh1ySTSoHPQlOTEF5WgoVzWZQxhGQ3ygT78hOVg==}
+  '@vitest/eslint-plugin@1.6.17':
+    resolution: {integrity: sha512-sIVY9ZeVcXyPxFCNRkIt8Yw4keKIcUyp9/8qnmuomPwE+ST1htw5sZsbqdUMTiah9SmCg1JYoK9RqdDtPeNYYg==}
     engines: {node: '>=18'}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': '*'
@@ -5568,10 +5701,6 @@ packages:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
 
-  abbrev@2.0.0:
-    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -5605,6 +5734,10 @@ packages:
   add-stream@1.0.0:
     resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
 
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
   agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
@@ -5785,8 +5918,8 @@ packages:
     resolution: {integrity: sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==}
     engines: {node: '>=4'}
 
-  axios@1.16.0:
-    resolution: {integrity: sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==}
+  axios@1.16.1:
+    resolution: {integrity: sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==}
 
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
@@ -6009,8 +6142,8 @@ packages:
   camelize@1.0.0:
     resolution: {integrity: sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==}
 
-  caniuse-lite@1.0.30001792:
-    resolution: {integrity: sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw==}
+  caniuse-lite@1.0.30001793:
+    resolution: {integrity: sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -6180,9 +6313,6 @@ packages:
     resolution: {integrity: sha512-rtpaCbr164TPPh+zFdkWpCyZuKkjpAzODfaZCf/SVJZzJN+4bHQb/LP3Jzq5/+84um3XXY8r548XiWKSborwVw==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
-  collapse-white-space@2.1.0:
-    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -6785,8 +6915,8 @@ packages:
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
-  enhanced-resolve@5.20.0:
-    resolution: {integrity: sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==}
+  enhanced-resolve@5.21.3:
+    resolution: {integrity: sha512-QyL119InA+XXEkNLNTPCXPugSvOfhwv0JOlGNzvxs0hZaiHLNvXSpudUWsOlsXGWJh8G6ckCScEkVHfX3kw/2Q==}
     engines: {node: '>=10.13.0'}
 
   enquirer@2.3.6:
@@ -6925,16 +7055,6 @@ packages:
       eslint-plugin-import-x:
         optional: true
 
-  eslint-mdx@3.7.0:
-    resolution: {integrity: sha512-QpPdJ6EeFthHuIrfgnWneZgwwFNOLFj/nf2jg/tOTBoiUnqNTxUUpTGAn0ZFHYEh5htVVoe5kjvD02oKtxZGeA==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      eslint: '>=8.0.0'
-      remark-lint-file-extension: '*'
-    peerDependenciesMeta:
-      remark-lint-file-extension:
-        optional: true
-
   eslint-module-utils@2.12.1:
     resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
     engines: {node: '>=4'}
@@ -6982,12 +7102,6 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
 
-  eslint-plugin-mdx@3.7.0:
-    resolution: {integrity: sha512-JXaaQPnKqyti/QSOSQDThLV1EemHm/Fe2l/nMKH0vmhvmABtN/yV/9+GtKgh8UTZwrwuTfQq1HW5eR8HXneNLA==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      eslint: '>=8.0.0'
-
   eslint-plugin-mocha@11.2.0:
     resolution: {integrity: sha512-nMdy3tEXZac8AH5Z/9hwUkSfWu8xHf4XqwB5UEQzyTQGKcNlgFeciRAjLjliIKC3dR1Ex/a2/5sqgQzvYRkkkA==}
     peerDependencies:
@@ -7025,10 +7139,6 @@ packages:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint-visitor-keys@4.2.1:
-    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   eslint-visitor-keys@5.0.1:
     resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -7043,10 +7153,6 @@ packages:
       jiti:
         optional: true
 
-  espree@10.4.0:
-    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   espree@11.2.0:
     resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -7068,12 +7174,6 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
-  estree-util-is-identifier-name@3.0.0:
-    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
-
-  estree-util-visit@2.0.0:
-    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
-
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -7182,9 +7282,6 @@ packages:
   fastq@1.13.0:
     resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
 
-  fault@2.0.1:
-    resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
-
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -7316,10 +7413,6 @@ packages:
   format-util@1.0.5:
     resolution: {integrity: sha512-varLbTj0e0yVyRpqQhuWV+8hlePAgaoFRhNFj50BNjEIrw1/DphHSObtqwskVCPWNgzwPoQrZAbfa/SBiicNeg==}
 
-  format@0.2.2:
-    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
-    engines: {node: '>=0.4.x'}
-
   forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -7633,10 +7726,6 @@ packages:
     resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
     engines: {node: '>=10'}
 
-  hosted-git-info@7.0.2:
-    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   hosted-git-info@8.1.0:
     resolution: {integrity: sha512-Rw/B2DNQaPBICNXEm8balFz9a6WpZrkCGpcWFpy7nCj+NyhSdqXipmfvtmWt9xGfp0wZnBxB+iVpLmQMYt47Tw==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -7699,6 +7788,10 @@ packages:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
 
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
@@ -7741,10 +7834,6 @@ packages:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
-  ignore@6.0.2:
-    resolution: {integrity: sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==}
-    engines: {node: '>= 4'}
-
   ignore@7.0.5:
     resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
     engines: {node: '>= 4'}
@@ -7789,10 +7878,6 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
-  ini@4.1.3:
-    resolution: {integrity: sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   ini@5.0.0:
     resolution: {integrity: sha512-+N0ngpO3e7cRUWOJAS7qw0IZIVc6XPrW4MlFBdD066F2L4k1L6ker3hLqSq7iXxU5tgS4WGkIUElWn5vogAEnw==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -7907,9 +7992,6 @@ packages:
   is-electron@2.2.2:
     resolution: {integrity: sha512-FO/Rhvz5tuw4MCWkpMzHFKWD2LsfHzIb7i6MdPYZ/KW7AlxawyLkqdy+jPZP1WubqEADE3O4FUENlJHDfQASRg==}
 
-  is-empty@1.2.0:
-    resolution: {integrity: sha512-F2FnH/otLNJv0J6wc73A5Xo7oHLNnqplYqZhUu01tD54DIPvxIRSTSLkrUB/M0nHO4vo1O9PDfN4KoTxCzLh/w==}
-
   is-extendable@1.0.1:
     resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==}
     engines: {node: '>=0.10.0'}
@@ -8221,10 +8303,6 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  json-parse-even-better-errors@3.0.2:
-    resolution: {integrity: sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   json-parse-even-better-errors@4.0.0:
     resolution: {integrity: sha512-lR4MXjGNgkJc7tkQ97kb2nuEMnNCyU//XYVH0MKTGcXEiSudQ5MKGKen3C5QubYy0vmq+JGitUg92uuywGEwIA==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -8488,9 +8566,6 @@ packages:
     resolution: {integrity: sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==}
     engines: {node: '>=8'}
 
-  load-plugin@6.0.3:
-    resolution: {integrity: sha512-kc0X2FEUZr145odl68frm+lMJuQ23+rTXYmR6TImqPtbpmXC4vVXbWKDQ9IzndA0HfyQamWfKLhzsqGSTxE63w==}
-
   locate-path@2.0.0:
     resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
     engines: {node: '>=4'}
@@ -8620,8 +8695,8 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
-  markdown-to-jsx@9.7.16:
-    resolution: {integrity: sha512-+LEgOlYfUEB9i2Oaxasec9H2HytB1+SQcgwFmQiNTKwe8cQ2E9bDNgePGq6ChIycMxtpcEY0g44aQ3uJoMw8eg==}
+  markdown-to-jsx@9.8.0:
+    resolution: {integrity: sha512-NWL0vDt6BeQgCxc2kK6g2SEPJpQuacu+NJk5j4QT4wlNmbsHdudoAbTGLCIyoPhfMiEqD1OZVBsYK0hvCky/HQ==}
     engines: {node: '>= 18'}
     peerDependencies:
       react: '>= 16.0.0'
@@ -8686,17 +8761,11 @@ packages:
   mathml-tag-names@4.0.0:
     resolution: {integrity: sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==}
 
-  mdast-comment-marker@3.0.0:
-    resolution: {integrity: sha512-bt08sLmTNg00/UtVDiqZKocxqvQqqyQZAg1uaRuO/4ysXV5motg7RolF5o5yy/sY1rG0v2XgZEqFWho1+2UquA==}
-
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
-  mdast-util-from-markdown@2.0.3:
-    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
-
-  mdast-util-frontmatter@2.0.1:
-    resolution: {integrity: sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==}
+  mdast-util-from-markdown@2.0.1:
+    resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==}
 
   mdast-util-gfm-autolink-literal@2.0.1:
     resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
@@ -8716,21 +8785,6 @@ packages:
   mdast-util-gfm@3.1.0:
     resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
 
-  mdast-util-heading-style@3.0.0:
-    resolution: {integrity: sha512-tsUfM9Kj9msjlemA/38Z3pvraQay880E3zP2NgIthMoGcpU9bcPX9oSM6QC/+eFXGGB4ba+VCB1dKAPHB7Veug==}
-
-  mdast-util-mdx-expression@2.0.1:
-    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
-
-  mdast-util-mdx-jsx@3.2.0:
-    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
-
-  mdast-util-mdx@3.0.0:
-    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
-
-  mdast-util-mdxjs-esm@2.0.1:
-    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
-
   mdast-util-phrasing@4.1.0:
     resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
 
@@ -8789,9 +8843,6 @@ packages:
   micromark-extension-directive@4.0.0:
     resolution: {integrity: sha512-/C2nqVmXXmiseSSuCdItCMho7ybwwop6RrrRPk0KbOHW21JKoCldC+8rFOaundDoRBUWBnJJcxeA/Kvi34WQXg==}
 
-  micromark-extension-frontmatter@2.0.0:
-    resolution: {integrity: sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg==}
-
   micromark-extension-gfm-autolink-literal@2.1.0:
     resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
 
@@ -8816,30 +8867,12 @@ packages:
   micromark-extension-math@3.1.0:
     resolution: {integrity: sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==}
 
-  micromark-extension-mdx-expression@3.0.1:
-    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
-
-  micromark-extension-mdx-jsx@3.0.2:
-    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
-
-  micromark-extension-mdx-md@2.0.0:
-    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
-
-  micromark-extension-mdxjs-esm@3.0.0:
-    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
-
-  micromark-extension-mdxjs@3.0.0:
-    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
-
   micromark-factory-destination@2.0.0:
     resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==}
 
   micromark-factory-label@2.0.0:
     resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==}
 
-  micromark-factory-mdx-expression@2.0.3:
-    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
-
   micromark-factory-space@2.0.0:
     resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==}
 
@@ -8870,9 +8903,6 @@ packages:
   micromark-util-encode@2.0.0:
     resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
 
-  micromark-util-events-to-acorn@2.0.3:
-    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
-
   micromark-util-html-tag-name@2.0.0:
     resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==}
 
@@ -9144,11 +9174,6 @@ packages:
   node-releases@2.0.27:
     resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
-  nopt@7.2.1:
-    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    hasBin: true
-
   nopt@8.1.0:
     resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -9166,10 +9191,6 @@ packages:
     resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
     engines: {node: '>=10'}
 
-  normalize-package-data@6.0.2:
-    resolution: {integrity: sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -9189,10 +9210,6 @@ packages:
     resolution: {integrity: sha512-JLSpbzh6UUXIEoqPsYBvVNVmyrjVZ1fzEFbqxKkTJQkWBO3xFzFT+KDnSKQWwOQNbuWRwt5LSD6HOTLGIWzfrw==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  npm-install-checks@6.3.0:
-    resolution: {integrity: sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   npm-install-checks@7.1.2:
     resolution: {integrity: sha512-z9HJBCYw9Zr8BqXcllKIs5nI+QggAImbBdHphOzVYrz2CB4iQ6FzWyKmlqDZua+51nAu7FcemlbTc9VgQN5XDQ==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -9201,10 +9218,6 @@ packages:
     resolution: {integrity: sha512-ScAUdMpyzkbpxoNekQ3tNRdFI8SJ86wgKZSQZdUxT+bj0wVFpsEMWnkXP0twVe1gJyNF5apBWDJhhIbgrIViRA==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  npm-normalize-package-bin@3.0.1:
-    resolution: {integrity: sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   npm-normalize-package-bin@4.0.0:
     resolution: {integrity: sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -9213,10 +9226,6 @@ packages:
     resolution: {integrity: sha512-CJi3OS4JLsNMmr2u07OJlhcrPxCeOeP/4xq67aWNai6TNWWbTrlNDgl8NcFKVlcBKp18GPj+EzbNIgrBfZhsag==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  npm-package-arg@11.0.3:
-    resolution: {integrity: sha512-sHGJy8sOC1YraBywpzQlIKBE4pBbGbiF95U6Auspzyem956E0+FtDtsx1ZxlOJkQCZ1AFXAY/yuvtFYrOxF+Bw==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   npm-package-arg@12.0.2:
     resolution: {integrity: sha512-f1NpFjNI9O4VbKMOlA5QoBq/vSQPORHcTZ2feJpFkTHJ9eQkdlmZEKSjcAhxTGInC7RlEyScT9ui67NaOsjFWA==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -9237,10 +9246,6 @@ packages:
     resolution: {integrity: sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  npm-pick-manifest@9.1.0:
-    resolution: {integrity: sha512-nkc+3pIIhqHVQr085X9d2JzPzLyjzQS96zbruppqC9aZRm/x8xx6xhI98gHtsfELP2bE+loHq8ZaHFHhe+NauA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   npm-registry-fetch@19.1.0:
     resolution: {integrity: sha512-xyZLfs7TxPu/WKjHUs0jZOPinzBAI32kEUel6za0vH+JUTnFZ5zbHI1ZoGZRDm6oMjADtrli6FxtMlk/5ABPNw==}
     engines: {node: ^20.17.0 || >=22.9.0}
@@ -9516,10 +9521,6 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
-  parse-json@7.1.1:
-    resolution: {integrity: sha512-SgOTCX/EZXtZxBE5eJ97P4yGM5n37BwRU+YMsH4vNzFqJV/oWFXXCmwFlgWUM4PrakybVOueJJ6pwHqSVhTFDw==}
-    engines: {node: '>=16'}
-
   parse-ms@4.0.0:
     resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
     engines: {node: '>=18'}
@@ -9801,10 +9802,6 @@ packages:
     resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
     engines: {node: '>=6'}
 
-  proc-log@4.2.0:
-    resolution: {integrity: sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   proc-log@5.0.0:
     resolution: {integrity: sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -9830,14 +9827,6 @@ packages:
   promise-call-limit@3.0.2:
     resolution: {integrity: sha512-mRPQO2T1QQVw11E7+UdCJu7S61eJVWknzml9sC1heAdj1jxl0fWMBypIt9ZOcLFf8FkG995ZD7RnVk7HH72fZw==}
 
-  promise-inflight@1.0.1:
-    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
-    peerDependencies:
-      bluebird: '*'
-    peerDependenciesMeta:
-      bluebird:
-        optional: true
-
   promise-retry@2.0.1:
     resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==}
     engines: {node: '>=10'}
@@ -9899,9 +9888,6 @@ packages:
     resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
     engines: {node: '>=8'}
 
-  quotation@2.0.3:
-    resolution: {integrity: sha512-yEc24TEgCFLXx7D4JHJJkK4JFVtatO8fziwUxY4nB/Jbea9o9CVS3gt22mA0W7rPYAGW2fWzYDSOtD94PwOyqA==}
-
   range-parser@1.2.0:
     resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
     engines: {node: '>= 0.6'}
@@ -10027,8 +10013,8 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
-  react-virtuoso@4.18.6:
-    resolution: {integrity: sha512-CrT3P6HyjJMHZVWSste2bG2q5aWGlHfW2QuySZjiFwB2Qok/xsvgy+k8Z2jeDP8PP5KsBip7zNrl/F0QoxeyKw==}
+  react-virtuoso@4.18.7:
+    resolution: {integrity: sha512-xNF5zDGEEIMB7cKwcen/pLig0YDf6OnfFrVgKFa7sHPf9fRem0CaLshyObbBcP88jzn0enavL39EgplgdyT21g==}
     peerDependencies:
       react: '>=16 || >=17 || >= 18 || >= 19'
       react-dom: '>=16 || >=17 || >= 18 || >=19'
@@ -10039,6 +10025,10 @@ packages:
       react: ^18.0.0 || ^19.0.0
       react-dom: ^18.0.0 || ^19.0.0
 
+  react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
   react@19.2.6:
     resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
     engines: {node: '>=0.10.0'}
@@ -10054,10 +10044,6 @@ packages:
     resolution: {integrity: sha512-SEbJV7tohp3DAAILbEMPXavBjAnMN0tVnh4+9G8ihV4Pq3HYF9h8QNez9zkJ1ILkv9G2BjdzwctznGZXgu/HGw==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
-  read-package-json-fast@3.0.2:
-    resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   read-pkg-up@3.0.0:
     resolution: {integrity: sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==}
     engines: {node: '>=4'}
@@ -10161,54 +10147,9 @@ packages:
   rehype-stringify@10.0.1:
     resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
 
-  remark-frontmatter@5.0.0:
-    resolution: {integrity: sha512-XTFYvNASMe5iPN0719nPrdItC9aU0ssC4v14mH1BCi1u0n1gAocqcujWUrByftZTbLhRtiKRyjYTSIOcr69UVQ==}
-
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
-  remark-lint-code-block-style@4.0.1:
-    resolution: {integrity: sha512-d4mHsEpv1yqXWl2dd+28tGRX0Lzk5qw7cfxAQVkOXPUONhsMFwXJEBeeqZokeG4lOKtkKdIJR7ezScDfWR0X4w==}
-
-  remark-lint-fenced-code-flag@4.2.0:
-    resolution: {integrity: sha512-QWGTrnYbcopOFZR98djDREmKApLonJ7hmXE7pEcOGee9JY/EUIVS7Lq54Hy9CtU3cVIvQQmiMTxCwUhfddDJFA==}
-
-  remark-lint-heading-increment@4.0.1:
-    resolution: {integrity: sha512-uat7RTQn0hGlMv62p7yjLlg3tO3RljFbH6C+0M+5BNEF+s3NrA8jJgqW0UwLLNdCd3EABCKaWloHumT57ND7PQ==}
-
-  remark-lint-heading-style@4.0.1:
-    resolution: {integrity: sha512-+rUpJ/N2CGC5xPgZ18XgsCsUBtadgEhdTi0BJPrsFmHPzL22BUHajeg9im8Y7zphUcbi1qFiKuxZd2nzDgZSXQ==}
-
-  remark-lint-no-duplicate-headings@4.0.1:
-    resolution: {integrity: sha512-6lggqnpIe5FepikjYF2me3ovKV4oD/rAz8WmwVbLR2cLkce1iH+PB7jyxk/A2gQQqrDcIlRMA5Ct2Yj56cEwhQ==}
-
-  remark-lint-no-empty-url@4.0.1:
-    resolution: {integrity: sha512-FSQIO+Q63kNNSUfbvvWPz6ES4q1gJIc4aMjohch9bfKwcv6wWZc6UkjlMMi823I124p6onrY/F8KKECv06H5YQ==}
-
-  remark-lint-no-heading-punctuation@4.0.1:
-    resolution: {integrity: sha512-lpSVFEHPDKGWi8YPeO51xmLNVON5A2cGz0Y8VRkW0f2l6LvEkPTMjQAvA84AQu/10TrxTbIzU/tQlRLpG96QUA==}
-
-  remark-lint-no-multiple-toplevel-headings@4.0.1:
-    resolution: {integrity: sha512-8sepobIOu3PlDOuMH7jtri+LH4tFNVQU+aqKSkrlNRdp831fYz9S+jA2crTVqWqxVbTwiF96uJWePv8/9qmHnA==}
-
-  remark-lint-no-undefined-references@5.0.2:
-    resolution: {integrity: sha512-5prkVb1tKwJwr5+kct/UjsLjvMdEDO7uClPeGfrxfAcN59+pWU8OUSYiqYmpSKWJPIdyxPRS8Oyf1HtaYvg8VQ==}
-
-  remark-lint-no-unused-definitions@4.0.2:
-    resolution: {integrity: sha512-KRzPmvfq6b3LSEcAQZobAn+5eDfPTle0dPyDEywgPSc3E7MIdRZQenL9UL8iIqHQWK4FvdUD0GX8FXGqu5EuCw==}
-
-  remark-lint-table-pipes@5.0.1:
-    resolution: {integrity: sha512-oOkRC0WRRDwvodfffGafoBFBTGwy9udQgKtxN53apmZpOmaUAxTi833ite0jMo078+LehNftO5bxrElZ9EQUlQ==}
-
-  remark-lint@10.0.1:
-    resolution: {integrity: sha512-1+PYGFziOg4pH7DDf1uMd4AR3YuO2EMnds/SdIWMPGT7CAfDRSnAmpxPsJD0Ds3IKpn97h3d5KPGf1WFOg6hXQ==}
-
-  remark-mdx@3.1.1:
-    resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==}
-
-  remark-message-control@8.0.0:
-    resolution: {integrity: sha512-brpzOO+jdyE/mLqvqqvbogmhGxKygjpCUCG/PwSCU43+JZQ+RM+sSzkCWBcYvgF3KIAVNIoPsvXjBkzO7EdsYQ==}
-
   remark-parse@11.0.0:
     resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
@@ -10291,8 +10232,8 @@ packages:
     engines: {node: 20 || >=22}
     hasBin: true
 
-  rolldown@1.0.0-rc.17:
-    resolution: {integrity: sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA==}
+  rolldown@1.0.1:
+    resolution: {integrity: sha512-X0KQHljNnEkWNqqiz9zJrGunh1B0HgOxLXvnFpCOcadzcy5qohZ3tqMEUg00vncoRovXuK3ZqCT9KnnKzoInFQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -10646,10 +10587,6 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
-  string-width@6.1.0:
-    resolution: {integrity: sha512-k01swCJAgQmuADB0YIc+7TuatfNvTBVOoaUWJjTB9R4VJzR5vNWzf5t42ESVZFPS8xTySF7CAdV4t/aaIm3UnQ==}
-    engines: {node: '>=16'}
-
   string-width@7.2.0:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
@@ -10822,10 +10759,6 @@ packages:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
 
-  supports-color@9.4.0:
-    resolution: {integrity: sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==}
-    engines: {node: '>=12'}
-
   supports-hyperlinks@3.2.0:
     resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
     engines: {node: '>=14.18'}
@@ -10849,10 +10782,6 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
-  synckit@0.11.12:
-    resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-
   system-architecture@0.1.0:
     resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
     engines: {node: '>=18'}
@@ -10864,8 +10793,11 @@ packages:
   tailwindcss@4.2.4:
     resolution: {integrity: sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==}
 
-  tapable@2.3.0:
-    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+  tailwindcss@4.3.0:
+    resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
 
   tar-stream@2.2.0:
@@ -11058,10 +10990,6 @@ packages:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
 
-  type-fest@3.13.1:
-    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
-    engines: {node: '>=14.16'}
-
   type-fest@4.41.0:
     resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
@@ -11110,6 +11038,11 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
 
@@ -11153,15 +11086,6 @@ packages:
     resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
     engines: {node: '>=20'}
 
-  unified-engine@11.2.2:
-    resolution: {integrity: sha512-15g/gWE7qQl9tQ3nAEbMd5h9HV1EACtFs6N9xaRBZICoCwnNGbal1kOs++ICf4aiTdItZxU2s/kYWhW7htlqJg==}
-
-  unified-lint-rule@3.0.1:
-    resolution: {integrity: sha512-HxIeQOmwL19DGsxHXbeyzKHBsoSCFO7UtRVUvT2v61ptw/G+GbysWcrpHdfs5jqbIFDA11MoKngIhQK0BeTVjA==}
-
-  unified-message-control@5.0.0:
-    resolution: {integrity: sha512-B2cSAkpuMVVmPP90KCfKdBhm1e9KYJ+zK3x5BCa0N65zpq1Ybkc9C77+M5qwR8FWO7RF3LM5QRRPZtgjW6DUCw==}
-
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
@@ -11177,15 +11101,9 @@ packages:
     resolution: {integrity: sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==}
     engines: {node: '>=12'}
 
-  unist-util-inspect@8.1.0:
-    resolution: {integrity: sha512-mOlg8Mp33pR0eeFpo5d2902ojqFFOKMMG2hF8bmH7ZlhnmjFgh0NI3/ZDwdaBJNbvrS7LZFVrBVtIE9KZ9s7vQ==}
-
   unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
 
-  unist-util-position-from-estree@2.0.0:
-    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
-
   unist-util-position@5.0.0:
     resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
 
@@ -11290,23 +11208,11 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
-  vfile-location@5.0.3:
-    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
-
   vfile-message@4.0.2:
     resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
 
-  vfile-reporter@8.1.1:
-    resolution: {integrity: sha512-qxRZcnFSQt6pWKn3PAk81yLK2rO2i7CDXpy8v8ZquiEOMLSnPw6BMSi9Y1sUCwGGl7a9b3CJT1CKpnRF7pp66g==}
-
-  vfile-sort@4.0.0:
-    resolution: {integrity: sha512-lffPI1JrbHDTToJwcq0rl6rBmkjQmMuXkAxsZPRS9DXbaJQvc642eCg6EGxcX2i1L+esbuhq+2l9tBll5v8AeQ==}
-
-  vfile-statistics@3.0.0:
-    resolution: {integrity: sha512-/qlwqwWBWFOmpXujL/20P+Iuydil0rZZNglR+VNm6J0gpLHwuVM5s7g2TfVoswbXjZ4HuIhLMySEyIw5i7/D8w==}
-
-  vfile@6.0.3:
-    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
   vite@7.3.1:
     resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
@@ -11348,13 +11254,13 @@ packages:
       yaml:
         optional: true
 
-  vite@8.0.10:
-    resolution: {integrity: sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==}
+  vite@8.0.13:
+    resolution: {integrity: sha512-MFtjBYgzmSxmgA4RAfjIyXWpGe1oALnjgUTzzV7QLx/TKxCzjtMH6Fd9/eVK+5Fg1qNoz5VAwsmMs/NofrmJvw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
       '@types/node': 20.19.39
-      '@vitejs/devtools': ^0.1.0
+      '@vitejs/devtools': ^0.1.18
       esbuild: ^0.27.0 || ^0.28.0
       jiti: '>=1.21.0'
       less: ^4.0.0
@@ -11439,9 +11345,6 @@ packages:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
 
-  walk-up-path@3.0.1:
-    resolution: {integrity: sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==}
-
   walk-up-path@4.0.0:
     resolution: {integrity: sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A==}
     engines: {node: 20 || >=22}
@@ -11512,11 +11415,6 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
-  which@4.0.0:
-    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
-    engines: {node: ^16.13.0 || >=18.0.0}
-    hasBin: true
-
   which@5.0.0:
     resolution: {integrity: sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -12753,7 +12651,7 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/css-calc@3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+  '@csstools/css-calc@3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
@@ -12773,7 +12671,7 @@ snapshots:
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
 
-  '@csstools/css-syntax-patches-for-csstree@1.1.3(css-tree@3.2.1)':
+  '@csstools/css-syntax-patches-for-csstree@1.1.4(css-tree@3.2.1)':
     optionalDependencies:
       css-tree: 3.2.1
 
@@ -12872,6 +12770,22 @@ snapshots:
 
   '@emotion/memoize@0.9.0': {}
 
+  '@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.4)
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      hoist-non-react-statics: 3.3.2
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+    transitivePeerDependencies:
+      - supports-color
+
   '@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -12924,6 +12838,10 @@ snapshots:
 
   '@emotion/unitless@0.10.0': {}
 
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+
   '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.2.6)':
     dependencies:
       react: 19.2.6
@@ -13524,7 +13442,7 @@ snapshots:
 
   '@mui/core-downloads-tracker@9.0.0': {}
 
-  '@mui/internal-babel-plugin-display-name@1.0.4-canary.19(@babel/core@7.29.0)(@babel/preset-react@7.28.5(@babel/core@7.29.0))':
+  '@mui/internal-babel-plugin-display-name@https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-display-name@56fef1cc85488b1eb32117151cf972c76f619373(@babel/core@7.29.0)(@babel/preset-react@7.28.5(@babel/core@7.29.0))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/helper-module-imports': 7.28.6
@@ -13541,12 +13459,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-babel-plugin-resolve-imports@2.0.7-canary.36(@babel/core@7.29.0)':
+  '@mui/internal-babel-plugin-minify-errors@https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-minify-errors@56fef1cc85488b1eb32117151cf972c76f619373(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      find-package-json: 1.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mui/internal-babel-plugin-resolve-imports@https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-resolve-imports@56fef1cc85488b1eb32117151cf972c76f619373(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
       resolve: 1.22.12
 
-  '@mui/internal-bundle-size-checker@1.0.9-canary.78(@types/node@20.19.39)(esbuild@0.27.2)(jiti@2.6.1)(rolldown@1.0.0-rc.17)(rollup@4.46.2)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)':
+  '@mui/internal-bundle-size-checker@1.0.9-canary.78(@types/node@20.19.39)(esbuild@0.27.2)(jiti@2.6.1)(rolldown@1.0.1)(rollup@4.46.2)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)':
     dependencies:
       '@octokit/rest': 22.0.1
       chalk: 5.6.2
@@ -13555,8 +13481,8 @@ snapshots:
       git-url-parse: 16.1.0
       micromatch: 4.0.8
       piscina: 5.1.4
-      rollup-plugin-visualizer: 7.0.1(rolldown@1.0.0-rc.17)(rollup@4.46.2)
-      vite: 8.0.10(@types/node@20.19.39)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)
+      rollup-plugin-visualizer: 7.0.1(rolldown@1.0.1)(rollup@4.46.2)
+      vite: 8.0.13(@types/node@20.19.39)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0)
       yargs: 18.0.0
       zod: 4.3.6
     transitivePeerDependencies:
@@ -13575,7 +13501,7 @@ snapshots:
       - tsx
       - yaml
 
-  '@mui/internal-code-infra@0.0.4-canary.45(@next/eslint-plugin-next@15.5.16)(@types/node@20.19.39)(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(jest-diff@30.2.0)(postcss@8.5.14)(prettier@3.8.3)(stylelint@17.11.0(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)':
+  '@mui/internal-code-infra@https://pkg.pr.new/mui/mui-public/@mui/internal-code-infra@56fef1c(@next/eslint-plugin-next@15.5.16)(@types/node@20.19.39)(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(jest-diff@30.2.0)(postcss@8.5.14)(prettier@3.8.3)(stylelint@17.11.0(typescript@5.9.3))(typescript@5.9.3)(vitest@4.0.13)':
     dependencies:
       '@argos-ci/core': 5.2.0
       '@babel/cli': 7.28.6(@babel/core@7.29.0)
@@ -13592,9 +13518,9 @@ snapshots:
       '@eslint/json': 1.1.0
       '@inquirer/confirm': 6.0.12(@types/node@20.19.39)
       '@inquirer/select': 5.1.4(@types/node@20.19.39)
-      '@mui/internal-babel-plugin-display-name': 1.0.4-canary.19(@babel/core@7.29.0)(@babel/preset-react@7.28.5(@babel/core@7.29.0))
-      '@mui/internal-babel-plugin-minify-errors': 2.0.8-canary.27(@babel/core@7.29.0)
-      '@mui/internal-babel-plugin-resolve-imports': 2.0.7-canary.36(@babel/core@7.29.0)
+      '@mui/internal-babel-plugin-display-name': https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-display-name@56fef1cc85488b1eb32117151cf972c76f619373(@babel/core@7.29.0)(@babel/preset-react@7.28.5(@babel/core@7.29.0))
+      '@mui/internal-babel-plugin-minify-errors': https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-minify-errors@56fef1cc85488b1eb32117151cf972c76f619373(@babel/core@7.29.0)
+      '@mui/internal-babel-plugin-resolve-imports': https://pkg.pr.new/mui/mui-public/@mui/internal-babel-plugin-resolve-imports@56fef1cc85488b1eb32117151cf972c76f619373(@babel/core@7.29.0)
       '@napi-rs/keyring': 1.2.0
       '@next/eslint-plugin-next': 15.5.16
       '@octokit/auth-action': 6.0.2
@@ -13603,7 +13529,7 @@ snapshots:
       '@pnpm/find-workspace-dir': 1000.1.5
       '@typescript-eslint/types': 8.58.0
       '@typescript-eslint/utils': 8.58.0(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3)
-      '@vitest/eslint-plugin': 1.6.16(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3)(vitest@4.0.13)
+      '@vitest/eslint-plugin': 1.6.17(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3)(vitest@4.0.13)
       babel-plugin-optimize-clsx: 2.6.2
       babel-plugin-react-compiler: 1.0.0
       babel-plugin-transform-import-meta: 2.3.3(@babel/core@7.29.0)
@@ -13620,9 +13546,8 @@ snapshots:
       eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1))
       eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1))
       eslint-plugin-compat: 7.0.1(eslint@10.3.0(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@10.3.0(jiti@2.6.1))
-      eslint-plugin-mdx: 3.7.0(eslint@10.3.0(jiti@2.6.1))
       eslint-plugin-mocha: 11.2.0(eslint@10.3.0(jiti@2.6.1))
       eslint-plugin-react: 7.37.5(eslint@10.3.0(jiti@2.6.1))
       eslint-plugin-react-compiler: 19.1.0-rc.2(eslint@10.3.0(jiti@2.6.1))
@@ -13641,20 +13566,7 @@ snapshots:
       regexp.escape: 2.0.1
       rehype-slug: 6.0.0
       rehype-stringify: 10.0.1
-      remark-frontmatter: 5.0.0
       remark-gfm: 4.0.1
-      remark-lint: 10.0.1
-      remark-lint-code-block-style: 4.0.1
-      remark-lint-fenced-code-flag: 4.2.0
-      remark-lint-heading-increment: 4.0.1
-      remark-lint-heading-style: 4.0.1
-      remark-lint-no-duplicate-headings: 4.0.1
-      remark-lint-no-empty-url: 4.0.1
-      remark-lint-no-heading-punctuation: 4.0.1
-      remark-lint-no-multiple-toplevel-headings: 4.0.1
-      remark-lint-no-undefined-references: 5.0.2
-      remark-lint-no-unused-definitions: 4.0.2
-      remark-lint-table-pipes: 5.0.1
       remark-parse: 11.0.0
       remark-rehype: 11.1.2
       resolve-pkg-maps: 1.0.0
@@ -13662,8 +13574,6 @@ snapshots:
       stylelint-config-standard: 40.0.0(stylelint@17.11.0(typescript@5.9.3))
       typescript-eslint: 8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3)
       unified: 11.0.5
-      unified-lint-rule: 3.0.1
-      unist-util-visit: 5.1.0
       yargs: 18.0.0
     optionalDependencies:
       typescript: 5.9.3
@@ -13672,7 +13582,6 @@ snapshots:
       - '@types/node'
       - '@typescript-eslint/eslint-plugin'
       - '@typescript-eslint/parser'
-      - bluebird
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - eslint-plugin-import-x
@@ -13680,7 +13589,6 @@ snapshots:
       - jest-diff
       - jest-snapshot
       - postcss
-      - remark-lint-file-extension
       - stylelint
       - supports-color
       - vitest
@@ -13726,11 +13634,11 @@ snapshots:
       '@emotion/server': 11.11.0(@emotion/css@11.13.4)
       '@types/react': 19.2.14
 
-  '@mui/material-pigment-css@9.0.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@5.9.3))(@types/react@19.2.14)(react@19.2.6)':
+  '@mui/material-pigment-css@9.0.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@6.0.3))(@types/react@19.2.14)(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@mui/system': 9.0.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6)
-      '@pigment-css/react': 0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@5.9.3)
+      '@pigment-css/react': 0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@6.0.3)
     transitivePeerDependencies:
       - '@emotion/react'
       - '@emotion/styled'
@@ -13759,7 +13667,7 @@ snapshots:
       '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6)
       '@types/react': 19.2.14
 
-  '@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@mui/material-pigment-css@9.0.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@5.9.3))(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@mui/material-pigment-css@9.0.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@6.0.3))(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@mui/core-downloads-tracker': 9.0.0
@@ -13778,7 +13686,7 @@ snapshots:
     optionalDependencies:
       '@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.6)
       '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6)
-      '@mui/material-pigment-css': 9.0.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@5.9.3))(@types/react@19.2.14)(react@19.2.6)
+      '@mui/material-pigment-css': 9.0.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@6.0.3))(@types/react@19.2.14)(react@19.2.6)
       '@types/react': 19.2.14
 
   '@mui/private-theming@5.17.1(@types/react@19.2.14)(react@19.2.6)':
@@ -13997,7 +13905,7 @@ snapshots:
       '@mui/system': link:packages/mui-system/build
       '@mui/utils': 9.0.0(@types/react@19.2.14)(react@19.2.6)
       '@mui/x-charts-vendor': 9.0.0
-      '@mui/x-internal-gestures': 9.1.0
+      '@mui/x-internal-gestures': 9.2.0
       '@mui/x-internals': 9.1.0(@types/react@19.2.14)(react@19.2.6)
       bezier-easing: 2.1.0
       clsx: 2.1.1
@@ -14155,7 +14063,7 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
-  '@mui/x-internal-gestures@9.1.0':
+  '@mui/x-internal-gestures@9.2.0':
     dependencies:
       '@babel/runtime': 7.29.2
 
@@ -14174,12 +14082,12 @@ snapshots:
       '@babel/runtime': 7.29.2
       '@mui/utils': 9.0.0(@types/react@19.2.14)(react@19.2.6)
       '@mui/x-internals': 9.1.0(@types/react@19.2.14)(react@19.2.6)
-      '@mui/x-telemetry': 9.1.0
+      '@mui/x-telemetry': 9.2.0
       react: 19.2.6
     transitivePeerDependencies:
       - '@types/react'
 
-  '@mui/x-telemetry@9.1.0':
+  '@mui/x-telemetry@9.2.0':
     dependencies:
       '@babel/runtime': 7.29.2
       '@fingerprintjs/fingerprintjs': 3.4.2
@@ -14356,7 +14264,7 @@ snapshots:
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@netlify/functions@5.2.0':
+  '@netlify/functions@5.2.1':
     dependencies:
       '@netlify/types': 2.6.0
 
@@ -14455,37 +14363,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@npmcli/config@8.3.4':
-    dependencies:
-      '@npmcli/map-workspaces': 3.0.6
-      '@npmcli/package-json': 5.2.1
-      ci-info: 4.4.0
-      ini: 4.1.3
-      nopt: 7.2.1
-      proc-log: 4.2.0
-      semver: 7.7.4
-      walk-up-path: 3.0.1
-    transitivePeerDependencies:
-      - bluebird
-
   '@npmcli/fs@4.0.0':
     dependencies:
       semver: 7.7.4
 
-  '@npmcli/git@5.0.8':
-    dependencies:
-      '@npmcli/promise-spawn': 7.0.2
-      ini: 4.1.3
-      lru-cache: 10.4.3
-      npm-pick-manifest: 9.1.0
-      proc-log: 4.2.0
-      promise-inflight: 1.0.1
-      promise-retry: 2.0.1
-      semver: 7.7.4
-      which: 4.0.0
-    transitivePeerDependencies:
-      - bluebird
-
   '@npmcli/git@6.0.3':
     dependencies:
       '@npmcli/promise-spawn': 8.0.3
@@ -14518,13 +14399,6 @@ snapshots:
       npm-bundled: 5.0.0
       npm-normalize-package-bin: 5.0.0
 
-  '@npmcli/map-workspaces@3.0.6':
-    dependencies:
-      '@npmcli/name-from-folder': 2.0.0
-      glob: 10.5.0
-      minimatch: 9.0.5
-      read-package-json-fast: 3.0.2
-
   '@npmcli/map-workspaces@5.0.3':
     dependencies:
       '@npmcli/name-from-folder': 4.0.0
@@ -14542,8 +14416,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@npmcli/name-from-folder@2.0.0': {}
-
   '@npmcli/name-from-folder@3.0.0': {}
 
   '@npmcli/name-from-folder@4.0.0': {}
@@ -14552,18 +14424,6 @@ snapshots:
 
   '@npmcli/node-gyp@5.0.0': {}
 
-  '@npmcli/package-json@5.2.1':
-    dependencies:
-      '@npmcli/git': 5.0.8
-      glob: 10.5.0
-      hosted-git-info: 7.0.2
-      json-parse-even-better-errors: 3.0.2
-      normalize-package-data: 6.0.2
-      proc-log: 4.2.0
-      semver: 7.7.4
-    transitivePeerDependencies:
-      - bluebird
-
   '@npmcli/package-json@7.0.2':
     dependencies:
       '@npmcli/git': 7.0.1
@@ -14574,10 +14434,6 @@ snapshots:
       semver: 7.7.4
       validate-npm-package-license: 3.0.4
 
-  '@npmcli/promise-spawn@7.0.2':
-    dependencies:
-      which: 4.0.0
-
   '@npmcli/promise-spawn@8.0.3':
     dependencies:
       which: 5.0.0
@@ -14830,7 +14686,7 @@ snapshots:
   '@opentelemetry/api@1.8.0':
     optional: true
 
-  '@oxc-project/types@0.127.0': {}
+  '@oxc-project/types@0.130.0': {}
 
   '@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@5.9.3)':
     dependencies:
@@ -14862,10 +14718,40 @@ snapshots:
       - supports-color
       - typescript
 
+  '@pigment-css/react@0.0.30(@types/react@19.2.14)(react@19.2.6)(typescript@6.0.3)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@emotion/css': 11.13.4
+      '@emotion/is-prop-valid': 1.4.0
+      '@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.6)
+      '@emotion/serialize': 1.3.3
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6)
+      '@mui/system': 6.4.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6))(@types/react@19.2.14)(react@19.2.6)
+      '@mui/utils': 6.4.8(@types/react@19.2.14)(react@19.2.6)
+      '@wyw-in-js/processor-utils': 0.5.5
+      '@wyw-in-js/shared': 0.5.5
+      '@wyw-in-js/transform': 0.5.5(typescript@6.0.3)
+      clsx: 2.1.1
+      cssesc: 3.0.0
+      csstype: 3.2.3
+      lodash: 4.18.1
+      prop-types: 15.8.1
+      react: 19.2.6
+      stylis: 4.4.0
+      stylis-plugin-rtl: 2.1.1(stylis@4.4.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+      - typescript
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@pkgr/core@0.2.9': {}
+  '@pkgr/core@0.2.7': {}
 
   '@playwright/test@1.59.1':
     dependencies:
@@ -14918,58 +14804,58 @@ snapshots:
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.17':
+  '@rolldown/binding-android-arm64@1.0.1':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.17':
+  '@rolldown/binding-darwin-arm64@1.0.1':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.17':
+  '@rolldown/binding-darwin-x64@1.0.1':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.17':
+  '@rolldown/binding-freebsd-x64@1.0.1':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.17':
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.1':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.17':
+  '@rolldown/binding-linux-arm64-gnu@1.0.1':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17':
+  '@rolldown/binding-linux-arm64-musl@1.0.1':
     optional: true
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17':
+  '@rolldown/binding-linux-ppc64-gnu@1.0.1':
     optional: true
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17':
+  '@rolldown/binding-linux-s390x-gnu@1.0.1':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17':
+  '@rolldown/binding-linux-x64-gnu@1.0.1':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.17':
+  '@rolldown/binding-linux-x64-musl@1.0.1':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.17':
+  '@rolldown/binding-openharmony-arm64@1.0.1':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.17':
+  '@rolldown/binding-wasm32-wasi@1.0.1':
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
       '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.17':
+  '@rolldown/binding-win32-arm64-msvc@1.0.1':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.17':
+  '@rolldown/binding-win32-x64-msvc@1.0.1':
     optional: true
 
   '@rolldown/pluginutils@1.0.0-beta.47': {}
 
-  '@rolldown/pluginutils@1.0.0-rc.17': {}
+  '@rolldown/pluginutils@1.0.1': {}
 
   '@rollup/rollup-android-arm-eabi@4.46.2':
     optional: true
@@ -15098,10 +14984,10 @@ snapshots:
       '@slack/logger': 4.0.1
       '@slack/oauth': 3.0.5
       '@slack/socket-mode': 2.0.7
-      '@slack/types': 2.20.1
-      '@slack/web-api': 7.15.1
+      '@slack/types': 2.21.1
+      '@slack/web-api': 7.16.0
       '@types/express': 5.0.0
-      axios: 1.16.0
+      axios: 1.16.1
       express: 5.0.1
       path-to-regexp: 8.1.0
       raw-body: 3.0.0
@@ -15119,17 +15005,18 @@ snapshots:
   '@slack/oauth@3.0.5':
     dependencies:
       '@slack/logger': 4.0.1
-      '@slack/web-api': 7.15.1
+      '@slack/web-api': 7.16.0
       '@types/jsonwebtoken': 9.0.7
       '@types/node': 20.19.39
       jsonwebtoken: 9.0.0
     transitivePeerDependencies:
       - debug
+      - supports-color
 
   '@slack/socket-mode@2.0.7':
     dependencies:
       '@slack/logger': 4.0.1
-      '@slack/web-api': 7.15.1
+      '@slack/web-api': 7.16.0
       '@types/node': 20.19.39
       '@types/ws': 8.18.1
       eventemitter3: 5.0.1
@@ -15137,17 +15024,18 @@ snapshots:
     transitivePeerDependencies:
       - bufferutil
       - debug
+      - supports-color
       - utf-8-validate
 
-  '@slack/types@2.20.1': {}
+  '@slack/types@2.21.1': {}
 
-  '@slack/web-api@7.15.1':
+  '@slack/web-api@7.16.0':
     dependencies:
       '@slack/logger': 4.0.1
-      '@slack/types': 2.20.1
+      '@slack/types': 2.21.1
       '@types/node': 20.19.39
       '@types/retry': 0.12.0
-      axios: 1.16.0
+      axios: 1.16.1
       eventemitter3: 5.0.1
       form-data: 4.0.5
       is-electron: 2.2.2
@@ -15157,6 +15045,7 @@ snapshots:
       retry: 0.13.1
     transitivePeerDependencies:
       - debug
+      - supports-color
 
   '@standard-schema/spec@1.0.0': {}
 
@@ -15164,80 +15053,80 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tailwindcss/node@4.2.4':
+  '@tailwindcss/node@4.3.0':
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.20.0
+      enhanced-resolve: 5.21.3
       jiti: 2.6.1
       lightningcss: 1.32.0
       magic-string: 0.30.21
       source-map-js: 1.2.1
-      tailwindcss: 4.2.4
+      tailwindcss: 4.3.0
 
-  '@tailwindcss/oxide-android-arm64@4.2.4':
+  '@tailwindcss/oxide-android-arm64@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.2.4':
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.2.4':
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.2.4':
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.4':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.4':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.4':
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.4':
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.2.4':
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.2.4':
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.4':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.4':
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide@4.2.4':
+  '@tailwindcss/oxide@4.3.0':
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.2.4
-      '@tailwindcss/oxide-darwin-arm64': 4.2.4
-      '@tailwindcss/oxide-darwin-x64': 4.2.4
-      '@tailwindcss/oxide-freebsd-x64': 4.2.4
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.4
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.4
-      '@tailwindcss/oxide-linux-arm64-musl': 4.2.4
-      '@tailwindcss/oxide-linux-x64-gnu': 4.2.4
-      '@tailwindcss/oxide-linux-x64-musl': 4.2.4
-      '@tailwindcss/oxide-wasm32-wasi': 4.2.4
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.4
-      '@tailwindcss/oxide-win32-x64-msvc': 4.2.4
-
-  '@tailwindcss/postcss@4.2.4':
+      '@tailwindcss/oxide-android-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-x64': 4.3.0
+      '@tailwindcss/oxide-freebsd-x64': 4.3.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.0
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.0
+
+  '@tailwindcss/postcss@4.3.0':
     dependencies:
       '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.2.4
-      '@tailwindcss/oxide': 4.2.4
+      '@tailwindcss/node': 4.3.0
+      '@tailwindcss/oxide': 4.3.0
       postcss: 8.5.14
-      tailwindcss: 4.2.4
+      tailwindcss: 4.3.0
 
-  '@tanstack/query-core@5.100.9': {}
+  '@tanstack/query-core@5.100.10': {}
 
-  '@tanstack/react-query@5.100.9(react@19.2.6)':
+  '@tanstack/react-query@5.100.10(react@19.2.6)':
     dependencies:
-      '@tanstack/query-core': 5.100.9
+      '@tanstack/query-core': 5.100.10
       react: 19.2.6
 
   '@tanstack/react-virtual@3.13.24(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
@@ -15334,10 +15223,6 @@ snapshots:
 
   '@types/chance@1.1.8': {}
 
-  '@types/concat-stream@2.0.3':
-    dependencies:
-      '@types/node': 20.19.39
-
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 20.19.39
@@ -15383,10 +15268,6 @@ snapshots:
 
   '@types/esrecurse@4.3.1': {}
 
-  '@types/estree-jsx@1.0.5':
-    dependencies:
-      '@types/estree': 1.0.8
-
   '@types/estree@1.0.8': {}
 
   '@types/express-serve-static-core@5.1.1':
@@ -15422,8 +15303,6 @@ snapshots:
     dependencies:
       '@types/node': 20.19.39
 
-  '@types/is-empty@1.2.3': {}
-
   '@types/jscodeshift@0.12.0':
     dependencies:
       ast-types: 0.14.2
@@ -15513,8 +15392,6 @@ snapshots:
 
   '@types/stylis@4.2.7': {}
 
-  '@types/supports-color@8.1.3': {}
-
   '@types/tough-cookie@4.0.5':
     optional: true
 
@@ -15798,7 +15675,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/eslint-plugin@1.6.16(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3)(vitest@4.0.13)':
+  '@vitest/eslint-plugin@1.6.17(@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3)(vitest@4.0.13)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.58.0
       '@typescript-eslint/utils': 8.58.0(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3)
@@ -15895,6 +15772,27 @@ snapshots:
       - supports-color
       - typescript
 
+  '@wyw-in-js/transform@0.5.5(typescript@6.0.3)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/plugin-transform-modules-commonjs': 7.28.6(@babel/core@7.29.0)
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@wyw-in-js/processor-utils': 0.5.5
+      '@wyw-in-js/shared': 0.5.5
+      babel-merge: 3.0.0(@babel/core@7.29.0)
+      cosmiconfig: 8.3.6(typescript@6.0.3)
+      happy-dom: 15.11.6
+      source-map: 0.7.4
+      stylis: 4.4.0
+      ts-invariant: 0.10.3
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@yarnpkg/lockfile@1.1.0': {}
 
   '@yarnpkg/parsers@3.0.2':
@@ -15913,8 +15811,6 @@ snapshots:
       jsonparse: 1.3.1
       through: 2.3.8
 
-  abbrev@2.0.0: {}
-
   abbrev@3.0.1: {}
 
   abbrev@4.0.0: {}
@@ -15938,6 +15834,12 @@ snapshots:
 
   add-stream@1.0.0: {}
 
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   agent-base@7.1.4: {}
 
   aggregate-error@3.1.0:
@@ -16168,13 +16070,15 @@ snapshots:
 
   axe-core@4.11.1: {}
 
-  axios@1.16.0:
+  axios@1.16.1:
     dependencies:
       follow-redirects: 1.16.0
       form-data: 4.0.5
+      https-proxy-agent: 5.0.1
       proxy-from-env: 2.1.0
     transitivePeerDependencies:
       - debug
+      - supports-color
 
   axobject-query@4.1.0: {}
 
@@ -16345,7 +16249,7 @@ snapshots:
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.9.11
-      caniuse-lite: 1.0.30001792
+      caniuse-lite: 1.0.30001793
       electron-to-chromium: 1.5.267
       node-releases: 2.0.27
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
@@ -16432,7 +16336,7 @@ snapshots:
   camelize@1.0.0:
     optional: true
 
-  caniuse-lite@1.0.30001792: {}
+  caniuse-lite@1.0.30001793: {}
 
   ccount@2.0.1: {}
 
@@ -16584,8 +16488,6 @@ snapshots:
 
   cmd-shim@7.0.0: {}
 
-  collapse-white-space@2.1.0: {}
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -16787,6 +16689,15 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  cosmiconfig@8.3.6(typescript@6.0.3):
+    dependencies:
+      import-fresh: 3.3.0
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+    optionalDependencies:
+      typescript: 6.0.3
+
   cosmiconfig@9.0.0(typescript@5.9.3):
     dependencies:
       env-paths: 2.2.1
@@ -17163,10 +17074,10 @@ snapshots:
     dependencies:
       once: 1.4.0
 
-  enhanced-resolve@5.20.0:
+  enhanced-resolve@5.21.3:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.3.0
+      tapable: 2.3.3
 
   enquirer@2.3.6:
     dependencies:
@@ -17371,27 +17282,8 @@ snapshots:
       tinyglobby: 0.2.16
       unrs-resolver: 1.9.2
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0(jiti@2.6.1))
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-mdx@3.7.0(eslint@10.3.0(jiti@2.6.1)):
-    dependencies:
-      acorn: 8.16.0
-      acorn-jsx: 5.3.2(acorn@8.16.0)
-      eslint: 10.3.0(jiti@2.6.1)
-      espree: 10.4.0
-      estree-util-visit: 2.0.0
-      remark-mdx: 3.1.1
-      remark-parse: 11.0.0
-      remark-stringify: 11.0.0
-      synckit: 0.11.12
-      unified: 11.0.5
-      unified-engine: 11.2.2
-      unist-util-visit: 5.1.0
-      vfile: 6.0.3
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1))
     transitivePeerDependencies:
-      - bluebird
       - supports-color
 
   eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1)):
@@ -17421,7 +17313,7 @@ snapshots:
       lodash: 4.18.1
       pkg-dir: 5.0.0
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0(jiti@2.6.1)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1)))(eslint@10.3.0(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -17469,24 +17361,6 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-mdx@3.7.0(eslint@10.3.0(jiti@2.6.1)):
-    dependencies:
-      eslint: 10.3.0(jiti@2.6.1)
-      eslint-mdx: 3.7.0(eslint@10.3.0(jiti@2.6.1))
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-mdx: 3.0.0
-      micromark-extension-mdxjs: 3.0.0
-      remark-mdx: 3.1.1
-      remark-parse: 11.0.0
-      remark-stringify: 11.0.0
-      synckit: 0.11.12
-      unified: 11.0.5
-      vfile: 6.0.3
-    transitivePeerDependencies:
-      - bluebird
-      - remark-lint-file-extension
-      - supports-color
-
   eslint-plugin-mocha@11.2.0(eslint@10.3.0(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.3.0(jiti@2.6.1))
@@ -17556,8 +17430,6 @@ snapshots:
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint-visitor-keys@4.2.1: {}
-
   eslint-visitor-keys@5.0.1: {}
 
   eslint@10.3.0(jiti@2.6.1):
@@ -17597,12 +17469,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  espree@10.4.0:
-    dependencies:
-      acorn: 8.16.0
-      acorn-jsx: 5.3.2(acorn@8.16.0)
-      eslint-visitor-keys: 4.2.1
-
   espree@11.2.0:
     dependencies:
       acorn: 8.16.0
@@ -17621,13 +17487,6 @@ snapshots:
 
   estraverse@5.3.0: {}
 
-  estree-util-is-identifier-name@3.0.0: {}
-
-  estree-util-visit@2.0.0:
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/unist': 3.0.2
-
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.8
@@ -17803,10 +17662,6 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
-  fault@2.0.1:
-    dependencies:
-      format: 0.2.2
-
   fdir@6.5.0(picomatch@4.0.4):
     optionalDependencies:
       picomatch: 4.0.4
@@ -17940,8 +17795,6 @@ snapshots:
 
   format-util@1.0.5: {}
 
-  format@0.2.2: {}
-
   forwarded@0.2.0: {}
 
   fresh@0.5.2: {}
@@ -18283,10 +18136,6 @@ snapshots:
     dependencies:
       lru-cache: 6.0.0
 
-  hosted-git-info@7.0.2:
-    dependencies:
-      lru-cache: 10.4.3
-
   hosted-git-info@8.1.0:
     dependencies:
       lru-cache: 10.4.3
@@ -18346,6 +18195,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
@@ -18381,8 +18237,6 @@ snapshots:
 
   ignore@5.3.2: {}
 
-  ignore@6.0.2: {}
-
   ignore@7.0.5: {}
 
   imask@7.6.1:
@@ -18418,8 +18272,6 @@ snapshots:
 
   ini@1.3.8: {}
 
-  ini@4.1.3: {}
-
   ini@5.0.0: {}
 
   ini@6.0.0: {}
@@ -18530,8 +18382,6 @@ snapshots:
 
   is-electron@2.2.2: {}
 
-  is-empty@1.2.0: {}
-
   is-extendable@1.0.1:
     dependencies:
       is-plain-object: 2.0.4
@@ -18837,8 +18687,6 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
-  json-parse-even-better-errors@3.0.2: {}
-
   json-parse-even-better-errors@4.0.0: {}
 
   json-parse-even-better-errors@5.0.0: {}
@@ -19180,13 +19028,6 @@ snapshots:
       strip-bom: 4.0.0
       type-fest: 0.6.0
 
-  load-plugin@6.0.3:
-    dependencies:
-      '@npmcli/config': 8.3.4
-      import-meta-resolve: 4.2.0
-    transitivePeerDependencies:
-      - bluebird
-
   locate-path@2.0.0:
     dependencies:
       p-locate: 2.0.0
@@ -19317,7 +19158,7 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
-  markdown-to-jsx@9.7.16(react@19.2.6):
+  markdown-to-jsx@9.8.0(react@19.2.6):
     optionalDependencies:
       react: 19.2.6
 
@@ -19383,13 +19224,6 @@ snapshots:
 
   mathml-tag-names@4.0.0: {}
 
-  mdast-comment-marker@3.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-mdx-expression: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
-
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -19397,7 +19231,7 @@ snapshots:
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  mdast-util-from-markdown@2.0.3:
+  mdast-util-from-markdown@2.0.1:
     dependencies:
       '@types/mdast': 4.0.4
       '@types/unist': 3.0.2
@@ -19414,17 +19248,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-frontmatter@2.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      escape-string-regexp: 5.0.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.0
-      micromark-extension-frontmatter: 2.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   mdast-util-gfm-autolink-literal@2.0.1:
     dependencies:
       '@types/mdast': 4.0.4
@@ -19437,7 +19260,7 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
+      mdast-util-from-markdown: 2.0.1
       mdast-util-to-markdown: 2.1.0
       micromark-util-normalize-identifier: 2.0.0
     transitivePeerDependencies:
@@ -19446,7 +19269,7 @@ snapshots:
   mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.3
+      mdast-util-from-markdown: 2.0.1
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
@@ -19456,7 +19279,7 @@ snapshots:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
       markdown-table: 3.0.4
-      mdast-util-from-markdown: 2.0.3
+      mdast-util-from-markdown: 2.0.1
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
@@ -19465,14 +19288,14 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
+      mdast-util-from-markdown: 2.0.1
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-gfm@3.1.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.3
+      mdast-util-from-markdown: 2.0.1
       mdast-util-gfm-autolink-literal: 2.0.1
       mdast-util-gfm-footnote: 2.1.0
       mdast-util-gfm-strikethrough: 2.0.0
@@ -19482,59 +19305,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-heading-style@3.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-
-  mdast-util-mdx-expression@2.0.1:
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.0
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-mdx-jsx@3.2.0:
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
-      ccount: 2.0.1
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.0
-      parse-entities: 4.0.2
-      stringify-entities: 4.0.4
-      unist-util-stringify-position: 4.0.0
-      vfile-message: 4.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-mdx@3.0.0:
-    dependencies:
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-mdx-expression: 2.0.1
-      mdast-util-mdx-jsx: 3.2.0
-      mdast-util-mdxjs-esm: 2.0.1
-      mdast-util-to-markdown: 2.1.0
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-mdxjs-esm@2.0.1:
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.0
-    transitivePeerDependencies:
-      - supports-color
-
   mdast-util-phrasing@4.1.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -19630,13 +19400,6 @@ snapshots:
       micromark-util-types: 2.0.2
       parse-entities: 4.0.2
 
-  micromark-extension-frontmatter@2.0.0:
-    dependencies:
-      fault: 2.0.1
-      micromark-util-character: 2.1.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.2
-
   micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
       micromark-util-character: 2.1.0
@@ -19705,57 +19468,6 @@ snapshots:
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.2
 
-  micromark-extension-mdx-expression@3.0.1:
-    dependencies:
-      '@types/estree': 1.0.8
-      devlop: 1.1.0
-      micromark-factory-mdx-expression: 2.0.3
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-events-to-acorn: 2.0.3
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.2
-
-  micromark-extension-mdx-jsx@3.0.2:
-    dependencies:
-      '@types/estree': 1.0.8
-      devlop: 1.1.0
-      estree-util-is-identifier-name: 3.0.0
-      micromark-factory-mdx-expression: 2.0.3
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-events-to-acorn: 2.0.3
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.2
-      vfile-message: 4.0.2
-
-  micromark-extension-mdx-md@2.0.0:
-    dependencies:
-      micromark-util-types: 2.0.2
-
-  micromark-extension-mdxjs-esm@3.0.0:
-    dependencies:
-      '@types/estree': 1.0.8
-      devlop: 1.1.0
-      micromark-core-commonmark: 2.0.3
-      micromark-util-character: 2.1.0
-      micromark-util-events-to-acorn: 2.0.3
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.2
-      unist-util-position-from-estree: 2.0.0
-      vfile-message: 4.0.2
-
-  micromark-extension-mdxjs@3.0.0:
-    dependencies:
-      acorn: 8.16.0
-      acorn-jsx: 5.3.2(acorn@8.16.0)
-      micromark-extension-mdx-expression: 3.0.1
-      micromark-extension-mdx-jsx: 3.0.2
-      micromark-extension-mdx-md: 2.0.0
-      micromark-extension-mdxjs-esm: 3.0.0
-      micromark-util-combine-extensions: 2.0.0
-      micromark-util-types: 2.0.2
-
   micromark-factory-destination@2.0.0:
     dependencies:
       micromark-util-character: 2.1.0
@@ -19769,18 +19481,6 @@ snapshots:
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.2
 
-  micromark-factory-mdx-expression@2.0.3:
-    dependencies:
-      '@types/estree': 1.0.8
-      devlop: 1.1.0
-      micromark-factory-space: 2.0.0
-      micromark-util-character: 2.1.0
-      micromark-util-events-to-acorn: 2.0.3
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.2
-      unist-util-position-from-estree: 2.0.0
-      vfile-message: 4.0.2
-
   micromark-factory-space@2.0.0:
     dependencies:
       micromark-util-character: 2.1.0
@@ -19833,16 +19533,6 @@ snapshots:
 
   micromark-util-encode@2.0.0: {}
 
-  micromark-util-events-to-acorn@2.0.3:
-    dependencies:
-      '@types/estree': 1.0.8
-      '@types/unist': 3.0.2
-      devlop: 1.1.0
-      estree-util-visit: 2.0.0
-      micromark-util-symbol: 2.0.0
-      micromark-util-types: 2.0.2
-      vfile-message: 4.0.2
-
   micromark-util-html-tag-name@2.0.0: {}
 
   micromark-util-normalize-identifier@2.0.0:
@@ -20068,7 +19758,7 @@ snapshots:
     dependencies:
       '@next/env': 15.5.16
       '@swc/helpers': 0.5.15
-      caniuse-lite: 1.0.30001792
+      caniuse-lite: 1.0.30001793
       postcss: 8.4.31
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
@@ -20143,10 +19833,6 @@ snapshots:
 
   node-releases@2.0.27: {}
 
-  nopt@7.2.1:
-    dependencies:
-      abbrev: 2.0.0
-
   nopt@8.1.0:
     dependencies:
       abbrev: 3.0.1
@@ -20169,12 +19855,6 @@ snapshots:
       semver: 7.7.4
       validate-npm-package-license: 3.0.4
 
-  normalize-package-data@6.0.2:
-    dependencies:
-      hosted-git-info: 7.0.2
-      semver: 7.7.4
-      validate-npm-package-license: 3.0.4
-
   normalize-path@3.0.0: {}
 
   notistack@3.0.2(csstype@3.2.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
@@ -20194,10 +19874,6 @@ snapshots:
     dependencies:
       npm-normalize-package-bin: 5.0.0
 
-  npm-install-checks@6.3.0:
-    dependencies:
-      semver: 7.7.4
-
   npm-install-checks@7.1.2:
     dependencies:
       semver: 7.7.4
@@ -20206,19 +19882,10 @@ snapshots:
     dependencies:
       semver: 7.7.4
 
-  npm-normalize-package-bin@3.0.1: {}
-
   npm-normalize-package-bin@4.0.0: {}
 
   npm-normalize-package-bin@5.0.0: {}
 
-  npm-package-arg@11.0.3:
-    dependencies:
-      hosted-git-info: 7.0.2
-      proc-log: 4.2.0
-      semver: 7.7.4
-      validate-npm-package-name: 5.0.1
-
   npm-package-arg@12.0.2:
     dependencies:
       hosted-git-info: 8.1.0
@@ -20252,13 +19919,6 @@ snapshots:
       npm-package-arg: 13.0.1
       semver: 7.7.4
 
-  npm-pick-manifest@9.1.0:
-    dependencies:
-      npm-install-checks: 6.3.0
-      npm-normalize-package-bin: 3.0.1
-      npm-package-arg: 11.0.3
-      semver: 7.7.4
-
   npm-registry-fetch@19.1.0:
     dependencies:
       '@npmcli/redact': 3.2.2
@@ -20303,7 +19963,7 @@ snapshots:
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.2
       '@zkochan/js-yaml': 0.0.7
-      axios: 1.16.0
+      axios: 1.16.1
       chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
@@ -20346,6 +20006,7 @@ snapshots:
       '@nx/nx-win32-x64-msvc': 20.8.4
     transitivePeerDependencies:
       - debug
+      - supports-color
 
   nx@21.6.8:
     dependencies:
@@ -20353,7 +20014,7 @@ snapshots:
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.2
       '@zkochan/js-yaml': 0.0.7
-      axios: 1.16.0
+      axios: 1.16.1
       chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
@@ -20397,6 +20058,7 @@ snapshots:
       '@nx/nx-win32-x64-msvc': 21.6.8
     transitivePeerDependencies:
       - debug
+      - supports-color
 
   object-assign@4.1.1: {}
 
@@ -20679,14 +20341,6 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
-  parse-json@7.1.1:
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      error-ex: 1.3.2
-      json-parse-even-better-errors: 3.0.2
-      lines-and-columns: 2.0.3
-      type-fest: 3.13.1
-
   parse-ms@4.0.0: {}
 
   parse-passwd@1.0.0: {}
@@ -20920,7 +20574,7 @@ snapshots:
 
   pretty-quick@4.2.2(prettier@3.8.3):
     dependencies:
-      '@pkgr/core': 0.2.9
+      '@pkgr/core': 0.2.7
       ignore: 7.0.5
       mri: 1.2.0
       picocolors: 1.1.1
@@ -20931,8 +20585,6 @@ snapshots:
 
   prismjs@1.30.0: {}
 
-  proc-log@4.2.0: {}
-
   proc-log@5.0.0: {}
 
   proc-log@6.0.0: {}
@@ -20947,8 +20599,6 @@ snapshots:
 
   promise-call-limit@3.0.2: {}
 
-  promise-inflight@1.0.1: {}
-
   promise-retry@2.0.1:
     dependencies:
       err-code: 2.0.3
@@ -21009,8 +20659,6 @@ snapshots:
 
   quick-lru@4.0.1: {}
 
-  quotation@2.0.3: {}
-
   range-parser@1.2.0: {}
 
   range-parser@1.2.1: {}
@@ -21149,7 +20797,7 @@ snapshots:
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
 
-  react-virtuoso@4.18.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+  react-virtuoso@4.18.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
@@ -21159,6 +20807,8 @@ snapshots:
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
 
+  react@19.2.4: {}
+
   react@19.2.6: {}
 
   read-cache@1.0.0:
@@ -21169,11 +20819,6 @@ snapshots:
 
   read-cmd-shim@5.0.0: {}
 
-  read-package-json-fast@3.0.2:
-    dependencies:
-      json-parse-even-better-errors: 3.0.2
-      npm-normalize-package-bin: 3.0.1
-
   read-pkg-up@3.0.0:
     dependencies:
       find-up: 2.1.0
@@ -21340,15 +20985,6 @@ snapshots:
       hast-util-to-html: 9.0.5
       unified: 11.0.5
 
-  remark-frontmatter@5.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-frontmatter: 2.0.1
-      micromark-extension-frontmatter: 2.0.0
-      unified: 11.0.5
-    transitivePeerDependencies:
-      - supports-color
-
   remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4
@@ -21360,139 +20996,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  remark-lint-code-block-style@4.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-phrasing: 4.1.0
-      unified-lint-rule: 3.0.1
-      unist-util-position: 5.0.0
-      unist-util-visit-parents: 6.0.1
-      vfile-message: 4.0.2
-
-  remark-lint-fenced-code-flag@4.2.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-phrasing: 4.1.0
-      quotation: 2.0.3
-      unified-lint-rule: 3.0.1
-      unist-util-position: 5.0.0
-      unist-util-visit-parents: 6.0.1
-
-  remark-lint-heading-increment@4.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-mdx: 3.0.0
-      unified-lint-rule: 3.0.1
-      unist-util-visit-parents: 6.0.1
-      vfile-message: 4.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-lint-heading-style@4.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-heading-style: 3.0.0
-      mdast-util-phrasing: 4.1.0
-      unified-lint-rule: 3.0.1
-      unist-util-position: 5.0.0
-      unist-util-visit-parents: 6.0.1
-      vfile-message: 4.0.2
-
-  remark-lint-no-duplicate-headings@4.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-mdx: 3.0.0
-      mdast-util-to-string: 4.0.0
-      unified-lint-rule: 3.0.1
-      unist-util-visit-parents: 6.0.1
-      vfile-message: 4.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-lint-no-empty-url@4.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      unified-lint-rule: 3.0.1
-      unist-util-visit-parents: 6.0.1
-
-  remark-lint-no-heading-punctuation@4.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-mdx: 3.0.0
-      mdast-util-to-string: 4.0.0
-      unified-lint-rule: 3.0.1
-      unist-util-visit-parents: 6.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-lint-no-multiple-toplevel-headings@4.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-mdx: 3.0.0
-      unified-lint-rule: 3.0.1
-      unist-util-visit-parents: 6.0.1
-      vfile-message: 4.0.2
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-lint-no-undefined-references@5.0.2:
-    dependencies:
-      '@types/mdast': 4.0.4
-      collapse-white-space: 2.1.0
-      devlop: 1.1.0
-      micromark-util-normalize-identifier: 2.0.0
-      unified-lint-rule: 3.0.1
-      unist-util-position: 5.0.0
-      unist-util-visit-parents: 6.0.1
-      vfile-location: 5.0.3
-
-  remark-lint-no-unused-definitions@4.0.2:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      unified-lint-rule: 3.0.1
-      unist-util-visit-parents: 6.0.1
-
-  remark-lint-table-pipes@5.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
-      mdast-util-phrasing: 4.1.0
-      unified-lint-rule: 3.0.1
-      unist-util-position: 5.0.0
-      unist-util-visit-parents: 6.0.1
-
-  remark-lint@10.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      remark-message-control: 8.0.0
-      unified: 11.0.5
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-mdx@3.1.1:
-    dependencies:
-      mdast-util-mdx: 3.0.0
-      micromark-extension-mdxjs: 3.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  remark-message-control@8.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-comment-marker: 3.0.0
-      unified-message-control: 5.0.0
-      vfile: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.3
+      mdast-util-from-markdown: 2.0.1
       micromark-util-types: 2.0.2
       unified: 11.0.5
     transitivePeerDependencies:
@@ -21578,35 +21085,35 @@ snapshots:
       glob: 13.0.6
       package-json-from-dist: 1.0.1
 
-  rolldown@1.0.0-rc.17:
+  rolldown@1.0.1:
     dependencies:
-      '@oxc-project/types': 0.127.0
-      '@rolldown/pluginutils': 1.0.0-rc.17
+      '@oxc-project/types': 0.130.0
+      '@rolldown/pluginutils': 1.0.1
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-rc.17
-      '@rolldown/binding-darwin-arm64': 1.0.0-rc.17
-      '@rolldown/binding-darwin-x64': 1.0.0-rc.17
-      '@rolldown/binding-freebsd-x64': 1.0.0-rc.17
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.17
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.17
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.17
-      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.17
-      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.17
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.17
-      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.17
-      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.17
-      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.17
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.17
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.17
-
-  rollup-plugin-visualizer@7.0.1(rolldown@1.0.0-rc.17)(rollup@4.46.2):
+      '@rolldown/binding-android-arm64': 1.0.1
+      '@rolldown/binding-darwin-arm64': 1.0.1
+      '@rolldown/binding-darwin-x64': 1.0.1
+      '@rolldown/binding-freebsd-x64': 1.0.1
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.1
+      '@rolldown/binding-linux-arm64-gnu': 1.0.1
+      '@rolldown/binding-linux-arm64-musl': 1.0.1
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.1
+      '@rolldown/binding-linux-s390x-gnu': 1.0.1
+      '@rolldown/binding-linux-x64-gnu': 1.0.1
+      '@rolldown/binding-linux-x64-musl': 1.0.1
+      '@rolldown/binding-openharmony-arm64': 1.0.1
+      '@rolldown/binding-wasm32-wasi': 1.0.1
+      '@rolldown/binding-win32-arm64-msvc': 1.0.1
+      '@rolldown/binding-win32-x64-msvc': 1.0.1
+
+  rollup-plugin-visualizer@7.0.1(rolldown@1.0.1)(rollup@4.46.2):
     dependencies:
       open: 11.0.0
       picomatch: 4.0.4
       source-map: 0.7.4
       yargs: 18.0.0
     optionalDependencies:
-      rolldown: 1.0.0-rc.17
+      rolldown: 1.0.1
       rollup: 4.46.2
 
   rollup@4.46.2:
@@ -22043,12 +21550,6 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.1.2
 
-  string-width@6.1.0:
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 10.4.0
-      strip-ansi: 7.1.2
-
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.4.0
@@ -22187,9 +21688,9 @@ snapshots:
 
   stylelint@17.11.0(typescript@5.9.3):
     dependencies:
-      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-syntax-patches-for-csstree': 1.1.3(css-tree@3.2.1)
+      '@csstools/css-syntax-patches-for-csstree': 1.1.4(css-tree@3.2.1)
       '@csstools/css-tokenizer': 4.0.0
       '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/selector-resolve-nested': 4.0.0(postcss-selector-parser@7.1.1)
@@ -22263,8 +21764,6 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  supports-color@9.4.0: {}
-
   supports-hyperlinks@3.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -22291,10 +21790,6 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
-  synckit@0.11.12:
-    dependencies:
-      '@pkgr/core': 0.2.9
-
   system-architecture@0.1.0: {}
 
   table@6.9.0:
@@ -22307,7 +21802,9 @@ snapshots:
 
   tailwindcss@4.2.4: {}
 
-  tapable@2.3.0: {}
+  tailwindcss@4.3.0: {}
+
+  tapable@2.3.3: {}
 
   tar-stream@2.2.0:
     dependencies:
@@ -22496,8 +21993,6 @@ snapshots:
 
   type-fest@2.19.0: {}
 
-  type-fest@3.13.1: {}
-
   type-fest@4.41.0:
     optional: true
 
@@ -22562,6 +22057,8 @@ snapshots:
 
   typescript@5.9.3: {}
 
+  typescript@6.0.3: {}
+
   uc.micro@2.1.0: {}
 
   uglify-js@3.19.3:
@@ -22593,51 +22090,6 @@ snapshots:
 
   unicorn-magic@0.4.0: {}
 
-  unified-engine@11.2.2:
-    dependencies:
-      '@types/concat-stream': 2.0.3
-      '@types/debug': 4.1.12
-      '@types/is-empty': 1.2.3
-      '@types/node': 20.19.39
-      '@types/unist': 3.0.2
-      concat-stream: 2.0.0
-      debug: 4.4.3
-      extend: 3.0.2
-      glob: 10.5.0
-      ignore: 6.0.2
-      is-empty: 1.2.0
-      is-plain-obj: 4.1.0
-      load-plugin: 6.0.3
-      parse-json: 7.1.1
-      trough: 2.2.0
-      unist-util-inspect: 8.1.0
-      vfile: 6.0.3
-      vfile-message: 4.0.2
-      vfile-reporter: 8.1.1
-      vfile-statistics: 3.0.0
-      yaml: 2.8.0
-    transitivePeerDependencies:
-      - bluebird
-      - supports-color
-
-  unified-lint-rule@3.0.1:
-    dependencies:
-      '@types/unist': 3.0.2
-      trough: 2.2.0
-      unified: 11.0.5
-      vfile: 6.0.3
-
-  unified-message-control@5.0.0:
-    dependencies:
-      '@types/unist': 3.0.2
-      devlop: 1.1.0
-      space-separated-tokens: 2.0.2
-      unist-util-is: 6.0.0
-      unist-util-visit: 5.1.0
-      vfile: 6.0.3
-      vfile-location: 5.0.3
-      vfile-message: 4.0.2
-
   unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.2
@@ -22660,18 +22112,10 @@ snapshots:
     dependencies:
       crypto-random-string: 4.0.0
 
-  unist-util-inspect@8.1.0:
-    dependencies:
-      '@types/unist': 3.0.2
-
   unist-util-is@6.0.0:
     dependencies:
       '@types/unist': 3.0.2
 
-  unist-util-position-from-estree@2.0.0:
-    dependencies:
-      '@types/unist': 3.0.2
-
   unist-util-position@5.0.0:
     dependencies:
       '@types/unist': 3.0.2
@@ -22795,37 +22239,11 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vfile-location@5.0.3:
-    dependencies:
-      '@types/unist': 3.0.2
-      vfile: 6.0.3
-
   vfile-message@4.0.2:
     dependencies:
       '@types/unist': 3.0.2
       unist-util-stringify-position: 4.0.0
 
-  vfile-reporter@8.1.1:
-    dependencies:
-      '@types/supports-color': 8.1.3
-      string-width: 6.1.0
-      supports-color: 9.4.0
-      unist-util-stringify-position: 4.0.0
-      vfile: 6.0.3
-      vfile-message: 4.0.2
-      vfile-sort: 4.0.0
-      vfile-statistics: 3.0.0
-
-  vfile-sort@4.0.0:
-    dependencies:
-      vfile: 6.0.3
-      vfile-message: 4.0.2
-
-  vfile-statistics@3.0.0:
-    dependencies:
-      vfile: 6.0.3
-      vfile-message: 4.0.2
-
   vfile@6.0.3:
     dependencies:
       '@types/unist': 3.0.2
@@ -22848,12 +22266,12 @@ snapshots:
       tsx: 4.21.0
       yaml: 2.8.0
 
-  vite@8.0.10(@types/node@20.19.39)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0):
+  vite@8.0.13(@types/node@20.19.39)(esbuild@0.27.2)(jiti@2.6.1)(terser@5.39.0)(tsx@4.21.0)(yaml@2.8.0):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
       postcss: 8.5.14
-      rolldown: 1.0.0-rc.17
+      rolldown: 1.0.1
       tinyglobby: 0.2.16
     optionalDependencies:
       '@types/node': 20.19.39
@@ -22917,8 +22335,6 @@ snapshots:
     dependencies:
       xml-name-validator: 5.0.0
 
-  walk-up-path@3.0.1: {}
-
   walk-up-path@4.0.0: {}
 
   warning@4.0.3:
@@ -23018,10 +22434,6 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
-  which@4.0.0:
-    dependencies:
-      isexe: 3.1.1
-
   which@5.0.0:
     dependencies:
       isexe: 3.1.1
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
index 65696ed148a901..926541019552e6 100644
--- a/stylelint.config.mjs
+++ b/stylelint.config.mjs
@@ -4,6 +4,9 @@
 /** @type {import('stylelint').Config} */
 export default {
   extends: '@mui/internal-code-infra/stylelint',
+  rules: {
+    'at-rule-no-unknown': null,
+  },
   overrides: [
     {
       files: [
diff --git a/test/css-theme-provider-vite-sandbox/README.md b/test/css-theme-provider-vite-sandbox/README.md
new file mode 100644
index 00000000000000..9b3e6eec0ba13c
--- /dev/null
+++ b/test/css-theme-provider-vite-sandbox/README.md
@@ -0,0 +1,80 @@
+# css-theme-provider-vite-sandbox
+
+A minimal Vite + React app that exercises **Path A (Mantine analogy)** for
+Material UI components — noop engine + runtime `CssThemeProvider`.
+
+## Purpose
+
+Verifies that:
+
+1. `@mui/styled-engine` aliased to `@mui/styled-engine-noop` — zero Emotion in
+   the output bundle.
+2. `CssThemeProvider` injects `--mui-*` CSS variables at runtime without any
+   `@emotion/*` dependency.
+3. `Slider` renders correctly using `Slider.css` + runtime CSS vars from
+   `CssThemeProvider`.
+4. The `sx` prop fires a dev-only `console.error` and is otherwise ignored.
+5. `className`-based overrides beat `@layer mui.default` without `!important`.
+6. Dark mode works via `CssThemeProvider` by flipping `data-mui-color-scheme`
+   on `document.documentElement`.
+7. `useTheme()` returns live JS theme values (breakpoints, spacing, etc.).
+
+## How this differs from the other sandboxes
+
+| | noop-vite-sandbox | css-theme-provider-vite-sandbox | emotion-vite-sandbox |
+|---|---|---|---|
+| Engine | noop | noop | Emotion |
+| Theme delivery | `default-theme.css` (static) | `CssThemeProvider` (runtime) | `ThemeProvider` (runtime) |
+| Emotion in bundle | ❌ | ❌ | ✅ |
+| `sx` prop | ignored + warning | ignored + warning | ✅ works |
+| `useTheme()` | ❌ no provider | ✅ | ✅ |
+| Analogy | Radix Themes | Mantine | MUI default |
+
+## Dev server
+
+```bash
+pnpm -F @mui-internal/css-theme-provider-vite-sandbox dev
+```
+
+Then open <http://localhost:5173>.
+
+## Production build
+
+```bash
+pnpm -F @mui-internal/css-theme-provider-vite-sandbox build
+```
+
+## Verifying zero Emotion
+
+After a production build, check that no `@emotion/*` runtime is bundled:
+
+```bash
+# Should print nothing
+grep -r "@emotion/react\|@emotion/styled\|@emotion/cache\|EmotionCacheContext\|insertStyles\|createCache" \
+  test/css-theme-provider-vite-sandbox/dist/
+```
+
+## Bundle size comparison
+
+Build all three sandboxes, then compare JS output sizes to measure the overhead
+of each approach:
+
+```bash
+pnpm -F @mui-internal/noop-vite-sandbox build
+pnpm -F @mui-internal/css-theme-provider-vite-sandbox build
+pnpm -F @mui-internal/emotion-vite-sandbox build
+
+# Compare JS sizes
+ls -lh test/noop-vite-sandbox/dist/assets/*.js
+ls -lh test/css-theme-provider-vite-sandbox/dist/assets/*.js
+ls -lh test/emotion-vite-sandbox/dist/assets/*.js
+
+# Compare CSS sizes
+ls -lh test/noop-vite-sandbox/dist/assets/*.css
+ls -lh test/css-theme-provider-vite-sandbox/dist/assets/*.css
+ls -lh test/emotion-vite-sandbox/dist/assets/*.css
+```
+
+## Relation to the TODO
+
+This sandbox maps to **Path A — CssThemeProvider** in `STYLING_V8_TODO.md`.
diff --git a/test/css-theme-provider-vite-sandbox/index.html b/test/css-theme-provider-vite-sandbox/index.html
new file mode 100644
index 00000000000000..f993068b92891e
--- /dev/null
+++ b/test/css-theme-provider-vite-sandbox/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <title>MUI CssThemeProvider Vite sandbox</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/test/css-theme-provider-vite-sandbox/package.json b/test/css-theme-provider-vite-sandbox/package.json
new file mode 100644
index 00000000000000..d99ceac540b175
--- /dev/null
+++ b/test/css-theme-provider-vite-sandbox/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@mui-internal/css-theme-provider-vite-sandbox",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mui/material": "workspace:*",
+    "@mui/system": "workspace:*",
+    "@mui/utils": "workspace:*",
+    "@mui/styled-engine-noop": "workspace:*",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "typescript": "^6.0.3",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/test/css-theme-provider-vite-sandbox/src/App.tsx b/test/css-theme-provider-vite-sandbox/src/App.tsx
new file mode 100644
index 00000000000000..96248e0f354df7
--- /dev/null
+++ b/test/css-theme-provider-vite-sandbox/src/App.tsx
@@ -0,0 +1,108 @@
+/**
+ * CssThemeProvider sandbox — Path A (Mantine analogy).
+ *
+ * Same as noop-vite-sandbox but with CssThemeProvider instead of no provider.
+ * The engine alias is still @mui/styled-engine-noop — no Emotion in the bundle.
+ * Theme delivery is runtime (JS createTheme → CssThemeProvider injects CSS vars)
+ * rather than a pre-generated .css file.
+ *
+ * Verifies that:
+ *   1. @mui/styled-engine is aliased to @mui/styled-engine-noop (no Emotion).
+ *   2. CssThemeProvider injects --mui-* CSS variables at runtime without Emotion.
+ *   3. Slider renders correctly using Slider.css + runtime CSS vars.
+ *   4. The `sx` prop fires a console.error in dev and is otherwise ignored.
+ *   5. className-based overrides beat @layer mui.default without !important.
+ *   6. Dark mode works via CssThemeProvider by toggling data-mui-color-scheme
+ *      on <html>.
+ *   7. useTheme() returns JS theme values (breakpoints, spacing, etc.).
+ *
+ * To confirm no Emotion is bundled, run:
+ *   pnpm -F @mui-internal/css-theme-provider-vite-sandbox build
+ * Then:
+ *   grep -r "@emotion/react\|@emotion/styled\|@emotion/cache\|EmotionCacheContext" dist/
+ *   # should print nothing
+ */
+import * as React from 'react';
+import { createTheme, CssThemeProvider } from '@mui/material/styles';
+import Slider from '@mui/material/Slider';
+
+const theme = createTheme({
+  cssVariables: true,
+  colorSchemes: { light: true, dark: true },
+});
+
+type Mode = 'light' | 'dark';
+
+export default function App() {
+  const [value, setValue] = React.useState<number>(40);
+  const [mode, setMode] = React.useState<Mode>('light');
+
+  function toggleMode() {
+    const next: Mode = mode === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-mui-color-scheme', next);
+    setMode(next);
+  }
+
+  return (
+    <CssThemeProvider theme={theme}>
+      <div
+        style={{
+          padding: 32,
+          minHeight: '100vh',
+          background: 'var(--mui-palette-background-default)',
+          color: 'var(--mui-palette-text-primary)',
+          fontFamily: 'sans-serif',
+        }}
+      >
+        <h1 style={{ marginTop: 0 }}>CssThemeProvider sandbox</h1>
+        <p>
+          Engine: <code>@mui/styled-engine-noop</code> — no Emotion. Theme delivered via{' '}
+          <code>CssThemeProvider</code> (runtime CSS variable injection).
+        </p>
+
+        {/* Dark mode toggle */}
+        <button type="button" onClick={toggleMode} style={{ marginBottom: 32 }}>
+          Switch to {mode === 'light' ? 'dark' : 'light'} mode
+        </button>
+
+        <div style={{ maxWidth: 400 }}>
+          <p>Slider value: {value}</p>
+
+          {/*
+            sx prop intentionally passed to trigger the noop dev warning.
+            Open the browser console — you should see:
+            "MUI: The `sx` prop was used on <span> but `@mui/styled-engine-noop` is active."
+          */}
+          <Slider
+            value={value}
+            onChange={(_, v) => setValue(v as number)}
+            // @ts-ignore — sx is valid on Slider types but deliberately passed to trigger the noop warning
+            sx={{ color: 'red' }}
+            aria-label="Sandbox slider"
+          />
+
+          <p style={{ marginTop: 32 }}>
+            className override (thumb should be purple, overriding the default via plain CSS that
+            beats @layer mui.default):
+          </p>
+
+          {/* className override — unlayered CSS always wins over @layer mui.default */}
+          <Slider
+            value={value}
+            onChange={(_, v) => setValue(v as number)}
+            className="custom-slider"
+            aria-label="Custom class slider"
+          />
+        </div>
+
+        <style>{`
+          .custom-slider .MuiSlider-thumb {
+            width: 24px;
+            height: 24px;
+            background: var(--mui-palette-secondary-main, #9c27b0);
+          }
+        `}</style>
+      </div>
+    </CssThemeProvider>
+  );
+}
diff --git a/test/css-theme-provider-vite-sandbox/src/main.tsx b/test/css-theme-provider-vite-sandbox/src/main.tsx
new file mode 100644
index 00000000000000..033af594370fdc
--- /dev/null
+++ b/test/css-theme-provider-vite-sandbox/src/main.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Missing #root element');
+}
+
+ReactDOMClient.createRoot(container).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/test/css-theme-provider-vite-sandbox/src/vite-env.d.ts b/test/css-theme-provider-vite-sandbox/src/vite-env.d.ts
new file mode 100644
index 00000000000000..11f02fe2a0061d
--- /dev/null
+++ b/test/css-theme-provider-vite-sandbox/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/test/css-theme-provider-vite-sandbox/tsconfig.json b/test/css-theme-provider-vite-sandbox/tsconfig.json
new file mode 100644
index 00000000000000..7b1f33c4f6a88a
--- /dev/null
+++ b/test/css-theme-provider-vite-sandbox/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/test/css-theme-provider-vite-sandbox/vite.config.ts b/test/css-theme-provider-vite-sandbox/vite.config.ts
new file mode 100644
index 00000000000000..e8bec75d11c49e
--- /dev/null
+++ b/test/css-theme-provider-vite-sandbox/vite.config.ts
@@ -0,0 +1,69 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig, transformWithEsbuild } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+// Two levels up: test/css-theme-provider-vite-sandbox → test → monorepo root
+const MONOREPO_ROOT = path.resolve(dirname, '../..');
+
+// https://vite.dev/config/
+// Use the function form so `mode` is available for the NODE_ENV define.
+export default defineConfig(({ mode }) => ({
+  // MUI source files reference process.env.NODE_ENV for dev-only warnings.
+  // Vite doesn't polyfill `process` in browser builds, so we define it explicitly.
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
+  },
+  plugins: [
+    // @mui/material source files use .js extension but contain JSX.
+    // This plugin re-parses them as JSX so Rollup/esbuild can handle them.
+    // enforce: 'pre' ensures this plugin runs before Vite's internal esbuild
+    // pre-transform, which would otherwise reject JSX in .js files.
+    {
+      name: 'treat-js-files-as-jsx',
+      enforce: 'pre' as const,
+      transform(code, id) {
+        if (/\/node_modules\//.test(id)) {
+          return null;
+        }
+        if (id.startsWith('\0')) {
+          return null;
+        }
+        if (!/.*\.js$/.test(id)) {
+          return null;
+        }
+        return transformWithEsbuild(code, id, { loader: 'jsx' });
+      },
+    },
+    react(),
+  ],
+  resolve: {
+    alias: [
+      // Resolve all @mui/* packages from monorepo source so we test the branch
+      // code, not a published release.
+      {
+        find: '@mui/material',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-material/src'),
+      },
+      {
+        find: '@mui/system',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-system/src'),
+      },
+      {
+        find: '@mui/utils',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-utils/src'),
+      },
+      {
+        find: '@mui/private-theming',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-private-theming/src'),
+      },
+      // THE KEY ALIAS: swap Emotion for the zero-runtime noop engine.
+      // This is exactly what non-Emotion users configure in their own bundler.
+      {
+        find: '@mui/styled-engine',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-styled-engine-noop/src'),
+      },
+    ],
+  },
+}));
diff --git a/test/emotion-vite-sandbox/README.md b/test/emotion-vite-sandbox/README.md
new file mode 100644
index 00000000000000..21aa48fe3ce1c6
--- /dev/null
+++ b/test/emotion-vite-sandbox/README.md
@@ -0,0 +1,74 @@
+# emotion-vite-sandbox
+
+A minimal Vite + React app that exercises the **Emotion (default) path** for
+Material UI components.
+
+## Purpose
+
+Verifies that:
+
+1. `@mui/styled-engine` resolves to the real Emotion-backed engine (bundle
+   contains `@emotion/*`).
+2. `Slider` renders correctly via `ThemeProvider` + Emotion-generated styles.
+3. The `sx` prop works and applies styles at runtime via Emotion.
+4. `className`-based overrides work alongside Emotion-generated class names.
+5. Dark mode works via `ThemeProvider`'s `colorSchemes` / `CssVarsProvider`
+   by flipping `data-mui-color-scheme="dark"` on `document.documentElement`.
+
+### Why only Slider?
+
+Only `Slider` is used because it is the first component converted to the
+CSS-base pattern. It serves as the comparison baseline against
+`test/noop-vite-sandbox` — same component, same visual output, different
+engine. Bundle size delta between the two sandboxes measures the Emotion
+overhead.
+
+## Dev server
+
+```bash
+pnpm -F @mui-internal/emotion-vite-sandbox dev
+```
+
+Then open <http://localhost:5173>.
+
+## Production build
+
+```bash
+pnpm -F @mui-internal/emotion-vite-sandbox build
+```
+
+## Verifying Emotion is bundled
+
+After a production build, confirm `@emotion/*` runtime is present:
+
+```bash
+# Should print matches
+grep -r "@emotion" test/emotion-vite-sandbox/dist/
+```
+
+## Bundle size comparison
+
+Build all three sandboxes, then compare JS output sizes to measure the overhead
+of each approach:
+
+```bash
+pnpm -F @mui-internal/noop-vite-sandbox build
+pnpm -F @mui-internal/css-theme-provider-vite-sandbox build
+pnpm -F @mui-internal/emotion-vite-sandbox build
+
+# Compare JS sizes
+ls -lh test/noop-vite-sandbox/dist/assets/*.js
+ls -lh test/css-theme-provider-vite-sandbox/dist/assets/*.js
+ls -lh test/emotion-vite-sandbox/dist/assets/*.js
+
+# Compare CSS sizes
+ls -lh test/noop-vite-sandbox/dist/assets/*.css
+ls -lh test/css-theme-provider-vite-sandbox/dist/assets/*.css
+ls -lh test/emotion-vite-sandbox/dist/assets/*.css
+```
+
+## Relation to the TODO
+
+This sandbox maps to **§8 (Bundle size validation)** in `STYLING_V8_TODO.md`.
+It is the Emotion-path counterpart to `test/noop-vite-sandbox`, used to
+measure the JS bundle delta between the two engines.
diff --git a/test/emotion-vite-sandbox/index.html b/test/emotion-vite-sandbox/index.html
new file mode 100644
index 00000000000000..c6217cd200816f
--- /dev/null
+++ b/test/emotion-vite-sandbox/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <title>MUI emotion Vite sandbox</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/test/emotion-vite-sandbox/package.json b/test/emotion-vite-sandbox/package.json
new file mode 100644
index 00000000000000..93e2b152f820c0
--- /dev/null
+++ b/test/emotion-vite-sandbox/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@mui-internal/emotion-vite-sandbox",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "workspace:*",
+    "@mui/system": "workspace:*",
+    "@mui/utils": "workspace:*",
+    "@mui/styled-engine": "workspace:*",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "typescript": "^6.0.3",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/test/emotion-vite-sandbox/src/App.tsx b/test/emotion-vite-sandbox/src/App.tsx
new file mode 100644
index 00000000000000..701deefaf5f4b8
--- /dev/null
+++ b/test/emotion-vite-sandbox/src/App.tsx
@@ -0,0 +1,97 @@
+/**
+ * emotion-engine sandbox — Slider only.
+ *
+ * Mirror of noop-vite-sandbox but using the Emotion engine (the default MUI
+ * setup). No engine alias is applied — @mui/styled-engine resolves to the
+ * real Emotion-backed package.
+ *
+ * Verifies that:
+ *   1. @mui/styled-engine resolves to the Emotion engine (bundle contains @emotion/*).
+ *   2. Slider renders correctly via ThemeProvider + Emotion-generated styles.
+ *   3. The `sx` prop works and applies styles at runtime via Emotion.
+ *   4. Dark mode works via ThemeProvider's colorSchemes / CssVarsProvider.
+ *   5. useTheme() returns live JS theme values.
+ *
+ * To confirm Emotion IS bundled, run:
+ *   pnpm -F @mui-internal/emotion-vite-sandbox build
+ * Then:
+ *   grep -r "@emotion" dist/
+ *   # should print matches
+ */
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Slider from '@mui/material/Slider';
+
+const theme = createTheme({
+  cssVariables: true,
+  colorSchemes: { light: true, dark: true },
+});
+
+type Mode = 'light' | 'dark';
+
+export default function App() {
+  const [value, setValue] = React.useState<number>(40);
+  const [mode, setMode] = React.useState<Mode>('light');
+
+  function toggleMode() {
+    const next: Mode = mode === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-mui-color-scheme', next);
+    setMode(next);
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div
+        style={{
+          padding: 32,
+          minHeight: '100vh',
+          background: 'var(--mui-palette-background-default)',
+          color: 'var(--mui-palette-text-primary)',
+          fontFamily: 'sans-serif',
+        }}
+      >
+        <h1 style={{ marginTop: 0 }}>emotion-engine sandbox</h1>
+        <p>
+          Engine: <code>@mui/styled-engine</code> (Emotion) — Emotion is bundled here.
+        </p>
+
+        {/* Dark mode toggle */}
+        <button type="button" onClick={toggleMode} style={{ marginBottom: 32 }}>
+          Switch to {mode === 'light' ? 'dark' : 'light'} mode
+        </button>
+
+        <div style={{ maxWidth: 400 }}>
+          <p>Slider value: {value}</p>
+
+          {/* sx prop — works with Emotion, applies color override at runtime */}
+          <Slider
+            value={value}
+            onChange={(_, v) => setValue(v as number)}
+            sx={{ color: 'secondary.main' }}
+            aria-label="Sandbox slider"
+          />
+
+          <p style={{ marginTop: 32 }}>
+            className override (thumb should be purple, overriding the default via plain CSS):
+          </p>
+
+          {/* className override */}
+          <Slider
+            value={value}
+            onChange={(_, v) => setValue(v as number)}
+            className="custom-slider"
+            aria-label="Custom class slider"
+          />
+        </div>
+
+        <style>{`
+          .custom-slider .MuiSlider-thumb {
+            width: 24px;
+            height: 24px;
+            background: var(--mui-palette-secondary-main, #9c27b0);
+          }
+        `}</style>
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/test/emotion-vite-sandbox/src/main.tsx b/test/emotion-vite-sandbox/src/main.tsx
new file mode 100644
index 00000000000000..033af594370fdc
--- /dev/null
+++ b/test/emotion-vite-sandbox/src/main.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Missing #root element');
+}
+
+ReactDOMClient.createRoot(container).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/test/emotion-vite-sandbox/src/vite-env.d.ts b/test/emotion-vite-sandbox/src/vite-env.d.ts
new file mode 100644
index 00000000000000..11f02fe2a0061d
--- /dev/null
+++ b/test/emotion-vite-sandbox/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/test/emotion-vite-sandbox/tsconfig.json b/test/emotion-vite-sandbox/tsconfig.json
new file mode 100644
index 00000000000000..7b1f33c4f6a88a
--- /dev/null
+++ b/test/emotion-vite-sandbox/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/test/emotion-vite-sandbox/vite.config.ts b/test/emotion-vite-sandbox/vite.config.ts
new file mode 100644
index 00000000000000..21ab7ee68ee16c
--- /dev/null
+++ b/test/emotion-vite-sandbox/vite.config.ts
@@ -0,0 +1,67 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig, transformWithEsbuild } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+// Two levels up: test/emotion-vite-sandbox → test → monorepo root
+const MONOREPO_ROOT = path.resolve(dirname, '../..');
+
+// https://vite.dev/config/
+// Use the function form so `mode` is available for the NODE_ENV define.
+export default defineConfig(({ mode }) => ({
+  // MUI source files reference process.env.NODE_ENV for dev-only warnings.
+  // Vite doesn't polyfill `process` in browser builds, so we define it explicitly.
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
+  },
+  plugins: [
+    // @mui/material source files use .js extension but contain JSX.
+    // This plugin re-parses them as JSX so Rollup/esbuild can handle them.
+    // enforce: 'pre' ensures this plugin runs before Vite's internal esbuild
+    // pre-transform, which would otherwise reject JSX in .js files.
+    {
+      name: 'treat-js-files-as-jsx',
+      enforce: 'pre' as const,
+      transform(code, id) {
+        if (/\/node_modules\//.test(id)) {
+          return null;
+        }
+        if (id.startsWith('\0')) {
+          return null;
+        }
+        if (!/.*\.js$/.test(id)) {
+          return null;
+        }
+        return transformWithEsbuild(code, id, { loader: 'jsx' });
+      },
+    },
+    react(),
+  ],
+  resolve: {
+    alias: [
+      // Resolve all @mui/* packages from monorepo source so we test the branch
+      // code, not a published release.
+      {
+        find: '@mui/material',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-material/src'),
+      },
+      {
+        find: '@mui/system',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-system/src'),
+      },
+      {
+        find: '@mui/utils',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-utils/src'),
+      },
+      {
+        find: '@mui/private-theming',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-private-theming/src'),
+      },
+      {
+        find: '@mui/styled-engine',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-styled-engine/src'),
+      },
+    ],
+  },
+}));
diff --git a/test/noop-vite-sandbox/README.md b/test/noop-vite-sandbox/README.md
new file mode 100644
index 00000000000000..e63d6e270ee0b0
--- /dev/null
+++ b/test/noop-vite-sandbox/README.md
@@ -0,0 +1,119 @@
+# noop-vite-sandbox
+
+A minimal Vite + React app that exercises the **non-Emotion (CSS-only) path** for
+Material UI components.
+
+## Purpose
+
+Verifies that:
+
+1. `@mui/styled-engine` can be aliased to `@mui/styled-engine-noop` with zero
+   Emotion in the output bundle.
+2. `Slider` renders correctly using `Slider.css` + `default-theme.css` (CSS
+   variables, no runtime theming).
+3. The `sx` prop fires a dev-only `console.error` and is otherwise ignored (open
+   the browser DevTools console to see it).
+4. `className`-based overrides beat `@layer mui.default` without any
+   `!important`.
+5. Dark mode works by flipping `data-mui-color-scheme="dark"` on
+   `document.documentElement` — no provider, no React context.
+
+### Why only Slider?
+
+Only components that have been converted to the CSS-base pattern are safe to use
+here. Non-converted components (e.g. `Box`, `Typography`) still contain
+theme-dependent style functions that call `useTheme()` at render time. Without a
+`ThemeProvider` in the tree, `useTheme()` returns `undefined` and the first
+`theme.palette.*` access throws, crashing the render. As more components are
+converted to CSS base styles, they can be added to this sandbox.
+
+## Dev server
+
+```bash
+pnpm -F @mui-internal/noop-vite-sandbox dev
+```
+
+Then open <http://localhost:5173>.
+
+## Production build
+
+```bash
+pnpm -F @mui-internal/noop-vite-sandbox build
+```
+
+Expected output (approximate):
+
+```
+dist/assets/index-*.css   ~32 kB  (default-theme.css + Slider.css)
+dist/assets/index-*.js   ~280 kB  (~90 kB gzip)
+```
+
+## Verifying zero Emotion
+
+After a production build, check that no `@emotion/*` runtime is bundled:
+
+```bash
+# Should print nothing
+grep -r "@emotion/react\|@emotion/styled\|@emotion/cache\|EmotionCacheContext\|insertStyles\|createCache" \
+  test/noop-vite-sandbox/dist/
+```
+
+The string `__emotion_real` appears once — it is a property-name guard inside
+`@mui/system/createStyled` (`style.__emotion_real === style`), not an Emotion
+package import. It is safe to ignore.
+
+## How the engine alias works
+
+`vite.config.ts` uses an **array-form alias** (order matters):
+
+```ts
+alias: [
+  // 1. Exact CSS path must come before the package catch-all
+  { find: '@mui/material/default-theme.css', replacement: '…/packages/mui-material/default-theme.css' },
+  // 2. Package source (monorepo)
+  { find: '@mui/material', replacement: '…/packages/mui-material/src' },
+  // 3. THE KEY SWAP — replaces Emotion with the zero-runtime noop engine
+  { find: '@mui/styled-engine', replacement: '…/packages/mui-styled-engine-noop/src' },
+  // 4. Other @mui/* from monorepo source
+  …
+]
+```
+
+This mirrors exactly what a non-Emotion user would add to their own
+`vite.config.ts`:
+
+```ts
+// User's project vite.config.ts
+resolve: {
+  alias: {
+    '@mui/styled-engine': '@mui/styled-engine-noop',
+  },
+},
+```
+
+## Bundle size comparison
+
+Build all three sandboxes, then compare JS output sizes to measure the overhead
+of each approach:
+
+```bash
+pnpm -F @mui-internal/noop-vite-sandbox build
+pnpm -F @mui-internal/css-theme-provider-vite-sandbox build
+pnpm -F @mui-internal/emotion-vite-sandbox build
+
+# Compare JS sizes
+ls -lh test/noop-vite-sandbox/dist/assets/*.js
+ls -lh test/css-theme-provider-vite-sandbox/dist/assets/*.js
+ls -lh test/emotion-vite-sandbox/dist/assets/*.js
+
+# Compare CSS sizes
+ls -lh test/noop-vite-sandbox/dist/assets/*.css
+ls -lh test/css-theme-provider-vite-sandbox/dist/assets/*.css
+ls -lh test/emotion-vite-sandbox/dist/assets/*.css
+```
+
+## Relation to the TODO
+
+This sandbox maps to **§8 (Bundle size validation)** in `STYLING_V8_TODO.md`.
+It serves as both a live demo of the non-Emotion path and the harness for
+measuring JS bundle deltas between the Emotion and noop engines.
diff --git a/test/noop-vite-sandbox/index.html b/test/noop-vite-sandbox/index.html
new file mode 100644
index 00000000000000..a9b11af9400052
--- /dev/null
+++ b/test/noop-vite-sandbox/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <title>MUI noop-engine Vite sandbox</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/test/noop-vite-sandbox/package.json b/test/noop-vite-sandbox/package.json
new file mode 100644
index 00000000000000..66cfd5bb21e156
--- /dev/null
+++ b/test/noop-vite-sandbox/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@mui-internal/noop-vite-sandbox",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mui/material": "workspace:*",
+    "@mui/system": "workspace:*",
+    "@mui/utils": "workspace:*",
+    "@mui/styled-engine-noop": "workspace:*",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "typescript": "^6.0.3",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/test/noop-vite-sandbox/src/App.tsx b/test/noop-vite-sandbox/src/App.tsx
new file mode 100644
index 00000000000000..18a2e70280f7e0
--- /dev/null
+++ b/test/noop-vite-sandbox/src/App.tsx
@@ -0,0 +1,104 @@
+/**
+ * noop-engine sandbox — Slider only.
+ *
+ * Only Slider is used here because it is the only component converted to the
+ * CSS-base pattern so far. Other components (Box, Typography, etc.) still use
+ * theme-dependent style functions that call useTheme() at render time. Without
+ * a ThemeProvider in the tree, those calls return undefined and crash the
+ * render. Stick to Slider until more components are converted.
+ *
+ * Verifies that:
+ *   1. @mui/styled-engine is aliased to @mui/styled-engine-noop (no Emotion).
+ *   2. Slider renders correctly using Slider.css + default-theme.css (CSS vars).
+ *   3. The `sx` prop fires a console.error in dev and is otherwise ignored
+ *      (open the browser DevTools console to see the warning).
+ *   4. className-based overrides beat @layer mui.default without !important.
+ *   5. Dark mode works by toggling data-mui-color-scheme on <html>.
+ *
+ * To confirm no Emotion is bundled, run:
+ *   pnpm -F @mui-internal/noop-vite-sandbox build
+ * Then:
+ *   grep -r "@emotion/react\|@emotion/styled\|@emotion/cache\|EmotionCacheContext" dist/
+ *   # should print nothing
+ */
+import * as React from 'react';
+
+// No ThemeProvider. This CSS file provides all --mui-* custom properties.
+// Generated by: pnpm -F @mui/material build:theme-css
+import '@mui/material/default-theme.css';
+
+// Only import components that have been converted to the CSS-base pattern.
+import Slider from '@mui/material/Slider';
+
+type Mode = 'light' | 'dark';
+
+export default function App() {
+  const [value, setValue] = React.useState<number>(40);
+  const [mode, setMode] = React.useState<Mode>('light');
+
+  function toggleMode() {
+    const next: Mode = mode === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-mui-color-scheme', next);
+    setMode(next);
+  }
+
+  return (
+    <div
+      style={{
+        padding: 32,
+        minHeight: '100vh',
+        background: 'var(--mui-palette-background-default)',
+        color: 'var(--mui-palette-text-primary)',
+        fontFamily: 'sans-serif',
+      }}
+    >
+      <h1 style={{ marginTop: 0 }}>noop-engine sandbox</h1>
+      <p>
+        Engine: <code>@mui/styled-engine-noop</code> — no Emotion in this bundle.
+      </p>
+
+      {/* Dark mode toggle — pure DOM attribute flip, no ThemeProvider */}
+      <button type="button" onClick={toggleMode} style={{ marginBottom: 32 }}>
+        Switch to {mode === 'light' ? 'dark' : 'light'} mode
+      </button>
+
+      <div style={{ maxWidth: 400 }}>
+        <p>Slider value: {value}</p>
+
+        {/*
+          sx prop intentionally passed to trigger the noop dev warning.
+          Open the browser console — you should see:
+          "MUI: The `sx` prop was used on <span> but `@mui/styled-engine-noop` is active."
+        */}
+        <Slider
+          value={value}
+          onChange={(_, v) => setValue(v as number)}
+          // @ts-ignore — sx is valid on Slider types but deliberately passed to trigger the noop warning
+          sx={{ color: 'red' }}
+          aria-label="Sandbox slider"
+        />
+
+        <p style={{ marginTop: 32 }}>
+          className override (thumb should be purple, overriding the default via
+          plain CSS that beats @layer mui.default):
+        </p>
+
+        {/* className override — unlayered CSS always wins over @layer mui.default */}
+        <Slider
+          value={value}
+          onChange={(_, v) => setValue(v as number)}
+          className="custom-slider"
+          aria-label="Custom class slider"
+        />
+      </div>
+
+      <style>{`
+        .custom-slider .MuiSlider-thumb {
+          width: 24px;
+          height: 24px;
+          background: var(--mui-palette-secondary-main, #9c27b0);
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/test/noop-vite-sandbox/src/main.tsx b/test/noop-vite-sandbox/src/main.tsx
new file mode 100644
index 00000000000000..033af594370fdc
--- /dev/null
+++ b/test/noop-vite-sandbox/src/main.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Missing #root element');
+}
+
+ReactDOMClient.createRoot(container).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/test/noop-vite-sandbox/src/vite-env.d.ts b/test/noop-vite-sandbox/src/vite-env.d.ts
new file mode 100644
index 00000000000000..726765f1199e0c
--- /dev/null
+++ b/test/noop-vite-sandbox/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+// Allows `import '*.css'` without TypeScript errors.
+declare module '*.css' {}
diff --git a/test/noop-vite-sandbox/tsconfig.json b/test/noop-vite-sandbox/tsconfig.json
new file mode 100644
index 00000000000000..7b1f33c4f6a88a
--- /dev/null
+++ b/test/noop-vite-sandbox/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/test/noop-vite-sandbox/vite.config.ts b/test/noop-vite-sandbox/vite.config.ts
new file mode 100644
index 00000000000000..a807346f97e33a
--- /dev/null
+++ b/test/noop-vite-sandbox/vite.config.ts
@@ -0,0 +1,77 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig, transformWithEsbuild } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+// Two levels up: test/noop-vite-sandbox → test → monorepo root
+const MONOREPO_ROOT = path.resolve(dirname, '../..');
+
+// https://vite.dev/config/
+// Use the function form so `mode` is available for the NODE_ENV define.
+export default defineConfig(({ mode }) => ({
+  // MUI source files reference process.env.NODE_ENV for dev-only warnings.
+  // Vite doesn't polyfill `process` in browser builds, so we define it explicitly.
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
+  },
+  plugins: [
+    // @mui/material source files use .js extension but contain JSX.
+    // This plugin re-parses them as JSX so Rollup/esbuild can handle them.
+    // transformWithEsbuild must be imported at the top level — a dynamic
+    // import inside the transform hook breaks the Vite dev server.
+    // enforce: 'pre' ensures this plugin runs before Vite's internal esbuild
+    // pre-transform, which would otherwise reject JSX in .js files.
+    {
+      name: 'treat-js-files-as-jsx',
+      enforce: 'pre' as const,
+      transform(code, id) {
+        if (/\/node_modules\//.test(id)) {
+          return null;
+        }
+        if (id.startsWith('\0')) {
+          return null;
+        }
+        if (!/.*\.js$/.test(id)) {
+          return null;
+        }
+        return transformWithEsbuild(code, id, { loader: 'jsx' });
+      },
+    },
+    react(),
+  ],
+  resolve: {
+    alias: [
+      // CSS entry must come before the @mui/material package alias so the
+      // catch-all doesn't rewrite it to packages/mui-material/src/default-theme.css
+      {
+        find: '@mui/material/default-theme.css',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-material/default-theme.css'),
+      },
+      // Resolve all @mui/* packages from monorepo source so we test the branch
+      // code, not a published release.
+      {
+        find: '@mui/material',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-material/src'),
+      },
+      {
+        find: '@mui/system',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-system/src'),
+      },
+      {
+        find: '@mui/utils',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-utils/src'),
+      },
+      {
+        find: '@mui/private-theming',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-private-theming/src'),
+      },
+      // THE KEY ALIAS: swap Emotion for the zero-runtime noop engine.
+      // This is exactly what non-Emotion users configure in their own bundler.
+      {
+        find: '@mui/styled-engine',
+        replacement: path.resolve(MONOREPO_ROOT, 'packages/mui-styled-engine-noop/src'),
+      },
+    ],
+  },
+}));
diff --git a/tsconfig.json b/tsconfig.json
index 11af6fb5ec18bb..4277b51acfe290 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,6 +26,10 @@
       "@mui/internal-markdown/prism": ["./packages-internal/markdown/prism.mjs"],
       "@mui/styled-engine": ["./packages/mui-styled-engine/src"],
       "@mui/styled-engine/*": ["./packages/mui-styled-engine/src/*"],
+      "@mui/styled-engine-noop": ["./packages/mui-styled-engine-noop/src"],
+      "@mui/styled-engine-noop/*": ["./packages/mui-styled-engine-noop/src/*"],
+      "@mui/tailwind": ["./packages/mui-tailwind/src/preset.js"],
+      "@mui/tailwind/*": ["./packages/mui-tailwind/src/*"],
       "@mui/styled-engine-sc": ["./packages/mui-styled-engine-sc/src"],
       "@mui/styled-engine-sc/*": ["./packages/mui-styled-engine-sc/src/*"],
       "@mui/system": ["./packages/mui-system/src"],