From f7abe2352d71f68d72895dcaadbf0bef8a63080e Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 7 Oct 2024 10:06:31 +0200
Subject: [PATCH 01/22] [test] Improve visual screenshot canva (#708)

---
 test/regressions/TestViewer.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
index 24f569d14..f05b77481 100644
--- a/test/regressions/TestViewer.js
+++ b/test/regressions/TestViewer.js
@@ -70,11 +70,7 @@ function TestViewer(props) {
       {/* eslint-disable-next-line react/no-danger */}
       <style dangerouslySetInnerHTML={{ __html: globalStyles }} />
       <React.Suspense fallback={<div aria-busy />}>
-        <div
-          aria-busy={!ready}
-          data-testid="testcase"
-          style={{ backgroundColor: '#fff', display: 'inline-block', padding: '8px' }}
-        >
+        <div aria-busy={!ready} data-testid="testcase" style={{ display: 'block', padding: '8px' }}>
           {children}
         </div>
       </React.Suspense>

From 29994ae4cdfea7ca2842a542e7e4579263b0651e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Mon, 7 Oct 2024 11:05:10 +0200
Subject: [PATCH 02/22] v1.0.0-alpha.3 (#709)

---
 CHANGELOG.md                   | 78 ++++++++++++++++++++++++++++++++++
 package.json                   |  2 +-
 packages/mui-base/package.json |  2 +-
 3 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb7912268..3fd8ded13 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,83 @@
 # Versions
 
+## v1.0.0-alpha.3
+
+_Oct 7, 2024_
+
+A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- ⭐ We added several new components: CheckboxGroup, RadioGroup, Form, Separator
+- ⭐ Menu has new parts: CheckboxItem, RadioItem, and Group
+
+### `@base_ui/react@1.0.0-alpha.3`
+
+- [AlertDialog] Move types to namespaces (#591) @michaldudak
+- [Checkbox] Modernize implementation (#594) @atomiks
+- [CheckboxGroup] Implement components and hooks (#458) @atomiks
+- [Collapsible] Add Collapsible components and hooks (#481) @mj12albert
+- [Dialog] Move types to namespaces (#697) @michaldudak
+- [Dialog][Collapsible] Fix style prop merging (#641) @michaldudak
+- [Form] Create new `Form` component (#589) @atomiks
+- [Menu] CheckboxItem component (#533) @michaldudak
+- [Menu] Do not select an item when space is pressed during typeahead (#542) @michaldudak
+- [Menu] Fix custom anchor positioning (#609) @michaldudak
+- [Menu] Group and Separator components (#535) @michaldudak
+- [Menu] Increase test timeout (#592) @michaldudak
+- [Menu] RadioItem component (#534) @michaldudak
+- [Menu] Remove the unused prop (#647) @michaldudak
+- [Menu] Remove wrong default value from docs (#549) @sai6855
+- [Menu][Popover][PreviewCard][Tooltip] Add default value as `clippingAncestors` to collisionBoundary prop (#580) @sai6855
+- [NumberField] Modernize implementation (#590) @atomiks
+- [Popover] Modernize implementation (#607) @atomiks
+- [PreviewCard] Modernize implementation (#626) @atomiks
+- [RadioGroup] Create new `RadioGroup` component (#487) @atomiks
+- [Slider] Fix Home / End regression (#526) @sai6855
+- [Tooltip] Modernize implementation (#606) @atomiks
+- [useButton] Modernize implementation (#643) @michaldudak
+- [useScrollLock] Avoid scrollbar layout shift issues (#604) @atomiks
+
+### Docs
+
+- [docs] Fix 301 redirections in docs @oliviertassinari
+- [docs] Make the readme specific to @base_ui/react (#633) @michaldudak
+- [docs] Copy vale-action.yml from main repo @oliviertassinari
+- [docs] Fix 301 to chromium (#636) @oliviertassinari
+- [docs] Avoid dead links in demos (#610) @oliviertassinari
+- [docs] Fix rel attribute on edit GitHub links (#614) @oliviertassinari
+- [docs] Fix pnpm docs:link-check script (#552) @oliviertassinari
+- [docs] Fix Stack Overflow issue canned response @oliviertassinari
+- [docs] Fix outdated link to support page @oliviertassinari
+- [docs] Clarify contribution guide references @oliviertassinari
+
+### Core
+
+- [code-infra] Remove custom playwright installation steps (#646) @Janpot
+- [core] Fix 301 link to Next.js and git diff @oliviertassinari
+- [core] Fix package.json repository rule @oliviertassinari
+- [core] MUI X repository moved to a new location @oliviertassinari
+- [core] React 19 compatibility (#605) @michaldudak
+- [core] Reference `ownerDocument` (#660) @atomiks
+- [core] Remove 'use client' from index files (#331) @michaldudak
+- [core] Remove /.yarn (#596) @oliviertassinari
+- [core] Remove Material UI dependency (#585) @michaldudak
+- [core] Remove the legacy components from the repo (#584) @michaldudak
+- [core] Rename positionStrategy to positionMethod (#704) @michaldudak
+- [docs-infra] Fix double // (#613) @oliviertassinari
+- [docs-infra] Strengthen CSP (#595) @oliviertassinari
+- [infra] Adds reusable workflow for closing message on issues (#598) @michelengelen
+- [infra] Adds reusable workflow for issue cleanup (#597) @michelengelen
+- [infra] Fix line break in Stack Overflow message @oliviertassinari
+- [test] Fix tests on Safari (#546) @michaldudak
+- [test] Fix the test_types_next CI job (#703) @michaldudak
+- [test] Improve visual screenshot canva (#708)
+- [test] Point Istanbul to correct URL (#657) @sai6855
+- [test] Run Browserstack tests on master only (#578) @michaldudak
+- [test] Use `waitFor` instead of fixed timeout in tests (#632) @michaldudak
+- [website] Improve utm_source strategy @oliviertassinari
+- [website] Modernize the Base UI website (#538) @michaldudak
+
+All contributors of this release in alphabetical order: @atomiks, @Janpot, @michaldudak, @michelengelen, @mj12albert, @oliviertassinari, @sai6855
+
 ## v1.0.0-alpha.2
 
 _Aug 19, 2024_
diff --git a/package.json b/package.json
index 7fdca8962..d25331dc2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@base_ui/monorepo",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index e92230520..e936c416a 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@base_ui/react",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "private": false,
   "author": "MUI Team",
   "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",

From 2d712572504248528ed0ea352624b92c2dac74eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Mon, 7 Oct 2024 11:22:48 +0200
Subject: [PATCH 03/22] [Switch] Modernize implementation (#640)

---
 docs/data/api/switch-root.json                |   1 -
 .../css-modules/index.js                      | 127 ++----------------
 .../css-modules/index.tsx                     | 127 ++----------------
 .../css-modules/styles.module.css             |  80 +++++++++++
 .../tailwind/index.tsx                        |   6 +-
 .../api-docs/switch-root/switch-root.json     |   1 -
 .../mui-base/src/Switch/Root/SwitchContext.ts |   5 -
 .../mui-base/src/Switch/Root/SwitchRoot.tsx   |  64 ++++-----
 .../src/Switch/Root/SwitchRoot.types.ts       |  87 ------------
 .../src/Switch/Root/SwitchRootContext.ts      |  15 +++
 .../mui-base/src/Switch/Root/useSwitchRoot.ts |  88 ++++++++++--
 .../src/Switch/Root/useSwitchStyleHooks.ts    |  14 --
 .../src/Switch/Thumb/SwitchThumb.test.tsx     |   8 +-
 .../mui-base/src/Switch/Thumb/SwitchThumb.tsx |  50 +++----
 .../src/Switch/Thumb/SwitchThumb.types.ts     |   4 -
 packages/mui-base/src/Switch/index.barrel.ts  |  11 --
 packages/mui-base/src/Switch/index.ts         |  11 --
 packages/mui-base/src/Switch/styleHooks.ts    |   6 +
 18 files changed, 257 insertions(+), 448 deletions(-)
 create mode 100644 docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css
 delete mode 100644 packages/mui-base/src/Switch/Root/SwitchContext.ts
 delete mode 100644 packages/mui-base/src/Switch/Root/SwitchRoot.types.ts
 create mode 100644 packages/mui-base/src/Switch/Root/SwitchRootContext.ts
 delete mode 100644 packages/mui-base/src/Switch/Root/useSwitchStyleHooks.ts
 delete mode 100644 packages/mui-base/src/Switch/Thumb/SwitchThumb.types.ts
 create mode 100644 packages/mui-base/src/Switch/styleHooks.ts

diff --git a/docs/data/api/switch-root.json b/docs/data/api/switch-root.json
index b63432c27..ab1c15cd3 100644
--- a/docs/data/api/switch-root.json
+++ b/docs/data/api/switch-root.json
@@ -4,7 +4,6 @@
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "defaultChecked": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
-    "id": { "type": { "name": "string" } },
     "inputRef": { "type": { "name": "custom", "description": "ref" } },
     "name": { "type": { "name": "string" } },
     "onCheckedChange": {
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js
index ca04551ec..d48f24dbe 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js
@@ -1,148 +1,39 @@
 'use client';
 import * as React from 'react';
 import * as Switch from '@base_ui/react/Switch';
-import { useTheme } from '@mui/system';
+import classes from './styles.module.css';
 
 export default function UnstyledSwitchIntroduction() {
   return (
     <div>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Basic switch, on by default"
         defaultChecked
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Basic switch, off by default"
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Disabled switch, on by default"
         defaultChecked
         disabled
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Disabled switch, off by default"
         disabled
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
-      <Styles />
     </div>
   );
 }
-
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark modes
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .CustomSwitchIntroduction {
-        width: 38px;
-        height: 24px;
-        margin: 10px;
-        padding: 0;
-        box-sizing: border-box;
-        background: ${isDarkMode ? grey[900] : grey[50]};
-        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-        border-radius: 24px;
-        display: inline-block;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 120ms;
-        box-shadow: inset 0px 1px 1px ${
-          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
-        };
-      }
-
-      .CustomSwitchIntroduction[data-disabled] {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-
-      .CustomSwitchIntroduction:hover:not([data-disabled]) {
-        background: ${isDarkMode ? grey[800] : grey[100]};
-        border-color: ${isDarkMode ? grey[600] : grey[300]};
-      }
-    
-      .CustomSwitchIntroduction:focus-visible {
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[700] : cyan[200]};
-      }
-    
-      .CustomSwitchIntroduction[data-state="checked"] {
-        border: none;
-        background: ${cyan[500]};
-      }
-    
-      .CustomSwitchIntroduction[data-state="checked"]:not([data-disabled]):hover {
-        background: ${cyan[700]};
-      }
-
-
-      .CustomSwitchIntroduction-thumb {
-        box-sizing: border-box;
-        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-        display: block;
-        width: 16px;
-        height: 16px;
-        left: 4px;
-        border-radius: 16px;
-        background-color: #FFF;
-        position: relative;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 120ms;
-        box-shadow: 0px 1px 2px ${
-          isDarkMode ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
-        };
-      }
-
-      .CustomSwitchIntroduction-thumb[data-state="checked"] {
-        left: 18px;
-        background-color: #fff;
-        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
-      }
-    `}
-    </style>
-  );
-}
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx
index ca04551ec..d48f24dbe 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx
@@ -1,148 +1,39 @@
 'use client';
 import * as React from 'react';
 import * as Switch from '@base_ui/react/Switch';
-import { useTheme } from '@mui/system';
+import classes from './styles.module.css';
 
 export default function UnstyledSwitchIntroduction() {
   return (
     <div>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Basic switch, on by default"
         defaultChecked
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Basic switch, off by default"
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Disabled switch, on by default"
         defaultChecked
         disabled
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
       <Switch.Root
-        className="CustomSwitchIntroduction"
+        className={classes.root}
         aria-label="Disabled switch, off by default"
         disabled
       >
-        <Switch.Thumb className="CustomSwitchIntroduction-thumb" />
+        <Switch.Thumb className={classes.thumb} />
       </Switch.Root>
-      <Styles />
     </div>
   );
 }
-
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark modes
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .CustomSwitchIntroduction {
-        width: 38px;
-        height: 24px;
-        margin: 10px;
-        padding: 0;
-        box-sizing: border-box;
-        background: ${isDarkMode ? grey[900] : grey[50]};
-        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-        border-radius: 24px;
-        display: inline-block;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 120ms;
-        box-shadow: inset 0px 1px 1px ${
-          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
-        };
-      }
-
-      .CustomSwitchIntroduction[data-disabled] {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-
-      .CustomSwitchIntroduction:hover:not([data-disabled]) {
-        background: ${isDarkMode ? grey[800] : grey[100]};
-        border-color: ${isDarkMode ? grey[600] : grey[300]};
-      }
-    
-      .CustomSwitchIntroduction:focus-visible {
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[700] : cyan[200]};
-      }
-    
-      .CustomSwitchIntroduction[data-state="checked"] {
-        border: none;
-        background: ${cyan[500]};
-      }
-    
-      .CustomSwitchIntroduction[data-state="checked"]:not([data-disabled]):hover {
-        background: ${cyan[700]};
-      }
-
-
-      .CustomSwitchIntroduction-thumb {
-        box-sizing: border-box;
-        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-        display: block;
-        width: 16px;
-        height: 16px;
-        left: 4px;
-        border-radius: 16px;
-        background-color: #FFF;
-        position: relative;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 120ms;
-        box-shadow: 0px 1px 2px ${
-          isDarkMode ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
-        };
-      }
-
-      .CustomSwitchIntroduction-thumb[data-state="checked"] {
-        left: 18px;
-        background-color: #fff;
-        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
-      }
-    `}
-    </style>
-  );
-}
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css
new file mode 100644
index 000000000..d0b25a599
--- /dev/null
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css
@@ -0,0 +1,80 @@
+.root {
+  width: 38px;
+  height: 24px;
+  margin: 10px;
+  padding: 0;
+  box-sizing: border-box;
+  background: var(--gray-50);
+  border: 1px solid var(--gray-200);
+  border-radius: 24px;
+  display: inline-block;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.05);
+
+  :global(.dark) & {
+    background: var(--gray-900);
+    border-color: var(--gray-800);
+    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5);
+  }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:hover:not([data-disabled]) {
+    background: var(--gray-100);
+    border-color: var(--gray-300);
+
+    :global(.dark) & {
+      background: var(--gray-800);
+      border-color: var(--gray-600);
+    }
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--cyan-200);
+
+    :global(.dark) & {
+      box-shadow: 0 0 0 3px var(--cyan-700);
+    }
+  }
+
+  &[data-state='checked'] {
+    border: none;
+    background: var(--cyan-500);
+  }
+
+  &[data-state='checked']:not([data-disabled]):hover {
+    background: var(--cyan-700);
+  }
+}
+
+.thumb {
+  box-sizing: border-box;
+  border: 1px solid var(--gray-200);
+  display: block;
+  width: 16px;
+  height: 16px;
+  left: 4px;
+  border-radius: 16px;
+  background-color: #fff;
+  position: relative;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+
+  :global(.dark) & {
+    border-color: var(--gray-800);
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  }
+}
+
+.thumb[data-state='checked'] {
+  left: 18px;
+  background-color: #fff;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+}
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
index f7443c975..d3c6a6a13 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
@@ -30,9 +30,9 @@ export default function UnstyledSwitchIntroduction() {
   );
 }
 
-const Switch = React.forwardRef<HTMLButtonElement, BaseSwitch.RootProps>(
+const Switch = React.forwardRef<HTMLButtonElement, BaseSwitch.Root.Props>(
   function Switch({ className: classNameProp = '', ...props }, ref) {
-    const className = ({ checked }: BaseSwitch.OwnerState) =>
+    const className = ({ checked }: BaseSwitch.Root.OwnerState) =>
       `group relative inline-block w-[38px] h-[24px] m-2.5 p-0 transition rounded-full
     border border-solid outline-none border-slate-300 dark:border-gray-700
     focus-visible:shadow-outline-switch
@@ -48,7 +48,7 @@ const Thumb = React.forwardRef<
   HTMLSpanElement,
   React.HTMLAttributes<HTMLSpanElement>
 >(function Thumb({ className: classNameProp = '', ...props }, ref) {
-  const className = ({ checked }: BaseSwitch.OwnerState) =>
+  const className = ({ checked }: BaseSwitch.Root.OwnerState) =>
     `block w-4 h-4 rounded-2xl border border-solid outline-none border-slate-300 dark:border-gray-700 transition
   shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:shadow-[0_1px_2px_rgb(0_0_0_/_0.25)]
   relative transition-all
diff --git a/docs/data/translations/api-docs/switch-root/switch-root.json b/docs/data/translations/api-docs/switch-root/switch-root.json
index 36b79335c..401676fbb 100644
--- a/docs/data/translations/api-docs/switch-root/switch-root.json
+++ b/docs/data/translations/api-docs/switch-root/switch-root.json
@@ -11,7 +11,6 @@
     "disabled": {
       "description": "If <code>true</code>, the component is disabled and can&#39;t be interacted with."
     },
-    "id": { "description": "The id of the switch element." },
     "inputRef": { "description": "Ref to the underlying input element." },
     "name": { "description": "Name of the underlying input element." },
     "onCheckedChange": {
diff --git a/packages/mui-base/src/Switch/Root/SwitchContext.ts b/packages/mui-base/src/Switch/Root/SwitchContext.ts
deleted file mode 100644
index c2366b612..000000000
--- a/packages/mui-base/src/Switch/Root/SwitchContext.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-'use client';
-import * as React from 'react';
-import { type SwitchOwnerState } from './SwitchRoot.types';
-
-export const SwitchContext = React.createContext<SwitchOwnerState | null>(null);
diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.tsx b/packages/mui-base/src/Switch/Root/SwitchRoot.tsx
index f467e5505..0c72e0152 100644
--- a/packages/mui-base/src/Switch/Root/SwitchRoot.tsx
+++ b/packages/mui-base/src/Switch/Root/SwitchRoot.tsx
@@ -3,17 +3,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import refType from '@mui/utils/refType';
 import { useSwitchRoot } from './useSwitchRoot';
-import { SwitchContext } from './SwitchContext';
-import type { SwitchRootProps, SwitchOwnerState } from './SwitchRoot.types';
-import { resolveClassName } from '../../utils/resolveClassName';
-import { useSwitchStyleHooks } from './useSwitchStyleHooks';
-import { evaluateRenderProp } from '../../utils/evaluateRenderProp';
-import { useRenderPropForkRef } from '../../utils/useRenderPropForkRef';
+import { SwitchRootContext } from './SwitchRootContext';
+import { styleHookMapping } from '../styleHooks';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
-
-function defaultRender(props: React.ComponentPropsWithRef<'button'>) {
-  return <button type="button" {...props} />;
-}
+import type { BaseUIComponentProps } from '../../utils/types';
+import type { FieldRootOwnerState } from '../../Field/Root/FieldRoot.types';
 
 /**
  * The foundation for building custom-styled switches.
@@ -27,29 +22,28 @@ function defaultRender(props: React.ComponentPropsWithRef<'button'>) {
  * - [SwitchRoot API](https://base-ui.netlify.app/components/react-switch/#api-reference-SwitchRoot)
  */
 const SwitchRoot = React.forwardRef(function SwitchRoot(
-  props: SwitchRootProps,
+  props: SwitchRoot.Props,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
     checked: checkedProp,
-    className: classNameProp,
+    className,
     defaultChecked,
     inputRef,
     onCheckedChange,
     readOnly = false,
     required = false,
     disabled: disabledProp = false,
-    render: renderProp,
+    render,
     ...other
   } = props;
-  const render = renderProp ?? defaultRender;
 
   const { getInputProps, getButtonProps, checked } = useSwitchRoot(props);
 
   const { ownerState: fieldOwnerState, disabled: fieldDisabled } = useFieldRootContext();
   const disabled = fieldDisabled || disabledProp;
 
-  const ownerState: SwitchOwnerState = React.useMemo(
+  const ownerState: SwitchRoot.OwnerState = React.useMemo(
     () => ({
       ...fieldOwnerState,
       checked,
@@ -60,26 +54,38 @@ const SwitchRoot = React.forwardRef(function SwitchRoot(
     [fieldOwnerState, checked, disabled, readOnly, required],
   );
 
-  const className = resolveClassName(classNameProp, ownerState);
-  const styleHooks = useSwitchStyleHooks(ownerState);
-  const mergedRef = useRenderPropForkRef(render, forwardedRef);
-
-  const buttonProps = {
+  const { renderElement } = useComponentRenderer({
+    render: render || 'button',
     className,
-    ref: mergedRef,
-    ...styleHooks,
-    ...other,
-  };
+    propGetter: getButtonProps,
+    ownerState,
+    extraProps: other,
+    customStyleHookMapping: styleHookMapping,
+    ref: forwardedRef,
+  });
 
   return (
-    <SwitchContext.Provider value={ownerState}>
-      {evaluateRenderProp(render, getButtonProps(buttonProps), ownerState)}
+    <SwitchRootContext.Provider value={ownerState}>
+      {renderElement()}
       {!checked && props.name && <input type="hidden" name={props.name} value="off" />}
       <input {...getInputProps()} />
-    </SwitchContext.Provider>
+    </SwitchRootContext.Provider>
   );
 });
 
+namespace SwitchRoot {
+  export interface Props
+    extends useSwitchRoot.Parameters,
+      Omit<BaseUIComponentProps<'button', SwitchRoot.OwnerState>, 'onChange'> {}
+
+  export interface OwnerState extends FieldRootOwnerState {
+    checked: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+  }
+}
+
 SwitchRoot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -107,10 +113,6 @@ SwitchRoot.propTypes /* remove-proptypes */ = {
    * @default false
    */
   disabled: PropTypes.bool,
-  /**
-   * The id of the switch element.
-   */
-  id: PropTypes.string,
   /**
    * Ref to the underlying input element.
    */
diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.types.ts b/packages/mui-base/src/Switch/Root/SwitchRoot.types.ts
deleted file mode 100644
index 00ac07476..000000000
--- a/packages/mui-base/src/Switch/Root/SwitchRoot.types.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import type * as React from 'react';
-import type { BaseUIComponentProps } from '../../utils/types';
-import type { FieldRootOwnerState } from '../../Field/Root/FieldRoot.types';
-
-export interface SwitchOwnerState extends FieldRootOwnerState {
-  checked: boolean;
-  disabled: boolean;
-  readOnly: boolean;
-  required: boolean;
-}
-
-export interface SwitchRootProps
-  extends UseSwitchRootParameters,
-    Omit<BaseUIComponentProps<'button', SwitchOwnerState>, 'onChange'> {}
-
-export type SwitchContextValue = SwitchOwnerState;
-
-export interface UseSwitchRootParameters {
-  /**
-   * The id of the switch element.
-   */
-  id?: string;
-  /**
-   * If `true`, the switch is checked.
-   */
-  checked?: boolean;
-  /**
-   * The default checked state. Use when the component is not controlled.
-   */
-  defaultChecked?: boolean;
-  /**
-   * If `true`, the component is disabled and can't be interacted with.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Ref to the underlying input element.
-   */
-  inputRef?: React.Ref<HTMLInputElement>;
-  /**
-   * Name of the underlying input element.
-   */
-  name?: string;
-  /**
-   * Callback fired when the checked state is changed.
-   *
-   * @param {boolean} checked The new checked state.
-   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
-   */
-  onCheckedChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
-  /**
-   * If `true`, the component is read-only.
-   * Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently.
-   *
-   * @default false
-   */
-  readOnly?: boolean;
-  /**
-   * If `true`, the switch must be checked for the browser validation to pass.
-   *
-   * @default false
-   */
-  required?: boolean;
-}
-export interface UseSwitchRootReturnValue {
-  /**
-   * If `true`, the component will be checked.
-   */
-  checked: boolean;
-  /**
-   * Resolver for the input element's props.
-   * @param externalProps Additional props for the input element
-   * @returns Props that should be spread on the input element
-   */
-  getInputProps: (
-    externalProps?: React.ComponentPropsWithRef<'input'>,
-  ) => React.ComponentPropsWithRef<'input'>;
-  /**
-   * Resolver for the button element's props.
-   * @param externalProps Additional props for the input element
-   * @returns Props that should be spread on the button element
-   */
-  getButtonProps: (
-    externalProps?: React.ComponentPropsWithRef<'button'>,
-  ) => React.ComponentPropsWithRef<'button'>;
-}
diff --git a/packages/mui-base/src/Switch/Root/SwitchRootContext.ts b/packages/mui-base/src/Switch/Root/SwitchRootContext.ts
new file mode 100644
index 000000000..3804b912d
--- /dev/null
+++ b/packages/mui-base/src/Switch/Root/SwitchRootContext.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SwitchRoot } from './SwitchRoot';
+
+export type SwitchRootContext = SwitchRoot.OwnerState;
+
+export const SwitchRootContext = React.createContext<SwitchRootContext | undefined>(undefined);
+
+export function useSwitchRootContext() {
+  const context = React.useContext(SwitchRootContext);
+  if (context === undefined) {
+    throw new Error('useSwitchRootContext must be used within a SwitchRootProvider');
+  }
+
+  return context;
+}
diff --git a/packages/mui-base/src/Switch/Root/useSwitchRoot.ts b/packages/mui-base/src/Switch/Root/useSwitchRoot.ts
index 555755f83..6cec0e60d 100644
--- a/packages/mui-base/src/Switch/Root/useSwitchRoot.ts
+++ b/packages/mui-base/src/Switch/Root/useSwitchRoot.ts
@@ -1,6 +1,5 @@
 'use client';
 import * as React from 'react';
-import type { UseSwitchRootParameters, UseSwitchRootReturnValue } from './SwitchRoot.types';
 import { useControlled } from '../../utils/useControlled';
 import { useForkRef } from '../../utils/useForkRef';
 import { visuallyHidden } from '../../utils/visuallyHidden';
@@ -12,18 +11,7 @@ import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useFieldControlValidation } from '../../Field/Control/useFieldControlValidation';
 import { useField } from '../../Field/useField';
 
-/**
- * The basic building block for creating custom switches.
- *
- * Demos:
- *
- * - [Switch](https://mui.com/base-ui/react-switch/#hook)
- *
- * API:
- *
- * - [useSwitchRoot API](https://mui.com/base-ui/react-switch/hooks-api/#use-switch-root)
- */
-export function useSwitchRoot(params: UseSwitchRootParameters): UseSwitchRootReturnValue {
+export function useSwitchRoot(params: useSwitchRoot.Parameters): useSwitchRoot.ReturnValue {
   const {
     id: idProp,
     checked: checkedProp,
@@ -154,3 +142,77 @@ export function useSwitchRoot(params: UseSwitchRootParameters): UseSwitchRootRet
     [checked, getButtonProps, getInputProps],
   );
 }
+
+export namespace useSwitchRoot {
+  export interface Parameters {
+    /**
+     * The id of the switch element.
+     */
+    id?: string;
+    /**
+     * If `true`, the switch is checked.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state. Use when the component is not controlled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * If `true`, the component is disabled and can't be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Ref to the underlying input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Name of the underlying input element.
+     */
+    name?: string;
+    /**
+     * Callback fired when the checked state is changed.
+     *
+     * @param {boolean} checked The new checked state.
+     * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+     */
+    onCheckedChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * If `true`, the component is read-only.
+     * Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, the switch must be checked for the browser validation to pass.
+     *
+     * @default false
+     */
+    required?: boolean;
+  }
+
+  export interface ReturnValue {
+    /**
+     * If `true`, the component will be checked.
+     */
+    checked: boolean;
+    /**
+     * Resolver for the input element's props.
+     * @param externalProps Additional props for the input element
+     * @returns Props that should be spread on the input element
+     */
+    getInputProps: (
+      externalProps?: React.ComponentPropsWithRef<'input'>,
+    ) => React.ComponentPropsWithRef<'input'>;
+    /**
+     * Resolver for the button element's props.
+     * @param externalProps Additional props for the input element
+     * @returns Props that should be spread on the button element
+     */
+    getButtonProps: (
+      externalProps?: React.ComponentPropsWithRef<'button'>,
+    ) => React.ComponentPropsWithRef<'button'>;
+  }
+}
diff --git a/packages/mui-base/src/Switch/Root/useSwitchStyleHooks.ts b/packages/mui-base/src/Switch/Root/useSwitchStyleHooks.ts
deleted file mode 100644
index 885b5c9cb..000000000
--- a/packages/mui-base/src/Switch/Root/useSwitchStyleHooks.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { SwitchOwnerState } from './SwitchRoot.types';
-import { getStyleHookProps } from '../../utils/getStyleHookProps';
-
-/**
- * @ignore - internal hook.
- */
-export function useSwitchStyleHooks(ownerState: SwitchOwnerState) {
-  return React.useMemo(() => {
-    return getStyleHookProps(ownerState, {
-      checked: (value) => ({ 'data-state': value ? 'checked' : 'unchecked' }),
-    });
-  }, [ownerState]);
-}
diff --git a/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx b/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx
index 4db313f8f..9e49e094b 100644
--- a/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx
+++ b/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as Switch from '@base_ui/react/Switch';
 import { createRenderer, describeConformance } from '#test-utils';
-import { SwitchContext } from '../Root/SwitchContext';
+import { SwitchRootContext } from '../Root/SwitchRootContext';
 
-const testContext = {
+const testContext: SwitchRootContext = {
   checked: false,
   disabled: false,
   readOnly: false,
@@ -19,7 +19,9 @@ describe('<Switch.Thumb />', () => {
   describeConformance(<Switch.Thumb />, () => ({
     refInstanceof: window.HTMLSpanElement,
     render: (node) => {
-      return render(<SwitchContext.Provider value={testContext}>{node}</SwitchContext.Provider>);
+      return render(
+        <SwitchRootContext.Provider value={testContext}>{node}</SwitchRootContext.Provider>,
+      );
     },
   }));
 });
diff --git a/packages/mui-base/src/Switch/Thumb/SwitchThumb.tsx b/packages/mui-base/src/Switch/Thumb/SwitchThumb.tsx
index 078b49dae..831ee3c0e 100644
--- a/packages/mui-base/src/Switch/Thumb/SwitchThumb.tsx
+++ b/packages/mui-base/src/Switch/Thumb/SwitchThumb.tsx
@@ -1,17 +1,12 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SwitchThumbProps } from './SwitchThumb.types';
-import { SwitchContext } from '../Root/SwitchContext';
-import { useSwitchStyleHooks } from '../Root/useSwitchStyleHooks';
-import { resolveClassName } from '../../utils/resolveClassName';
-import { evaluateRenderProp } from '../../utils/evaluateRenderProp';
-import { useRenderPropForkRef } from '../../utils/useRenderPropForkRef';
+import type { SwitchRoot } from '../Root/SwitchRoot';
+import { useSwitchRootContext } from '../Root/SwitchRootContext';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
-
-function defaultRender(props: React.ComponentPropsWithRef<'span'>) {
-  return <span {...props} />;
-}
+import type { BaseUIComponentProps } from '../../utils/types';
+import { styleHookMapping } from '../styleHooks';
 
 /**
  *
@@ -24,35 +19,34 @@ function defaultRender(props: React.ComponentPropsWithRef<'span'>) {
  * - [SwitchThumb API](https://base-ui.netlify.app/components/react-switch/#api-reference-SwitchThumb)
  */
 const SwitchThumb = React.forwardRef(function SwitchThumb(
-  props: SwitchThumbProps,
+  props: SwitchThumb.Props,
   forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
-  const { render: renderProp, className: classNameProp, ...other } = props;
-  const render = renderProp ?? defaultRender;
+  const { render, className, ...other } = props;
 
   const { ownerState: fieldOwnerState } = useFieldRootContext();
 
-  const ownerState = React.useContext(SwitchContext);
-  if (ownerState === null) {
-    throw new Error('Base UI: Switch.Thumb is not placed inside the Switch component.');
-  }
-
+  const ownerState = useSwitchRootContext();
   const extendedOwnerState = { ...fieldOwnerState, ...ownerState };
 
-  const className = resolveClassName(classNameProp, extendedOwnerState);
-  const styleHooks = useSwitchStyleHooks(extendedOwnerState);
-  const mergedRef = useRenderPropForkRef(render, forwardedRef);
-
-  const elementProps = {
+  const { renderElement } = useComponentRenderer({
+    render: render || 'span',
     className,
-    ref: mergedRef,
-    ...styleHooks,
-    ...other,
-  };
+    ownerState: extendedOwnerState,
+    extraProps: other,
+    customStyleHookMapping: styleHookMapping,
+    ref: forwardedRef,
+  });
 
-  return evaluateRenderProp(render, elementProps, ownerState);
+  return renderElement();
 });
 
+namespace SwitchThumb {
+  export interface Props extends BaseUIComponentProps<'span', OwnerState> {}
+
+  export interface OwnerState extends SwitchRoot.OwnerState {}
+}
+
 SwitchThumb.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Switch/Thumb/SwitchThumb.types.ts b/packages/mui-base/src/Switch/Thumb/SwitchThumb.types.ts
deleted file mode 100644
index 51d55535b..000000000
--- a/packages/mui-base/src/Switch/Thumb/SwitchThumb.types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { SwitchOwnerState } from '../Root/SwitchRoot.types';
-import type { BaseUIComponentProps } from '../../utils/types';
-
-export interface SwitchThumbProps extends BaseUIComponentProps<'span', SwitchOwnerState> {}
diff --git a/packages/mui-base/src/Switch/index.barrel.ts b/packages/mui-base/src/Switch/index.barrel.ts
index f4f136cf8..f717fab5a 100644
--- a/packages/mui-base/src/Switch/index.barrel.ts
+++ b/packages/mui-base/src/Switch/index.barrel.ts
@@ -1,13 +1,2 @@
 export { SwitchRoot } from './Root/SwitchRoot';
-export { useSwitchRoot } from './Root/useSwitchRoot';
-export { SwitchContext } from './Root/SwitchContext';
-export type {
-  SwitchRootProps,
-  SwitchOwnerState,
-  SwitchContextValue,
-  UseSwitchRootParameters,
-  UseSwitchRootReturnValue,
-} from './Root/SwitchRoot.types';
-
 export { SwitchThumb } from './Thumb/SwitchThumb';
-export type { SwitchThumbProps } from './Thumb/SwitchThumb.types';
diff --git a/packages/mui-base/src/Switch/index.ts b/packages/mui-base/src/Switch/index.ts
index d033156fd..7edb4a433 100644
--- a/packages/mui-base/src/Switch/index.ts
+++ b/packages/mui-base/src/Switch/index.ts
@@ -1,13 +1,2 @@
 export { SwitchRoot as Root } from './Root/SwitchRoot';
-export { useSwitchRoot } from './Root/useSwitchRoot';
-export { SwitchContext } from './Root/SwitchContext';
-export type {
-  SwitchRootProps as RootProps,
-  SwitchOwnerState as OwnerState,
-  SwitchContextValue,
-  UseSwitchRootParameters,
-  UseSwitchRootReturnValue,
-} from './Root/SwitchRoot.types';
-
 export { SwitchThumb as Thumb } from './Thumb/SwitchThumb';
-export type { SwitchThumbProps as ThumbProps } from './Thumb/SwitchThumb.types';
diff --git a/packages/mui-base/src/Switch/styleHooks.ts b/packages/mui-base/src/Switch/styleHooks.ts
new file mode 100644
index 000000000..0c8fd40ab
--- /dev/null
+++ b/packages/mui-base/src/Switch/styleHooks.ts
@@ -0,0 +1,6 @@
+import type { SwitchRoot } from './Root/SwitchRoot';
+import type { CustomStyleHookMapping } from '../utils/getStyleHookProps';
+
+export const styleHookMapping: CustomStyleHookMapping<SwitchRoot.OwnerState> = {
+  checked: (value) => ({ 'data-state': value ? 'checked' : 'unchecked' }),
+};

From b968150b759762a0d5302a0e3a908984decd1348 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Mon, 7 Oct 2024 11:23:00 +0200
Subject: [PATCH 04/22] [Tabs] Move types to namespaces (#642)

---
 .../tailwind/index.tsx                        |  6 +-
 .../PackageManagerSnippetRoot.tsx             |  4 +-
 .../mui-base/src/Tabs/Root/TabsProvider.tsx   |  8 +-
 .../mui-base/src/Tabs/Root/TabsRoot.test.tsx  | 40 ++++-----
 packages/mui-base/src/Tabs/Root/TabsRoot.tsx  | 44 ++++++++-
 .../mui-base/src/Tabs/Root/TabsRoot.types.ts  | 78 ----------------
 .../{TabsContext.ts => TabsRootContext.ts}    | 16 ++--
 packages/mui-base/src/Tabs/Root/styleHooks.ts |  4 +-
 .../mui-base/src/Tabs/Root/useTabsRoot.ts     | 51 +++++++++--
 packages/mui-base/src/Tabs/Tab/Tab.test.tsx   | 14 ++-
 packages/mui-base/src/Tabs/Tab/Tab.tsx        | 22 ++++-
 packages/mui-base/src/Tabs/Tab/Tab.types.ts   | 71 ---------------
 packages/mui-base/src/Tabs/Tab/useTab.ts      | 65 +++++++++++++-
 .../src/Tabs/TabIndicator/TabIndicator.tsx    | 31 +++++--
 .../Tabs/TabIndicator/TabIndicator.types.ts   | 40 ---------
 .../src/Tabs/TabIndicator/useTabIndicator.ts  | 27 +++++-
 .../src/Tabs/TabPanel/TabPanel.test.tsx       |  2 +-
 .../mui-base/src/Tabs/TabPanel/TabPanel.tsx   | 27 +++++-
 .../src/Tabs/TabPanel/TabPanel.types.ts       | 59 ------------
 .../src/Tabs/TabPanel/useTabPanel.test.tsx    |  5 +-
 .../mui-base/src/Tabs/TabPanel/useTabPanel.ts | 44 ++++++++-
 .../src/Tabs/TabsList/TabsList.test.tsx       |  6 +-
 .../mui-base/src/Tabs/TabsList/TabsList.tsx   | 27 +++++-
 .../src/Tabs/TabsList/TabsList.types.ts       | 90 -------------------
 .../src/Tabs/TabsList/TabsListContext.ts      |  6 +-
 .../src/Tabs/TabsList/TabsListProvider.tsx    |  6 +-
 .../src/Tabs/TabsList/tabsListReducer.ts      | 10 ++-
 .../mui-base/src/Tabs/TabsList/useTabsList.ts | 76 +++++++++++++---
 packages/mui-base/src/Tabs/index.barrel.ts    | 38 --------
 packages/mui-base/src/Tabs/index.ts           | 38 --------
 30 files changed, 430 insertions(+), 525 deletions(-)
 delete mode 100644 packages/mui-base/src/Tabs/Root/TabsRoot.types.ts
 rename packages/mui-base/src/Tabs/Root/{TabsContext.ts => TabsRootContext.ts} (76%)
 delete mode 100644 packages/mui-base/src/Tabs/Tab/Tab.types.ts
 delete mode 100644 packages/mui-base/src/Tabs/TabIndicator/TabIndicator.types.ts
 delete mode 100644 packages/mui-base/src/Tabs/TabPanel/TabPanel.types.ts
 delete mode 100644 packages/mui-base/src/Tabs/TabsList/TabsList.types.ts

diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
index 4eb2e98f5..92957ad45 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
@@ -29,7 +29,7 @@ export default function UnstyledTabsIntroduction() {
   );
 }
 
-const TabsList = React.forwardRef<HTMLDivElement, Tabs.ListProps>((props, ref) => {
+const TabsList = React.forwardRef<HTMLDivElement, Tabs.List.Props>((props, ref) => {
   const { className, ...other } = props;
   return (
     <Tabs.List
@@ -43,7 +43,7 @@ const TabsList = React.forwardRef<HTMLDivElement, Tabs.ListProps>((props, ref) =
   );
 });
 
-const Tab = React.forwardRef<HTMLButtonElement, Tabs.TabProps>((props, ref) => {
+const Tab = React.forwardRef<HTMLButtonElement, Tabs.Tab.Props>((props, ref) => {
   const { className, ...other } = props;
   return (
     <Tabs.Tab
@@ -65,7 +65,7 @@ const Tab = React.forwardRef<HTMLButtonElement, Tabs.TabProps>((props, ref) => {
   );
 });
 
-const TabPanel = React.forwardRef<HTMLDivElement, Tabs.PanelProps>((props, ref) => {
+const TabPanel = React.forwardRef<HTMLDivElement, Tabs.Panel.Props>((props, ref) => {
   const { className, ...other } = props;
   return (
     <Tabs.Panel
diff --git a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx
index eae7177cd..a9d8e6c23 100644
--- a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx
+++ b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx
@@ -44,7 +44,7 @@ export namespace PackageManagerSnippetRoot {
   export type Props = {
     children: React.ReactNode;
     options: Array<{ value: string; label: string }>;
-    renderTab?: Tabs.TabProps['render'];
-    renderTabsList?: Tabs.ListProps['render'];
+    renderTab?: Tabs.Tab.Props['render'];
+    renderTabsList?: Tabs.List.Props['render'];
   };
 }
diff --git a/packages/mui-base/src/Tabs/Root/TabsProvider.tsx b/packages/mui-base/src/Tabs/Root/TabsProvider.tsx
index fdef97885..2a6670b7a 100644
--- a/packages/mui-base/src/Tabs/Root/TabsProvider.tsx
+++ b/packages/mui-base/src/Tabs/Root/TabsProvider.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TabsContext, TabsContextValue } from './TabsContext';
+import { TabsRootContext } from './TabsRootContext';
 import { CompoundComponentContext, CompoundComponentContextValue } from '../../useCompound';
 
 export type TabPanelMetadata = {
@@ -10,7 +10,7 @@ export type TabPanelMetadata = {
 };
 
 export type TabsProviderValue = CompoundComponentContextValue<any, TabPanelMetadata> &
-  TabsContextValue;
+  TabsRootContext;
 
 export interface TabsProviderProps {
   value: TabsProviderValue;
@@ -48,7 +48,7 @@ function TabsProvider(props: TabsProviderProps) {
       [registerItem, getItemIndex, totalSubitemCount],
     );
 
-  const tabsContextValue: TabsContextValue = React.useMemo(
+  const tabsContextValue: TabsRootContext = React.useMemo(
     () => ({
       direction,
       getTabId,
@@ -73,7 +73,7 @@ function TabsProvider(props: TabsProviderProps) {
 
   return (
     <CompoundComponentContext.Provider value={compoundComponentContextValue}>
-      <TabsContext.Provider value={tabsContextValue}>{children}</TabsContext.Provider>
+      <TabsRootContext.Provider value={tabsContextValue}>{children}</TabsRootContext.Provider>
     </CompoundComponentContext.Provider>
   );
 }
diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
index 18c46cc3f..00e145932 100644
--- a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
+++ b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
@@ -280,10 +280,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={0}
                 >
                   <Tabs.List activateOnFocus={false}>
@@ -311,10 +311,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={1}
                 >
                   <Tabs.List activateOnFocus={false}>
@@ -344,10 +344,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={0}
                 >
                   <Tabs.List>
@@ -376,10 +376,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={1}
                 >
                   <Tabs.List>
@@ -408,9 +408,9 @@ describe('<Tabs.Root />', () => {
             const handleKeyDown = spy();
             const { getAllByRole } = await render(
               <Tabs.Root
-                direction={direction as Tabs.RootProps['direction']}
+                direction={direction as Tabs.Root.Props['direction']}
                 onKeyDown={handleKeyDown}
-                orientation={orientation as Tabs.RootProps['orientation']}
+                orientation={orientation as Tabs.Root.Props['orientation']}
                 value={2}
               >
                 <Tabs.List>
@@ -440,10 +440,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={2}
                 >
                   <Tabs.List activateOnFocus={false}>
@@ -471,10 +471,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={1}
                 >
                   <Tabs.List activateOnFocus={false}>
@@ -504,10 +504,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={2}
                 >
                   <Tabs.List>
@@ -536,10 +536,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={1}
                 >
                   <Tabs.List>
@@ -568,9 +568,9 @@ describe('<Tabs.Root />', () => {
             const handleKeyDown = spy();
             const { getAllByRole } = await render(
               <Tabs.Root
-                direction={direction as Tabs.RootProps['direction']}
+                direction={direction as Tabs.Root.Props['direction']}
                 onKeyDown={handleKeyDown}
-                orientation={orientation as Tabs.RootProps['orientation']}
+                orientation={orientation as Tabs.Root.Props['orientation']}
                 value={0}
               >
                 <Tabs.List>
diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.tsx b/packages/mui-base/src/Tabs/Root/TabsRoot.tsx
index 48ac80b66..7660a562d 100644
--- a/packages/mui-base/src/Tabs/Root/TabsRoot.tsx
+++ b/packages/mui-base/src/Tabs/Root/TabsRoot.tsx
@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TabsRootOwnerState, TabsRootProps } from './TabsRoot.types';
 import { useTabsRoot } from './useTabsRoot';
 import { tabsStyleHookMapping } from './styleHooks';
 import { TabsProvider } from './TabsProvider';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -18,7 +18,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
  * - [TabsRoot API](https://base-ui.netlify.app/components/react-tabs/#api-reference-TabsRoot)
  */
 const TabsRoot = React.forwardRef(function TabsRoot(
-  props: TabsRootProps,
+  props: TabsRoot.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -40,7 +40,7 @@ const TabsRoot = React.forwardRef(function TabsRoot(
     direction,
   });
 
-  const ownerState: TabsRootOwnerState = {
+  const ownerState: TabsRoot.OwnerState = {
     orientation,
     direction,
     tabActivationDirection,
@@ -59,6 +59,44 @@ const TabsRoot = React.forwardRef(function TabsRoot(
   return <TabsProvider value={contextValue}>{renderElement()}</TabsProvider>;
 });
 
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsDirection = 'ltr' | 'rtl';
+export type TabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
+
+namespace TabsRoot {
+  export type OwnerState = {
+    orientation: TabsOrientation;
+    direction: TabsDirection;
+    tabActivationDirection: TabActivationDirection;
+  };
+
+  export interface Props extends BaseUIComponentProps<'div', OwnerState> {
+    /**
+     * The value of the currently selected `Tab`.
+     * If you don't want any selected `Tab`, you can set this prop to `null`.
+     */
+    value?: any | null;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: any | null;
+    /**
+     * The component orientation (layout flow direction).
+     * @default 'horizontal'
+     */
+    orientation?: TabsOrientation;
+    /**
+     * The direction of the text.
+     * @default 'ltr'
+     */
+    direction?: TabsDirection;
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onValueChange?: (value: any | null, event: React.SyntheticEvent | null) => void;
+  }
+}
+
 TabsRoot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.types.ts b/packages/mui-base/src/Tabs/Root/TabsRoot.types.ts
deleted file mode 100644
index cfb8dfa1e..000000000
--- a/packages/mui-base/src/Tabs/Root/TabsRoot.types.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { TabsProviderValue } from './TabsProvider';
-import { BaseUIComponentProps } from '../../utils/types';
-
-export type TabsRootOwnerState = {
-  orientation: TabsOrientation;
-  direction: TabsDirection;
-  tabActivationDirection: TabActivationDirection;
-};
-
-export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRootOwnerState> {
-  /**
-   * The value of the currently selected `Tab`.
-   * If you don't want any selected `Tab`, you can set this prop to `null`.
-   */
-  value?: any | null;
-  /**
-   * The default value. Use when the component is not controlled.
-   */
-  defaultValue?: any | null;
-  /**
-   * The component orientation (layout flow direction).
-   * @default 'horizontal'
-   */
-  orientation?: TabsOrientation;
-  /**
-   * The direction of the text.
-   * @default 'ltr'
-   */
-  direction?: TabsDirection;
-  /**
-   * Callback invoked when new value is being set.
-   */
-  onValueChange?: (value: any | null, event: React.SyntheticEvent | null) => void;
-}
-
-export type TabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
-
-export type TabsOrientation = 'horizontal' | 'vertical';
-
-export type TabsDirection = 'ltr' | 'rtl';
-
-export interface UseTabsParameters {
-  /**
-   * The value of the currently selected `Tab`.
-   * If you don't want any selected `Tab`, you can set this prop to `false`.
-   */
-  value?: any | null;
-  /**
-   * The default value. Use when the component is not controlled.
-   */
-  defaultValue?: any | null;
-  /**
-   * The component orientation (layout flow direction).
-   * @default 'horizontal'
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * The direction of the text.
-   * @default 'ltr'
-   */
-  direction?: 'ltr' | 'rtl';
-  /**
-   * Callback invoked when new value is being set.
-   */
-  onValueChange?: (value: any | null, event: React.SyntheticEvent | null) => void;
-}
-
-export interface UseTabsReturnValue {
-  /**
-   * Returns the values to be passed to the tabs provider.
-   */
-  contextValue: TabsProviderValue;
-  getRootProps: (
-    externalProps?: React.ComponentPropsWithRef<'div'>,
-  ) => React.ComponentPropsWithRef<'div'>;
-  tabActivationDirection: TabActivationDirection;
-}
diff --git a/packages/mui-base/src/Tabs/Root/TabsContext.ts b/packages/mui-base/src/Tabs/Root/TabsRootContext.ts
similarity index 76%
rename from packages/mui-base/src/Tabs/Root/TabsContext.ts
rename to packages/mui-base/src/Tabs/Root/TabsRootContext.ts
index be0e02bc4..ea4d9101c 100644
--- a/packages/mui-base/src/Tabs/Root/TabsContext.ts
+++ b/packages/mui-base/src/Tabs/Root/TabsRootContext.ts
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import { type TabActivationDirection } from './TabsRoot.types';
+import { type TabActivationDirection } from './TabsRoot';
 
-export interface TabsContextValue {
+export interface TabsRootContext {
   /**
    * The currently selected tab's value.
    */
@@ -46,19 +46,19 @@ export interface TabsContextValue {
 /**
  * @ignore - internal component.
  */
-const TabsContext = React.createContext<TabsContextValue | null>(null);
+const TabsRootContext = React.createContext<TabsRootContext | null>(null);
 
 if (process.env.NODE_ENV !== 'production') {
-  TabsContext.displayName = 'TabsContext';
+  TabsRootContext.displayName = 'TabsRootContext';
 }
 
-export function useTabsContext() {
-  const context = React.useContext(TabsContext);
+export function useTabsRootContext() {
+  const context = React.useContext(TabsRootContext);
   if (context == null) {
-    throw new Error('No TabsContext provided');
+    throw new Error('Base UI: No TabsRootContext provided');
   }
 
   return context;
 }
 
-export { TabsContext };
+export { TabsRootContext };
diff --git a/packages/mui-base/src/Tabs/Root/styleHooks.ts b/packages/mui-base/src/Tabs/Root/styleHooks.ts
index 56883ad06..0e9a3c4fb 100644
--- a/packages/mui-base/src/Tabs/Root/styleHooks.ts
+++ b/packages/mui-base/src/Tabs/Root/styleHooks.ts
@@ -1,7 +1,7 @@
-import type { TabsRootOwnerState } from './TabsRoot.types';
+import type { TabsRoot } from './TabsRoot';
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 
-export const tabsStyleHookMapping: CustomStyleHookMapping<TabsRootOwnerState> = {
+export const tabsStyleHookMapping: CustomStyleHookMapping<TabsRoot.OwnerState> = {
   direction: () => null,
   tabActivationDirection: (dir) => ({
     'data-activation-direction': dir,
diff --git a/packages/mui-base/src/Tabs/Root/useTabsRoot.ts b/packages/mui-base/src/Tabs/Root/useTabsRoot.ts
index 36d867a4a..8c9e49354 100644
--- a/packages/mui-base/src/Tabs/Root/useTabsRoot.ts
+++ b/packages/mui-base/src/Tabs/Root/useTabsRoot.ts
@@ -1,11 +1,7 @@
 'use client';
 import * as React from 'react';
-import type {
-  TabActivationDirection,
-  UseTabsParameters,
-  UseTabsReturnValue,
-} from './TabsRoot.types';
-import type { TabPanelMetadata } from './TabsProvider';
+import type { TabActivationDirection } from './TabsRoot';
+import type { TabsProviderValue, TabPanelMetadata } from './TabsProvider';
 import { useCompoundParent } from '../../useCompound';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useControlled } from '../../utils/useControlled';
@@ -18,7 +14,7 @@ export interface TabMetadata {
 
 type IdLookupFunction = (id: any) => string | undefined;
 
-function useTabsRoot(parameters: UseTabsParameters): UseTabsReturnValue {
+function useTabsRoot(parameters: useTabsRoot.Parameters): useTabsRoot.ReturnValue {
   const {
     value: valueProp,
     defaultValue,
@@ -72,7 +68,7 @@ function useTabsRoot(parameters: UseTabsParameters): UseTabsReturnValue {
     tabIdLookup.current = lookupFunction;
   }, []);
 
-  const getRootProps: UseTabsReturnValue['getRootProps'] = React.useCallback(
+  const getRootProps: useTabsRoot.ReturnValue['getRootProps'] = React.useCallback(
     (otherProps = {}) =>
       mergeReactProps<'div'>(otherProps, {
         dir: direction,
@@ -97,4 +93,43 @@ function useTabsRoot(parameters: UseTabsParameters): UseTabsReturnValue {
   };
 }
 
+namespace useTabsRoot {
+  export interface Parameters {
+    /**
+     * The value of the currently selected `Tab`.
+     * If you don't want any selected `Tab`, you can set this prop to `false`.
+     */
+    value?: any | null;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: any | null;
+    /**
+     * The component orientation (layout flow direction).
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The direction of the text.
+     * @default 'ltr'
+     */
+    direction?: 'ltr' | 'rtl';
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onValueChange?: (value: any | null, event: React.SyntheticEvent | null) => void;
+  }
+
+  export interface ReturnValue {
+    /**
+     * Returns the values to be passed to the tabs provider.
+     */
+    contextValue: TabsProviderValue;
+    getRootProps: (
+      externalProps?: React.ComponentPropsWithRef<'div'>,
+    ) => React.ComponentPropsWithRef<'div'>;
+    tabActivationDirection: TabActivationDirection;
+  }
+}
+
 export { useTabsRoot };
diff --git a/packages/mui-base/src/Tabs/Tab/Tab.test.tsx b/packages/mui-base/src/Tabs/Tab/Tab.test.tsx
index c934ac3ed..328052085 100644
--- a/packages/mui-base/src/Tabs/Tab/Tab.test.tsx
+++ b/packages/mui-base/src/Tabs/Tab/Tab.test.tsx
@@ -1,12 +1,8 @@
 import * as React from 'react';
 import * as Tabs from '@base_ui/react/Tabs';
-import {
-  TabsListProvider,
-  TabsListProviderValue,
-  TabsContext,
-  TabsContextValue,
-} from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
+import { TabsListProviderValue, TabsListProvider } from '../TabsList/TabsListProvider';
+import { TabsRootContext } from '../Root/TabsRootContext';
 
 describe('<Tabs.Tab />', () => {
   const { render } = createRenderer();
@@ -26,7 +22,7 @@ describe('<Tabs.Tab />', () => {
     },
   };
 
-  const testTabsContext: TabsContextValue = {
+  const testTabsContext: TabsRootContext = {
     value: 0,
     onSelected() {},
     registerTabIdLookup() {},
@@ -40,9 +36,9 @@ describe('<Tabs.Tab />', () => {
   describeConformance(<Tabs.Tab value="1" />, () => ({
     render: (node) => {
       return render(
-        <TabsContext.Provider value={testTabsContext}>
+        <TabsRootContext.Provider value={testTabsContext}>
           <TabsListProvider value={testTabsListContext}>{node}</TabsListProvider>
-        </TabsContext.Provider>,
+        </TabsRootContext.Provider>,
       );
     },
     refInstanceof: window.HTMLButtonElement,
diff --git a/packages/mui-base/src/Tabs/Tab/Tab.tsx b/packages/mui-base/src/Tabs/Tab/Tab.tsx
index 7cef93ed0..217fef7cb 100644
--- a/packages/mui-base/src/Tabs/Tab/Tab.tsx
+++ b/packages/mui-base/src/Tabs/Tab/Tab.tsx
@@ -1,9 +1,10 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TabProps, TabOwnerState } from './Tab.types';
 import { useTab } from './useTab';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { BaseUIComponentProps } from '../../utils/types';
+import { TabsOrientation } from '../Root/TabsRoot';
 
 /**
  *
@@ -16,7 +17,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
  * - [Tab API](https://base-ui.netlify.app/components/react-tabs/#api-reference-Tab)
  */
 const Tab = React.forwardRef(function Tab(
-  props: TabProps,
+  props: Tab.Props,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
   const { className, disabled = false, render, value, ...other } = props;
@@ -26,7 +27,7 @@ const Tab = React.forwardRef(function Tab(
     rootRef: forwardedRef,
   });
 
-  const ownerState: TabOwnerState = {
+  const ownerState: Tab.OwnerState = {
     disabled,
     selected,
     orientation,
@@ -43,6 +44,21 @@ const Tab = React.forwardRef(function Tab(
   return renderElement();
 });
 
+namespace Tab {
+  export interface Props extends BaseUIComponentProps<'button', Tab.OwnerState> {
+    /**
+     * You can provide your own value. Otherwise, it falls back to the child position index.
+     */
+    value?: any;
+  }
+
+  export interface OwnerState {
+    disabled: boolean;
+    selected: boolean;
+    orientation: TabsOrientation;
+  }
+}
+
 Tab.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Tabs/Tab/Tab.types.ts b/packages/mui-base/src/Tabs/Tab/Tab.types.ts
deleted file mode 100644
index 23a967a84..000000000
--- a/packages/mui-base/src/Tabs/Tab/Tab.types.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { TabsOrientation } from '../Root/TabsRoot.types';
-import { BaseUIComponentProps } from '../../utils/types';
-
-export type TabOwnerState = {
-  disabled: boolean;
-  selected: boolean;
-  orientation: TabsOrientation;
-};
-
-export interface TabProps extends BaseUIComponentProps<'button', TabOwnerState> {
-  /**
-   * You can provide your own value. Otherwise, it falls back to the child position index.
-   */
-  value?: any;
-}
-
-export interface UseTabParameters {
-  /**
-   * The value of the tab.
-   * It's used to associate the tab with a tab panel(s) with the same value.
-   * If the value is not provided, it falls back to the position index.
-   */
-  value?: any;
-  /**
-   * Callback fired when the tab is clicked.
-   */
-  onClick?: React.MouseEventHandler;
-  /**
-   * If `true`, the tab will be disabled.
-   */
-  disabled?: boolean;
-  /**
-   * The id of the tab.
-   * If not provided, it will be automatically generated.
-   */
-  id?: string;
-  /**
-   * Ref to the root slot's DOM element.
-   */
-  rootRef?: React.Ref<Element>;
-}
-
-export interface UseTabReturnValue {
-  /**
-   * Resolver for the root slot's props.
-   * @param externalProps props for the root slot
-   * @returns props that should be spread on the root slot
-   */
-  getRootProps: (
-    externalProps?: React.ComponentPropsWithRef<'button'>,
-  ) => React.ComponentPropsWithRef<'button'>;
-  /**
-   * 0-based index of the tab in the list of tabs.
-   */
-  index: number;
-  orientation: TabsOrientation;
-  /**
-   * Ref to the root slot's DOM element.
-   */
-  rootRef: React.RefCallback<Element> | null;
-  /**
-   * If `true`, the tab is selected.
-   */
-  selected: boolean;
-  /**
-   * Total number of tabs in the nearest parent TabsList.
-   * This can be used to determine if the tab is the last one to style it accordingly.
-   */
-  totalTabsCount: number;
-}
diff --git a/packages/mui-base/src/Tabs/Tab/useTab.ts b/packages/mui-base/src/Tabs/Tab/useTab.ts
index f04b4d7cf..204ba177c 100644
--- a/packages/mui-base/src/Tabs/Tab/useTab.ts
+++ b/packages/mui-base/src/Tabs/Tab/useTab.ts
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
-import { UseTabParameters, UseTabReturnValue } from './Tab.types';
-import { useTabsContext } from '../Root/TabsContext';
+import { useTabsRootContext } from '../Root/TabsRootContext';
 import { TabMetadata } from '../Root/useTabsRoot';
 import { useCompoundItem } from '../../useCompound';
 import { useListItem } from '../../useList';
@@ -9,18 +8,19 @@ import { useButton } from '../../useButton';
 import { useId } from '../../utils/useId';
 import { useForkRef } from '../../utils/useForkRef';
 import { mergeReactProps } from '../../utils/mergeReactProps';
+import { TabsOrientation } from '../Root/TabsRoot';
 
 function tabValueGenerator(otherTabValues: Set<any>) {
   return otherTabValues.size;
 }
 
-function useTab(parameters: UseTabParameters): UseTabReturnValue {
+function useTab(parameters: useTab.Parameters): useTab.ReturnValue {
   const { value: valueParam, rootRef: externalRef, disabled = false, id: idParam } = parameters;
 
   const tabRef = React.useRef<HTMLElement>(null);
   const id = useId(idParam);
 
-  const { value: selectedValue, getTabPanelId, orientation } = useTabsContext();
+  const { value: selectedValue, getTabPanelId, orientation } = useTabsRootContext();
 
   const tabMetadata = React.useMemo(() => ({ disabled, ref: tabRef, id }), [disabled, tabRef, id]);
 
@@ -76,4 +76,61 @@ function useTab(parameters: UseTabParameters): UseTabReturnValue {
   };
 }
 
+namespace useTab {
+  export interface Parameters {
+    /**
+     * The value of the tab.
+     * It's used to associate the tab with a tab panel(s) with the same value.
+     * If the value is not provided, it falls back to the position index.
+     */
+    value?: any;
+    /**
+     * Callback fired when the tab is clicked.
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * If `true`, the tab will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of the tab.
+     * If not provided, it will be automatically generated.
+     */
+    id?: string;
+    /**
+     * Ref to the root slot's DOM element.
+     */
+    rootRef?: React.Ref<Element>;
+  }
+
+  export interface ReturnValue {
+    /**
+     * Resolver for the root slot's props.
+     * @param externalProps props for the root slot
+     * @returns props that should be spread on the root slot
+     */
+    getRootProps: (
+      externalProps?: React.ComponentPropsWithRef<'button'>,
+    ) => React.ComponentPropsWithRef<'button'>;
+    /**
+     * 0-based index of the tab in the list of tabs.
+     */
+    index: number;
+    orientation: TabsOrientation;
+    /**
+     * Ref to the root slot's DOM element.
+     */
+    rootRef: React.RefCallback<Element> | null;
+    /**
+     * If `true`, the tab is selected.
+     */
+    selected: boolean;
+    /**
+     * Total number of tabs in the nearest parent TabsList.
+     * This can be used to determine if the tab is the last one to style it accordingly.
+     */
+    totalTabsCount: number;
+  }
+}
+
 export { useTab };
diff --git a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.tsx b/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.tsx
index 1ad3466f8..49d259412 100644
--- a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.tsx
+++ b/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.tsx
@@ -1,12 +1,13 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTabIndicator } from './useTabIndicator';
-import { TabIndicatorOwnerState, TabIndicatorProps } from './TabIndicator.types';
+import { ActiveTabPosition, useTabIndicator } from './useTabIndicator';
 import { script as prehydrationScript } from './prehydrationScript.min';
-import { useTabsContext } from '../Root/TabsContext';
+import type { TabsDirection, TabsOrientation, TabsRoot } from '../Root/TabsRoot';
+import { useTabsRootContext } from '../Root/TabsRootContext';
 import { tabsStyleHookMapping } from '../Root/styleHooks';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 const noop = () => null;
 
@@ -20,13 +21,13 @@ const noop = () => null;
  *
  * - [TabIndicator API](https://base-ui.netlify.app/components/react-tabs/#api-reference-TabIndicator)
  */
-const TabIndicator = React.forwardRef<HTMLSpanElement, TabIndicatorProps>(
+const TabIndicator = React.forwardRef<HTMLSpanElement, TabIndicator.Props>(
   function TabIndicator(props, forwardedRef) {
     const { className, render, renderBeforeHydration = false, ...other } = props;
 
     const [instanceId] = React.useState(() => Math.random().toString(36).slice(2));
     const [isMounted, setIsMounted] = React.useState(false);
-    const { value: activeTabValue } = useTabsContext();
+    const { value: activeTabValue } = useTabsRootContext();
 
     React.useEffect(() => {
       setIsMounted(true);
@@ -40,7 +41,7 @@ const TabIndicator = React.forwardRef<HTMLSpanElement, TabIndicatorProps>(
       tabActivationDirection,
     } = useTabIndicator();
 
-    const ownerState: TabIndicatorOwnerState = {
+    const ownerState: TabIndicator.OwnerState = {
       selectedTabPosition,
       orientation,
       direction,
@@ -83,6 +84,24 @@ const TabIndicator = React.forwardRef<HTMLSpanElement, TabIndicatorProps>(
   },
 );
 
+namespace TabIndicator {
+  export interface OwnerState extends TabsRoot.OwnerState {
+    selectedTabPosition: ActiveTabPosition | null;
+    orientation: TabsOrientation;
+    direction: TabsDirection;
+  }
+
+  export interface Props extends BaseUIComponentProps<'span', TabIndicator.OwnerState> {
+    /**
+     * If `true`, the indicator will include code to render itself before React hydrates.
+     * This will minimize the time the indicator is not visible after the SSR-generated content is downloaded.
+     *
+     * @default false
+     */
+    renderBeforeHydration?: boolean;
+  }
+}
+
 TabIndicator.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.types.ts b/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.types.ts
deleted file mode 100644
index 556c5af33..000000000
--- a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.types.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { BaseUIComponentProps } from '../../utils/types';
-import type {
-  TabActivationDirection,
-  TabsDirection,
-  TabsOrientation,
-  TabsRootOwnerState,
-} from '../Root/TabsRoot.types';
-
-export type TabIndicatorOwnerState = TabsRootOwnerState & {
-  selectedTabPosition: ActiveTabPosition | null;
-  orientation: TabsOrientation;
-  direction: TabsDirection;
-};
-
-export interface TabIndicatorProps extends BaseUIComponentProps<'span', TabIndicatorOwnerState> {
-  /**
-   * If `true`, the indicator will include code to render itself before React hydrates.
-   * This will minimize the time the indicator is not visible after the SSR-generated content is downloaded.
-   *
-   * @default false
-   */
-  renderBeforeHydration?: boolean;
-}
-
-export interface ActiveTabPosition {
-  left: number;
-  right: number;
-  top: number;
-  bottom: number;
-}
-
-export type UseTabIndicatorReturnValue = {
-  getRootProps: (
-    otherProps?: React.ComponentPropsWithRef<'span'>,
-  ) => React.ComponentPropsWithRef<'span'>;
-  activeTabPosition: ActiveTabPosition | null;
-  direction: TabsDirection;
-  orientation: TabsOrientation;
-  tabActivationDirection: TabActivationDirection;
-};
diff --git a/packages/mui-base/src/Tabs/TabIndicator/useTabIndicator.ts b/packages/mui-base/src/Tabs/TabIndicator/useTabIndicator.ts
index 6991388e3..857102895 100644
--- a/packages/mui-base/src/Tabs/TabIndicator/useTabIndicator.ts
+++ b/packages/mui-base/src/Tabs/TabIndicator/useTabIndicator.ts
@@ -1,18 +1,18 @@
 'use client';
 import * as React from 'react';
-import { UseTabIndicatorReturnValue } from './TabIndicator.types';
 import { useTabsListContext } from '../TabsList/TabsListContext';
-import { useTabsContext } from '../Root/TabsContext';
+import { useTabsRootContext } from '../Root/TabsRootContext';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useForcedRerendering } from '../../utils/useForcedRerendering';
+import type { TabsDirection, TabsOrientation, TabActivationDirection } from '../Root/TabsRoot';
 
 function round(value: number) {
   return Math.round(value * 100) * 0.01;
 }
 
-export function useTabIndicator(): UseTabIndicatorReturnValue {
+export function useTabIndicator(): useTabIndicator.ReturnValue {
   const { tabsListRef, getTabElement } = useTabsListContext();
-  const { orientation, direction, value, tabActivationDirection } = useTabsContext();
+  const { orientation, direction, value, tabActivationDirection } = useTabsRootContext();
 
   const rerender = useForcedRerendering();
   React.useEffect(() => {
@@ -114,3 +114,22 @@ export function useTabIndicator(): UseTabIndicatorReturnValue {
     tabActivationDirection,
   };
 }
+
+export interface ActiveTabPosition {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+export namespace useTabIndicator {
+  export interface ReturnValue {
+    getRootProps: (
+      otherProps?: React.ComponentPropsWithRef<'span'>,
+    ) => React.ComponentPropsWithRef<'span'>;
+    activeTabPosition: ActiveTabPosition | null;
+    direction: TabsDirection;
+    orientation: TabsOrientation;
+    tabActivationDirection: TabActivationDirection;
+  }
+}
diff --git a/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx b/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx
index bda8b77f3..b17e0b994 100644
--- a/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as Tabs from '@base_ui/react/Tabs';
-import { TabsProvider, TabsProviderValue } from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
+import { TabsProvider, TabsProviderValue } from '../Root/TabsProvider';
 
 describe('<Tabs.Panel />', () => {
   const { render } = createRenderer();
diff --git a/packages/mui-base/src/Tabs/TabPanel/TabPanel.tsx b/packages/mui-base/src/Tabs/TabPanel/TabPanel.tsx
index 4d2621861..d01692b24 100644
--- a/packages/mui-base/src/Tabs/TabPanel/TabPanel.tsx
+++ b/packages/mui-base/src/Tabs/TabPanel/TabPanel.tsx
@@ -2,9 +2,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTabPanel } from './useTabPanel';
-import { TabPanelOwnerState, TabPanelProps } from './TabPanel.types';
 import { tabsStyleHookMapping } from '../Root/styleHooks';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { TabsRoot } from '../Root/TabsRoot';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -17,7 +18,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
  * - [TabPanel API](https://base-ui.netlify.app/components/react-tabs/#api-reference-TabPanel)
  */
 const TabPanel = React.forwardRef(function TabPanel(
-  props: TabPanelProps,
+  props: TabPanel.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { children, className, value, render, keepMounted = false, ...other } = props;
@@ -27,7 +28,7 @@ const TabPanel = React.forwardRef(function TabPanel(
     rootRef: forwardedRef,
   });
 
-  const ownerState: TabPanelOwnerState = {
+  const ownerState: TabPanel.OwnerState = {
     hidden,
     orientation,
     direction,
@@ -46,6 +47,26 @@ const TabPanel = React.forwardRef(function TabPanel(
   return renderElement();
 });
 
+namespace TabPanel {
+  export interface OwnerState extends TabsRoot.OwnerState {
+    hidden: boolean;
+  }
+
+  export interface Props extends BaseUIComponentProps<'div', OwnerState> {
+    /**
+     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+     * If not provided, it will fall back to the index of the panel.
+     * It is recommended to explicitly provide it, as it's required for the tab panel to be rendered on the server.
+     */
+    value?: any;
+    /**
+     * If `true`, keeps the contents of the hidden TabPanel in the DOM.
+     * @default false
+     */
+    keepMounted?: boolean;
+  }
+}
+
 TabPanel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Tabs/TabPanel/TabPanel.types.ts b/packages/mui-base/src/Tabs/TabPanel/TabPanel.types.ts
deleted file mode 100644
index edeeb851e..000000000
--- a/packages/mui-base/src/Tabs/TabPanel/TabPanel.types.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type {
-  TabActivationDirection,
-  TabsDirection,
-  TabsOrientation,
-  TabsRootOwnerState,
-} from '../Root/TabsRoot.types';
-import type { BaseUIComponentProps } from '../../utils/types';
-
-export type TabPanelOwnerState = TabsRootOwnerState & {
-  hidden: boolean;
-};
-
-export interface TabPanelProps extends BaseUIComponentProps<'div', TabPanelOwnerState> {
-  /**
-   * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
-   * If not provided, it will fall back to the index of the panel.
-   * It is recommended to explicitly provide it, as it's required for the tab panel to be rendered on the server.
-   */
-  value?: any;
-  /**
-   * If `true`, keeps the contents of the hidden TabPanel in the DOM.
-   * @default false
-   */
-  keepMounted?: boolean;
-}
-
-export interface UseTabPanelParameters {
-  /**
-   * The id of the TabPanel.
-   */
-  id?: string;
-  /**
-   * The ref of the TabPanel.
-   */
-  rootRef?: React.Ref<HTMLElement>;
-  /**
-   * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
-   */
-  value?: any;
-}
-
-export interface UseTabPanelReturnValue {
-  /**
-   * If `true`, it indicates that the tab panel will be hidden.
-   */
-  hidden: boolean;
-  /**
-   * Resolver for the root slot's props.
-   * @param externalProps additional props for the root slot
-   * @returns props that should be spread on the root slot
-   */
-  getRootProps: (
-    externalProps?: React.ComponentPropsWithRef<'div'>,
-  ) => React.ComponentPropsWithRef<'div'>;
-  rootRef: React.RefCallback<HTMLElement> | null;
-  orientation: TabsOrientation;
-  direction: TabsDirection;
-  tabActivationDirection: TabActivationDirection;
-}
diff --git a/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx b/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx
index 48fda35af..3e9b644a9 100644
--- a/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx
+++ b/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx
@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import * as Tabs from '@base_ui/react/Tabs';
+import { useTabPanel } from './useTabPanel';
 
 describe('useTabPanel', () => {
   const { render } = createRenderer();
@@ -11,7 +12,7 @@ describe('useTabPanel', () => {
     it('returns props for root slot', () => {
       const rootRef = React.createRef<HTMLDivElement>();
       function TestTabPanel() {
-        const { getRootProps } = Tabs.useTabPanel({ rootRef, id: 'test-tabpanel', value: 0 });
+        const { getRootProps } = useTabPanel({ rootRef, id: 'test-tabpanel', value: 0 });
         return <div {...getRootProps()} />;
       }
 
@@ -34,7 +35,7 @@ describe('useTabPanel', () => {
       const rootRef = React.createRef<HTMLElement>();
 
       function TestTabPanel() {
-        const { getRootProps } = Tabs.useTabPanel({ rootRef, value: 0 });
+        const { getRootProps } = useTabPanel({ rootRef, value: 0 });
         return (
           <div
             {...getRootProps({
diff --git a/packages/mui-base/src/Tabs/TabPanel/useTabPanel.ts b/packages/mui-base/src/Tabs/TabPanel/useTabPanel.ts
index 4c6ca3790..7ffb05ac4 100644
--- a/packages/mui-base/src/Tabs/TabPanel/useTabPanel.ts
+++ b/packages/mui-base/src/Tabs/TabPanel/useTabPanel.ts
@@ -1,17 +1,17 @@
 'use client';
 import * as React from 'react';
-import { UseTabPanelParameters, UseTabPanelReturnValue } from './TabPanel.types';
-import { useTabsContext } from '../Root/TabsContext';
+import { useTabsRootContext } from '../Root/TabsRootContext';
 import { useCompoundItem } from '../../useCompound';
 import { useId } from '../../utils/useId';
 import { useForkRef } from '../../utils/useForkRef';
 import { mergeReactProps } from '../../utils/mergeReactProps';
+import { TabActivationDirection, TabsDirection, TabsOrientation } from '../Root/TabsRoot';
 
 function tabPanelValueGenerator(otherTabPanelValues: Set<any>) {
   return otherTabPanelValues.size;
 }
 
-function useTabPanel(parameters: UseTabPanelParameters): UseTabPanelReturnValue {
+function useTabPanel(parameters: useTabPanel.Parameters): useTabPanel.ReturnValue {
   const { value: valueParam, id: idParam, rootRef: externalRef } = parameters;
   const {
     value: selectedTabValue,
@@ -19,7 +19,7 @@ function useTabPanel(parameters: UseTabPanelParameters): UseTabPanelReturnValue
     orientation,
     direction,
     tabActivationDirection,
-  } = useTabsContext();
+  } = useTabsRootContext();
 
   const id = useId(idParam);
   const ref = React.useRef<HTMLElement>(null);
@@ -58,4 +58,40 @@ function useTabPanel(parameters: UseTabPanelParameters): UseTabPanelReturnValue
   };
 }
 
+namespace useTabPanel {
+  export interface Parameters {
+    /**
+     * The id of the TabPanel.
+     */
+    id?: string;
+    /**
+     * The ref of the TabPanel.
+     */
+    rootRef?: React.Ref<HTMLElement>;
+    /**
+     * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+     */
+    value?: any;
+  }
+
+  export interface ReturnValue {
+    /**
+     * If `true`, it indicates that the tab panel will be hidden.
+     */
+    hidden: boolean;
+    /**
+     * Resolver for the root slot's props.
+     * @param externalProps additional props for the root slot
+     * @returns props that should be spread on the root slot
+     */
+    getRootProps: (
+      externalProps?: React.ComponentPropsWithRef<'div'>,
+    ) => React.ComponentPropsWithRef<'div'>;
+    rootRef: React.RefCallback<HTMLElement> | null;
+    orientation: TabsOrientation;
+    direction: TabsDirection;
+    tabActivationDirection: TabActivationDirection;
+  }
+}
+
 export { useTabPanel };
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
index 197984189..3c38e7ff3 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { act } from '@mui/internal-test-utils';
 import * as Tabs from '@base_ui/react/Tabs';
-import { TabsContext } from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
+import { TabsRootContext } from '../Root/TabsRootContext';
 
 describe('<Tabs.List />', () => {
   const { render } = createRenderer();
@@ -11,7 +11,7 @@ describe('<Tabs.List />', () => {
   describeConformance(<Tabs.List />, () => ({
     render: (node) => {
       return render(
-        <TabsContext.Provider
+        <TabsRootContext.Provider
           value={{
             value: '1',
             onSelected: () => {},
@@ -24,7 +24,7 @@ describe('<Tabs.List />', () => {
           }}
         >
           {node}
-        </TabsContext.Provider>,
+        </TabsRootContext.Provider>,
       );
     },
     refInstanceof: window.HTMLDivElement,
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.tsx b/packages/mui-base/src/Tabs/TabsList/TabsList.tsx
index 7cc96d277..140f0a8d9 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsList.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/TabsList.tsx
@@ -1,11 +1,12 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TabsListOwnerState, TabsListProps } from './TabsList.types';
 import { useTabsList } from './useTabsList';
 import { TabsListProvider } from './TabsListProvider';
 import { tabsStyleHookMapping } from '../Root/styleHooks';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { TabsRoot } from '../Root/TabsRoot';
+import { BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -18,7 +19,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
  * - [TabsList API](https://base-ui.netlify.app/components/react-tabs/#api-reference-TabsList)
  */
 const TabsList = React.forwardRef(function TabsList(
-  props: TabsListProps,
+  props: TabsList.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { activateOnFocus = true, className, loop = true, render, ...other } = props;
@@ -30,7 +31,7 @@ const TabsList = React.forwardRef(function TabsList(
       activateOnFocus,
     });
 
-  const ownerState: TabsListOwnerState = React.useMemo(
+  const ownerState: TabsList.OwnerState = React.useMemo(
     () => ({
       direction,
       orientation,
@@ -51,6 +52,26 @@ const TabsList = React.forwardRef(function TabsList(
   return <TabsListProvider value={contextValue}>{renderElement()}</TabsListProvider>;
 });
 
+namespace TabsList {
+  export type OwnerState = TabsRoot.OwnerState;
+
+  export interface Props extends BaseUIComponentProps<'div', TabsList.OwnerState> {
+    /**
+     * If `true`, the tab will be activated whenever it is focused.
+     * Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
+     *
+     * @default true
+     */
+    activateOnFocus?: boolean;
+    /**
+     * If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
+     *
+     * @default true
+     */
+    loop?: boolean;
+  }
+}
+
 TabsList.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.types.ts b/packages/mui-base/src/Tabs/TabsList/TabsList.types.ts
deleted file mode 100644
index 22d8c8bc3..000000000
--- a/packages/mui-base/src/Tabs/TabsList/TabsList.types.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { TabsListProviderValue } from './TabsListProvider';
-import {
-  TabActivationDirection,
-  TabsDirection,
-  TabsOrientation,
-  TabsRootOwnerState,
-} from '../Root/TabsRoot.types';
-import { ListAction } from '../../useList';
-import { BaseUIComponentProps } from '../../utils/types';
-
-export type TabsListOwnerState = TabsRootOwnerState;
-
-export interface TabsListProps extends BaseUIComponentProps<'div', TabsListOwnerState> {
-  /**
-   * If `true`, the tab will be activated whenever it is focused.
-   * Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
-   *
-   * @default true
-   */
-  activateOnFocus?: boolean;
-  /**
-   * If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
-   *
-   * @default true
-   */
-  loop?: boolean;
-}
-
-export interface UseTabsListParameters {
-  /**
-   * If `true`, the tab will be activated whenever it is focused.
-   * Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
-   */
-  activateOnFocus: boolean;
-  /**
-   * If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
-   */
-  loop: boolean;
-  /**
-   * Ref to the root element.
-   */
-  rootRef: React.Ref<Element>;
-}
-
-export interface UseTabsListReturnValue {
-  /**
-   * The value to be passed to the TabListProvider above all the tabs.
-   */
-  contextValue: TabsListProviderValue;
-  /**
-   * Action dispatcher for the tabs list component.
-   * Allows to programmatically control the tabs list.
-   */
-  dispatch: (action: ListAction<any>) => void;
-  /**
-   * Resolver for the root slot's props.
-   * @param externalProps props for the root slot
-   * @returns props that should be spread on the root slot
-   */
-  getRootProps: (
-    externalProps?: React.ComponentPropsWithRef<'div'>,
-  ) => React.ComponentPropsWithRef<'div'>;
-  /**
-   * The value of the currently highlighted tab.
-   */
-  highlightedValue: any | null;
-  /**
-   * If `true`, it will indicate that the text's direction in right-to-left.
-   */
-  direction: TabsDirection;
-  /**
-   * The component orientation (layout flow direction).
-   */
-  orientation: TabsOrientation;
-  rootRef: React.RefCallback<Element> | null;
-  /**
-   * The value of the currently selected tab.
-   */
-  selectedValue: any | null;
-  tabActivationDirection: TabActivationDirection;
-}
-
-export const TabsListActionTypes = {
-  valueChange: 'valueChange',
-} as const;
-
-export interface ValueChangeAction {
-  type: typeof TabsListActionTypes.valueChange;
-  value: any | null;
-}
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts b/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts
index c8d8a6ddf..9b2833529 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts
+++ b/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts
@@ -1,13 +1,13 @@
 'use client';
 import * as React from 'react';
 
-export type TabsListContextValue = {
+export interface TabsListContext {
   activateOnFocus: boolean;
   getTabElement: (value: any) => HTMLElement | null;
   tabsListRef: React.RefObject<HTMLElement | null>;
-};
+}
 
-export const TabsListContext = React.createContext<TabsListContextValue | undefined>(undefined);
+export const TabsListContext = React.createContext<TabsListContext | undefined>(undefined);
 
 export function useTabsListContext() {
   const context = React.useContext(TabsListContext);
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx b/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx
index a7e042824..1e2a319e9 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TabsListContext, TabsListContextValue } from './TabsListContext';
+import { TabsListContext } from './TabsListContext';
 import { TabMetadata } from '../Root/useTabsRoot';
 import { ListContext, ListContextValue } from '../../useList/ListContext';
 import { CompoundComponentContext, CompoundComponentContextValue } from '../../useCompound';
@@ -9,7 +9,7 @@ import { refType } from '../../utils/proptypes';
 
 export type TabsListProviderValue = CompoundComponentContextValue<any, TabMetadata> &
   ListContextValue<any> &
-  TabsListContextValue;
+  TabsListContext;
 
 export interface TabsListProviderProps {
   value: TabsListProviderValue;
@@ -53,7 +53,7 @@ function TabsListProvider(props: TabsListProviderProps) {
       [registerItem, getItemIndex, totalSubitemCount],
     );
 
-  const tabsListContextValue: TabsListContextValue = React.useMemo(
+  const tabsListContextValue: TabsListContext = React.useMemo(
     () => ({ activateOnFocus, getTabElement, tabsListRef }),
     [activateOnFocus, getTabElement, tabsListRef],
   );
diff --git a/packages/mui-base/src/Tabs/TabsList/tabsListReducer.ts b/packages/mui-base/src/Tabs/TabsList/tabsListReducer.ts
index e337803e9..903bed29a 100644
--- a/packages/mui-base/src/Tabs/TabsList/tabsListReducer.ts
+++ b/packages/mui-base/src/Tabs/TabsList/tabsListReducer.ts
@@ -1,4 +1,3 @@
-import { TabsListActionTypes, ValueChangeAction } from './TabsList.types';
 import {
   ListState,
   ListAction,
@@ -13,6 +12,15 @@ export type TabsListActionContext = ListActionContext<any> & {
   activateOnFocus: boolean;
 };
 
+export const TabsListActionTypes = {
+  valueChange: 'valueChange',
+} as const;
+
+export interface ValueChangeAction {
+  type: typeof TabsListActionTypes.valueChange;
+  value: any | null;
+}
+
 export function tabsListReducer(
   state: ListState<any>,
   action: ActionWithContext<ListAction<any> | ValueChangeAction, TabsListActionContext>,
diff --git a/packages/mui-base/src/Tabs/TabsList/useTabsList.ts b/packages/mui-base/src/Tabs/TabsList/useTabsList.ts
index 07fe4272f..5ecbbbb81 100644
--- a/packages/mui-base/src/Tabs/TabsList/useTabsList.ts
+++ b/packages/mui-base/src/Tabs/TabsList/useTabsList.ts
@@ -1,22 +1,18 @@
 'use client';
 import * as React from 'react';
-import {
-  TabsListActionTypes,
-  type UseTabsListParameters,
-  type UseTabsListReturnValue,
-  type ValueChangeAction,
-} from './TabsList.types';
-import { tabsListReducer } from './tabsListReducer';
-import { useTabsContext } from '../Root/TabsContext';
+import { TabsListActionTypes, tabsListReducer, ValueChangeAction } from './tabsListReducer';
+import { useTabsRootContext } from '../Root/TabsRootContext';
 import { type TabMetadata } from '../Root/useTabsRoot';
-import { type TabsOrientation, type TabActivationDirection } from '../Root/TabsRoot.types';
+import { type TabsOrientation, type TabActivationDirection } from '../Root/TabsRoot';
 import { useCompoundParent } from '../../useCompound';
-import { useList, ListState, UseListParameters } from '../../useList';
+import { useList, ListState, UseListParameters, ListAction } from '../../useList';
 import { useForkRef } from '../../utils/useForkRef';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { TabsDirection } from '../Root/TabsRoot';
+import { TabsListProviderValue } from './TabsListProvider';
 
-function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue {
+function useTabsList(parameters: useTabsList.Parameters): useTabsList.ReturnValue {
   const { rootRef: externalRef, loop, activateOnFocus } = parameters;
 
   const {
@@ -26,7 +22,7 @@ function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue
     value,
     registerTabIdLookup,
     tabActivationDirection,
-  } = useTabsContext();
+  } = useTabsRootContext();
 
   const { subitems, contextValue: compoundComponentContextValue } = useCompoundParent<
     any,
@@ -263,4 +259,60 @@ function useActivationDirectionDetector(
   );
 }
 
+namespace useTabsList {
+  export interface Parameters {
+    /**
+     * If `true`, the tab will be activated whenever it is focused.
+     * Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
+     */
+    activateOnFocus: boolean;
+    /**
+     * If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
+     */
+    loop: boolean;
+    /**
+     * Ref to the root element.
+     */
+    rootRef: React.Ref<Element>;
+  }
+
+  export interface ReturnValue {
+    /**
+     * The value to be passed to the TabListProvider above all the tabs.
+     */
+    contextValue: TabsListProviderValue;
+    /**
+     * Action dispatcher for the tabs list component.
+     * Allows to programmatically control the tabs list.
+     */
+    dispatch: (action: ListAction<any>) => void;
+    /**
+     * Resolver for the root slot's props.
+     * @param externalProps props for the root slot
+     * @returns props that should be spread on the root slot
+     */
+    getRootProps: (
+      externalProps?: React.ComponentPropsWithRef<'div'>,
+    ) => React.ComponentPropsWithRef<'div'>;
+    /**
+     * The value of the currently highlighted tab.
+     */
+    highlightedValue: any | null;
+    /**
+     * If `true`, it will indicate that the text's direction in right-to-left.
+     */
+    direction: TabsDirection;
+    /**
+     * The component orientation (layout flow direction).
+     */
+    orientation: TabsOrientation;
+    rootRef: React.RefCallback<Element> | null;
+    /**
+     * The value of the currently selected tab.
+     */
+    selectedValue: any | null;
+    tabActivationDirection: TabActivationDirection;
+  }
+}
+
 export { useTabsList };
diff --git a/packages/mui-base/src/Tabs/index.barrel.ts b/packages/mui-base/src/Tabs/index.barrel.ts
index 04656786b..d8c499e9e 100644
--- a/packages/mui-base/src/Tabs/index.barrel.ts
+++ b/packages/mui-base/src/Tabs/index.barrel.ts
@@ -1,43 +1,5 @@
 export { TabsRoot } from './Root/TabsRoot';
-export type {
-  TabsRootOwnerState,
-  TabsRootProps,
-  TabsDirection,
-  TabsOrientation,
-  UseTabsParameters,
-  UseTabsReturnValue,
-} from './Root/TabsRoot.types';
-export { useTabsRoot } from './Root/useTabsRoot';
-export { TabsContext, type TabsContextValue, useTabsContext } from './Root/TabsContext';
-export * from './Root/TabsProvider';
-
 export { Tab } from './Tab/Tab';
-export type { TabOwnerState, TabProps, UseTabParameters, UseTabReturnValue } from './Tab/Tab.types';
-export { useTab } from './Tab/useTab';
-
 export { TabIndicator } from './TabIndicator/TabIndicator';
-export type {
-  TabIndicatorOwnerState,
-  TabIndicatorProps,
-  UseTabIndicatorReturnValue,
-} from './TabIndicator/TabIndicator.types';
-export { useTabIndicator } from './TabIndicator/useTabIndicator';
-
 export { TabPanel } from './TabPanel/TabPanel';
-export type {
-  TabPanelOwnerState,
-  TabPanelProps,
-  UseTabPanelParameters,
-  UseTabPanelReturnValue,
-} from './TabPanel/TabPanel.types';
-export { useTabPanel } from './TabPanel/useTabPanel';
-
 export { TabsList } from './TabsList/TabsList';
-export type {
-  TabsListOwnerState,
-  TabsListProps,
-  UseTabsListParameters,
-  UseTabsListReturnValue,
-} from './TabsList/TabsList.types';
-export * from './TabsList/TabsListProvider';
-export { useTabsList } from './TabsList/useTabsList';
diff --git a/packages/mui-base/src/Tabs/index.ts b/packages/mui-base/src/Tabs/index.ts
index a204765d0..acb9d122d 100644
--- a/packages/mui-base/src/Tabs/index.ts
+++ b/packages/mui-base/src/Tabs/index.ts
@@ -1,43 +1,5 @@
 export { TabsRoot as Root } from './Root/TabsRoot';
-export type {
-  TabsRootOwnerState as RootOwnerState,
-  TabsRootProps as RootProps,
-  TabsDirection as Direction,
-  TabsOrientation as Orientation,
-  UseTabsParameters,
-  UseTabsReturnValue,
-} from './Root/TabsRoot.types';
-export { useTabsRoot } from './Root/useTabsRoot';
-export { TabsContext, type TabsContextValue, useTabsContext } from './Root/TabsContext';
-export * from './Root/TabsProvider';
-
 export { Tab } from './Tab/Tab';
-export type { TabOwnerState, TabProps, UseTabParameters, UseTabReturnValue } from './Tab/Tab.types';
-export { useTab } from './Tab/useTab';
-
 export { TabIndicator as Indicator } from './TabIndicator/TabIndicator';
-export type {
-  TabIndicatorOwnerState as IndicatorOwnerState,
-  TabIndicatorProps as IndicatorProps,
-  UseTabIndicatorReturnValue,
-} from './TabIndicator/TabIndicator.types';
-export { useTabIndicator } from './TabIndicator/useTabIndicator';
-
 export { TabPanel as Panel } from './TabPanel/TabPanel';
-export type {
-  TabPanelOwnerState as PanelOwnerState,
-  TabPanelProps as PanelProps,
-  UseTabPanelParameters,
-  UseTabPanelReturnValue,
-} from './TabPanel/TabPanel.types';
-export { useTabPanel } from './TabPanel/useTabPanel';
-
 export { TabsList as List } from './TabsList/TabsList';
-export type {
-  TabsListOwnerState as ListOwnerState,
-  TabsListProps as ListProps,
-  UseTabsListParameters,
-  UseTabsListReturnValue,
-} from './TabsList/TabsList.types';
-export * from './TabsList/TabsListProvider';
-export { useTabsList } from './TabsList/useTabsList';

From 37783b0392d57a5d6ee9133eb4703ee10a1dd57e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Mon, 7 Oct 2024 11:23:07 +0200
Subject: [PATCH 05/22] [Fieldset] Move types to namespaces (#711)

---
 .../src/Fieldset/Legend/FieldsetLegend.tsx     | 14 +++++++++++---
 .../Fieldset/Legend/FieldsetLegend.types.ts    |  8 --------
 .../src/Fieldset/Legend/useFieldsetLegend.ts   | 12 +++++++-----
 .../src/Fieldset/Root/FieldsetRoot.tsx         | 18 +++++++++++++-----
 .../src/Fieldset/Root/FieldsetRoot.types.ts    |  8 --------
 .../src/Fieldset/Root/FieldsetRootContext.ts   |  4 ++--
 packages/mui-base/src/Fieldset/index.barrel.ts |  3 ---
 packages/mui-base/src/Fieldset/index.ts        |  9 ---------
 8 files changed, 33 insertions(+), 43 deletions(-)
 delete mode 100644 packages/mui-base/src/Fieldset/Legend/FieldsetLegend.types.ts
 delete mode 100644 packages/mui-base/src/Fieldset/Root/FieldsetRoot.types.ts

diff --git a/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.tsx b/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.tsx
index 3671ee60d..5fbedd965 100644
--- a/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.tsx
+++ b/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.tsx
@@ -1,10 +1,10 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import type { FieldsetLegendOwnerState, FieldsetLegendProps } from './FieldsetLegend.types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useFieldsetLegend } from './useFieldsetLegend';
 import { useFieldsetRootContext } from '../Root/FieldsetRootContext';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  * Renders an element that labels the fieldset.
@@ -18,7 +18,7 @@ import { useFieldsetRootContext } from '../Root/FieldsetRootContext';
  * - [FieldsetLegend API](https://base-ui.netlify.app/components/react-fieldset/#api-reference-FieldsetLegend)
  */
 const FieldsetLegend = React.forwardRef(function FieldsetLegend(
-  props: FieldsetLegendProps,
+  props: FieldsetLegend.Props,
   forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
   const { render, className, id, ...otherProps } = props;
@@ -27,7 +27,7 @@ const FieldsetLegend = React.forwardRef(function FieldsetLegend(
 
   const { disabled } = useFieldsetRootContext();
 
-  const ownerState: FieldsetLegendOwnerState = React.useMemo(
+  const ownerState: FieldsetLegend.OwnerState = React.useMemo(
     () => ({
       disabled: disabled ?? false,
     }),
@@ -46,6 +46,14 @@ const FieldsetLegend = React.forwardRef(function FieldsetLegend(
   return renderElement();
 });
 
+namespace FieldsetLegend {
+  export type OwnerState = {
+    disabled: boolean;
+  };
+
+  export interface Props extends BaseUIComponentProps<'span', OwnerState> {}
+}
+
 FieldsetLegend.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.types.ts b/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.types.ts
deleted file mode 100644
index 1cb1ed5e1..000000000
--- a/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { BaseUIComponentProps } from '../../utils/types';
-
-export type FieldsetLegendOwnerState = {
-  disabled: boolean;
-};
-
-export interface FieldsetLegendProps
-  extends BaseUIComponentProps<'span', FieldsetLegendOwnerState> {}
diff --git a/packages/mui-base/src/Fieldset/Legend/useFieldsetLegend.ts b/packages/mui-base/src/Fieldset/Legend/useFieldsetLegend.ts
index 37aefaa77..2d07e6032 100644
--- a/packages/mui-base/src/Fieldset/Legend/useFieldsetLegend.ts
+++ b/packages/mui-base/src/Fieldset/Legend/useFieldsetLegend.ts
@@ -5,11 +5,7 @@ import { useId } from '../../utils/useId';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useFieldsetRootContext } from '../Root/FieldsetRootContext';
 
-interface UseFieldsetLegendParameters {
-  id?: string;
-}
-
-export function useFieldsetLegend(params: UseFieldsetLegendParameters) {
+export function useFieldsetLegend(params: useFieldsetLegend.Parameters) {
   const { id: idProp } = params;
 
   const { setLegendId } = useFieldsetRootContext();
@@ -38,3 +34,9 @@ export function useFieldsetLegend(params: UseFieldsetLegendParameters) {
     [getLegendProps],
   );
 }
+
+export namespace useFieldsetLegend {
+  export interface Parameters {
+    id?: string;
+  }
+}
diff --git a/packages/mui-base/src/Fieldset/Root/FieldsetRoot.tsx b/packages/mui-base/src/Fieldset/Root/FieldsetRoot.tsx
index ba657b9e3..74a47b859 100644
--- a/packages/mui-base/src/Fieldset/Root/FieldsetRoot.tsx
+++ b/packages/mui-base/src/Fieldset/Root/FieldsetRoot.tsx
@@ -1,10 +1,10 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import type { FieldsetRootOwnerState, FieldsetRootProps } from './FieldsetRoot.types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { FieldsetRootContext, type FieldsetRootContextValue } from './FieldsetRootContext';
+import { FieldsetRootContext } from './FieldsetRootContext';
 import { useFieldsetRoot } from './useFieldsetRoot';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  * The foundation for building custom-styled fieldsets.
@@ -18,14 +18,14 @@ import { useFieldsetRoot } from './useFieldsetRoot';
  * - [FieldsetRoot API](https://base-ui.netlify.app/components/react-fieldset/#api-reference-FieldsetRoot)
  */
 const FieldsetRoot = React.forwardRef(function FieldsetRoot(
-  props: FieldsetRootProps,
+  props: FieldsetRoot.Props,
   forwardedRef: React.ForwardedRef<HTMLFieldSetElement>,
 ) {
   const { render, className, disabled = false, ...otherProps } = props;
 
   const { legendId, setLegendId, getRootProps } = useFieldsetRoot();
 
-  const ownerState: FieldsetRootOwnerState = React.useMemo(
+  const ownerState: FieldsetRoot.OwnerState = React.useMemo(
     () => ({
       disabled,
     }),
@@ -41,7 +41,7 @@ const FieldsetRoot = React.forwardRef(function FieldsetRoot(
     extraProps: otherProps,
   });
 
-  const contextValue: FieldsetRootContextValue = React.useMemo(
+  const contextValue: FieldsetRootContext = React.useMemo(
     () => ({
       legendId,
       setLegendId,
@@ -57,6 +57,14 @@ const FieldsetRoot = React.forwardRef(function FieldsetRoot(
   );
 });
 
+namespace FieldsetRoot {
+  export type OwnerState = {
+    disabled: boolean;
+  };
+
+  export interface Props extends BaseUIComponentProps<'fieldset', OwnerState> {}
+}
+
 FieldsetRoot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Fieldset/Root/FieldsetRoot.types.ts b/packages/mui-base/src/Fieldset/Root/FieldsetRoot.types.ts
deleted file mode 100644
index 540513855..000000000
--- a/packages/mui-base/src/Fieldset/Root/FieldsetRoot.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { BaseUIComponentProps } from '../../utils/types';
-
-export type FieldsetRootOwnerState = {
-  disabled: boolean;
-};
-
-export interface FieldsetRootProps
-  extends BaseUIComponentProps<'fieldset', FieldsetRootOwnerState> {}
diff --git a/packages/mui-base/src/Fieldset/Root/FieldsetRootContext.ts b/packages/mui-base/src/Fieldset/Root/FieldsetRootContext.ts
index 9692eae8b..80dc08ea3 100644
--- a/packages/mui-base/src/Fieldset/Root/FieldsetRootContext.ts
+++ b/packages/mui-base/src/Fieldset/Root/FieldsetRootContext.ts
@@ -1,13 +1,13 @@
 'use client';
 import * as React from 'react';
 
-export interface FieldsetRootContextValue {
+export interface FieldsetRootContext {
   legendId: string | undefined;
   setLegendId: React.Dispatch<React.SetStateAction<string | undefined>>;
   disabled: boolean | undefined;
 }
 
-export const FieldsetRootContext = React.createContext<FieldsetRootContextValue>({
+export const FieldsetRootContext = React.createContext<FieldsetRootContext>({
   legendId: undefined,
   setLegendId: () => {},
   disabled: undefined,
diff --git a/packages/mui-base/src/Fieldset/index.barrel.ts b/packages/mui-base/src/Fieldset/index.barrel.ts
index bd5416640..b5a4cbaf4 100644
--- a/packages/mui-base/src/Fieldset/index.barrel.ts
+++ b/packages/mui-base/src/Fieldset/index.barrel.ts
@@ -1,5 +1,2 @@
 export * from './Root/FieldsetRoot';
 export * from './Legend/FieldsetLegend';
-
-export type * from './Root/FieldsetRoot.types';
-export type * from './Legend/FieldsetLegend.types';
diff --git a/packages/mui-base/src/Fieldset/index.ts b/packages/mui-base/src/Fieldset/index.ts
index 9d2e949e6..ee2ae05cb 100644
--- a/packages/mui-base/src/Fieldset/index.ts
+++ b/packages/mui-base/src/Fieldset/index.ts
@@ -1,11 +1,2 @@
 export { FieldsetRoot as Root } from './Root/FieldsetRoot';
 export { FieldsetLegend as Legend } from './Legend/FieldsetLegend';
-
-export type {
-  FieldsetRootProps as RootProps,
-  FieldsetRootOwnerState as RootOwnerState,
-} from './Root/FieldsetRoot.types';
-export type {
-  FieldsetLegendProps as LegendProps,
-  FieldsetLegendOwnerState as LegendOwnerState,
-} from './Legend/FieldsetLegend.types';

From eda8eaa8d0c69177b9286b444e5448560ee70508 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Mon, 7 Oct 2024 11:28:37 +0200
Subject: [PATCH 06/22] [Field] Move types to namespaces (#710)

---
 .../src/Checkbox/Root/CheckboxRoot.tsx        |  4 +-
 .../CheckboxGroup/Root/CheckboxGroupRoot.tsx  |  4 +-
 .../src/Field/Control/FieldControl.tsx        | 20 ++++-
 .../src/Field/Control/FieldControl.types.ts   | 13 ----
 .../src/Field/Control/useFieldControl.ts      | 22 +++---
 .../Field/Description/FieldDescription.tsx    | 11 ++-
 .../Description/FieldDescription.types.tsx    |  7 --
 .../Field/Description/useFieldDescription.ts  | 12 +--
 .../mui-base/src/Field/Error/FieldError.tsx   | 21 +++++-
 .../src/Field/Error/FieldError.types.tsx      | 16 ----
 .../mui-base/src/Field/Error/useFieldError.ts | 16 ++--
 .../mui-base/src/Field/Label/FieldLabel.tsx   | 11 ++-
 .../src/Field/Label/FieldLabel.types.ts       |  6 --
 .../mui-base/src/Field/Label/useFieldLabel.ts | 12 +--
 .../mui-base/src/Field/Root/FieldRoot.tsx     | 73 +++++++++++++++++--
 .../src/Field/Root/FieldRoot.types.ts         | 62 ----------------
 .../src/Field/Root/FieldRootContext.ts        |  8 +-
 .../src/Field/Validity/FieldValidity.tsx      | 16 +++-
 .../src/Field/Validity/FieldValidity.types.ts | 12 ---
 packages/mui-base/src/Field/index.barrel.ts   |  7 +-
 packages/mui-base/src/Field/index.ts          | 23 +-----
 .../utils/getCombinedFieldValidityData.ts     |  2 +-
 .../mui-base/src/Form/Root/FormRootContext.ts |  2 +-
 .../src/NumberField/Root/NumberFieldRoot.tsx  |  4 +-
 .../src/Slider/Root/SliderRoot.types.ts       |  4 +-
 .../mui-base/src/Switch/Root/SwitchRoot.tsx   |  4 +-
 26 files changed, 189 insertions(+), 203 deletions(-)
 delete mode 100644 packages/mui-base/src/Field/Control/FieldControl.types.ts
 delete mode 100644 packages/mui-base/src/Field/Description/FieldDescription.types.tsx
 delete mode 100644 packages/mui-base/src/Field/Error/FieldError.types.tsx
 delete mode 100644 packages/mui-base/src/Field/Label/FieldLabel.types.ts
 delete mode 100644 packages/mui-base/src/Field/Root/FieldRoot.types.ts
 delete mode 100644 packages/mui-base/src/Field/Validity/FieldValidity.types.ts

diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.tsx
index b6974305d..4e3dcf87b 100644
--- a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.tsx
+++ b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.tsx
@@ -5,7 +5,7 @@ import { useCheckboxGroupRootContext } from '../../CheckboxGroup/Root/CheckboxGr
 import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useCustomStyleHookMapping } from '../utils/useCustomStyleHookMapping';
-import type { FieldRootOwnerState } from '../../Field/Root/FieldRoot.types';
+import type { FieldRoot } from '../../Field/Root/FieldRoot';
 import type { BaseUIComponentProps } from '../../utils/types';
 import { type UseCheckboxRoot, useCheckboxRoot } from './useCheckboxRoot';
 import { CheckboxRootContext } from './CheckboxRootContext';
@@ -111,7 +111,7 @@ const CheckboxRoot = React.forwardRef(function CheckboxRoot(
 });
 
 namespace CheckboxRoot {
-  export interface OwnerState extends FieldRootOwnerState {
+  export interface OwnerState extends FieldRoot.OwnerState {
     checked: boolean;
     disabled: boolean;
     readOnly: boolean;
diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.tsx b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.tsx
index 14b338873..37a8e0c55 100644
--- a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.tsx
+++ b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.tsx
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useCheckboxGroupRoot } from './useCheckboxGroupRoot';
 import { CheckboxGroupRootContext } from './CheckboxGroupRootContext';
+import type { FieldRoot } from '../../Field/Root/FieldRoot';
 import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 import type { BaseUIComponentProps } from '../../utils/types';
-import type { FieldRootOwnerState } from '../../Field/Root/FieldRoot.types';
 
 /**
  * The foundation for building custom-styled checkbox groups.
@@ -82,7 +82,7 @@ const CheckboxGroupRoot = React.forwardRef(function CheckboxGroupRoot(
 });
 
 namespace CheckboxGroupRoot {
-  export interface OwnerState extends FieldRootOwnerState {
+  export interface OwnerState extends FieldRoot.OwnerState {
     disabled: boolean;
   }
   export interface Props extends BaseUIComponentProps<'div', OwnerState> {
diff --git a/packages/mui-base/src/Field/Control/FieldControl.tsx b/packages/mui-base/src/Field/Control/FieldControl.tsx
index 6370d5607..73339b9ba 100644
--- a/packages/mui-base/src/Field/Control/FieldControl.tsx
+++ b/packages/mui-base/src/Field/Control/FieldControl.tsx
@@ -2,10 +2,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import type { FieldControlElement, FieldControlProps } from './FieldControl.types';
 import { useFieldControl } from './useFieldControl';
+import { FieldRoot } from '../Root/FieldRoot';
 import { useFieldRootContext } from '../Root/FieldRootContext';
 import { STYLE_HOOK_MAPPING } from '../utils/constants';
+import { BaseUIComponentProps } from '../../utils/types';
+
+export type FieldControlElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
 /**
  * The field's control element. This is not necessary to use when using a native Base UI input
@@ -20,7 +23,7 @@ import { STYLE_HOOK_MAPPING } from '../utils/constants';
  * - [FieldControl API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldControl)
  */
 const FieldControl = React.forwardRef(function FieldControl(
-  props: FieldControlProps,
+  props: FieldControl.Props,
   forwardedRef: React.ForwardedRef<FieldControlElement>,
 ) {
   const {
@@ -44,7 +47,7 @@ const FieldControl = React.forwardRef(function FieldControl(
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
 
-  const ownerState = React.useMemo(
+  const ownerState: FieldControl.OwnerState = React.useMemo(
     () => ({ ...fieldOwnerState, disabled }),
     [fieldOwnerState, disabled],
   );
@@ -71,6 +74,17 @@ const FieldControl = React.forwardRef(function FieldControl(
   return renderElement();
 });
 
+namespace FieldControl {
+  export type OwnerState = FieldRoot.OwnerState;
+
+  export interface Props extends BaseUIComponentProps<'input', OwnerState> {
+    /**
+     * Callback fired when the `value` changes. Use when controlled.
+     */
+    onValueChange?: (value: string | number | readonly string[] | undefined, event: Event) => void;
+  }
+}
+
 FieldControl.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Field/Control/FieldControl.types.ts b/packages/mui-base/src/Field/Control/FieldControl.types.ts
deleted file mode 100644
index 7817308c0..000000000
--- a/packages/mui-base/src/Field/Control/FieldControl.types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { BaseUIComponentProps } from '../../utils/types';
-import type { FieldRootOwnerState } from '../Root/FieldRoot.types';
-
-export type FieldControlElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-
-export type FieldControlOwnerState = FieldRootOwnerState;
-
-export interface FieldControlProps extends BaseUIComponentProps<'input', FieldControlOwnerState> {
-  /**
-   * Callback fired when the `value` changes. Use when controlled.
-   */
-  onValueChange?: (value: string | number | readonly string[] | undefined, event: Event) => void;
-}
diff --git a/packages/mui-base/src/Field/Control/useFieldControl.ts b/packages/mui-base/src/Field/Control/useFieldControl.ts
index 93f4a788c..9208ac573 100644
--- a/packages/mui-base/src/Field/Control/useFieldControl.ts
+++ b/packages/mui-base/src/Field/Control/useFieldControl.ts
@@ -10,16 +10,7 @@ import { useField } from '../useField';
 import { useControlled } from '../../utils/useControlled';
 import { useEventCallback } from '../../utils/useEventCallback';
 
-interface UseFieldControlParameters {
-  id?: string;
-  name?: string;
-  value?: string | number | readonly string[];
-  defaultValue?: string | number | readonly string[];
-  onValueChange?: (value: string | number | readonly string[], event: Event) => void;
-  disabled?: boolean;
-}
-
-export function useFieldControl(params: UseFieldControlParameters) {
+export function useFieldControl(params: useFieldControl.Parameters) {
   const { id: idProp, name, value: valueProp, defaultValue, onValueChange, disabled } = params;
 
   const { setControlId, labelId, setTouched, setDirty, validityData } = useFieldRootContext();
@@ -117,3 +108,14 @@ export function useFieldControl(params: UseFieldControlParameters) {
     [getControlProps],
   );
 }
+
+export namespace useFieldControl {
+  export interface Parameters {
+    id?: string;
+    name?: string;
+    value?: string | number | readonly string[];
+    defaultValue?: string | number | readonly string[];
+    onValueChange?: (value: string | number | readonly string[], event: Event) => void;
+    disabled?: boolean;
+  }
+}
diff --git a/packages/mui-base/src/Field/Description/FieldDescription.tsx b/packages/mui-base/src/Field/Description/FieldDescription.tsx
index e7c91c84d..20eb153a2 100644
--- a/packages/mui-base/src/Field/Description/FieldDescription.tsx
+++ b/packages/mui-base/src/Field/Description/FieldDescription.tsx
@@ -2,10 +2,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import type { FieldDescriptionProps } from './FieldDescription.types';
+import { FieldRoot } from '../Root/FieldRoot';
 import { useFieldRootContext } from '../Root/FieldRootContext';
 import { useFieldDescription } from './useFieldDescription';
 import { STYLE_HOOK_MAPPING } from '../utils/constants';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  * A description message for the field's control.
@@ -19,7 +20,7 @@ import { STYLE_HOOK_MAPPING } from '../utils/constants';
  * - [FieldDescription API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldDescription)
  */
 const FieldDescription = React.forwardRef(function FieldDescription(
-  props: FieldDescriptionProps,
+  props: FieldDescription.Props,
   forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
 ) {
   const { render, id, className, ...otherProps } = props;
@@ -41,6 +42,12 @@ const FieldDescription = React.forwardRef(function FieldDescription(
   return renderElement();
 });
 
+namespace FieldDescription {
+  export type OwnerState = FieldRoot.OwnerState;
+
+  export interface Props extends BaseUIComponentProps<'p', OwnerState> {}
+}
+
 FieldDescription.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Field/Description/FieldDescription.types.tsx b/packages/mui-base/src/Field/Description/FieldDescription.types.tsx
deleted file mode 100644
index eb3b50576..000000000
--- a/packages/mui-base/src/Field/Description/FieldDescription.types.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { BaseUIComponentProps } from '../../utils/types';
-import type { FieldRootOwnerState } from '../Root/FieldRoot.types';
-
-export type FieldDescriptionOwnerState = FieldRootOwnerState;
-
-export interface FieldDescriptionProps
-  extends BaseUIComponentProps<'p', FieldDescriptionOwnerState> {}
diff --git a/packages/mui-base/src/Field/Description/useFieldDescription.ts b/packages/mui-base/src/Field/Description/useFieldDescription.ts
index 8a0705d7e..49898908f 100644
--- a/packages/mui-base/src/Field/Description/useFieldDescription.ts
+++ b/packages/mui-base/src/Field/Description/useFieldDescription.ts
@@ -5,11 +5,7 @@ import { useId } from '../../utils/useId';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useFieldRootContext } from '../Root/FieldRootContext';
 
-interface UseFieldDescriptionParameters {
-  id: string | undefined;
-}
-
-export function useFieldDescription(params: UseFieldDescriptionParameters) {
+export function useFieldDescription(params: useFieldDescription.Parameters) {
   const { id: idProp } = params;
 
   const { setMessageIds } = useFieldRootContext();
@@ -43,3 +39,9 @@ export function useFieldDescription(params: UseFieldDescriptionParameters) {
     [getDescriptionProps],
   );
 }
+
+export namespace useFieldDescription {
+  export interface Parameters {
+    id: string | undefined;
+  }
+}
diff --git a/packages/mui-base/src/Field/Error/FieldError.tsx b/packages/mui-base/src/Field/Error/FieldError.tsx
index d1f56339b..cd4362a8d 100644
--- a/packages/mui-base/src/Field/Error/FieldError.tsx
+++ b/packages/mui-base/src/Field/Error/FieldError.tsx
@@ -2,11 +2,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import type { FieldErrorProps } from './FieldError.types';
+import { FieldRoot } from '../Root/FieldRoot';
 import { useFieldRootContext } from '../Root/FieldRootContext';
 import { useFieldError } from './useFieldError';
 import { STYLE_HOOK_MAPPING } from '../utils/constants';
 import { useFormRootContext } from '../../Form/Root/FormRootContext';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  * Displays error messages for the field's control.
@@ -20,7 +21,7 @@ import { useFormRootContext } from '../../Form/Root/FormRootContext';
  * - [FieldError API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldError)
  */
 const FieldError = React.forwardRef(function FieldError(
-  props: FieldErrorProps,
+  props: FieldError.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { render, id, className, show, forceShow, ...otherProps } = props;
@@ -59,6 +60,22 @@ const FieldError = React.forwardRef(function FieldError(
   return renderElement();
 });
 
+namespace FieldError {
+  export type OwnerState = FieldRoot.OwnerState;
+
+  export interface Props extends BaseUIComponentProps<'div', OwnerState> {
+    /**
+     * Determines whether the error message should be shown when it matches a given property of the
+     * field's `ValidityState`.
+     */
+    show?: keyof ValidityState;
+    /**
+     * Determines whether the error message should be shown regardless of the field's client validity.
+     */
+    forceShow?: boolean;
+  }
+}
+
 FieldError.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Field/Error/FieldError.types.tsx b/packages/mui-base/src/Field/Error/FieldError.types.tsx
deleted file mode 100644
index a65ec06bd..000000000
--- a/packages/mui-base/src/Field/Error/FieldError.types.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { BaseUIComponentProps } from '../../utils/types';
-import type { FieldRootOwnerState } from '../Root/FieldRoot.types';
-
-export type FieldErrorOwnerState = FieldRootOwnerState;
-
-export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldErrorOwnerState> {
-  /**
-   * Determines whether the error message should be shown when it matches a given property of the
-   * field's `ValidityState`.
-   */
-  show?: keyof ValidityState;
-  /**
-   * Determines whether the error message should be shown regardless of the field's client validity.
-   */
-  forceShow?: boolean;
-}
diff --git a/packages/mui-base/src/Field/Error/useFieldError.ts b/packages/mui-base/src/Field/Error/useFieldError.ts
index dc2a1c1d0..ad3afe60f 100644
--- a/packages/mui-base/src/Field/Error/useFieldError.ts
+++ b/packages/mui-base/src/Field/Error/useFieldError.ts
@@ -5,13 +5,7 @@ import { useId } from '../../utils/useId';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useFieldRootContext } from '../Root/FieldRootContext';
 
-interface UseFieldErrorParameters {
-  id: string | undefined;
-  rendered: boolean;
-  formError: string | string[] | null;
-}
-
-export function useFieldError(params: UseFieldErrorParameters) {
+export function useFieldError(params: useFieldError.Parameters) {
   const { id: idProp, rendered, formError } = params;
 
   const { setMessageIds, validityData } = useFieldRootContext();
@@ -56,3 +50,11 @@ export function useFieldError(params: UseFieldErrorParameters) {
     [getErrorProps],
   );
 }
+
+export namespace useFieldError {
+  export interface Parameters {
+    id: string | undefined;
+    rendered: boolean;
+    formError: string | string[] | null;
+  }
+}
diff --git a/packages/mui-base/src/Field/Label/FieldLabel.tsx b/packages/mui-base/src/Field/Label/FieldLabel.tsx
index e721a74f9..5b7c88606 100644
--- a/packages/mui-base/src/Field/Label/FieldLabel.tsx
+++ b/packages/mui-base/src/Field/Label/FieldLabel.tsx
@@ -2,12 +2,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import type { FieldLabelProps } from './FieldLabel.types';
+import { FieldRoot } from '../Root/FieldRoot';
 import { useFieldRootContext } from '../Root/FieldRootContext';
 import { useFieldLabel } from './useFieldLabel';
 import { STYLE_HOOK_MAPPING } from '../utils/constants';
 import { useId } from '../../utils/useId';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  * A label for the field's control.
@@ -21,7 +22,7 @@ import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
  * - [FieldLabel API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldLabel)
  */
 const FieldLabel = React.forwardRef(function FieldLabel(
-  props: FieldLabelProps,
+  props: FieldLabel.Props,
   forwardedRef: React.ForwardedRef<any>,
 ) {
   const { render, className, id: idProp, ...otherProps } = props;
@@ -52,6 +53,12 @@ const FieldLabel = React.forwardRef(function FieldLabel(
   return renderElement();
 });
 
+namespace FieldLabel {
+  export type OwnerState = FieldRoot.OwnerState;
+
+  export interface Props extends BaseUIComponentProps<'div', OwnerState> {}
+}
+
 FieldLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Field/Label/FieldLabel.types.ts b/packages/mui-base/src/Field/Label/FieldLabel.types.ts
deleted file mode 100644
index afa6dd7b7..000000000
--- a/packages/mui-base/src/Field/Label/FieldLabel.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { BaseUIComponentProps } from '../../utils/types';
-import type { FieldRootOwnerState } from '../Root/FieldRoot.types';
-
-export type FieldLabelOwnerState = FieldRootOwnerState;
-
-export interface FieldLabelProps extends BaseUIComponentProps<'div', FieldLabelOwnerState> {}
diff --git a/packages/mui-base/src/Field/Label/useFieldLabel.ts b/packages/mui-base/src/Field/Label/useFieldLabel.ts
index e0d44c446..12cc28cde 100644
--- a/packages/mui-base/src/Field/Label/useFieldLabel.ts
+++ b/packages/mui-base/src/Field/Label/useFieldLabel.ts
@@ -3,11 +3,7 @@ import * as React from 'react';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useFieldRootContext } from '../Root/FieldRootContext';
 
-interface UseFieldLabelParameters {
-  customTag: boolean;
-}
-
-export function useFieldLabel(params: UseFieldLabelParameters) {
+export function useFieldLabel(params: useFieldLabel.Parameters) {
   const { customTag } = params;
 
   const { controlId, labelId } = useFieldRootContext();
@@ -39,3 +35,9 @@ export function useFieldLabel(params: UseFieldLabelParameters) {
     [getLabelProps],
   );
 }
+
+export namespace useFieldLabel {
+  export interface Parameters {
+    customTag: boolean;
+  }
+}
diff --git a/packages/mui-base/src/Field/Root/FieldRoot.tsx b/packages/mui-base/src/Field/Root/FieldRoot.tsx
index f156763c0..0a7a57643 100644
--- a/packages/mui-base/src/Field/Root/FieldRoot.tsx
+++ b/packages/mui-base/src/Field/Root/FieldRoot.tsx
@@ -2,12 +2,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import type { FieldRootOwnerState, FieldValidityData, FieldRootProps } from './FieldRoot.types';
-import { FieldRootContext, type FieldRootContextValue } from './FieldRootContext';
+import { FieldRootContext } from './FieldRootContext';
 import { DEFAULT_VALIDITY_STATE, STYLE_HOOK_MAPPING } from '../utils/constants';
 import { useFieldsetRootContext } from '../../Fieldset/Root/FieldsetRootContext';
 import { useEventCallback } from '../../utils/useEventCallback';
 import { useFormRootContext } from '../../Form/Root/FormRootContext';
+import { BaseUIComponentProps } from '../../utils/types';
 
 /**
  * The foundation for building custom-styled fields.
@@ -21,7 +21,7 @@ import { useFormRootContext } from '../../Form/Root/FormRootContext';
  * - [FieldRoot API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldRoot)
  */
 const FieldRoot = React.forwardRef(function FieldRoot(
-  props: FieldRootProps,
+  props: FieldRoot.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -72,7 +72,7 @@ const FieldRoot = React.forwardRef(function FieldRoot(
 
   const valid = !invalid && validityData.state.valid;
 
-  const ownerState: FieldRootOwnerState = React.useMemo(
+  const ownerState: FieldRoot.OwnerState = React.useMemo(
     () => ({
       disabled,
       touched,
@@ -82,7 +82,7 @@ const FieldRoot = React.forwardRef(function FieldRoot(
     [disabled, touched, dirty, valid],
   );
 
-  const contextValue: FieldRootContextValue = React.useMemo(
+  const contextValue: FieldRootContext = React.useMemo(
     () => ({
       invalid,
       controlId,
@@ -137,6 +137,69 @@ const FieldRoot = React.forwardRef(function FieldRoot(
   );
 });
 
+export interface FieldValidityData {
+  state: {
+    badInput: boolean;
+    customError: boolean;
+    patternMismatch: boolean;
+    rangeOverflow: boolean;
+    rangeUnderflow: boolean;
+    stepMismatch: boolean;
+    tooLong: boolean;
+    tooShort: boolean;
+    typeMismatch: boolean;
+    valueMissing: boolean;
+    valid: boolean | null;
+  };
+  error: string;
+  errors: string[];
+  value: unknown;
+  initialValue: unknown;
+}
+
+namespace FieldRoot {
+  export interface OwnerState {
+    disabled: boolean;
+    touched: boolean;
+    dirty: boolean;
+    valid: boolean | null;
+  }
+
+  export interface Props extends BaseUIComponentProps<'div', OwnerState> {
+    /**
+     * Whether the field is disabled. Takes precedence over the `disabled` prop of the `Field.Control`
+     * component.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The field's name. Takes precedence over the `name` prop of the `Field.Control` component.
+     */
+    name?: string;
+    /**
+     * Function to custom-validate the field's value. Return a string or array of strings with error
+     * messages if the value is invalid, or `null` if the value is valid. The function can also return
+     * a promise that resolves to a string, array of strings, or `null`.
+     */
+    validate?: (value: unknown) => string | string[] | null | Promise<string | string[] | null>;
+    /**
+     * Determines if validation should be triggered on the `change` event, rather than only on commit
+     * (blur).
+     * @default false
+     */
+    validateOnChange?: boolean;
+    /**
+     * The debounce time in milliseconds for the `validate` function in the `change` phase.
+     * @default 0
+     */
+    validateDebounceTime?: number;
+    /**
+     * Determines if the field is forcefully marked as invalid.
+     */
+    invalid?: boolean;
+  }
+}
+
 FieldRoot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Field/Root/FieldRoot.types.ts b/packages/mui-base/src/Field/Root/FieldRoot.types.ts
deleted file mode 100644
index 659257f49..000000000
--- a/packages/mui-base/src/Field/Root/FieldRoot.types.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { BaseUIComponentProps } from '../../utils/types';
-
-export interface FieldValidityData {
-  state: {
-    badInput: boolean;
-    customError: boolean;
-    patternMismatch: boolean;
-    rangeOverflow: boolean;
-    rangeUnderflow: boolean;
-    stepMismatch: boolean;
-    tooLong: boolean;
-    tooShort: boolean;
-    typeMismatch: boolean;
-    valueMissing: boolean;
-    valid: boolean | null;
-  };
-  error: string;
-  errors: string[];
-  value: unknown;
-  initialValue: unknown;
-}
-
-export interface FieldRootOwnerState {
-  disabled: boolean;
-  touched: boolean;
-  dirty: boolean;
-  valid: boolean | null;
-}
-
-export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRootOwnerState> {
-  /**
-   * Whether the field is disabled. Takes precedence over the `disabled` prop of the `Field.Control`
-   * component.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * The field's name. Takes precedence over the `name` prop of the `Field.Control` component.
-   */
-  name?: string;
-  /**
-   * Function to custom-validate the field's value. Return a string or array of strings with error
-   * messages if the value is invalid, or `null` if the value is valid. The function can also return
-   * a promise that resolves to a string, array of strings, or `null`.
-   */
-  validate?: (value: unknown) => string | string[] | null | Promise<string | string[] | null>;
-  /**
-   * Determines if validation should be triggered on the `change` event, rather than only on commit
-   * (blur).
-   * @default false
-   */
-  validateOnChange?: boolean;
-  /**
-   * The debounce time in milliseconds for the `validate` function in the `change` phase.
-   * @default 0
-   */
-  validateDebounceTime?: number;
-  /**
-   * Determines if the field is forcefully marked as invalid.
-   */
-  invalid?: boolean;
-}
diff --git a/packages/mui-base/src/Field/Root/FieldRootContext.ts b/packages/mui-base/src/Field/Root/FieldRootContext.ts
index 248009f59..833c761be 100644
--- a/packages/mui-base/src/Field/Root/FieldRootContext.ts
+++ b/packages/mui-base/src/Field/Root/FieldRootContext.ts
@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import { DEFAULT_VALIDITY_STATE } from '../utils/constants';
-import type { FieldRootOwnerState, FieldValidityData } from './FieldRoot.types';
+import type { FieldRoot, FieldValidityData } from './FieldRoot';
 
 const NOOP = () => {};
 
-export interface FieldRootContextValue {
+export interface FieldRootContext {
   invalid: boolean | undefined;
   controlId: string | undefined;
   setControlId: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -24,11 +24,11 @@ export interface FieldRootContextValue {
   validate: (value: unknown) => string | string[] | null | Promise<string | string[] | null>;
   validateOnChange: boolean;
   validateDebounceTime: number;
-  ownerState: FieldRootOwnerState;
+  ownerState: FieldRoot.OwnerState;
   markedDirtyRef: React.MutableRefObject<boolean>;
 }
 
-export const FieldRootContext = React.createContext<FieldRootContextValue>({
+export const FieldRootContext = React.createContext<FieldRootContext>({
   invalid: undefined,
   controlId: undefined,
   setControlId: NOOP,
diff --git a/packages/mui-base/src/Field/Validity/FieldValidity.tsx b/packages/mui-base/src/Field/Validity/FieldValidity.tsx
index f20c8c179..ebe70f797 100644
--- a/packages/mui-base/src/Field/Validity/FieldValidity.tsx
+++ b/packages/mui-base/src/Field/Validity/FieldValidity.tsx
@@ -2,8 +2,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFieldRootContext } from '../Root/FieldRootContext';
-import type { FieldValidityProps, FieldValidityState } from './FieldValidity.types';
 import { getCombinedFieldValidityData } from '../utils/getCombinedFieldValidityData';
+import { FieldValidityData } from '../Root/FieldRoot';
 
 /**
  * Render prop component that provides the field's validity state and value to its children.
@@ -16,7 +16,7 @@ import { getCombinedFieldValidityData } from '../utils/getCombinedFieldValidityD
  *
  * - [FieldValidity API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldValidity)
  */
-function FieldValidity(props: FieldValidityProps) {
+function FieldValidity(props: FieldValidity.Props) {
   const { validityData, invalid } = useFieldRootContext(false);
 
   const fieldValidityState: FieldValidityState = React.useMemo(() => {
@@ -30,6 +30,18 @@ function FieldValidity(props: FieldValidityProps) {
   return <React.Fragment>{props.children(fieldValidityState)}</React.Fragment>;
 }
 
+export interface FieldValidityState extends Omit<FieldValidityData, 'state'> {
+  validity: FieldValidityData['state'];
+}
+
+namespace FieldValidity {
+  export interface OwnerState {}
+
+  export interface Props {
+    children: (state: FieldValidityState) => React.ReactNode;
+  }
+}
+
 FieldValidity.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Field/Validity/FieldValidity.types.ts b/packages/mui-base/src/Field/Validity/FieldValidity.types.ts
deleted file mode 100644
index 7e0975c6c..000000000
--- a/packages/mui-base/src/Field/Validity/FieldValidity.types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type * as React from 'react';
-import type { FieldValidityData } from '../Root/FieldRoot.types';
-
-export interface FieldValidityState extends Omit<FieldValidityData, 'state'> {
-  validity: FieldValidityData['state'];
-}
-
-export interface FieldValidityOwnerState {}
-
-export interface FieldValidityProps {
-  children: (state: FieldValidityState) => React.ReactNode;
-}
diff --git a/packages/mui-base/src/Field/index.barrel.ts b/packages/mui-base/src/Field/index.barrel.ts
index 44e3c5cee..e9604532c 100644
--- a/packages/mui-base/src/Field/index.barrel.ts
+++ b/packages/mui-base/src/Field/index.barrel.ts
@@ -5,9 +5,4 @@ export * from './Description/FieldDescription';
 export * from './Control/FieldControl';
 export * from './Validity/FieldValidity';
 
-export type * from './Root/FieldRoot.types';
-export type * from './Label/FieldLabel.types';
-export type * from './Error/FieldError.types';
-export type * from './Description/FieldDescription.types';
-export type * from './Control/FieldControl.types';
-export type * from './Validity/FieldValidity.types';
+export type { FieldValidityData } from './Root/FieldRoot';
diff --git a/packages/mui-base/src/Field/index.ts b/packages/mui-base/src/Field/index.ts
index 51e9f3afb..caded1396 100644
--- a/packages/mui-base/src/Field/index.ts
+++ b/packages/mui-base/src/Field/index.ts
@@ -5,25 +5,4 @@ export { FieldDescription as Description } from './Description/FieldDescription'
 export { FieldControl as Control } from './Control/FieldControl';
 export { FieldValidity as Validity } from './Validity/FieldValidity';
 
-export type {
-  FieldRootProps as RootProps,
-  FieldRootOwnerState as RootOwnerState,
-  FieldValidityData as ValidityData,
-} from './Root/FieldRoot.types';
-export type {
-  FieldLabelProps as LabelProps,
-  FieldLabelOwnerState as LabelOwnerState,
-} from './Label/FieldLabel.types';
-export type {
-  FieldErrorProps as ErrorProps,
-  FieldErrorOwnerState as ErrorOwnerState,
-} from './Error/FieldError.types';
-export type {
-  FieldDescriptionProps as DescriptionProps,
-  FieldDescriptionOwnerState as DescriptionOwnerState,
-} from './Description/FieldDescription.types';
-export type {
-  FieldControlProps as ControlProps,
-  FieldControlOwnerState as ControlOwnerState,
-} from './Control/FieldControl.types';
-export type { FieldValidityProps as ValidityProps } from './Validity/FieldValidity.types';
+export type { FieldValidityData as ValidityData } from './Root/FieldRoot';
diff --git a/packages/mui-base/src/Field/utils/getCombinedFieldValidityData.ts b/packages/mui-base/src/Field/utils/getCombinedFieldValidityData.ts
index a4f9adc04..fdf7bb43a 100644
--- a/packages/mui-base/src/Field/utils/getCombinedFieldValidityData.ts
+++ b/packages/mui-base/src/Field/utils/getCombinedFieldValidityData.ts
@@ -1,4 +1,4 @@
-import type { FieldValidityData } from '../Root/FieldRoot.types';
+import { FieldValidityData } from '../Root/FieldRoot';
 
 /**
  * Combines the field's client-side, stateful validity data with the external invalid state to
diff --git a/packages/mui-base/src/Form/Root/FormRootContext.ts b/packages/mui-base/src/Form/Root/FormRootContext.ts
index 842fbdba2..8eb9bf6da 100644
--- a/packages/mui-base/src/Form/Root/FormRootContext.ts
+++ b/packages/mui-base/src/Form/Root/FormRootContext.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldValidityData } from '../../Field/Root/FieldRoot.types';
+import type { FieldValidityData } from '../../Field/Root/FieldRoot';
 
 type Errors = Record<string, string | string[]>;
 
diff --git a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.tsx b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.tsx
index 201004938..fb5bce021 100644
--- a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.tsx
+++ b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.tsx
@@ -6,7 +6,7 @@ import { UseNumberFieldRoot, useNumberFieldRoot } from './useNumberFieldRoot';
 import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import type { BaseUIComponentProps } from '../../utils/types';
-import type { FieldRootOwnerState } from '../../Field/Root/FieldRoot.types';
+import type { FieldRoot } from '../../Field/Root/FieldRoot';
 
 /**
  * The foundation for building custom-styled number fields.
@@ -102,7 +102,7 @@ export namespace NumberFieldRoot {
     extends UseNumberFieldRoot.Parameters,
       Omit<BaseUIComponentProps<'div', OwnerState>, 'onChange' | 'defaultValue'> {}
 
-  export interface OwnerState extends FieldRootOwnerState {
+  export interface OwnerState extends FieldRoot.OwnerState {
     /**
      * The raw number value of the input element.
      */
diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.types.ts b/packages/mui-base/src/Slider/Root/SliderRoot.types.ts
index 4eefca63e..1cb4b53fa 100644
--- a/packages/mui-base/src/Slider/Root/SliderRoot.types.ts
+++ b/packages/mui-base/src/Slider/Root/SliderRoot.types.ts
@@ -1,6 +1,6 @@
 import type { BaseUIComponentProps } from '../../utils/types';
 import type { CompoundComponentContextValue } from '../../useCompound';
-import type { FieldRootOwnerState } from '../../Field/Root/FieldRoot.types';
+import type { FieldRoot } from '../../Field/Root/FieldRoot';
 
 export interface SliderThumbMetadata {
   inputId: string;
@@ -23,7 +23,7 @@ export type SliderDirection = 'ltr' | 'rtl';
 
 export type SliderOrientation = 'horizontal' | 'vertical';
 
-export interface SliderRootOwnerState extends FieldRootOwnerState {
+export interface SliderRootOwnerState extends FieldRoot.OwnerState {
   /**
    * The index of the active thumb.
    */
diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.tsx b/packages/mui-base/src/Switch/Root/SwitchRoot.tsx
index 0c72e0152..40831d0b5 100644
--- a/packages/mui-base/src/Switch/Root/SwitchRoot.tsx
+++ b/packages/mui-base/src/Switch/Root/SwitchRoot.tsx
@@ -6,9 +6,9 @@ import { useSwitchRoot } from './useSwitchRoot';
 import { SwitchRootContext } from './SwitchRootContext';
 import { styleHookMapping } from '../styleHooks';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { FieldRoot } from '../../Field/Root/FieldRoot';
 import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 import type { BaseUIComponentProps } from '../../utils/types';
-import type { FieldRootOwnerState } from '../../Field/Root/FieldRoot.types';
 
 /**
  * The foundation for building custom-styled switches.
@@ -78,7 +78,7 @@ namespace SwitchRoot {
     extends useSwitchRoot.Parameters,
       Omit<BaseUIComponentProps<'button', SwitchRoot.OwnerState>, 'onChange'> {}
 
-  export interface OwnerState extends FieldRootOwnerState {
+  export interface OwnerState extends FieldRoot.OwnerState {
     checked: boolean;
     disabled: boolean;
     readOnly: boolean;

From ee8e045352e38f7017fdd28601c79f6b047500e6 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 7 Oct 2024 11:41:53 +0200
Subject: [PATCH 07/22] Bump webpack to ^5.91.0 [SECURITY] (#713)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 pnpm-lock.yaml | 358 ++++++++++++++++++++++++-------------------------
 1 file changed, 175 insertions(+), 183 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3db371a45..284727f70 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -108,7 +108,7 @@ importers:
         version: 7.8.0(eslint@8.57.1)(typescript@5.5.4)
       babel-loader:
         specifier: ^9.2.1
-        version: 9.2.1(@babel/core@7.25.2)(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+        version: 9.2.1(@babel/core@7.25.2)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       babel-plugin-istanbul:
         specifier: ^6.1.1
         version: 6.1.1
@@ -132,7 +132,7 @@ importers:
         version: 5.3.0
       compression-webpack-plugin:
         specifier: ^11.1.0
-        version: 11.1.0(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+        version: 11.1.0(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       concurrently:
         specifier: ^8.2.2
         version: 8.2.2
@@ -144,7 +144,7 @@ importers:
         version: 7.0.3
       css-loader:
         specifier: ^7.1.2
-        version: 7.1.2(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+        version: 7.1.2(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       danger:
         specifier: ^12.3.3
         version: 12.3.3(encoding@0.1.13)
@@ -168,7 +168,7 @@ importers:
         version: 9.1.0(eslint@8.57.1)
       eslint-import-resolver-webpack:
         specifier: ^0.13.9
-        version: 0.13.9(eslint-plugin-import@2.30.0)(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+        version: 0.13.9(eslint-plugin-import@2.30.0)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       eslint-plugin-babel:
         specifier: ^5.3.1
         version: 5.3.1(eslint@8.57.1)
@@ -231,7 +231,7 @@ importers:
         version: 0.4.0
       karma-webpack:
         specifier: ^5.0.1
-        version: 5.0.1(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+        version: 5.0.1(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       lerna:
         specifier: ^8.1.8
         version: 8.1.8(babel-plugin-macros@3.1.0)(encoding@0.1.13)
@@ -258,7 +258,7 @@ importers:
         version: 8.4.47
       postcss-loader:
         specifier: ^8.1.1
-        version: 8.1.1(postcss@8.4.47)(typescript@5.5.4)(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+        version: 8.1.1(postcss@8.4.47)(typescript@5.5.4)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       postcss-styled-syntax:
         specifier: ^0.6.4
         version: 0.6.4(postcss@8.4.47)
@@ -288,7 +288,7 @@ importers:
         version: 14.2.3
       style-loader:
         specifier: ^4.0.0
-        version: 4.0.0(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+        version: 4.0.0(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       stylelint:
         specifier: ^16.4.0
         version: 16.4.0(typescript@5.5.4)
@@ -303,7 +303,7 @@ importers:
         version: 5.31.0
       terser-webpack-plugin:
         specifier: ^5.3.10
-        version: 5.3.10(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+        version: 5.3.10(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       tsx:
         specifier: ^4.8.2
         version: 4.8.2
@@ -315,13 +315,13 @@ importers:
         version: 5.0.0
       webpack:
         specifier: ^5.91.0
-        version: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+        version: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
       webpack-bundle-analyzer:
         specifier: ^4.10.2
         version: 4.10.2
       webpack-cli:
         specifier: ^5.1.4
-        version: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)
+        version: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)
       yargs:
         specifier: ^17.7.2
         version: 17.7.2
@@ -675,7 +675,7 @@ importers:
         version: 11.2.0
       html-webpack-plugin:
         specifier: ^5.6.0
-        version: 5.6.0(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+        version: 5.6.0(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       is-wsl:
         specifier: ^3.1.0
         version: 3.1.0
@@ -723,17 +723,13 @@ importers:
         version: 1.6.28
       webpack:
         specifier: ^5.91.0
-        version: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+        version: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
       yargs:
         specifier: ^17.7.2
         version: 17.7.2
 
 packages:
 
-  '@aashutoshrathi/word-wrap@1.2.6':
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
-
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -1665,8 +1661,8 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.11.0':
-    resolution: {integrity: sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==}
+  '@eslint-community/regexpp@4.11.1':
+    resolution: {integrity: sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
   '@eslint/config-array@0.17.1':
@@ -1743,8 +1739,8 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
-  '@humanwhocodes/retry@0.3.0':
-    resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
     engines: {node: '>=18.18'}
 
   '@hutson/parse-repository-url@3.0.2':
@@ -2673,17 +2669,14 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
-  '@types/eslint-scope@3.7.7':
-    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
-
   '@types/eslint@8.56.12':
     resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==}
 
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
-  '@types/estree@1.0.5':
-    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+  '@types/estree@1.0.6':
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
   '@types/express-serve-static-core@4.19.0':
     resolution: {integrity: sha512-bGyep3JqPCRry1wq+O5n7oiBgGWmeIJXPjXXCo8EK0u8duZGSYar7cGqd3ML2JUsLGeB7fmc06KYo9fLGWqPvQ==}
@@ -3019,8 +3012,8 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
-  acorn-import-assertions@1.9.0:
-    resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
+  acorn-import-attributes@1.9.5:
+    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
       acorn: ^8
 
@@ -3366,8 +3359,8 @@ packages:
   browser-stdout@1.3.1:
     resolution: {integrity: sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==}
 
-  browserslist@4.23.3:
-    resolution: {integrity: sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==}
+  browserslist@4.24.0:
+    resolution: {integrity: sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -3452,8 +3445,8 @@ packages:
   camelize@1.0.1:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
 
-  caniuse-lite@1.0.30001646:
-    resolution: {integrity: sha512-dRg00gudiBDDTmUhClSdv3hqRfpbOnU28IpI1T6PBTLWa+kOj0681C8uML3PifYfREuBrVjDGhL3adYpBT6spw==}
+  caniuse-lite@1.0.30001667:
+    resolution: {integrity: sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -3518,8 +3511,8 @@ packages:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
 
-  chrome-trace-event@1.0.3:
-    resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==}
+  chrome-trace-event@1.0.4:
+    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
 
   ci-info@3.9.0:
@@ -4140,8 +4133,8 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.5.4:
-    resolution: {integrity: sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==}
+  electron-to-chromium@1.5.32:
+    resolution: {integrity: sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -4175,8 +4168,8 @@ packages:
     resolution: {integrity: sha512-kxpoMgrdtkXZ5h0SeraBS1iRntpTpQ3R8ussdb38+UAFnMGX5DDyJXePm+OCHOcoXvHDw7mc2erbJBpDnl7TPw==}
     engines: {node: '>=0.6'}
 
-  enhanced-resolve@5.16.0:
-    resolution: {integrity: sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==}
+  enhanced-resolve@5.17.1:
+    resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
 
   enquirer@2.3.6:
@@ -4230,8 +4223,8 @@ packages:
     resolution: {integrity: sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==}
     engines: {node: '>= 0.4'}
 
-  es-module-lexer@1.5.0:
-    resolution: {integrity: sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==}
+  es-module-lexer@1.5.4:
+    resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
 
   es-object-atoms@1.0.0:
     resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
@@ -4262,8 +4255,8 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
   escape-html@1.0.3:
@@ -4405,8 +4398,8 @@ packages:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint-scope@8.0.2:
-    resolution: {integrity: sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==}
+  eslint-scope@8.1.0:
+    resolution: {integrity: sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint-utils@3.0.0:
@@ -4423,13 +4416,14 @@ 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.0.0:
-    resolution: {integrity: sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==}
+  eslint-visitor-keys@4.1.0:
+    resolution: {integrity: sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint@8.57.1:
     resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
   eslint@9.8.0:
@@ -4437,8 +4431,8 @@ packages:
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
 
-  espree@10.1.0:
-    resolution: {integrity: sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==}
+  espree@10.2.0:
+    resolution: {integrity: sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   espree@9.6.1:
@@ -4450,8 +4444,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
   esrecurse@4.3.0:
@@ -5192,8 +5186,8 @@ packages:
     resolution: {integrity: sha512-t7sv42WkwFkyKbivUCglsQW5YWMskWtbEf4MNKX5u/CCWHKSPzN4FtBQGsQZgCLbxOzpVlcbWVK5KB3auIOjSw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  ignore@5.3.1:
-    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
   import-fresh@3.3.0:
@@ -6652,8 +6646,8 @@ packages:
     resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
     hasBin: true
 
-  optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
   ora@5.3.0:
@@ -8370,8 +8364,8 @@ packages:
     resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
     engines: {node: '>=4'}
 
-  update-browserslist-db@1.1.0:
-    resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
+  update-browserslist-db@1.1.1:
+    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -8463,8 +8457,8 @@ packages:
   walk-up-path@3.0.1:
     resolution: {integrity: sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==}
 
-  watchpack@2.4.1:
-    resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==}
+  watchpack@2.4.2:
+    resolution: {integrity: sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==}
     engines: {node: '>=10.13.0'}
 
   wcwidth@1.0.1:
@@ -8516,8 +8510,8 @@ packages:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
 
-  webpack@5.91.0:
-    resolution: {integrity: sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==}
+  webpack@5.94.0:
+    resolution: {integrity: sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     peerDependencies:
@@ -8588,6 +8582,10 @@ packages:
   wildcard@2.0.1:
     resolution: {integrity: sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==}
 
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
   wordwrap@1.0.0:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
 
@@ -8748,8 +8746,6 @@ packages:
 
 snapshots:
 
-  '@aashutoshrathi/word-wrap@1.2.6': {}
-
   '@alloc/quick-lru@5.2.0': {}
 
   '@ampproject/remapping@2.3.0':
@@ -8839,7 +8835,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.25.4
       '@babel/helper-validator-option': 7.24.8
-      browserslist: 4.23.3
+      browserslist: 4.24.0
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -9865,7 +9861,7 @@ snapshots:
       eslint: 9.8.0
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.11.0': {}
+  '@eslint-community/regexpp@4.11.1': {}
 
   '@eslint/config-array@0.17.1':
     dependencies:
@@ -9881,7 +9877,7 @@ snapshots:
       debug: 4.3.7(supports-color@8.1.1)
       espree: 9.6.1
       globals: 13.24.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -9893,9 +9889,9 @@ snapshots:
     dependencies:
       ajv: 6.12.6
       debug: 4.3.7(supports-color@8.1.1)
-      espree: 10.1.0
+      espree: 10.2.0
       globals: 14.0.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -9969,7 +9965,7 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
-  '@humanwhocodes/retry@0.3.0': {}
+  '@humanwhocodes/retry@0.3.1': {}
 
   '@hutson/parse-repository-url@3.0.2': {}
 
@@ -10180,7 +10176,7 @@ snapshots:
 
   '@mdx-js/mdx@3.0.1':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
       '@types/mdx': 2.0.13
@@ -10614,7 +10610,7 @@ snapshots:
       '@nrwl/devkit': 18.3.3(nx@18.3.5)
       ejs: 3.1.10
       enquirer: 2.3.6
-      ignore: 5.3.1
+      ignore: 5.3.2
       nx: 18.3.5
       semver: 7.6.3
       tmp: 0.2.3
@@ -11120,7 +11116,7 @@ snapshots:
 
   '@types/acorn@4.0.6':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   '@types/aria-query@5.0.4': {}
 
@@ -11149,21 +11145,16 @@ snapshots:
     dependencies:
       '@types/ms': 0.7.34
 
-  '@types/eslint-scope@3.7.7':
-    dependencies:
-      '@types/eslint': 8.56.12
-      '@types/estree': 1.0.5
-
   '@types/eslint@8.56.12':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       '@types/json-schema': 7.0.15
 
   '@types/estree-jsx@1.0.5':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
-  '@types/estree@1.0.5': {}
+  '@types/estree@1.0.6': {}
 
   '@types/express-serve-static-core@4.19.0':
     dependencies:
@@ -11306,7 +11297,7 @@ snapshots:
 
   '@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint@8.57.1)(typescript@5.5.4)':
     dependencies:
-      '@eslint-community/regexpp': 4.11.0
+      '@eslint-community/regexpp': 4.11.1
       '@typescript-eslint/parser': 7.8.0(eslint@8.57.1)(typescript@5.5.4)
       '@typescript-eslint/scope-manager': 7.8.0
       '@typescript-eslint/type-utils': 7.8.0(eslint@8.57.1)(typescript@5.5.4)
@@ -11315,7 +11306,7 @@ snapshots:
       debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.57.1
       graphemer: 1.4.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       natural-compare: 1.4.0
       semver: 7.6.3
       ts-api-utils: 1.3.0(typescript@5.5.4)
@@ -11545,20 +11536,20 @@ snapshots:
       '@webassemblyjs/ast': 1.12.1
       '@xtuc/long': 4.2.2
 
-  '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))':
+  '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))':
     dependencies:
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
-      webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
+      webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)
 
-  '@webpack-cli/info@2.0.2(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))':
+  '@webpack-cli/info@2.0.2(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))':
     dependencies:
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
-      webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
+      webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)
 
-  '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))':
+  '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))':
     dependencies:
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
-      webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
+      webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)
 
   '@xtuc/ieee754@1.2.0': {}
 
@@ -11589,7 +11580,7 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
-  acorn-import-assertions@1.9.0(acorn@8.12.1):
+  acorn-import-attributes@1.9.5(acorn@8.12.1):
     dependencies:
       acorn: 8.12.1
 
@@ -11853,12 +11844,12 @@ snapshots:
 
   axobject-query@4.1.0: {}
 
-  babel-loader@9.2.1(@babel/core@7.25.2)(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))):
+  babel-loader@9.2.1(@babel/core@7.25.2)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
     dependencies:
       '@babel/core': 7.25.2
       find-cache-dir: 4.0.0
       schema-utils: 4.2.0
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
 
   babel-plugin-istanbul@6.1.1:
     dependencies:
@@ -11995,12 +11986,12 @@ snapshots:
 
   browser-stdout@1.3.1: {}
 
-  browserslist@4.23.3:
+  browserslist@4.24.0:
     dependencies:
-      caniuse-lite: 1.0.30001646
-      electron-to-chromium: 1.5.4
+      caniuse-lite: 1.0.30001667
+      electron-to-chromium: 1.5.32
       node-releases: 2.0.18
-      update-browserslist-db: 1.1.0(browserslist@4.23.3)
+      update-browserslist-db: 1.1.1(browserslist@4.24.0)
 
   browserstack-local@1.5.5:
     dependencies:
@@ -12107,7 +12098,7 @@ snapshots:
 
   camelize@1.0.1: {}
 
-  caniuse-lite@1.0.30001646: {}
+  caniuse-lite@1.0.30001667: {}
 
   ccount@2.0.1: {}
 
@@ -12177,7 +12168,7 @@ snapshots:
 
   chownr@2.0.0: {}
 
-  chrome-trace-event@1.0.3: {}
+  chrome-trace-event@1.0.4: {}
 
   ci-info@3.9.0: {}
 
@@ -12315,11 +12306,11 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  compression-webpack-plugin@11.1.0(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))):
+  compression-webpack-plugin@11.1.0(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
     dependencies:
       schema-utils: 4.2.0
       serialize-javascript: 6.0.2
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
 
   compression@1.7.4:
     dependencies:
@@ -12444,7 +12435,7 @@ snapshots:
 
   core-js-compat@3.38.1:
     dependencies:
-      browserslist: 4.23.3
+      browserslist: 4.24.0
 
   core-js-pure@3.37.1: {}
 
@@ -12519,7 +12510,7 @@ snapshots:
 
   css-functions-list@3.2.2: {}
 
-  css-loader@7.1.2(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))):
+  css-loader@7.1.2(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.47)
       postcss: 8.4.47
@@ -12530,7 +12521,7 @@ snapshots:
       postcss-value-parser: 4.2.0
       semver: 7.6.3
     optionalDependencies:
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
 
   css-select@4.3.0:
     dependencies:
@@ -12833,7 +12824,7 @@ snapshots:
     dependencies:
       jake: 10.8.7
 
-  electron-to-chromium@1.5.4: {}
+  electron-to-chromium@1.5.32: {}
 
   emoji-regex@8.0.0: {}
 
@@ -12877,7 +12868,7 @@ snapshots:
       memory-fs: 0.2.0
       tapable: 0.1.10
 
-  enhanced-resolve@5.16.0:
+  enhanced-resolve@5.17.1:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.2.1
@@ -12988,7 +12979,7 @@ snapshots:
       iterator.prototype: 1.1.2
       safe-array-concat: 1.1.2
 
-  es-module-lexer@1.5.0: {}
+  es-module-lexer@1.5.4: {}
 
   es-object-atoms@1.0.0:
     dependencies:
@@ -13044,7 +13035,7 @@ snapshots:
       '@esbuild/win32-ia32': 0.20.2
       '@esbuild/win32-x64': 0.20.2
 
-  escalade@3.1.2: {}
+  escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
 
@@ -13095,7 +13086,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-webpack@0.13.9(eslint-plugin-import@2.30.0)(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))):
+  eslint-import-resolver-webpack@0.13.9(eslint-plugin-import@2.30.0)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
     dependencies:
       debug: 3.2.7
       enhanced-resolve: 0.9.1
@@ -13108,18 +13099,18 @@ snapshots:
       lodash: 4.17.21
       resolve: 2.0.0-next.5
       semver: 5.7.2
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.9(eslint-plugin-import@2.30.0)(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.9(eslint-plugin-import@2.30.0)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 7.8.0(eslint@8.57.1)(typescript@5.5.4)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-webpack: 0.13.9(eslint-plugin-import@2.30.0)(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+      eslint-import-resolver-webpack: 0.13.9(eslint-plugin-import@2.30.0)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
     transitivePeerDependencies:
       - supports-color
 
@@ -13147,7 +13138,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.9(eslint-plugin-import@2.30.0)(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.9(eslint-plugin-import@2.30.0)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -13237,7 +13228,7 @@ snapshots:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  eslint-scope@8.0.2:
+  eslint-scope@8.1.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
@@ -13251,12 +13242,12 @@ snapshots:
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint-visitor-keys@4.0.0: {}
+  eslint-visitor-keys@4.1.0: {}
 
   eslint@8.57.1:
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1)
-      '@eslint-community/regexpp': 4.11.0
+      '@eslint-community/regexpp': 4.11.1
       '@eslint/eslintrc': 2.1.4
       '@eslint/js': 8.57.1
       '@humanwhocodes/config-array': 0.13.0
@@ -13272,7 +13263,7 @@ snapshots:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 6.0.1
@@ -13280,7 +13271,7 @@ snapshots:
       glob-parent: 6.0.2
       globals: 13.24.0
       graphemer: 1.4.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
@@ -13290,7 +13281,7 @@ snapshots:
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
-      optionator: 0.9.3
+      optionator: 0.9.4
       strip-ansi: 6.0.1
       text-table: 0.2.0
     transitivePeerDependencies:
@@ -13299,28 +13290,28 @@ snapshots:
   eslint@9.8.0:
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.8.0)
-      '@eslint-community/regexpp': 4.11.0
+      '@eslint-community/regexpp': 4.11.1
       '@eslint/config-array': 0.17.1
       '@eslint/eslintrc': 3.1.0
       '@eslint/js': 9.8.0
       '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.3.0
+      '@humanwhocodes/retry': 0.3.1
       '@nodelib/fs.walk': 1.2.8
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
       debug: 4.3.7(supports-color@8.1.1)
       escape-string-regexp: 4.0.0
-      eslint-scope: 8.0.2
-      eslint-visitor-keys: 4.0.0
-      espree: 10.1.0
-      esquery: 1.5.0
+      eslint-scope: 8.1.0
+      eslint-visitor-keys: 4.1.0
+      espree: 10.2.0
+      esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 8.0.0
       find-up: 5.0.0
       glob-parent: 6.0.2
-      ignore: 5.3.1
+      ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
@@ -13329,17 +13320,17 @@ snapshots:
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
-      optionator: 0.9.3
+      optionator: 0.9.4
       strip-ansi: 6.0.1
       text-table: 0.2.0
     transitivePeerDependencies:
       - supports-color
 
-  espree@10.1.0:
+  espree@10.2.0:
     dependencies:
       acorn: 8.12.1
       acorn-jsx: 5.3.2(acorn@8.12.1)
-      eslint-visitor-keys: 4.0.0
+      eslint-visitor-keys: 4.1.0
 
   espree@9.6.1:
     dependencies:
@@ -13349,7 +13340,7 @@ snapshots:
 
   esprima@4.0.1: {}
 
-  esquery@1.5.0:
+  esquery@1.6.0:
     dependencies:
       estraverse: 5.3.0
 
@@ -13371,7 +13362,7 @@ snapshots:
 
   estree-util-attach-comments@3.0.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   estree-util-build-jsx@3.0.1:
     dependencies:
@@ -13396,7 +13387,7 @@ snapshots:
 
   estree-util-value-to-estree@3.1.2:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   estree-util-visit@2.0.0:
     dependencies:
@@ -13405,7 +13396,7 @@ snapshots:
 
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   esutils@2.0.3: {}
 
@@ -13961,7 +13952,7 @@ snapshots:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.3.1
+      ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
 
@@ -13969,7 +13960,7 @@ snapshots:
     dependencies:
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.3.1
+      ignore: 5.3.2
       merge2: 1.4.1
       slash: 4.0.0
 
@@ -13977,7 +13968,7 @@ snapshots:
     dependencies:
       '@sindresorhus/merge-streams': 2.3.0
       fast-glob: 3.3.2
-      ignore: 5.3.1
+      ignore: 5.3.2
       path-type: 5.0.0
       slash: 5.1.0
       unicorn-magic: 0.1.0
@@ -14104,7 +14095,7 @@ snapshots:
 
   hast-util-to-estree@3.1.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
       comma-separated-tokens: 2.0.3
@@ -14125,7 +14116,7 @@ snapshots:
 
   hast-util-to-jsx-runtime@2.3.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       '@types/hast': 3.0.4
       '@types/unist': 3.0.3
       comma-separated-tokens: 2.0.3
@@ -14209,7 +14200,7 @@ snapshots:
       readable-stream: 1.0.34
       through2: 0.4.2
 
-  html-webpack-plugin@5.6.0(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))):
+  html-webpack-plugin@5.6.0(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
@@ -14217,7 +14208,7 @@ snapshots:
       pretty-error: 4.0.0
       tapable: 2.2.1
     optionalDependencies:
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
 
   htmlparser2@6.1.0:
     dependencies:
@@ -14306,7 +14297,7 @@ snapshots:
     dependencies:
       minimatch: 9.0.4
 
-  ignore@5.3.1: {}
+  ignore@5.3.2: {}
 
   import-fresh@3.3.0:
     dependencies:
@@ -14510,7 +14501,7 @@ snapshots:
 
   is-reference@3.0.2:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   is-regex@1.1.4:
     dependencies:
@@ -14887,11 +14878,11 @@ snapshots:
     dependencies:
       graceful-fs: 4.2.11
 
-  karma-webpack@5.0.1(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))):
+  karma-webpack@5.0.1(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
     dependencies:
       glob: 7.2.3
       minimatch: 9.0.4
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
       webpack-merge: 4.2.2
 
   karma@6.4.4:
@@ -15569,7 +15560,7 @@ snapshots:
 
   micromark-extension-mdx-expression@3.0.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       devlop: 1.1.0
       micromark-factory-mdx-expression: 2.0.1
       micromark-factory-space: 2.0.0
@@ -15581,7 +15572,7 @@ snapshots:
   micromark-extension-mdx-jsx@3.0.0:
     dependencies:
       '@types/acorn': 4.0.6
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       devlop: 1.1.0
       estree-util-is-identifier-name: 3.0.0
       micromark-factory-mdx-expression: 2.0.1
@@ -15597,7 +15588,7 @@ snapshots:
 
   micromark-extension-mdxjs-esm@3.0.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.1
       micromark-util-character: 2.1.0
@@ -15633,7 +15624,7 @@ snapshots:
 
   micromark-factory-mdx-expression@2.0.1:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       devlop: 1.1.0
       micromark-util-character: 2.1.0
       micromark-util-events-to-acorn: 2.0.2
@@ -15697,7 +15688,7 @@ snapshots:
   micromark-util-events-to-acorn@2.0.2:
     dependencies:
       '@types/acorn': 4.0.6
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       '@types/unist': 3.0.3
       devlop: 1.1.0
       estree-util-visit: 2.0.0
@@ -15933,7 +15924,7 @@ snapshots:
       '@next/env': 14.2.13
       '@swc/helpers': 0.5.5
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001646
+      caniuse-lite: 1.0.30001667
       graceful-fs: 4.2.11
       postcss: 8.4.31
       react: 18.3.1
@@ -16120,7 +16111,7 @@ snapshots:
       figures: 3.2.0
       flat: 5.0.2
       fs-extra: 11.2.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       jest-diff: 29.7.0
       js-yaml: 4.1.0
       jsonc-parser: 3.2.0
@@ -16280,14 +16271,14 @@ snapshots:
 
   opener@1.5.2: {}
 
-  optionator@0.9.3:
+  optionator@0.9.4:
     dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
       deep-is: 0.1.4
       fast-levenshtein: 2.0.6
       levn: 0.4.1
       prelude-ls: 1.2.1
       type-check: 0.4.0
+      word-wrap: 1.2.5
 
   ora@5.3.0:
     dependencies:
@@ -16565,7 +16556,7 @@ snapshots:
 
   periscopic@3.1.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       estree-walker: 3.0.3
       is-reference: 3.0.2
 
@@ -16643,14 +16634,14 @@ snapshots:
     optionalDependencies:
       postcss: 8.4.47
 
-  postcss-loader@8.1.1(postcss@8.4.47)(typescript@5.5.4)(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))):
+  postcss-loader@8.1.1(postcss@8.4.47)(typescript@5.5.4)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
     dependencies:
       cosmiconfig: 9.0.0(typescript@5.5.4)
       jiti: 1.21.0
       postcss: 8.4.47
       semver: 7.6.3
     optionalDependencies:
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
     transitivePeerDependencies:
       - typescript
 
@@ -16745,7 +16736,7 @@ snapshots:
     dependencies:
       execa: 5.1.1
       find-up: 5.0.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       mri: 1.2.0
       picocolors: 1.1.0
       picomatch: 3.0.1
@@ -17716,9 +17707,9 @@ snapshots:
       minimist: 1.2.8
       through: 2.3.8
 
-  style-loader@4.0.0(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))):
+  style-loader@4.0.0(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
     dependencies:
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
 
   style-to-object@0.4.4:
     dependencies:
@@ -17779,7 +17770,7 @@ snapshots:
       globby: 11.1.0
       globjoin: 0.1.4
       html-tags: 3.3.1
-      ignore: 5.3.1
+      ignore: 5.3.2
       imurmurhash: 0.1.4
       is-plain-object: 5.0.0
       known-css-properties: 0.30.0
@@ -17917,14 +17908,14 @@ snapshots:
     dependencies:
       rimraf: 2.5.4
 
-  terser-webpack-plugin@5.3.10(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))):
+  terser-webpack-plugin@5.3.10(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
       terser: 5.31.0
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
 
   terser@5.31.0:
     dependencies:
@@ -18223,10 +18214,10 @@ snapshots:
 
   upath@2.0.1: {}
 
-  update-browserslist-db@1.1.0(browserslist@4.23.3):
+  update-browserslist-db@1.1.1(browserslist@4.24.0):
     dependencies:
-      browserslist: 4.23.3
-      escalade: 3.1.2
+      browserslist: 4.24.0
+      escalade: 3.2.0
       picocolors: 1.1.0
 
   update-check@1.5.4:
@@ -18319,7 +18310,7 @@ snapshots:
 
   walk-up-path@3.0.1: {}
 
-  watchpack@2.4.1:
+  watchpack@2.4.2:
     dependencies:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
@@ -18354,12 +18345,12 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0):
+  webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0):
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
-      '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
-      '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
+      '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
+      '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
+      '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       colorette: 2.0.20
       commander: 10.0.1
       cross-spawn: 7.0.3
@@ -18368,7 +18359,7 @@ snapshots:
       import-local: 3.1.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0))
+      webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))
       webpack-merge: 5.10.0
     optionalDependencies:
       webpack-bundle-analyzer: 4.10.2
@@ -18385,19 +18376,18 @@ snapshots:
 
   webpack-sources@3.2.3: {}
 
-  webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)):
+  webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)):
     dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       '@webassemblyjs/ast': 1.12.1
       '@webassemblyjs/wasm-edit': 1.12.1
       '@webassemblyjs/wasm-parser': 1.12.1
       acorn: 8.12.1
-      acorn-import-assertions: 1.9.0(acorn@8.12.1)
-      browserslist: 4.23.3
-      chrome-trace-event: 1.0.3
-      enhanced-resolve: 5.16.0
-      es-module-lexer: 1.5.0
+      acorn-import-attributes: 1.9.5(acorn@8.12.1)
+      browserslist: 4.24.0
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.17.1
+      es-module-lexer: 1.5.4
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
@@ -18408,11 +18398,11 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(webpack@5.91.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)))
-      watchpack: 2.4.1
+      terser-webpack-plugin: 5.3.10(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
+      watchpack: 2.4.2
       webpack-sources: 3.2.3
     optionalDependencies:
-      webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0)
+      webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -18500,6 +18490,8 @@ snapshots:
 
   wildcard@2.0.1: {}
 
+  word-wrap@1.2.5: {}
+
   wordwrap@1.0.0: {}
 
   workerpool@6.5.1: {}
@@ -18620,7 +18612,7 @@ snapshots:
   yargs@16.2.0:
     dependencies:
       cliui: 7.0.4
-      escalade: 3.1.2
+      escalade: 3.2.0
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
@@ -18630,7 +18622,7 @@ snapshots:
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.2
+      escalade: 3.2.0
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3

From 463d61a3befa8676e564db695eee2ef645060cec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Mon, 7 Oct 2024 12:42:05 +0200
Subject: [PATCH 08/22] [Progress] Move types to namespaces (#712)

---
 .../tailwind/index.tsx                        |  6 +-
 .../Indicator/ProgressIndicator.test.tsx      |  7 +-
 .../Progress/Indicator/ProgressIndicator.tsx  | 15 +++-
 .../Indicator/ProgressIndicator.types.ts      | 33 -------
 .../Indicator/useProgressIndicator.ts         | 41 +++++++--
 .../src/Progress/Root/ProgressContext.tsx     | 20 -----
 .../src/Progress/Root/ProgressRoot.test.tsx   |  4 +-
 .../src/Progress/Root/ProgressRoot.tsx        | 32 ++++---
 .../src/Progress/Root/ProgressRoot.types.ts   | 89 -------------------
 .../src/Progress/Root/ProgressRootContext.tsx | 25 ++++++
 .../mui-base/src/Progress/Root/styleHooks.ts  |  4 +-
 .../src/Progress/Root/useProgressRoot.ts      | 85 ++++++++++++++++--
 .../src/Progress/Track/ProgressTrack.test.tsx |  7 +-
 .../src/Progress/Track/ProgressTrack.tsx      | 15 +++-
 .../src/Progress/Track/ProgressTrack.types.ts |  4 -
 .../mui-base/src/Progress/index.barrel.ts     | 15 +---
 packages/mui-base/src/Progress/index.ts       | 21 +----
 17 files changed, 201 insertions(+), 222 deletions(-)
 delete mode 100644 packages/mui-base/src/Progress/Indicator/ProgressIndicator.types.ts
 delete mode 100644 packages/mui-base/src/Progress/Root/ProgressContext.tsx
 delete mode 100644 packages/mui-base/src/Progress/Root/ProgressRoot.types.ts
 create mode 100644 packages/mui-base/src/Progress/Root/ProgressRootContext.tsx
 delete mode 100644 packages/mui-base/src/Progress/Track/ProgressTrack.types.ts

diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx
index be812666a..badde7161 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function UnstyledProgressIntroduction() {
 }
 
 const Progress = React.forwardRef(function Progress(
-  props: BaseProgress.RootProps,
+  props: BaseProgress.Root.Props,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
@@ -39,7 +39,7 @@ const Progress = React.forwardRef(function Progress(
 });
 
 const ProgressTrack = React.forwardRef(function ProgressTrack(
-  props: BaseProgress.TrackProps,
+  props: BaseProgress.Track.Props,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
@@ -59,7 +59,7 @@ const ProgressTrack = React.forwardRef(function ProgressTrack(
 });
 
 const ProgressIndicator = React.forwardRef(function ProgressIndicator(
-  props: BaseProgress.IndicatorProps,
+  props: BaseProgress.Indicator.Props,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
diff --git a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx
index ed4a7a7fa..33256bf37 100644
--- a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx
+++ b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import * as Progress from '@base_ui/react/Progress';
-import { ProgressContext } from '@base_ui/react/Progress';
 import { createRenderer, describeConformance } from '#test-utils';
-import type { ProgressContextValue } from '../Root/ProgressRoot.types';
+import { ProgressRootContext } from '../Root/ProgressRootContext';
 
-const contextValue: ProgressContextValue = {
+const contextValue: ProgressRootContext = {
   direction: 'ltr',
   max: 100,
   min: 0,
@@ -24,7 +23,7 @@ describe('<Progress.Indicator />', () => {
   describeConformance(<Progress.Indicator />, () => ({
     render: (node) => {
       return render(
-        <ProgressContext.Provider value={contextValue}>{node}</ProgressContext.Provider>,
+        <ProgressRootContext.Provider value={contextValue}>{node}</ProgressRootContext.Provider>,
       );
     },
     refInstanceof: window.HTMLSpanElement,
diff --git a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.tsx b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.tsx
index 7e13c3022..ab75c8274 100644
--- a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.tsx
+++ b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.tsx
@@ -3,9 +3,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useProgressIndicator } from './useProgressIndicator';
-import { useProgressContext } from '../Root/ProgressContext';
+import { ProgressRoot } from '../Root/ProgressRoot';
+import { useProgressRootContext } from '../Root/ProgressRootContext';
 import { progressStyleHookMapping } from '../Root/styleHooks';
-import { ProgressIndicatorProps } from './ProgressIndicator.types';
+import { BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -18,12 +19,12 @@ import { ProgressIndicatorProps } from './ProgressIndicator.types';
  * - [ProgressIndicator API](https://base-ui.netlify.app/components/react-progress/#api-reference-ProgressIndicator)
  */
 const ProgressIndicator = React.forwardRef(function ProgressIndicator(
-  props: ProgressIndicatorProps,
+  props: ProgressIndicator.Props,
   forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
   const { render, className, ...otherProps } = props;
 
-  const { direction, max, min, value, ownerState } = useProgressContext();
+  const { direction, max, min, value, ownerState } = useProgressRootContext();
 
   const { getRootProps } = useProgressIndicator({
     direction,
@@ -45,6 +46,12 @@ const ProgressIndicator = React.forwardRef(function ProgressIndicator(
   return renderElement();
 });
 
+namespace ProgressIndicator {
+  export interface OwnerState extends ProgressRoot.OwnerState {}
+
+  export interface Props extends BaseUIComponentProps<'span', OwnerState> {}
+}
+
 ProgressIndicator.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.types.ts b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.types.ts
deleted file mode 100644
index dcdf95ae6..000000000
--- a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.types.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { BaseUIComponentProps } from '../../utils/types';
-import { ProgressDirection, ProgressRootOwnerState } from '../Root/ProgressRoot.types';
-
-export interface ProgressIndicatorProps
-  extends BaseUIComponentProps<'span', ProgressRootOwnerState> {}
-
-export interface UseProgressIndicatorParameters {
-  /**
-   * The direction that progress bars fill in
-   * @default 'ltr'
-   */
-  direction?: ProgressDirection;
-  /**
-   * The maximum value
-   * @default 100
-   */
-  max?: number;
-  /**
-   * The minimum value
-   * @default 0
-   */
-  min?: number;
-  /**
-   * The current value. The component is indeterminate when value is `null`.
-   */
-  value: number | null;
-}
-
-export interface UseProgressIndicatorReturnValue {
-  getRootProps: (
-    externalProps?: React.ComponentPropsWithRef<'span'>,
-  ) => React.ComponentPropsWithRef<'span'>;
-}
diff --git a/packages/mui-base/src/Progress/Indicator/useProgressIndicator.ts b/packages/mui-base/src/Progress/Indicator/useProgressIndicator.ts
index 4c2e49333..4e7e76e12 100644
--- a/packages/mui-base/src/Progress/Indicator/useProgressIndicator.ts
+++ b/packages/mui-base/src/Progress/Indicator/useProgressIndicator.ts
@@ -1,18 +1,15 @@
 'use client';
 import * as React from 'react';
 import { mergeReactProps } from '../../utils/mergeReactProps';
-import {
-  UseProgressIndicatorParameters,
-  UseProgressIndicatorReturnValue,
-} from './ProgressIndicator.types';
+import { ProgressDirection } from '../Root/useProgressRoot';
 
 function valueToPercent(value: number, min: number, max: number) {
   return ((value - min) * 100) / (max - min);
 }
 
 function useProgressIndicator(
-  parameters: UseProgressIndicatorParameters,
-): UseProgressIndicatorReturnValue {
+  parameters: useProgressIndicator.Parameters,
+): useProgressIndicator.ReturnValue {
   const { direction, max = 100, min = 0, value } = parameters;
 
   const isRtl = direction === 'rtl';
@@ -32,7 +29,7 @@ function useProgressIndicator(
     };
   }, [isRtl, percentageValue]);
 
-  const getRootProps: UseProgressIndicatorReturnValue['getRootProps'] = React.useCallback(
+  const getRootProps: useProgressIndicator.ReturnValue['getRootProps'] = React.useCallback(
     (externalProps = {}) =>
       mergeReactProps<'span'>(externalProps, {
         style: getStyles(),
@@ -45,4 +42,34 @@ function useProgressIndicator(
   };
 }
 
+namespace useProgressIndicator {
+  export interface Parameters {
+    /**
+     * The direction that progress bars fill in
+     * @default 'ltr'
+     */
+    direction?: ProgressDirection;
+    /**
+     * The maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The current value. The component is indeterminate when value is `null`.
+     */
+    value: number | null;
+  }
+
+  export interface ReturnValue {
+    getRootProps: (
+      externalProps?: React.ComponentPropsWithRef<'span'>,
+    ) => React.ComponentPropsWithRef<'span'>;
+  }
+}
+
 export { useProgressIndicator };
diff --git a/packages/mui-base/src/Progress/Root/ProgressContext.tsx b/packages/mui-base/src/Progress/Root/ProgressContext.tsx
deleted file mode 100644
index d0a2ebce6..000000000
--- a/packages/mui-base/src/Progress/Root/ProgressContext.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-'use client';
-import * as React from 'react';
-import { ProgressContextValue } from './ProgressRoot.types';
-
-/**
- * @ignore - internal component.
- */
-export const ProgressContext = React.createContext<ProgressContextValue | undefined>(undefined);
-
-if (process.env.NODE_ENV !== 'production') {
-  ProgressContext.displayName = 'ProgressContext';
-}
-
-export function useProgressContext() {
-  const context = React.useContext(ProgressContext);
-  if (context === undefined) {
-    throw new Error('useProgressContext must be used inside a Progress component');
-  }
-  return context;
-}
diff --git a/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx b/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx
index a42059689..1e9e12fca 100644
--- a/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx
+++ b/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx
@@ -2,9 +2,9 @@ import { expect } from 'chai';
 import * as React from 'react';
 import * as Progress from '@base_ui/react/Progress';
 import { createRenderer, describeConformance } from '#test-utils';
-import type { ProgressRootProps } from './ProgressRoot.types';
+import type { ProgressRoot } from './ProgressRoot';
 
-function TestProgress(props: ProgressRootProps) {
+function TestProgress(props: ProgressRoot.Props) {
   return (
     <Progress.Root {...props}>
       <Progress.Track>
diff --git a/packages/mui-base/src/Progress/Root/ProgressRoot.tsx b/packages/mui-base/src/Progress/Root/ProgressRoot.tsx
index 1164fd4fa..2f785bf22 100644
--- a/packages/mui-base/src/Progress/Root/ProgressRoot.tsx
+++ b/packages/mui-base/src/Progress/Root/ProgressRoot.tsx
@@ -2,14 +2,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useProgressRoot } from './useProgressRoot';
-import { ProgressContext } from './ProgressContext';
+import { type ProgressDirection, useProgressRoot } from './useProgressRoot';
+import { ProgressRootContext } from './ProgressRootContext';
 import { progressStyleHookMapping } from './styleHooks';
-import {
-  ProgressContextValue,
-  ProgressRootOwnerState,
-  ProgressRootProps,
-} from './ProgressRoot.types';
+import { BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -22,7 +18,7 @@ import {
  * - [ProgressRoot API](https://base-ui.netlify.app/components/react-progress/#api-reference-ProgressRoot)
  */
 const ProgressRoot = React.forwardRef(function ProgressRoot(
-  props: ProgressRootProps,
+  props: ProgressRoot.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -52,7 +48,7 @@ const ProgressRoot = React.forwardRef(function ProgressRoot(
     value,
   });
 
-  const ownerState: ProgressRootOwnerState = React.useMemo(
+  const ownerState: ProgressRoot.OwnerState = React.useMemo(
     () => ({
       direction,
       max,
@@ -62,7 +58,7 @@ const ProgressRoot = React.forwardRef(function ProgressRoot(
     [direction, max, min, progress.state],
   );
 
-  const contextValue: ProgressContextValue = React.useMemo(
+  const contextValue: ProgressRootContext = React.useMemo(
     () => ({
       ...progress,
       ownerState,
@@ -81,10 +77,24 @@ const ProgressRoot = React.forwardRef(function ProgressRoot(
   });
 
   return (
-    <ProgressContext.Provider value={contextValue}>{renderElement()}</ProgressContext.Provider>
+    <ProgressRootContext.Provider value={contextValue}>
+      {renderElement()}
+    </ProgressRootContext.Provider>
   );
 });
 
+namespace ProgressRoot {
+  export type OwnerState = {
+    direction: ProgressDirection;
+    max: number;
+    min: number;
+  };
+
+  export interface Props
+    extends useProgressRoot.Parameters,
+      BaseUIComponentProps<'div', OwnerState> {}
+}
+
 ProgressRoot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Progress/Root/ProgressRoot.types.ts b/packages/mui-base/src/Progress/Root/ProgressRoot.types.ts
deleted file mode 100644
index 19689829d..000000000
--- a/packages/mui-base/src/Progress/Root/ProgressRoot.types.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { BaseUIComponentProps } from '../../utils/types';
-
-export type ProgressContextValue = Omit<UseProgressRootReturnValue, 'getRootProps'> & {
-  ownerState: ProgressRootOwnerState;
-};
-
-export type ProgressRootOwnerState = {
-  direction: ProgressDirection;
-  max: number;
-  min: number;
-};
-
-export interface ProgressRootProps
-  extends UseProgressRootParameters,
-    BaseUIComponentProps<'div', ProgressRootOwnerState> {}
-
-export type ProgressDirection = 'ltr' | 'rtl';
-
-export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
-
-export interface UseProgressRootParameters {
-  /**
-   * The label for the Indicator component.
-   */
-  'aria-label'?: string;
-  /**
-   * An id or space-separated list of ids of elements that label the Indicator component.
-   */
-  'aria-labelledby'?: string;
-  /**
-   * A string value that provides a human-readable text alternative for the current value of the progress indicator.
-   */
-  'aria-valuetext'?: string;
-  /**
-   * The direction that progress bars fill in
-   * @default 'ltr'
-   */
-  direction?: ProgressDirection;
-  /**
-   * Accepts a function which returns a string value that provides an accessible name for the Indicator component
-   * @param {number | null} value The component's value
-   * @returns {string}
-   */
-  getAriaLabel?: (index: number | null) => string;
-  /**
-   * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress indicator.
-   * @param {number | null} value The component's value to format
-   * @returns {string}
-   */
-  getAriaValueText?: (value: number | null) => string;
-  /**
-   * The maximum value
-   * @default 100
-   */
-  max?: number;
-  /**
-   * The minimum value
-   * @default 0
-   */
-  min?: number;
-  /**
-   * The current value. The component is indeterminate when value is `null`.
-   * @default null
-   */
-  value: number | null;
-}
-
-export interface UseProgressRootReturnValue {
-  getRootProps: (
-    externalProps?: React.ComponentPropsWithRef<'div'>,
-  ) => React.ComponentPropsWithRef<'div'>;
-  /**
-   * The direction that progress bars fill in
-   */
-  direction: ProgressDirection;
-  /**
-   * The maximum value
-   */
-  max: number;
-  /**
-   * The minimum value
-   */
-  min: number;
-  /**
-   * Value of the component
-   */
-  value: number | null;
-  state: ProgressStatus;
-}
diff --git a/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx b/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx
new file mode 100644
index 000000000..f48eb17bc
--- /dev/null
+++ b/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx
@@ -0,0 +1,25 @@
+'use client';
+import * as React from 'react';
+import type { ProgressRoot } from './ProgressRoot';
+import type { useProgressRoot } from './useProgressRoot';
+
+export type ProgressRootContext = Omit<useProgressRoot.ReturnValue, 'getRootProps'> & {
+  ownerState: ProgressRoot.OwnerState;
+};
+
+/**
+ * @ignore - internal component.
+ */
+export const ProgressRootContext = React.createContext<ProgressRootContext | undefined>(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  ProgressRootContext.displayName = 'ProgressRootContext';
+}
+
+export function useProgressRootContext() {
+  const context = React.useContext(ProgressRootContext);
+  if (context === undefined) {
+    throw new Error('useProgressContext must be used inside a Progress component');
+  }
+  return context;
+}
diff --git a/packages/mui-base/src/Progress/Root/styleHooks.ts b/packages/mui-base/src/Progress/Root/styleHooks.ts
index 808c29c56..89937bb24 100644
--- a/packages/mui-base/src/Progress/Root/styleHooks.ts
+++ b/packages/mui-base/src/Progress/Root/styleHooks.ts
@@ -1,7 +1,7 @@
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import type { ProgressRootOwnerState } from './ProgressRoot.types';
+import type { ProgressRoot } from './ProgressRoot';
 
-export const progressStyleHookMapping: CustomStyleHookMapping<ProgressRootOwnerState> = {
+export const progressStyleHookMapping: CustomStyleHookMapping<ProgressRoot.OwnerState> = {
   direction: () => null,
   max: () => null,
   min: () => null,
diff --git a/packages/mui-base/src/Progress/Root/useProgressRoot.ts b/packages/mui-base/src/Progress/Root/useProgressRoot.ts
index 9d125ff94..31fdc5f41 100644
--- a/packages/mui-base/src/Progress/Root/useProgressRoot.ts
+++ b/packages/mui-base/src/Progress/Root/useProgressRoot.ts
@@ -1,11 +1,10 @@
 'use client';
 import * as React from 'react';
 import { mergeReactProps } from '../../utils/mergeReactProps';
-import {
-  ProgressStatus,
-  UseProgressRootParameters,
-  UseProgressRootReturnValue,
-} from './ProgressRoot.types';
+
+export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
+
+export type ProgressDirection = 'ltr' | 'rtl';
 
 function getDefaultAriaValueText(value: number | null) {
   if (value === null) {
@@ -15,7 +14,7 @@ function getDefaultAriaValueText(value: number | null) {
   return `${value}%`;
 }
 
-function useProgressRoot(parameters: UseProgressRootParameters): UseProgressRootReturnValue {
+function useProgressRoot(parameters: useProgressRoot.Parameters): useProgressRoot.ReturnValue {
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
@@ -33,7 +32,7 @@ function useProgressRoot(parameters: UseProgressRootParameters): UseProgressRoot
     state = value === max ? 'complete' : 'progressing';
   }
 
-  const getRootProps: UseProgressRootReturnValue['getRootProps'] = React.useCallback(
+  const getRootProps: useProgressRoot.ReturnValue['getRootProps'] = React.useCallback(
     (externalProps = {}) =>
       mergeReactProps<'div'>(externalProps, {
         'aria-label': getAriaLabel ? getAriaLabel(value) : ariaLabel,
@@ -70,4 +69,76 @@ function useProgressRoot(parameters: UseProgressRootParameters): UseProgressRoot
   };
 }
 
+namespace useProgressRoot {
+  export interface Parameters {
+    /**
+     * The label for the Indicator component.
+     */
+    'aria-label'?: string;
+    /**
+     * An id or space-separated list of ids of elements that label the Indicator component.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * A string value that provides a human-readable text alternative for the current value of the progress indicator.
+     */
+    'aria-valuetext'?: string;
+    /**
+     * The direction that progress bars fill in
+     * @default 'ltr'
+     */
+    direction?: ProgressDirection;
+    /**
+     * Accepts a function which returns a string value that provides an accessible name for the Indicator component
+     * @param {number | null} value The component's value
+     * @returns {string}
+     */
+    getAriaLabel?: (index: number | null) => string;
+    /**
+     * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress indicator.
+     * @param {number | null} value The component's value to format
+     * @returns {string}
+     */
+    getAriaValueText?: (value: number | null) => string;
+    /**
+     * The maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The current value. The component is indeterminate when value is `null`.
+     * @default null
+     */
+    value: number | null;
+  }
+
+  export interface ReturnValue {
+    getRootProps: (
+      externalProps?: React.ComponentPropsWithRef<'div'>,
+    ) => React.ComponentPropsWithRef<'div'>;
+    /**
+     * The direction that progress bars fill in
+     */
+    direction: ProgressDirection;
+    /**
+     * The maximum value
+     */
+    max: number;
+    /**
+     * The minimum value
+     */
+    min: number;
+    /**
+     * Value of the component
+     */
+    value: number | null;
+    state: ProgressStatus;
+  }
+}
+
 export { useProgressRoot };
diff --git a/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx b/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx
index a5b4ac8e0..197207bfa 100644
--- a/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx
+++ b/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import * as Progress from '@base_ui/react/Progress';
-import { ProgressContext } from '@base_ui/react/Progress';
 import { createRenderer, describeConformance } from '#test-utils';
-import type { ProgressContextValue } from '../Root/ProgressRoot.types';
+import { ProgressRootContext } from '../Root/ProgressRootContext';
 
-const contextValue: ProgressContextValue = {
+const contextValue: ProgressRootContext = {
   direction: 'ltr',
   max: 100,
   min: 0,
@@ -23,7 +22,7 @@ describe('<Progress.Track />', () => {
   describeConformance(<Progress.Track />, () => ({
     render: (node) => {
       return render(
-        <ProgressContext.Provider value={contextValue}>{node}</ProgressContext.Provider>,
+        <ProgressRootContext.Provider value={contextValue}>{node}</ProgressRootContext.Provider>,
       );
     },
     refInstanceof: window.HTMLSpanElement,
diff --git a/packages/mui-base/src/Progress/Track/ProgressTrack.tsx b/packages/mui-base/src/Progress/Track/ProgressTrack.tsx
index 331140037..d635f2c9e 100644
--- a/packages/mui-base/src/Progress/Track/ProgressTrack.tsx
+++ b/packages/mui-base/src/Progress/Track/ProgressTrack.tsx
@@ -2,9 +2,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useProgressContext } from '../Root/ProgressContext';
+import { useProgressRootContext } from '../Root/ProgressRootContext';
 import { progressStyleHookMapping } from '../Root/styleHooks';
-import { ProgressTrackProps } from './ProgressTrack.types';
+import { ProgressRoot } from '../Root/ProgressRoot';
+import { BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -17,12 +18,12 @@ import { ProgressTrackProps } from './ProgressTrack.types';
  * - [ProgressTrack API](https://base-ui.netlify.app/components/react-progress/#api-reference-ProgressTrack)
  */
 const ProgressTrack = React.forwardRef(function ProgressTrack(
-  props: ProgressTrackProps,
+  props: ProgressTrack.Props,
   forwardedRef: React.ForwardedRef<HTMLSpanElement>,
 ) {
   const { render, className, ...otherProps } = props;
 
-  const { ownerState } = useProgressContext();
+  const { ownerState } = useProgressRootContext();
 
   const { renderElement } = useComponentRenderer({
     render: render ?? 'span',
@@ -36,6 +37,12 @@ const ProgressTrack = React.forwardRef(function ProgressTrack(
   return renderElement();
 });
 
+namespace ProgressTrack {
+  export interface OwnerState extends ProgressRoot.OwnerState {}
+
+  export interface Props extends BaseUIComponentProps<'span', OwnerState> {}
+}
+
 ProgressTrack.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Progress/Track/ProgressTrack.types.ts b/packages/mui-base/src/Progress/Track/ProgressTrack.types.ts
deleted file mode 100644
index 3700c4dfb..000000000
--- a/packages/mui-base/src/Progress/Track/ProgressTrack.types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { BaseUIComponentProps } from '../../utils/types';
-import { ProgressRootOwnerState } from '../Root/ProgressRoot.types';
-
-export interface ProgressTrackProps extends BaseUIComponentProps<'span', ProgressRootOwnerState> {}
diff --git a/packages/mui-base/src/Progress/index.barrel.ts b/packages/mui-base/src/Progress/index.barrel.ts
index a22c330c3..677acec64 100644
--- a/packages/mui-base/src/Progress/index.barrel.ts
+++ b/packages/mui-base/src/Progress/index.barrel.ts
@@ -1,15 +1,8 @@
 export { ProgressRoot } from './Root/ProgressRoot';
-export type * from './Root/ProgressRoot.types';
-export { useProgressRoot } from './Root/useProgressRoot';
-export * from './Root/ProgressContext';
-
 export { ProgressTrack } from './Track/ProgressTrack';
-export type { ProgressTrackProps } from './Track/ProgressTrack.types';
-
 export { ProgressIndicator } from './Indicator/ProgressIndicator';
+
 export type {
-  ProgressIndicatorProps,
-  UseProgressIndicatorParameters,
-  UseProgressIndicatorReturnValue,
-} from './Indicator/ProgressIndicator.types';
-export { useProgressIndicator } from './Indicator/useProgressIndicator';
+  ProgressStatus as Status,
+  ProgressDirection as Direction,
+} from './Root/useProgressRoot';
diff --git a/packages/mui-base/src/Progress/index.ts b/packages/mui-base/src/Progress/index.ts
index d62e08b4b..5e0d1453f 100644
--- a/packages/mui-base/src/Progress/index.ts
+++ b/packages/mui-base/src/Progress/index.ts
@@ -1,21 +1,8 @@
 export { ProgressRoot as Root } from './Root/ProgressRoot';
-export type {
-  ProgressRootOwnerState as ProgressOwnerState,
-  ProgressRootProps as RootProps,
-  UseProgressRootParameters,
-  UseProgressRootReturnValue,
-  ProgressContextValue,
-} from './Root/ProgressRoot.types';
-export { useProgressRoot } from './Root/useProgressRoot';
-export * from './Root/ProgressContext';
-
 export { ProgressTrack as Track } from './Track/ProgressTrack';
-export type { ProgressTrackProps as TrackProps } from './Track/ProgressTrack.types';
-
 export { ProgressIndicator as Indicator } from './Indicator/ProgressIndicator';
+
 export type {
-  ProgressIndicatorProps as IndicatorProps,
-  UseProgressIndicatorParameters,
-  UseProgressIndicatorReturnValue,
-} from './Indicator/ProgressIndicator.types';
-export { useProgressIndicator } from './Indicator/useProgressIndicator';
+  ProgressStatus as Status,
+  ProgressDirection as Direction,
+} from './Root/useProgressRoot';

From 7590f5910b78181422d36a373a84ffd3fee5a811 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 8 Oct 2024 10:14:09 +0200
Subject: [PATCH 09/22] [test] Fix correct box-sizing reset in visual tests
 (#707)

---
 test/regressions/TestViewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
index f05b77481..362139f7f 100644
--- a/test/regressions/TestViewer.js
+++ b/test/regressions/TestViewer.js
@@ -53,7 +53,7 @@ function TestViewer(props) {
     }
 
     *, *::before, *::after {
-      boxSizing: inherit;
+      box-sizing: inherit;
       /* Disable transitions to avoid flaky screenshots */
       transition: none !important;
       animation: none !important;

From 7b68042c4232e68d2b788d58a62c598d5db2404e Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 8 Oct 2024 11:16:07 +0200
Subject: [PATCH 10/22] [test] Add missing async (#706)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michał Dudak <michal@mui.com>
---
 .../src/Checkbox/Root/CheckboxRoot.test.tsx   | 24 +++----
 .../src/Dialog/Root/DialogRoot.test.tsx       |  4 +-
 .../CheckboxItem/MenuCheckboxItem.test.tsx    |  6 +-
 .../mui-base/src/Menu/Item/MenuItem.test.tsx  |  2 +-
 .../src/Menu/RadioItem/MenuRadioItem.test.tsx |  4 +-
 .../mui-base/src/Menu/Root/MenuRoot.test.tsx  | 28 ++++----
 .../src/Menu/Trigger/MenuTrigger.test.tsx     |  2 +-
 .../Input/NumberFieldInput.test.tsx           | 24 +++----
 .../NumberField/Root/NumberFieldRoot.test.tsx |  8 +--
 .../src/Popover/Root/PopoverRoot.test.tsx     |  9 ++-
 .../PreviewCard/Root/PreviewCardRoot.test.tsx |  2 +-
 .../RadioGroup/Root/RadioGroupRoot.test.tsx   |  2 +-
 .../src/Slider/Root/SliderRoot.test.tsx       | 72 +++++++++----------
 .../src/Switch/Root/SwitchRoot.test.tsx       | 18 ++---
 .../mui-base/src/Tabs/Root/TabsRoot.test.tsx  | 44 ++++++------
 .../src/Tabs/TabsList/TabsList.test.tsx       |  6 +-
 .../src/Tooltip/Root/TooltipRoot.test.tsx     |  2 +-
 17 files changed, 130 insertions(+), 127 deletions(-)

diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
index a45c77194..5f136f54b 100644
--- a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
+++ b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
@@ -30,14 +30,14 @@ describe('<Checkbox.Root />', () => {
     expect(checkbox).to.have.attribute('aria-checked', 'false');
     expect(input.checked).to.equal(false);
 
-    await act(() => {
+    await act(async () => {
       checkbox.click();
     });
 
     expect(checkbox).to.have.attribute('aria-checked', 'true');
     expect(input.checked).to.equal(true);
 
-    await act(() => {
+    await act(async () => {
       checkbox.click();
     });
 
@@ -61,13 +61,13 @@ describe('<Checkbox.Root />', () => {
     const button = getByText('Toggle');
 
     expect(checkbox).to.have.attribute('aria-checked', 'false');
-    await act(() => {
+    await act(async () => {
       button.click();
     });
 
     expect(checkbox).to.have.attribute('aria-checked', 'true');
 
-    await act(() => {
+    await act(async () => {
       button.click();
     });
 
@@ -79,7 +79,7 @@ describe('<Checkbox.Root />', () => {
     const { getAllByRole } = await render(<Checkbox.Root onCheckedChange={handleChange} />);
     const [checkbox] = getAllByRole('checkbox');
 
-    await act(() => {
+    await act(async () => {
       checkbox.click();
     });
 
@@ -104,7 +104,7 @@ describe('<Checkbox.Root />', () => {
 
       expect(checkbox).to.have.attribute('aria-checked', 'false');
 
-      await act(() => {
+      await act(async () => {
         checkbox.click();
       });
 
@@ -129,7 +129,7 @@ describe('<Checkbox.Root />', () => {
 
       expect(checkbox).to.have.attribute('aria-checked', 'false');
 
-      await act(() => {
+      await act(async () => {
         checkbox.click();
       });
 
@@ -149,7 +149,7 @@ describe('<Checkbox.Root />', () => {
 
       expect(checkbox).to.have.attribute('aria-checked', 'mixed');
 
-      await act(() => {
+      await act(async () => {
         checkbox.click();
       });
 
@@ -177,7 +177,7 @@ describe('<Checkbox.Root />', () => {
     const [checkbox] = getAllByRole('checkbox');
     const input = container.querySelector('input[type=checkbox]') as HTMLInputElement;
 
-    await act(() => {
+    await act(async () => {
       input.click();
     });
 
@@ -231,7 +231,7 @@ describe('<Checkbox.Root />', () => {
 
       expect(checkbox).to.have.attribute('aria-checked', 'false');
 
-      await act(() => {
+      await act(async () => {
         label.click();
       });
 
@@ -258,7 +258,7 @@ describe('<Checkbox.Root />', () => {
 
       expect(checkbox).to.have.attribute('aria-checked', 'false');
 
-      await act(() => {
+      await act(async () => {
         label.click();
       });
 
@@ -294,7 +294,7 @@ describe('<Checkbox.Root />', () => {
 
     expect(stringifiedFormData).to.equal('test-checkbox=off');
 
-    await act(() => {
+    await act(async () => {
       checkbox.click();
     });
 
diff --git a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx
index aad67629a..0c7afd848 100644
--- a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx
+++ b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx
@@ -20,7 +20,7 @@ describe('<Dialog.Root />', () => {
       const button = getByRole('button');
       expect(queryByRole('dialog')).to.equal(null);
 
-      await act(() => {
+      await act(async () => {
         button.click();
       });
 
@@ -191,7 +191,7 @@ describe('<Dialog.Root />', () => {
       );
 
       const trigger = getByText('Open');
-      await act(() => {
+      await act(async () => {
         trigger.click();
       });
 
diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx
index 06773890d..9593007d2 100644
--- a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx
+++ b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx
@@ -88,7 +88,7 @@ describe('<Menu.CheckboxItem />', () => {
     );
 
     const menuItems = getAllByRole('menuitemcheckbox');
-    await act(() => {
+    await act(async () => {
       menuItems[0].focus();
     });
 
@@ -191,7 +191,7 @@ describe('<Menu.CheckboxItem />', () => {
       );
 
       const trigger = getByRole('button', { name: 'Open' });
-      await act(() => {
+      await act(async () => {
         trigger.focus();
       });
       await user.keyboard('[ArrowDown]');
@@ -221,7 +221,7 @@ describe('<Menu.CheckboxItem />', () => {
       );
 
       const trigger = getByRole('button', { name: 'Open' });
-      await act(() => {
+      await act(async () => {
         trigger.focus();
       });
 
diff --git a/packages/mui-base/src/Menu/Item/MenuItem.test.tsx b/packages/mui-base/src/Menu/Item/MenuItem.test.tsx
index 004bdc79c..ccb335ca1 100644
--- a/packages/mui-base/src/Menu/Item/MenuItem.test.tsx
+++ b/packages/mui-base/src/Menu/Item/MenuItem.test.tsx
@@ -88,7 +88,7 @@ describe('<Menu.Item />', () => {
     );
 
     const menuItems = getAllByRole('menuitem');
-    await act(() => {
+    await act(async () => {
       menuItems[0].focus();
     });
 
diff --git a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx
index 795b2bc41..7819cbc12 100644
--- a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx
+++ b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx
@@ -116,7 +116,7 @@ describe('<Menu.RadioItem />', () => {
     );
 
     const menuItems = getAllByRole('menuitemradio');
-    await act(() => {
+    await act(async () => {
       menuItems[0].focus();
     });
 
@@ -190,7 +190,7 @@ describe('<Menu.RadioItem />', () => {
         );
 
         const trigger = getByRole('button', { name: 'Open' });
-        await act(() => {
+        await act(async () => {
           trigger.focus();
         });
         await user.keyboard('[ArrowDown]');
diff --git a/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx b/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx
index b97d0dbdd..b3b41ad61 100644
--- a/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx
+++ b/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx
@@ -26,7 +26,7 @@ describe('<Menu.Root />', () => {
       );
 
       const trigger = getByRole('button', { name: 'Toggle' });
-      await act(() => {
+      await act(async () => {
         trigger.focus();
       });
 
@@ -71,7 +71,7 @@ describe('<Menu.Root />', () => {
       );
 
       const trigger = getByRole('button', { name: 'Toggle' });
-      await act(() => {
+      await act(async () => {
         trigger.focus();
       });
 
@@ -110,7 +110,7 @@ describe('<Menu.Root />', () => {
       );
 
       const trigger = getByRole('button', { name: 'Toggle' });
-      await act(() => {
+      await act(async () => {
         trigger.focus();
       });
 
@@ -157,7 +157,7 @@ describe('<Menu.Root />', () => {
 
         const items = getAllByRole('menuitem');
 
-        await act(() => {
+        await act(async () => {
           items[0].focus();
         });
 
@@ -256,7 +256,7 @@ describe('<Menu.Root />', () => {
 
         const items = getAllByRole('menuitem');
 
-        await act(() => {
+        await act(async () => {
           items[0].focus();
         });
 
@@ -295,7 +295,7 @@ describe('<Menu.Root />', () => {
 
         const items = getAllByRole('menuitem');
 
-        await act(() => {
+        await act(async () => {
           items[0].focus();
         });
 
@@ -334,7 +334,7 @@ describe('<Menu.Root />', () => {
 
         const items = getAllByRole('menuitem');
 
-        await act(() => {
+        await act(async () => {
           items[0].focus();
         });
 
@@ -368,7 +368,7 @@ describe('<Menu.Root />', () => {
 
         const items = getAllByRole('menuitem');
 
-        await act(() => {
+        await act(async () => {
           items[0].focus();
         });
 
@@ -414,7 +414,7 @@ describe('<Menu.Root />', () => {
 
         const submenuTrigger = getByTestId('submenu-trigger');
 
-        await act(() => {
+        await act(async () => {
           submenuTrigger.focus();
         });
 
@@ -459,7 +459,7 @@ describe('<Menu.Root />', () => {
       const { getAllByRole, getByRole } = await render(<Test />);
 
       const trigger = getByRole('button', { name: 'Toggle' });
-      await act(() => {
+      await act(async () => {
         trigger.focus();
       });
 
@@ -478,7 +478,7 @@ describe('<Menu.Root />', () => {
       const { getByRole, getAllByRole } = await render(<Test />);
 
       const trigger = getByRole('button', { name: 'Toggle' });
-      await act(() => {
+      await act(async () => {
         trigger.focus();
       });
 
@@ -497,7 +497,7 @@ describe('<Menu.Root />', () => {
 
       const trigger = getByRole('button', { name: 'Toggle' });
 
-      await act(() => {
+      await act(async () => {
         trigger.focus();
       });
 
@@ -593,7 +593,7 @@ describe('<Menu.Root />', () => {
       );
 
       const trigger = getByRole('button', { name: 'Open' });
-      await act(() => {
+      await act(async () => {
         trigger.focus();
       });
 
@@ -640,7 +640,7 @@ describe('<Menu.Root />', () => {
       );
 
       const trigger = getByRole('button', { name: 'Open' });
-      await act(() => {
+      await act(async () => {
         trigger.focus();
       });
 
diff --git a/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx b/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx
index 91892d639..16b250010 100644
--- a/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx
+++ b/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx
@@ -118,7 +118,7 @@ describe('<Menu.Trigger />', () => {
           );
 
           const button = getByRole('button', { name: 'Open' });
-          await act(() => {
+          await act(async () => {
             button.focus();
           });
 
diff --git a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx
index 46e0efb05..b9c97f093 100644
--- a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx
+++ b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx
@@ -44,7 +44,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.change(input, { target: { value: 'abc' } });
     expect(input).to.have.value('');
   });
@@ -56,7 +56,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.keyDown(input, { key: 'a' });
     expect(input).to.have.value('');
   });
@@ -68,7 +68,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.change(input, { target: { value: '123' } });
     expect(input).to.have.value('123');
   });
@@ -80,7 +80,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.keyDown(input, { key: 'ArrowUp' });
     expect(input).to.have.value('1');
   });
@@ -92,7 +92,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.keyDown(input, { key: 'ArrowDown' });
     expect(input).to.have.value('-1');
   });
@@ -104,7 +104,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.keyDown(input, { key: 'Home' });
     expect(input).to.have.value('-10');
   });
@@ -116,7 +116,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.keyDown(input, { key: 'End' });
     expect(input).to.have.value('10');
   });
@@ -128,7 +128,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.change(input, { target: { value: '1234' } });
     expect(input).to.have.value('1234');
     fireEvent.blur(input);
@@ -142,7 +142,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.change(input, { target: { value: '-1' } });
     expect(input).to.have.value('-1');
     fireEvent.blur(input);
@@ -156,7 +156,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.change(input, { target: { value: '1' } });
     expect(input).to.have.value('1');
     fireEvent.blur(input);
@@ -170,7 +170,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.change(input, { target: { value: '1.1' } });
     expect(input).to.have.value('1.1');
     fireEvent.blur(input);
@@ -184,7 +184,7 @@ describe('<NumberField.Input />', () => {
       </NumberField.Root>,
     );
     const input = screen.getByRole('textbox');
-    await act(() => input.focus());
+    await act(async () => input.focus());
     fireEvent.change(input, { target: { value: '3' } });
     expect(input).to.have.value('3');
     fireEvent.blur(input);
diff --git a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx
index 5f7724307..24b9547e1 100644
--- a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx
+++ b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx
@@ -422,7 +422,7 @@ describe('<NumberField />', () => {
     it('should allow the user to scrub the input value with the mouse wheel', async () => {
       await render(<NumberField defaultValue={5} allowWheelScrub />);
       const input = screen.getByRole('textbox');
-      await act(() => input.focus());
+      await act(async () => input.focus());
       fireEvent.wheel(input, { deltaY: 1 });
       expect(input).to.have.value('4');
       fireEvent.wheel(input, { deltaY: -1 });
@@ -432,7 +432,7 @@ describe('<NumberField />', () => {
     it('should not allow the user to scrub the input value with the mouse wheel if `allowWheelScrub` is `false`', async () => {
       await render(<NumberField defaultValue={5} allowWheelScrub={false} />);
       const input = screen.getByRole('textbox');
-      await act(() => input.focus());
+      await act(async () => input.focus());
       fireEvent.wheel(input, { deltaY: 1 });
       expect(input).to.have.value('5');
       fireEvent.wheel(input, { deltaY: -5 });
@@ -467,13 +467,13 @@ describe('<NumberField />', () => {
       const numberField = screen.getByRole('textbox');
       const submitButton = screen.getByTestId('submit');
 
-      await act(() => submitButton.click());
+      await act(async () => submitButton.click());
 
       expect(stringifiedFormData).to.equal('test-number-field=');
 
       fireEvent.change(numberField, { target: { value: '5' } });
 
-      await act(() => submitButton.click());
+      await act(async () => submitButton.click());
 
       expect(stringifiedFormData).to.equal('test-number-field=5');
     });
diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx
index 657e47d73..1beb90695 100644
--- a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx
+++ b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx
@@ -352,8 +352,11 @@ describe('<Popover.Root />', () => {
 
     await user.click(close);
 
-    await waitFor(() => {
-      expect(toggle).toHaveFocus();
-    });
+    await waitFor(
+      () => {
+        expect(toggle).toHaveFocus();
+      },
+      { timeout: 1500 },
+    );
   });
 });
diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx
index ed4bbe324..14d80b1e6 100644
--- a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx
@@ -91,7 +91,7 @@ describe('<PreviewCard.Root />', () => {
 
       const trigger = screen.getByRole('link');
 
-      await act(() => trigger.focus());
+      await act(async () => trigger.focus());
 
       clock.tick(OPEN_DELAY);
 
diff --git a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx
index a1cafaf64..ff9cc5b44 100644
--- a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx
+++ b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx
@@ -186,7 +186,7 @@ describe('<RadioGroup.Root />', () => {
 
     expect(stringifiedFormData).to.equal('group=');
 
-    await act(() => {
+    await act(async () => {
       radioA.click();
     });
 
diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx
index d106d49fe..6a1741c2b 100644
--- a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx
+++ b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx
@@ -145,7 +145,7 @@ describe('<Slider.Root />', () => {
     it('should update aria-valuenow', async () => {
       const { getByRole } = await render(<TestSlider defaultValue={50} />);
       const slider = getByRole('slider');
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -206,7 +206,7 @@ describe('<Slider.Root />', () => {
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
 
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -229,7 +229,7 @@ describe('<Slider.Root />', () => {
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
 
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -252,7 +252,7 @@ describe('<Slider.Root />', () => {
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
 
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -275,7 +275,7 @@ describe('<Slider.Root />', () => {
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
 
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -464,7 +464,7 @@ describe('<Slider.Root />', () => {
       );
       const slider = getByRole('slider');
 
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -484,7 +484,7 @@ describe('<Slider.Root />', () => {
       );
       const slider = getByRole('slider');
 
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -493,7 +493,7 @@ describe('<Slider.Root />', () => {
         () => GETBOUNDINGCLIENTRECT_HORIZONTAL_SLIDER_RETURN_VAL,
       );
 
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -523,7 +523,7 @@ describe('<Slider.Root />', () => {
       );
       const slider = getByRole('slider');
 
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -532,7 +532,7 @@ describe('<Slider.Root />', () => {
         () => GETBOUNDINGCLIENTRECT_HORIZONTAL_SLIDER_RETURN_VAL,
       );
 
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -556,7 +556,7 @@ describe('<Slider.Root />', () => {
       );
       const slider = getByRole('slider');
 
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -565,7 +565,7 @@ describe('<Slider.Root />', () => {
         () => GETBOUNDINGCLIENTRECT_HORIZONTAL_SLIDER_RETURN_VAL,
       );
 
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -603,7 +603,7 @@ describe('<Slider.Root />', () => {
       );
 
       const slider = getByRole('slider');
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -623,7 +623,7 @@ describe('<Slider.Root />', () => {
       );
 
       const slider = getByRole('slider');
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -678,7 +678,7 @@ describe('<Slider.Root />', () => {
         <TestSlider defaultValue={150} step={100} max={750} min={MIN} />,
       );
       const slider = getByRole('slider');
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -690,7 +690,7 @@ describe('<Slider.Root />', () => {
         <TestSlider defaultValue={150} step={100} max={750} min={MIN} />,
       );
       const slider = getByRole('slider');
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -715,7 +715,7 @@ describe('<Slider.Root />', () => {
       const thumbOne = getByTestId('thumb-0');
       const thumbTwo = getByTestId('thumb-1');
 
-      await act(() => {
+      await act(async () => {
         thumbOne.focus();
       });
 
@@ -725,7 +725,7 @@ describe('<Slider.Root />', () => {
       fireEvent.keyDown(thumbOne, { key: 'ArrowUp' });
       expect(handleValueChange.callCount).to.equal(1);
 
-      await act(() => {
+      await act(async () => {
         thumbTwo.focus();
       });
 
@@ -774,7 +774,7 @@ describe('<Slider.Root />', () => {
       expect(handleValueCommitted.callCount).to.equal(1);
       expect(handleValueCommitted.args[0][0]).to.equal(10);
 
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
 
@@ -1120,7 +1120,7 @@ describe('<Slider.Root />', () => {
       );
 
       const button = getByText('Submit');
-      await act(() => {
+      await act(async () => {
         button.click();
       });
     });
@@ -1257,7 +1257,7 @@ describe('<Slider.Root />', () => {
       );
       const slider = getByRole('slider');
 
-      await act(() => {
+      await act(async () => {
         slider.focus();
       });
       fireEvent.change(slider, {
@@ -1286,7 +1286,7 @@ describe('<Slider.Root />', () => {
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
 
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -1309,7 +1309,7 @@ describe('<Slider.Root />', () => {
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
 
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -1332,7 +1332,7 @@ describe('<Slider.Root />', () => {
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
 
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -1355,7 +1355,7 @@ describe('<Slider.Root />', () => {
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
 
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -1379,7 +1379,7 @@ describe('<Slider.Root />', () => {
 
         fireEvent.keyDown(document.body, { key: 'TAB' });
 
-        await act(() => {
+        await act(async () => {
           (input as HTMLInputElement).focus();
         });
 
@@ -1397,7 +1397,7 @@ describe('<Slider.Root />', () => {
         const thumbOne = getByTestId('thumb-0');
         const thumbTwo = getByTestId('thumb-1');
 
-        await act(() => {
+        await act(async () => {
           thumbOne.focus();
         });
 
@@ -1407,7 +1407,7 @@ describe('<Slider.Root />', () => {
         fireEvent.keyDown(thumbOne, { key: 'End' });
         expect(handleValueChange.callCount).to.equal(1);
 
-        await act(() => {
+        await act(async () => {
           thumbTwo.focus();
         });
 
@@ -1428,7 +1428,7 @@ describe('<Slider.Root />', () => {
 
         fireEvent.keyDown(document.body, { key: 'TAB' });
 
-        await act(() => {
+        await act(async () => {
           (input as HTMLInputElement).focus();
         });
 
@@ -1446,7 +1446,7 @@ describe('<Slider.Root />', () => {
         const thumbOne = getByTestId('thumb-0');
         const thumbTwo = getByTestId('thumb-1');
 
-        await act(() => {
+        await act(async () => {
           thumbTwo.focus();
         });
 
@@ -1456,7 +1456,7 @@ describe('<Slider.Root />', () => {
         fireEvent.keyDown(thumbTwo, { key: 'Home' });
         expect(handleValueChange.callCount).to.equal(1);
 
-        await act(() => {
+        await act(async () => {
           thumbOne.focus();
         });
 
@@ -1476,7 +1476,7 @@ describe('<Slider.Root />', () => {
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
 
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -1498,7 +1498,7 @@ describe('<Slider.Root />', () => {
       const input = container.querySelector('input');
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -1520,7 +1520,7 @@ describe('<Slider.Root />', () => {
       const input = container.querySelector('input');
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -1550,7 +1550,7 @@ describe('<Slider.Root />', () => {
       const input = container.querySelector('input');
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
@@ -1574,7 +1574,7 @@ describe('<Slider.Root />', () => {
       const input = container.querySelector('input');
 
       fireEvent.keyDown(document.body, { key: 'TAB' });
-      await act(() => {
+      await act(async () => {
         (input as HTMLInputElement).focus();
       });
 
diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
index 844bff0e1..ecfc91645 100644
--- a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
+++ b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
@@ -21,7 +21,7 @@ describe('<Switch.Root />', () => {
 
       expect(switchElement).to.have.attribute('aria-checked', 'false');
 
-      await act(() => {
+      await act(async () => {
         switchElement.click();
       });
 
@@ -44,13 +44,13 @@ describe('<Switch.Root />', () => {
       const button = getByText('Toggle');
 
       expect(switchElement).to.have.attribute('aria-checked', 'false');
-      await act(() => {
+      await act(async () => {
         button.click();
       });
 
       expect(switchElement).to.have.attribute('aria-checked', 'true');
 
-      await act(() => {
+      await act(async () => {
         button.click();
       });
 
@@ -62,7 +62,7 @@ describe('<Switch.Root />', () => {
       const switchElement = screen.getByRole('switch');
       const internalInput = screen.getByRole('checkbox', { hidden: true });
 
-      await act(() => {
+      await act(async () => {
         internalInput.click();
       });
 
@@ -84,7 +84,7 @@ describe('<Switch.Root />', () => {
       const { getByRole } = await render(<Switch.Root onCheckedChange={handleChange} />);
       const switchElement = getByRole('switch');
 
-      await act(() => {
+      await act(async () => {
         switchElement.click();
       });
 
@@ -99,7 +99,7 @@ describe('<Switch.Root />', () => {
       const { getByRole } = await render(<Switch.Root onClick={handleClick} />);
       const switchElement = getByRole('switch');
 
-      await act(() => {
+      await act(async () => {
         switchElement.click();
       });
 
@@ -124,7 +124,7 @@ describe('<Switch.Root />', () => {
 
       expect(switchElement).to.have.attribute('aria-checked', 'false');
 
-      await act(() => {
+      await act(async () => {
         switchElement.click();
       });
 
@@ -149,7 +149,7 @@ describe('<Switch.Root />', () => {
 
       expect(switchElement).to.have.attribute('aria-checked', 'false');
 
-      await act(() => {
+      await act(async () => {
         switchElement.click();
       });
 
@@ -236,7 +236,7 @@ describe('<Switch.Root />', () => {
 
       expect(stringifiedFormData).to.equal('test-switch=off');
 
-      await act(() => {
+      await act(async () => {
         switchElement.click();
       });
 
diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
index 00e145932..24900b5a2 100644
--- a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
+++ b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
@@ -207,7 +207,7 @@ describe('<Tabs.Root />', () => {
       );
       const [firstTab] = getAllByRole('tab');
 
-      await act(() => {
+      await act(async () => {
         firstTab.focus();
       });
 
@@ -230,7 +230,7 @@ describe('<Tabs.Root />', () => {
 
       const [firstTab] = getAllByRole('tab');
 
-      await act(() => {
+      await act(async () => {
         firstTab.focus();
       });
 
@@ -294,7 +294,7 @@ describe('<Tabs.Root />', () => {
                 </Tabs.Root>,
               );
               const [firstTab, , lastTab] = getAllByRole('tab');
-              await act(() => {
+              await act(async () => {
                 firstTab.focus();
               });
 
@@ -325,7 +325,7 @@ describe('<Tabs.Root />', () => {
                 </Tabs.Root>,
               );
               const [firstTab, secondTab] = getAllByRole('tab');
-              await act(() => {
+              await act(async () => {
                 secondTab.focus();
               });
 
@@ -358,7 +358,7 @@ describe('<Tabs.Root />', () => {
                 </Tabs.Root>,
               );
               const [firstTab, , lastTab] = getAllByRole('tab');
-              await act(() => {
+              await act(async () => {
                 firstTab.focus();
               });
 
@@ -390,7 +390,7 @@ describe('<Tabs.Root />', () => {
                 </Tabs.Root>,
               );
               const [firstTab, secondTab] = getAllByRole('tab');
-              await act(() => {
+              await act(async () => {
                 secondTab.focus();
               });
 
@@ -421,7 +421,7 @@ describe('<Tabs.Root />', () => {
               </Tabs.Root>,
             );
             const [firstTab, , lastTab] = getAllByRole('tab');
-            await act(() => {
+            await act(async () => {
               lastTab.focus();
             });
 
@@ -454,7 +454,7 @@ describe('<Tabs.Root />', () => {
                 </Tabs.Root>,
               );
               const [firstTab, , lastTab] = getAllByRole('tab');
-              await act(() => {
+              await act(async () => {
                 lastTab.focus();
               });
 
@@ -485,7 +485,7 @@ describe('<Tabs.Root />', () => {
                 </Tabs.Root>,
               );
               const [, secondTab, lastTab] = getAllByRole('tab');
-              await act(() => {
+              await act(async () => {
                 secondTab.focus();
               });
 
@@ -518,7 +518,7 @@ describe('<Tabs.Root />', () => {
                 </Tabs.Root>,
               );
               const [firstTab, , lastTab] = getAllByRole('tab');
-              await act(() => {
+              await act(async () => {
                 lastTab.focus();
               });
 
@@ -550,7 +550,7 @@ describe('<Tabs.Root />', () => {
                 </Tabs.Root>,
               );
               const [, secondTab, lastTab] = getAllByRole('tab');
-              await act(() => {
+              await act(async () => {
                 secondTab.focus();
               });
 
@@ -581,7 +581,7 @@ describe('<Tabs.Root />', () => {
               </Tabs.Root>,
             );
             const [firstTab, , lastTab] = getAllByRole('tab');
-            await act(() => {
+            await act(async () => {
               firstTab.focus();
             });
 
@@ -610,7 +610,7 @@ describe('<Tabs.Root />', () => {
             </Tabs.Root>,
           );
           const [firstTab, , lastTab] = getAllByRole('tab');
-          await act(() => {
+          await act(async () => {
             lastTab.focus();
           });
 
@@ -635,7 +635,7 @@ describe('<Tabs.Root />', () => {
             </Tabs.Root>,
           );
           const [firstTab, , lastTab] = getAllByRole('tab');
-          await act(() => {
+          await act(async () => {
             lastTab.focus();
           });
 
@@ -660,7 +660,7 @@ describe('<Tabs.Root />', () => {
             </Tabs.Root>,
           );
           const [, secondTab, lastTab] = getAllByRole('tab');
-          await act(() => {
+          await act(async () => {
             lastTab.focus();
           });
 
@@ -686,7 +686,7 @@ describe('<Tabs.Root />', () => {
             </Tabs.Root>,
           );
           const [firstTab, , lastTab] = getAllByRole('tab');
-          await act(() => {
+          await act(async () => {
             firstTab.focus();
           });
 
@@ -711,7 +711,7 @@ describe('<Tabs.Root />', () => {
             </Tabs.Root>,
           );
           const [firstTab, , lastTab] = getAllByRole('tab');
-          await act(() => {
+          await act(async () => {
             firstTab.focus();
           });
 
@@ -736,7 +736,7 @@ describe('<Tabs.Root />', () => {
             </Tabs.Root>,
           );
           const [firstTab, secondTab] = getAllByRole('tab');
-          await act(() => {
+          await act(async () => {
             firstTab.focus();
           });
 
@@ -787,13 +787,13 @@ describe('<Tabs.Root />', () => {
       const tabs = getAllByRole('tab');
 
       expect(root).to.have.attribute('data-activation-direction', 'none');
-      await act(() => {
+      await act(async () => {
         tabs[1].click();
       });
 
       expect(root).to.have.attribute('data-activation-direction', 'right');
 
-      await act(() => {
+      await act(async () => {
         tabs[0].click();
       });
 
@@ -814,13 +814,13 @@ describe('<Tabs.Root />', () => {
       const tabs = getAllByRole('tab');
 
       expect(root).to.have.attribute('data-activation-direction', 'none');
-      await act(() => {
+      await act(async () => {
         tabs[1].click();
       });
 
       expect(root).to.have.attribute('data-activation-direction', 'down');
 
-      await act(() => {
+      await act(async () => {
         tabs[0].click();
       });
 
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
index 3c38e7ff3..959a65bca 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
@@ -50,7 +50,7 @@ describe('<Tabs.List />', () => {
       expect(tab2).to.have.attribute('aria-selected', 'false');
       expect(tab3).to.have.attribute('aria-selected', 'false');
 
-      await act(() => {
+      await act(async () => {
         tab2.click();
       });
 
@@ -58,7 +58,7 @@ describe('<Tabs.List />', () => {
       expect(tab2).to.have.attribute('aria-selected', 'true');
       expect(tab3).to.have.attribute('aria-selected', 'false');
 
-      await act(() => {
+      await act(async () => {
         tab3.click();
       });
 
@@ -66,7 +66,7 @@ describe('<Tabs.List />', () => {
       expect(tab2).to.have.attribute('aria-selected', 'false');
       expect(tab3).to.have.attribute('aria-selected', 'true');
 
-      await act(() => {
+      await act(async () => {
         tab1.click();
       });
 
diff --git a/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx b/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx
index 5f03c1aa4..a73c74901 100644
--- a/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx
+++ b/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx
@@ -81,7 +81,7 @@ describe('<Tooltip.Root />', () => {
 
       const trigger = screen.getByRole('button');
 
-      await act(() => trigger.focus());
+      await act(async () => trigger.focus());
 
       await flushMicrotasks();
 

From 3e8d121487be1a5d7a0ecb8e9473c7ca38efb8f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Tue, 8 Oct 2024 11:59:43 +0200
Subject: [PATCH 11/22] [infra] Update renovate config (#722)

---
 renovate.json | 51 ++++++++++++++-------------------------------------
 1 file changed, 14 insertions(+), 37 deletions(-)

diff --git a/renovate.json b/renovate.json
index 7450ccfd9..5dbdb963f 100644
--- a/renovate.json
+++ b/renovate.json
@@ -31,39 +31,29 @@
       "allowedVersions": "< 2.0.0"
     },
     {
-      "groupName": "JSS",
-      "matchPackageNames": [
-        "css-jss",
-        "jss-plugin-cache",
-        "jss-plugin-camel-case",
-        "jss-plugin-compose",
-        "jss-plugin-default-unit",
-        "jss-plugin-expand",
-        "jss-plugin-extend",
-        "jss-plugin-global",
-        "jss-plugin-isolate",
-        "jss-plugin-nested",
-        "jss-plugin-props-sort",
-        "jss-plugin-rule-value-function",
-        "jss-plugin-rule-value-observable",
-        "jss-plugin-template",
-        "jss-plugin-vendor-prefixer",
-        "jss-preset-default",
-        "jss-starter-kit",
-        "jss",
-        "react-jss"
-      ]
+      "groupName": "eslint",
+      "matchPackagePatterns": ["eslint", "eslint-*", "@typescript-eslint/*"],
+      "automerge": true
+    },
+    {
+      "automerge": true,
+      "matchPackageNames": ["@types/**"]
     },
     {
       "groupName": "MUI",
-      "matchPackagePatterns": ["@mui/*"],
+      "matchPackagePatterns": [
+        "@mui/*",
+        "playwright",
+        "@playwright/test",
+        "mcr.microsoft.com/playwright"
+      ],
       "allowedVersions": "!/-dev/",
       "schedule": "before 6:00am on Wednesday"
     },
     {
       "groupName": "Public packages' dependencies",
       "matchFileNames": ["packages/*/package.json"],
-      "matchDepTypes": ["dependencies"],
+      "matchDepTypes": ["dependencies", "devDependencies"],
       "schedule": "before 6:00am on Wednesday"
     },
     {
@@ -77,10 +67,6 @@
         "@types/react-is"
       ]
     },
-    {
-      "groupName": "typescript-eslint",
-      "matchPackagePatterns": "@typescript-eslint/*"
-    },
     {
       "groupName": "Node.js",
       "matchPackageNames": ["node", "@types/node", "cimg/node"],
@@ -91,20 +77,11 @@
       "matchFileNames": ["packages/*/package.json"],
       "enabled": false
     },
-    {
-      "groupName": "bundling fixtures",
-      "matchPaths": ["test/bundling/fixtures/**/package.json"],
-      "schedule": "every 6 months on the first day of the month"
-    },
     {
       "groupName": "examples",
       "matchPaths": ["examples/**/package.json"],
       "enabled": false
     },
-    {
-      "groupName": "Playwright",
-      "matchPackageNames": ["playwright", "@playwright/test", "mcr.microsoft.com/playwright"]
-    },
     {
       "matchDepTypes": ["action"],
       "pinDigests": true

From 1b40ac9ddd86db0122be4b8c77dae7364c90ef4e Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Wed, 9 Oct 2024 13:55:54 +1100
Subject: [PATCH 12/22] [Field] Update APIs (#720)

---
 docs/data/api/field-error.json                |  6 ++--
 docs/data/api/field-root.json                 |  7 ++--
 .../components/field/UnstyledFieldAsync.js    |  6 ++--
 .../components/field/UnstyledFieldAsync.tsx   |  6 ++--
 .../UnstyledFieldIntroduction/system/index.js |  6 ++--
 .../system/index.tsx                          |  6 ++--
 docs/data/components/field/field.mdx          | 20 +++++------
 .../api-docs/field-error/field-error.json     |  6 ++--
 .../api-docs/field-root/field-root.json       |  8 ++---
 .../Control/useFieldControlValidation.ts      | 12 +++----
 .../src/Field/Error/FieldError.test.tsx       |  4 +--
 .../mui-base/src/Field/Error/FieldError.tsx   | 18 +++++-----
 .../src/Field/Root/FieldRoot.test.tsx         |  8 ++---
 .../mui-base/src/Field/Root/FieldRoot.tsx     | 34 +++++++++----------
 .../src/Field/Root/FieldRootContext.ts        |  8 ++---
 .../NumberField/Root/useNumberFieldRoot.ts    |  4 +--
 16 files changed, 79 insertions(+), 80 deletions(-)

diff --git a/docs/data/api/field-error.json b/docs/data/api/field-error.json
index 970c3f775..b52587e68 100644
--- a/docs/data/api/field-error.json
+++ b/docs/data/api/field-error.json
@@ -2,13 +2,13 @@
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "forceShow": { "type": { "name": "bool" } },
-    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
-    "show": {
+    "match": {
       "type": {
         "name": "enum",
         "description": "'badInput'<br>&#124;&nbsp;'customError'<br>&#124;&nbsp;'patternMismatch'<br>&#124;&nbsp;'rangeOverflow'<br>&#124;&nbsp;'rangeUnderflow'<br>&#124;&nbsp;'stepMismatch'<br>&#124;&nbsp;'tooLong'<br>&#124;&nbsp;'tooShort'<br>&#124;&nbsp;'typeMismatch'<br>&#124;&nbsp;'valid'<br>&#124;&nbsp;'valueMissing'"
       }
-    }
+    },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldError",
   "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldError = Field.Error;"],
diff --git a/docs/data/api/field-root.json b/docs/data/api/field-root.json
index 1f35160eb..946b4cc5b 100644
--- a/docs/data/api/field-root.json
+++ b/docs/data/api/field-root.json
@@ -6,8 +6,11 @@
     "name": { "type": { "name": "string" } },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
     "validate": { "type": { "name": "func" } },
-    "validateDebounceTime": { "type": { "name": "number" }, "default": "0" },
-    "validateOnChange": { "type": { "name": "bool" }, "default": "false" }
+    "validationDebounceTime": { "type": { "name": "number" }, "default": "0" },
+    "validationMode": {
+      "type": { "name": "enum", "description": "'onBlur'<br>&#124;&nbsp;'onChange'" },
+      "default": "'onBlur'"
+    }
   },
   "name": "FieldRoot",
   "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldRoot = Field.Root;"],
diff --git a/docs/data/components/field/UnstyledFieldAsync.js b/docs/data/components/field/UnstyledFieldAsync.js
index 619f47b1a..92d0baa38 100644
--- a/docs/data/components/field/UnstyledFieldAsync.js
+++ b/docs/data/components/field/UnstyledFieldAsync.js
@@ -48,8 +48,8 @@ export default function UnstyledFieldAsync() {
       <h3>Handle availability checker</h3>
       <FieldRoot
         validate={handleValidate}
-        validateOnChange
-        validateDebounceTime={300}
+        validationMode="onChange"
+        validationDebounceTime={300}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <Field.Label>@</Field.Label>
@@ -83,7 +83,7 @@ export default function UnstyledFieldAsync() {
               );
             }
 
-            return <FieldError show="customError" />;
+            return <FieldError match="customError" />;
           }}
         </Field.Validity>
       </FieldRoot>
diff --git a/docs/data/components/field/UnstyledFieldAsync.tsx b/docs/data/components/field/UnstyledFieldAsync.tsx
index 6fc2437cc..d560b2107 100644
--- a/docs/data/components/field/UnstyledFieldAsync.tsx
+++ b/docs/data/components/field/UnstyledFieldAsync.tsx
@@ -48,8 +48,8 @@ export default function UnstyledFieldAsync() {
       <h3>Handle availability checker</h3>
       <FieldRoot
         validate={handleValidate}
-        validateOnChange
-        validateDebounceTime={300}
+        validationMode="onChange"
+        validationDebounceTime={300}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <Field.Label>@</Field.Label>
@@ -83,7 +83,7 @@ export default function UnstyledFieldAsync() {
               );
             }
 
-            return <FieldError show="customError" />;
+            return <FieldError match="customError" />;
           }}
         </Field.Validity>
       </FieldRoot>
diff --git a/docs/data/components/field/UnstyledFieldIntroduction/system/index.js b/docs/data/components/field/UnstyledFieldIntroduction/system/index.js
index 75e149284..e0f42d8ce 100644
--- a/docs/data/components/field/UnstyledFieldIntroduction/system/index.js
+++ b/docs/data/components/field/UnstyledFieldIntroduction/system/index.js
@@ -27,9 +27,9 @@ export default function UnstyledFieldIntroduction() {
           );
         }}
       </Field.Validity>
-      <FieldError show="customError" />
-      <FieldError show="valueMissing" />
-      <FieldError show="patternMismatch">
+      <FieldError match="customError" />
+      <FieldError match="valueMissing" />
+      <FieldError match="patternMismatch">
         Only alphanumeric characters are allowed (a-z, A-Z, 0-9).
       </FieldError>
     </FieldRoot>
diff --git a/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx b/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx
index 75e149284..e0f42d8ce 100644
--- a/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx
+++ b/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx
@@ -27,9 +27,9 @@ export default function UnstyledFieldIntroduction() {
           );
         }}
       </Field.Validity>
-      <FieldError show="customError" />
-      <FieldError show="valueMissing" />
-      <FieldError show="patternMismatch">
+      <FieldError match="customError" />
+      <FieldError match="valueMissing" />
+      <FieldError match="patternMismatch">
         Only alphanumeric characters are allowed (a-z, A-Z, 0-9).
       </FieldError>
     </FieldRoot>
diff --git a/docs/data/components/field/field.mdx b/docs/data/components/field/field.mdx
index 7fe5a46d3..6b0097a31 100644
--- a/docs/data/components/field/field.mdx
+++ b/docs/data/components/field/field.mdx
@@ -93,17 +93,17 @@ The `children` by default is the browser's native message, which is automaticall
 
 ### Individual constraint validation failures
 
-When there are multiple HTML validation props, you can target individual validity state failures using the `show` prop to render custom messages:
+When there are multiple HTML validation props, you can target individual validity state failures using the `match` prop to render custom messages:
 
 ```jsx
 <Field.Root>
   <Field.Control required pattern="[a-zA-Z0-9]+" />
-  <Field.Error show="valueMissing">Field is required</Field.Error>
-  <Field.Error show="patternMismatch">Only alphanumeric characters allowed</Field.Error>
+  <Field.Error match="valueMissing">Field is required</Field.Error>
+  <Field.Error match="patternMismatch">Only alphanumeric characters allowed</Field.Error>
 </Field.Root>
 ```
 
-For the list of supported `show` strings, visit [`ValidityState` on MDN](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#instance_properties).
+For the list of supported `match` strings, visit [`ValidityState` on MDN](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#instance_properties).
 
 ### Custom validation
 
@@ -179,8 +179,8 @@ const [serverErrors, setServerErrors] = React.useState({
 return (
   <Field.Root invalid={serverErrors.email}>
     <Field.Control type="email" required />
-    <Field.Error show="valueMissing">Client-side only error message</Field.Error>
-    <Field.Error show="typeMismatch" forceShow={serverErrors.email}>
+    <Field.Error match="valueMissing">Client-side only error message</Field.Error>
+    <Field.Error match="typeMismatch" forceShow={serverErrors.email}>
       Client + server-side error message
     </Field.Error>
     <Field.Error forceShow={serverErrors.email}>Server-side only message</Field.Error>
@@ -200,10 +200,10 @@ Errors shown initially for password validation:
 
 ### Realtime and async validation
 
-`validateOnChange` reports the validity of the control on every `change` event, such as a keypress:
+`validationMode="onChange"` reports the validity of the control on every `change` event instead of `blur`:
 
 ```jsx
-<Field.Root validateOnChange>
+<Field.Root validationMode="onChange">
 ```
 
 The `validate` function can also be async by returning a promise, enabling inline server-side validation through network requests.
@@ -212,10 +212,10 @@ In the demo below, the taken names are `admin`, `root`, and `superuser` — ever
 
 <Demo demo="UnstyledFieldAsync" defaultCodeOpen="false" />
 
-The `change` validation is debounced by 500ms to avoid firing a network request on every keystroke by specifying the `validateDebounceTime` prop:
+The `onChange` validation is debounced by 500ms to avoid firing a network request on every keystroke by specifying the `validationDebounceTime` prop:
 
 ```jsx
-<Field.Root validateOnChange validateDebounceTime={500}>
+<Field.Root validationMode="onChange" validationDebounceTime={500}>
 ```
 
 ## Styling
diff --git a/docs/data/translations/api-docs/field-error/field-error.json b/docs/data/translations/api-docs/field-error/field-error.json
index 45b6b8feb..6b95495f8 100644
--- a/docs/data/translations/api-docs/field-error/field-error.json
+++ b/docs/data/translations/api-docs/field-error/field-error.json
@@ -7,10 +7,10 @@
     "forceShow": {
       "description": "Determines whether the error message should be shown regardless of the field&#39;s client validity."
     },
-    "render": { "description": "A function to customize rendering of the component." },
-    "show": {
+    "match": {
       "description": "Determines whether the error message should be shown when it matches a given property of the field&#39;s <code>ValidityState</code>."
-    }
+    },
+    "render": { "description": "A function to customize rendering of the component." }
   },
   "classDescriptions": {}
 }
diff --git a/docs/data/translations/api-docs/field-root/field-root.json b/docs/data/translations/api-docs/field-root/field-root.json
index e7bd1d48f..d77f96e16 100644
--- a/docs/data/translations/api-docs/field-root/field-root.json
+++ b/docs/data/translations/api-docs/field-root/field-root.json
@@ -15,12 +15,10 @@
     "validate": {
       "description": "Function to custom-validate the field&#39;s value. Return a string or array of strings with error messages if the value is invalid, or <code>null</code> if the value is valid. The function can also return a promise that resolves to a string, array of strings, or <code>null</code>."
     },
-    "validateDebounceTime": {
-      "description": "The debounce time in milliseconds for the <code>validate</code> function in the <code>change</code> phase."
+    "validationDebounceTime": {
+      "description": "The debounce time in milliseconds for the <code>validate</code> function in <code>onChange</code> phase."
     },
-    "validateOnChange": {
-      "description": "Determines if validation should be triggered on the <code>change</code> event, rather than only on commit (blur)."
-    }
+    "validationMode": { "description": "Determines when validation should be triggered." }
   },
   "classDescriptions": {}
 }
diff --git a/packages/mui-base/src/Field/Control/useFieldControlValidation.ts b/packages/mui-base/src/Field/Control/useFieldControlValidation.ts
index a4c616f6a..477c6cb05 100644
--- a/packages/mui-base/src/Field/Control/useFieldControlValidation.ts
+++ b/packages/mui-base/src/Field/Control/useFieldControlValidation.ts
@@ -15,8 +15,8 @@ export function useFieldControlValidation() {
     validate,
     messageIds,
     validityData,
-    validateOnChange,
-    validateDebounceTime,
+    validationMode,
+    validationDebounceTime,
     invalid,
     markedDirtyRef,
     controlId,
@@ -125,7 +125,7 @@ export function useFieldControlValidation() {
             return;
           }
 
-          if (invalid || !validateOnChange) {
+          if (invalid || validationMode !== 'onChange') {
             return;
           }
 
@@ -139,16 +139,16 @@ export function useFieldControlValidation() {
 
           window.clearTimeout(timeoutRef.current);
 
-          if (validateDebounceTime) {
+          if (validationDebounceTime) {
             timeoutRef.current = window.setTimeout(() => {
               commitValidation(element.value);
-            }, validateDebounceTime);
+            }, validationDebounceTime);
           } else {
             commitValidation(element.value);
           }
         },
       }),
-    [getValidationProps, invalid, validateOnChange, validateDebounceTime, commitValidation],
+    [getValidationProps, invalid, validationMode, validationDebounceTime, commitValidation],
   );
 
   return React.useMemo(
diff --git a/packages/mui-base/src/Field/Error/FieldError.test.tsx b/packages/mui-base/src/Field/Error/FieldError.test.tsx
index f4f43e59a..0fb6ea967 100644
--- a/packages/mui-base/src/Field/Error/FieldError.test.tsx
+++ b/packages/mui-base/src/Field/Error/FieldError.test.tsx
@@ -53,7 +53,7 @@ describe('<Field.Error />', () => {
       render(
         <Field.Root>
           <Field.Control required />
-          <Field.Error show="valueMissing">Message</Field.Error>
+          <Field.Error match="valueMissing">Message</Field.Error>
         </Field.Root>,
       );
 
@@ -73,7 +73,7 @@ describe('<Field.Error />', () => {
       render(
         <Field.Root validate={() => 'error'}>
           <Field.Control />
-          <Field.Error show="customError">Message</Field.Error>
+          <Field.Error match="customError">Message</Field.Error>
         </Field.Root>,
       );
 
diff --git a/packages/mui-base/src/Field/Error/FieldError.tsx b/packages/mui-base/src/Field/Error/FieldError.tsx
index cd4362a8d..6d8b6e90d 100644
--- a/packages/mui-base/src/Field/Error/FieldError.tsx
+++ b/packages/mui-base/src/Field/Error/FieldError.tsx
@@ -24,7 +24,7 @@ const FieldError = React.forwardRef(function FieldError(
   props: FieldError.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { render, id, className, show, forceShow, ...otherProps } = props;
+  const { render, id, className, match, forceShow, ...otherProps } = props;
 
   const { validityData, ownerState, name } = useFieldRootContext(false);
 
@@ -35,8 +35,8 @@ const FieldError = React.forwardRef(function FieldError(
   let rendered = false;
   if (formError || forceShow) {
     rendered = true;
-  } else if (show) {
-    rendered = Boolean(validityData.state[show]);
+  } else if (match) {
+    rendered = Boolean(validityData.state[match]);
   } else if (forceShow == null) {
     rendered = validityData.state.valid === false;
   }
@@ -68,7 +68,7 @@ namespace FieldError {
      * Determines whether the error message should be shown when it matches a given property of the
      * field's `ValidityState`.
      */
-    show?: keyof ValidityState;
+    match?: keyof ValidityState;
     /**
      * Determines whether the error message should be shown regardless of the field's client validity.
      */
@@ -97,15 +97,11 @@ FieldError.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   id: PropTypes.string,
-  /**
-   * A function to customize rendering of the component.
-   */
-  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /**
    * Determines whether the error message should be shown when it matches a given property of the
    * field's `ValidityState`.
    */
-  show: PropTypes.oneOf([
+  match: PropTypes.oneOf([
     'badInput',
     'customError',
     'patternMismatch',
@@ -118,6 +114,10 @@ FieldError.propTypes /* remove-proptypes */ = {
     'valid',
     'valueMissing',
   ]),
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 } as any;
 
 export { FieldError };
diff --git a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
index fd8df96fa..a488d8053 100644
--- a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
+++ b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
@@ -259,11 +259,11 @@ describe('<Field.Root />', () => {
     });
   });
 
-  describe('prop: validateOnChange', () => {
+  describe('prop: validationMode', () => {
     it('should validate the field on change', async () => {
       render(
         <Field.Root
-          validateOnChange
+          validationMode="onChange"
           validate={(value) => {
             const str = value as string;
             return str.length < 3 ? 'error' : null;
@@ -294,8 +294,8 @@ describe('<Field.Root />', () => {
     it('should debounce validation', async () => {
       renderFakeTimers(
         <Field.Root
-          validateDebounceTime={100}
-          validateOnChange
+          validationDebounceTime={100}
+          validationMode="onChange"
           validate={(value) => {
             const str = value as string;
             return str.length < 3 ? 'error' : null;
diff --git a/packages/mui-base/src/Field/Root/FieldRoot.tsx b/packages/mui-base/src/Field/Root/FieldRoot.tsx
index 0a7a57643..655560356 100644
--- a/packages/mui-base/src/Field/Root/FieldRoot.tsx
+++ b/packages/mui-base/src/Field/Root/FieldRoot.tsx
@@ -28,8 +28,8 @@ const FieldRoot = React.forwardRef(function FieldRoot(
     render,
     className,
     validate: validateProp,
-    validateDebounceTime = 0,
-    validateOnChange = false,
+    validationDebounceTime = 0,
+    validationMode = 'onBlur',
     name,
     disabled: disabledProp = false,
     invalid: invalidProp,
@@ -100,8 +100,8 @@ const FieldRoot = React.forwardRef(function FieldRoot(
       dirty,
       setDirty,
       validate,
-      validateOnChange,
-      validateDebounceTime,
+      validationMode,
+      validationDebounceTime,
       ownerState,
       markedDirtyRef,
     }),
@@ -117,8 +117,8 @@ const FieldRoot = React.forwardRef(function FieldRoot(
       dirty,
       setDirty,
       validate,
-      validateOnChange,
-      validateDebounceTime,
+      validationMode,
+      validationDebounceTime,
       ownerState,
     ],
   );
@@ -183,16 +183,15 @@ namespace FieldRoot {
      */
     validate?: (value: unknown) => string | string[] | null | Promise<string | string[] | null>;
     /**
-     * Determines if validation should be triggered on the `change` event, rather than only on commit
-     * (blur).
-     * @default false
+     * Determines when validation should be triggered.
+     * @default 'onBlur'
      */
-    validateOnChange?: boolean;
+    validationMode?: 'onBlur' | 'onChange';
     /**
-     * The debounce time in milliseconds for the `validate` function in the `change` phase.
+     * The debounce time in milliseconds for the `validate` function in `onChange` phase.
      * @default 0
      */
-    validateDebounceTime?: number;
+    validationDebounceTime?: number;
     /**
      * Determines if the field is forcefully marked as invalid.
      */
@@ -238,16 +237,15 @@ FieldRoot.propTypes /* remove-proptypes */ = {
    */
   validate: PropTypes.func,
   /**
-   * The debounce time in milliseconds for the `validate` function in the `change` phase.
+   * The debounce time in milliseconds for the `validate` function in `onChange` phase.
    * @default 0
    */
-  validateDebounceTime: PropTypes.number,
+  validationDebounceTime: PropTypes.number,
   /**
-   * Determines if validation should be triggered on the `change` event, rather than only on commit
-   * (blur).
-   * @default false
+   * Determines when validation should be triggered.
+   * @default 'onBlur'
    */
-  validateOnChange: PropTypes.bool,
+  validationMode: PropTypes.oneOf(['onBlur', 'onChange']),
 } as any;
 
 export { FieldRoot };
diff --git a/packages/mui-base/src/Field/Root/FieldRootContext.ts b/packages/mui-base/src/Field/Root/FieldRootContext.ts
index 833c761be..d7966e262 100644
--- a/packages/mui-base/src/Field/Root/FieldRootContext.ts
+++ b/packages/mui-base/src/Field/Root/FieldRootContext.ts
@@ -22,8 +22,8 @@ export interface FieldRootContext {
   dirty: boolean;
   setDirty: React.Dispatch<React.SetStateAction<boolean>>;
   validate: (value: unknown) => string | string[] | null | Promise<string | string[] | null>;
-  validateOnChange: boolean;
-  validateDebounceTime: number;
+  validationMode: 'onBlur' | 'onChange';
+  validationDebounceTime: number;
   ownerState: FieldRoot.OwnerState;
   markedDirtyRef: React.MutableRefObject<boolean>;
 }
@@ -51,8 +51,8 @@ export const FieldRootContext = React.createContext<FieldRootContext>({
   dirty: false,
   setDirty: NOOP,
   validate: () => null,
-  validateOnChange: false,
-  validateDebounceTime: 0,
+  validationMode: 'onBlur',
+  validationDebounceTime: 0,
   ownerState: {
     disabled: false,
     valid: null,
diff --git a/packages/mui-base/src/NumberField/Root/useNumberFieldRoot.ts b/packages/mui-base/src/NumberField/Root/useNumberFieldRoot.ts
index 47439071b..c87b00864 100644
--- a/packages/mui-base/src/NumberField/Root/useNumberFieldRoot.ts
+++ b/packages/mui-base/src/NumberField/Root/useNumberFieldRoot.ts
@@ -59,7 +59,7 @@ export function useNumberFieldRoot(
   const {
     labelId,
     setControlId,
-    validateOnChange,
+    validationMode,
     setTouched,
     setDirty,
     validityData,
@@ -182,7 +182,7 @@ export function useNumberFieldRoot(
     setValueUnwrapped(validatedValue);
     setDirty(validatedValue !== validityData.initialValue);
 
-    if (validateOnChange) {
+    if (validationMode === 'onChange') {
       commitValidation(validatedValue);
     }
 

From cab77be3ad7e4c4f7a23b624146404b0ccb1c6a2 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Wed, 9 Oct 2024 17:56:02 +1100
Subject: [PATCH 13/22] [Popover] Fix `inert` attribute (#726)

---
 .../Positioner/PopoverPositioner.test.tsx     | 24 +++++++++++++++++++
 .../Positioner/usePopoverPositioner.tsx       |  2 +-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx
index 5fbcfcea9..826b63acb 100644
--- a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx
+++ b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as Popover from '@base_ui/react/Popover';
 import { createRenderer, describeConformance } from '#test-utils';
+import { screen } from '@mui/internal-test-utils';
+import { expect } from 'chai';
 
 describe('<Popover.Positioner />', () => {
   const { render } = createRenderer();
@@ -15,4 +17,26 @@ describe('<Popover.Positioner />', () => {
       );
     },
   }));
+
+  describe('prop: keepMounted', () => {
+    it('has inert attribute when closed', async () => {
+      await render(
+        <Popover.Root animated={false}>
+          <Popover.Positioner keepMounted data-testid="positioner" />
+        </Popover.Root>,
+      );
+
+      expect(screen.getByTestId('positioner')).to.have.attribute('inert');
+    });
+
+    it('does not have inert attribute when open', async () => {
+      await render(
+        <Popover.Root open animated={false}>
+          <Popover.Positioner keepMounted data-testid="positioner" />
+        </Popover.Root>,
+      );
+
+      expect(screen.getByTestId('positioner')).not.to.have.attribute('inert');
+    });
+  });
 });
diff --git a/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx b/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx
index dff80d7ed..717c1b1c6 100644
--- a/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx
+++ b/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx
@@ -39,7 +39,7 @@ export function usePopoverPositioner(
         return mergeReactProps<'div'>(externalProps, {
           role: 'presentation',
           // @ts-ignore
-          inert: getInertValue(open),
+          inert: getInertValue(!open),
           style: {
             ...positionerStyles,
             ...hiddenStyles,

From 0b51e913713e2e6202536708ce40cfaad77f5d59 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 9 Oct 2024 14:26:00 +0200
Subject: [PATCH 14/22] Bump MUI (#723)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .circleci/config.yml |   8 +-
 docs/package.json    |  10 +-
 package.json         |  12 +-
 pnpm-lock.yaml       | 398 ++++++++++++++++++++++++-------------------
 test/package.json    |   6 +-
 5 files changed, 237 insertions(+), 197 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 979655bff..d7d4189fe 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -288,7 +288,7 @@ jobs:
     <<: *default-job
     resource_class: 'medium+'
     docker:
-      - image: mcr.microsoft.com/playwright:v1.47.2-focal
+      - image: mcr.microsoft.com/playwright:v1.48.0-focal
     steps:
       - checkout
       - install_js:
@@ -317,7 +317,7 @@ jobs:
   test_profile:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.47.2-focal
+      - image: mcr.microsoft.com/playwright:v1.48.0-focal
     steps:
       - checkout
       - install_js:
@@ -343,7 +343,7 @@ jobs:
   test_regressions:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.47.2-focal
+      - image: mcr.microsoft.com/playwright:v1.48.0-focal
     steps:
       - checkout
       - install_js:
@@ -358,7 +358,7 @@ jobs:
   test_e2e:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.47.2-focal
+      - image: mcr.microsoft.com/playwright:v1.48.0-focal
     steps:
       - checkout
       - install_js:
diff --git a/docs/package.json b/docs/package.json
index 9c319e664..7d05b6d32 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -23,8 +23,8 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.0",
     "@mdx-js/mdx": "^3.0.1",
-    "@mui/system": "6.1.1",
-    "@mui/utils": "6.1.1",
+    "@mui/system": "6.1.3",
+    "@mui/utils": "6.1.3",
     "@react-spring/web": "^9.7.4",
     "@stefanprobst/rehype-extract-toc": "^2.2.0",
     "@types/mdx": "^2.0.13",
@@ -62,9 +62,9 @@
   "devDependencies": {
     "@babel/plugin-transform-react-constant-elements": "^7.25.1",
     "@babel/preset-typescript": "^7.24.7",
-    "@mui/internal-docs-utils": "^1.0.13",
-    "@mui/internal-scripts": "^1.0.21",
-    "@mui/internal-test-utils": "1.0.14",
+    "@mui/internal-docs-utils": "^1.0.14",
+    "@mui/internal-scripts": "^1.0.23",
+    "@mui/internal-test-utils": "1.0.16",
     "@types/chai": "^4.3.20",
     "@types/gtag.js": "^0.0.20",
     "@types/hast": "^3.0.4",
diff --git a/package.json b/package.json
index d25331dc2..cbe35634f 100644
--- a/package.json
+++ b/package.json
@@ -76,15 +76,15 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.24.6",
-    "@mui/internal-docs-utils": "^1.0.13",
-    "@mui/internal-markdown": "^1.0.14",
-    "@mui/internal-scripts": "^1.0.21",
-    "@mui/internal-test-utils": "1.0.14",
+    "@mui/internal-docs-utils": "^1.0.14",
+    "@mui/internal-markdown": "^1.0.16",
+    "@mui/internal-scripts": "^1.0.23",
+    "@mui/internal-test-utils": "1.0.16",
     "@mui/monorepo": "github:mui/material-ui#v6.1.1",
-    "@mui/utils": "6.1.1",
+    "@mui/utils": "6.1.3",
     "@next/eslint-plugin-next": "^14.2.13",
     "@octokit/rest": "^20.1.1",
-    "@playwright/test": "1.47.2",
+    "@playwright/test": "1.48.0",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.9",
     "@types/mocha": "^10.0.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 284727f70..a38792543 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,23 +56,23 @@ importers:
         specifier: ^7.24.6
         version: 7.24.6(@babel/core@7.25.2)
       '@mui/internal-docs-utils':
-        specifier: ^1.0.13
-        version: 1.0.13
-      '@mui/internal-markdown':
         specifier: ^1.0.14
         version: 1.0.14
+      '@mui/internal-markdown':
+        specifier: ^1.0.16
+        version: 1.0.16
       '@mui/internal-scripts':
-        specifier: ^1.0.21
-        version: 1.0.21
+        specifier: ^1.0.23
+        version: 1.0.23
       '@mui/internal-test-utils':
-        specifier: 1.0.14
-        version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 1.0.16
+        version: 1.0.16(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/monorepo':
         specifier: github:mui/material-ui#v6.1.1
         version: https://codeload.github.com/mui/material-ui/tar.gz/11cc37f4ef5fc8f3d40fc209684626b206e76cca(encoding@0.1.13)
       '@mui/utils':
-        specifier: 6.1.1
-        version: 6.1.1(@types/react@18.3.10)(react@18.3.1)
+        specifier: 6.1.3
+        version: 6.1.3(@types/react@18.3.10)(react@18.3.1)
       '@next/eslint-plugin-next':
         specifier: ^14.2.13
         version: 14.2.13
@@ -80,8 +80,8 @@ importers:
         specifier: ^20.1.1
         version: 20.1.1
       '@playwright/test':
-        specifier: 1.47.2
-        version: 1.47.2
+        specifier: 1.48.0
+        version: 1.48.0
       '@types/fs-extra':
         specifier: ^11.0.4
         version: 11.0.4
@@ -102,10 +102,10 @@ importers:
         version: 17.0.33
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.8.0
-        version: 7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint@8.57.1)(typescript@5.5.4)
+        version: 7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)
       '@typescript-eslint/parser':
         specifier: ^7.8.0
-        version: 7.8.0(eslint@8.57.1)(typescript@5.5.4)
+        version: 7.8.0(eslint@8.57.1)(typescript@5.6.3)
       babel-loader:
         specifier: ^9.2.1
         version: 9.2.1(@babel/core@7.25.2)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
@@ -156,13 +156,13 @@ importers:
         version: 8.57.1
       eslint-config-airbnb:
         specifier: ^19.0.4
-        version: 19.0.4(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint-plugin-jsx-a11y@6.10.0(eslint@8.57.1))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.1))(eslint-plugin-react@7.37.0(eslint@8.57.1))(eslint@8.57.1)
+        version: 19.0.4(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint-plugin-jsx-a11y@6.10.0(eslint@8.57.1))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.1))(eslint-plugin-react@7.37.0(eslint@8.57.1))(eslint@8.57.1)
       eslint-config-airbnb-base:
         specifier: ^15.0.0
-        version: 15.0.0(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1)
+        version: 15.0.0(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1)
       eslint-config-airbnb-typescript:
         specifier: ^18.0.0
-        version: 18.0.0(@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint@8.57.1)(typescript@5.5.4))(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1)
+        version: 18.0.0(@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1)
       eslint-config-prettier:
         specifier: ^9.1.0
         version: 9.1.0(eslint@8.57.1)
@@ -177,7 +177,7 @@ importers:
         version: 1.3.2(eslint@8.57.1)
       eslint-plugin-import:
         specifier: ^2.30.0
-        version: 2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1)
+        version: 2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1)
       eslint-plugin-jsx-a11y:
         specifier: ^6.10.0
         version: 6.10.0(eslint@8.57.1)
@@ -195,7 +195,7 @@ importers:
         version: 4.6.2(eslint@8.57.1)
       eslint-plugin-testing-library:
         specifier: ^6.3.0
-        version: 6.3.0(eslint@8.57.1)(typescript@5.5.4)
+        version: 6.3.0(eslint@8.57.1)(typescript@5.6.3)
       execa:
         specifier: ^8.0.1
         version: 8.0.1
@@ -258,7 +258,7 @@ importers:
         version: 8.4.47
       postcss-loader:
         specifier: ^8.1.1
-        version: 8.1.1(postcss@8.4.47)(typescript@5.5.4)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
+        version: 8.1.1(postcss@8.4.47)(typescript@5.6.3)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       postcss-styled-syntax:
         specifier: ^0.6.4
         version: 0.6.4(postcss@8.4.47)
@@ -291,10 +291,10 @@ importers:
         version: 4.0.0(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
       stylelint:
         specifier: ^16.4.0
-        version: 16.4.0(typescript@5.5.4)
+        version: 16.4.0(typescript@5.6.3)
       stylelint-config-standard:
         specifier: ^36.0.1
-        version: 36.0.1(stylelint@16.4.0(typescript@5.5.4))
+        version: 36.0.1(stylelint@16.4.0(typescript@5.6.3))
       tailwindcss:
         specifier: ^3.4.13
         version: 3.4.13
@@ -309,7 +309,7 @@ importers:
         version: 4.8.2
       typescript:
         specifier: ^5.4.5
-        version: 5.5.4
+        version: 5.6.3
       unist-util-visit:
         specifier: ^5.0.0
         version: 5.0.0
@@ -356,11 +356,11 @@ importers:
         specifier: ^3.0.1
         version: 3.0.1
       '@mui/system':
-        specifier: 6.1.1
-        version: 6.1.1(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1)
+        specifier: 6.1.3
+        version: 6.1.3(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1)
       '@mui/utils':
-        specifier: 6.1.1
-        version: 6.1.1(@types/react@18.3.10)(react@18.3.1)
+        specifier: 6.1.3
+        version: 6.1.3(@types/react@18.3.10)(react@18.3.1)
       '@react-spring/web':
         specifier: ^9.7.4
         version: 9.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -405,7 +405,7 @@ importers:
         version: 1.5.0
       next:
         specifier: ^14.2.13
-        version: 14.2.13(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 14.2.13(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       postcss:
         specifier: ^8.4.47
         version: 8.4.47
@@ -468,14 +468,14 @@ importers:
         specifier: ^7.24.7
         version: 7.24.7(@babel/core@7.25.2)
       '@mui/internal-docs-utils':
-        specifier: ^1.0.13
-        version: 1.0.13
+        specifier: ^1.0.14
+        version: 1.0.14
       '@mui/internal-scripts':
-        specifier: ^1.0.21
-        version: 1.0.21
+        specifier: ^1.0.23
+        version: 1.0.23
       '@mui/internal-test-utils':
-        specifier: 1.0.14
-        version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 1.0.16
+        version: 1.0.16(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/chai':
         specifier: ^4.3.20
         version: 4.3.20
@@ -538,10 +538,10 @@ importers:
         version: 8.56.12
       '@typescript-eslint/experimental-utils':
         specifier: ^5.62.0
-        version: 5.62.0(eslint@9.8.0)(typescript@5.5.4)
+        version: 5.62.0(eslint@9.8.0)(typescript@5.6.3)
       '@typescript-eslint/parser':
         specifier: ^7.8.0
-        version: 7.8.0(eslint@9.8.0)(typescript@5.5.4)
+        version: 7.8.0(eslint@9.8.0)(typescript@5.6.3)
 
   packages/mui-base:
     dependencies:
@@ -559,10 +559,10 @@ importers:
         version: 0.2.8
       '@mui/types':
         specifier: ^7.2.17
-        version: 7.2.17(@types/react@18.3.10)
+        version: 7.2.18(@types/react@18.3.10)
       '@mui/utils':
         specifier: ^6.1.1
-        version: 6.1.1(@types/react@18.3.10)(react@18.3.1)
+        version: 6.1.3(@types/react@18.3.10)(react@18.3.1)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -623,7 +623,7 @@ importers:
         version: 17.0.1
       typescript:
         specifier: ^5.4.5
-        version: 5.5.4
+        version: 5.6.3
     publishDirectory: build
 
   test:
@@ -641,11 +641,11 @@ importers:
         specifier: ^11.13.3
         version: 11.13.3(@types/react@18.3.10)(react@18.3.1)
       '@mui/internal-test-utils':
-        specifier: 1.0.14
-        version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 1.0.16
+        version: 1.0.16(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@playwright/test':
-        specifier: 1.47.2
-        version: 1.47.2
+        specifier: 1.48.0
+        version: 1.48.0
       '@testing-library/dom':
         specifier: ^10.4.0
         version: 10.4.0
@@ -683,8 +683,8 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       playwright:
-        specifier: ^1.47.2
-        version: 1.47.2
+        specifier: ^1.48.0
+        version: 1.48.0
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
@@ -1476,8 +1476,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@emotion/serialize@1.3.1':
-    resolution: {integrity: sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==}
+  '@emotion/serialize@1.3.2':
+    resolution: {integrity: sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==}
 
   '@emotion/server@11.11.0':
     resolution: {integrity: sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA==}
@@ -1511,8 +1511,8 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
-  '@emotion/utils@1.4.0':
-    resolution: {integrity: sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==}
+  '@emotion/utils@1.4.1':
+    resolution: {integrity: sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==}
 
   '@emotion/weak-memoize@0.4.0':
     resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
@@ -1904,14 +1904,14 @@ packages:
     peerDependencies:
       '@babel/core': ^7.25.2
 
-  '@mui/internal-docs-utils@1.0.13':
-    resolution: {integrity: sha512-q+EVFiJGqAbNtYQrRqRiE6EEtVyIgEPfM0QpMJ5ws/QY8wZterExWHLbtBP5eX60fIXqaVccfMBro8RPaeuvDQ==}
+  '@mui/internal-docs-utils@1.0.14':
+    resolution: {integrity: sha512-jb8RyzoGkV8zvTJndB4An95WCasbDwmDiTibw2YQaUh3+4XiAX3jS2XUB9ab3BxMv3TDCCywL5g0viB1bxQVBw==}
 
-  '@mui/internal-markdown@1.0.14':
-    resolution: {integrity: sha512-Df8Uo54TyE7Lm3otWWxw2OQzv3ztbdhRJMJ2sCYrTDqluAvGe/65KpVr95/AcY/An3qWpvBrbn5k5Oj/NG/lXw==}
+  '@mui/internal-markdown@1.0.16':
+    resolution: {integrity: sha512-a/9rp11ky+mAtfAGJhh933aurGLr6ceP9/PMnutBL5+b/zzTRrnt8eEMqsUTA4ZPeOzOWQqXV2iWOBjCqP/7WA==}
 
-  '@mui/internal-scripts@1.0.21':
-    resolution: {integrity: sha512-nVjt+Yjjff83C+urxDD63LmUhIR1bMbGVexHdFq1v9odyVKXw3tgL1yiCoEETLUfOkBbXECmjuRcbw+meWu5+g==}
+  '@mui/internal-scripts@1.0.23':
+    resolution: {integrity: sha512-YUaIaZLpeazuw4tWt5G6aKXW9Zxy1fmOe/Xz0XlnbY9pINYEE8A4nNEU2kDZ8dWqgNxp0Hxzp0t/XrCm1EBDQQ==}
 
   '@mui/internal-test-utils@1.0.14':
     resolution: {integrity: sha512-yjaSlij39hzWZ643b9gTLLPur8JUF3lQDIs9fwDAgBERhyuhhfV7+6L7xpqAZ7hrkZ7Rr7YqbtiCtSgfgDRG5g==}
@@ -1919,13 +1919,19 @@ packages:
       react: ^18.2.0
       react-dom: ^18.2.0
 
+  '@mui/internal-test-utils@1.0.16':
+    resolution: {integrity: sha512-giAwbpBEr61qZA2+aW1D+ZM9ZOfKdNnc9lfecTPmAoGr+Zg7sBS6OAjdNFUKjFWYFrR6yyZxNPeec8NiE26HBw==}
+    peerDependencies:
+      react: ^18.2.0
+      react-dom: ^18.2.0
+
   '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/11cc37f4ef5fc8f3d40fc209684626b206e76cca':
     resolution: {tarball: https://codeload.github.com/mui/material-ui/tar.gz/11cc37f4ef5fc8f3d40fc209684626b206e76cca}
     version: 6.1.1
     engines: {pnpm: 9.10.0}
 
-  '@mui/private-theming@6.1.1':
-    resolution: {integrity: sha512-JlrjIdhyZUtewtdAuUsvi3ZnO0YS49IW4Mfz19ZWTlQ0sDGga6LNPVwHClWr2/zJK2we2BQx9/i8M32rgKuzrg==}
+  '@mui/private-theming@6.1.3':
+    resolution: {integrity: sha512-XK5OYCM0x7gxWb/WBEySstBmn+dE3YKX7U7jeBRLm6vHU5fGUd7GiJWRirpivHjOK9mRH6E1MPIVd+ze5vguKQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^18.3.10
@@ -1934,8 +1940,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/styled-engine@6.1.1':
-    resolution: {integrity: sha512-HJyIoMpFb11fnHuRtUILOXgq6vj4LhIlE8maG4SwP/W+E5sa7HFexhnB3vOMT7bKys4UKNxhobC8jwWxYilGsA==}
+  '@mui/styled-engine@6.1.3':
+    resolution: {integrity: sha512-i4yh9m+eMZE3cNERpDhVr6Wn73Yz6C7MH0eE2zZvw8d7EFkIJlCQNZd1xxGZqarD2DDq2qWHcjIOucWGhxACtA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.4.1
@@ -1947,8 +1953,8 @@ packages:
       '@emotion/styled':
         optional: true
 
-  '@mui/system@6.1.1':
-    resolution: {integrity: sha512-PaYsCz2tUOcpu3T0okDEsSuP/yCDIj9JZ4Tox1JovRSKIjltHpXPsXZSGr3RiWdtM1MTQMFMCZzu0+CKbyy+Kw==}
+  '@mui/system@6.1.3':
+    resolution: {integrity: sha512-ILaD9UsLTBLjMcep3OumJMXh1PYr7aqnkHm/L47bH46+YmSL1zWAX6tWG8swEQROzW2GvYluEMp5FreoxOOC6w==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -1963,16 +1969,16 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/types@7.2.17':
-    resolution: {integrity: sha512-oyumoJgB6jDV8JFzRqjBo2daUuHpzDjoO/e3IrRhhHo/FxJlaVhET6mcNrKHUq2E+R+q3ql0qAtvQ4rfWHhAeQ==}
+  '@mui/types@7.2.18':
+    resolution: {integrity: sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==}
     peerDependencies:
       '@types/react': ^18.3.10
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@mui/utils@6.1.1':
-    resolution: {integrity: sha512-HlRrgdJSPbYDXPpoVMWZV8AE7WcFtAk13rWNWAEVWKSanzBBkymjz3km+Th/Srowsh4pf1fTSP1B0L116wQBYw==}
+  '@mui/utils@6.1.3':
+    resolution: {integrity: sha512-4JBpLkjprlKjN10DGb1aiy/ii9TKbQ601uSHtAmYFAS879QZgAD7vRnv/YBE4iBbc7NXzFgbQMCOFrupXWekIA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^18.3.10
@@ -2455,8 +2461,8 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@playwright/test@1.47.2':
-    resolution: {integrity: sha512-jTXRsoSPONAs8Za9QEQdyjFn+0ZQFjCiIztAIF6bi1HqhBzG9Ma7g1WotyiGqFSBRZjIEqMdT8RUlbk1QVhzCQ==}
+  '@playwright/test@1.48.0':
+    resolution: {integrity: sha512-W5lhqPUVPqhtc/ySvZI5Q8X2ztBOUgZ8LbAFy0JQgrXZs2xaILrUcNO3rQjwbLPfGK13+rZsDa1FpG+tqYkT5w==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -6970,13 +6976,13 @@ packages:
     resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
     engines: {node: '>=8'}
 
-  playwright-core@1.47.2:
-    resolution: {integrity: sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==}
+  playwright-core@1.48.0:
+    resolution: {integrity: sha512-RBvzjM9rdpP7UUFrQzRwR8L/xR4HyC1QXMzGYTbf1vjw25/ya9NRAVnXi/0fvFopjebvyPzsmoK58xxeEOaVvA==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.47.2:
-    resolution: {integrity: sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==}
+  playwright@1.48.0:
+    resolution: {integrity: sha512-qPqFaMEHuY/ug8o0uteYJSRfMGFikhUysk8ZvAtfKmUK3kc/6oNl/y3EczF8OFGYIi/Ex2HspMfzYArk6+XQSA==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -8261,8 +8267,8 @@ packages:
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
-  typescript@5.5.4:
-    resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
+  typescript@5.6.3:
+    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -9690,7 +9696,7 @@ snapshots:
       '@babel/runtime': 7.25.6
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
-      '@emotion/serialize': 1.3.1
+      '@emotion/serialize': 1.3.2
       babel-plugin-macros: 3.1.0
       convert-source-map: 1.9.0
       escape-string-regexp: 4.0.0
@@ -9704,7 +9710,7 @@ snapshots:
     dependencies:
       '@emotion/memoize': 0.9.0
       '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.0
+      '@emotion/utils': 1.4.1
       '@emotion/weak-memoize': 0.4.0
       stylis: 4.2.0
 
@@ -9727,9 +9733,9 @@ snapshots:
       '@babel/runtime': 7.25.6
       '@emotion/babel-plugin': 11.12.0
       '@emotion/cache': 11.13.1
-      '@emotion/serialize': 1.3.1
+      '@emotion/serialize': 1.3.2
       '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.3.1)
-      '@emotion/utils': 1.4.0
+      '@emotion/utils': 1.4.1
       '@emotion/weak-memoize': 0.4.0
       hoist-non-react-statics: 3.3.2
       react: 18.3.1
@@ -9738,17 +9744,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@emotion/serialize@1.3.1':
+  '@emotion/serialize@1.3.2':
     dependencies:
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
       '@emotion/unitless': 0.10.0
-      '@emotion/utils': 1.4.0
+      '@emotion/utils': 1.4.1
       csstype: 3.1.3
 
   '@emotion/server@11.11.0':
     dependencies:
-      '@emotion/utils': 1.4.0
+      '@emotion/utils': 1.4.1
       html-tokenize: 2.0.1
       multipipe: 1.0.2
       through: 2.3.8
@@ -9761,9 +9767,9 @@ snapshots:
       '@emotion/babel-plugin': 11.12.0
       '@emotion/is-prop-valid': 1.3.0
       '@emotion/react': 11.13.3(@types/react@18.3.10)(react@18.3.1)
-      '@emotion/serialize': 1.3.1
+      '@emotion/serialize': 1.3.2
       '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.3.1)
-      '@emotion/utils': 1.4.0
+      '@emotion/utils': 1.4.1
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.10
@@ -9778,7 +9784,7 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  '@emotion/utils@1.4.0': {}
+  '@emotion/utils@1.4.1': {}
 
   '@emotion/weak-memoize@0.4.0': {}
 
@@ -10091,7 +10097,7 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  '@lerna/create@8.1.8(babel-plugin-macros@3.1.0)(encoding@0.1.13)(typescript@5.5.4)':
+  '@lerna/create@8.1.8(babel-plugin-macros@3.1.0)(encoding@0.1.13)(typescript@5.6.3)':
     dependencies:
       '@npmcli/arborist': 7.5.4
       '@npmcli/package-json': 5.2.0
@@ -10109,7 +10115,7 @@ snapshots:
       console-control-strings: 1.1.0
       conventional-changelog-core: 5.0.1
       conventional-recommended-bump: 7.0.1
-      cosmiconfig: 8.3.6(typescript@5.5.4)
+      cosmiconfig: 8.3.6(typescript@5.6.3)
       dedent: 1.5.3(babel-plugin-macros@3.1.0)
       execa: 5.0.0
       fs-extra: 11.2.0
@@ -10207,29 +10213,29 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
-  '@mui/internal-docs-utils@1.0.13':
+  '@mui/internal-docs-utils@1.0.14':
     dependencies:
       rimraf: 6.0.1
-      typescript: 5.5.4
+      typescript: 5.6.3
 
-  '@mui/internal-markdown@1.0.14':
+  '@mui/internal-markdown@1.0.16':
     dependencies:
       '@babel/runtime': 7.25.6
       lodash: 4.17.21
       marked: 13.0.3
       prismjs: 1.29.0
 
-  '@mui/internal-scripts@1.0.21':
+  '@mui/internal-scripts@1.0.23':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.2)
       '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
       '@babel/plugin-syntax-typescript': 7.25.4(@babel/core@7.25.2)
       '@babel/types': 7.25.6
-      '@mui/internal-docs-utils': 1.0.13
+      '@mui/internal-docs-utils': 1.0.14
       doctrine: 3.0.0
       lodash: 4.17.21
-      typescript: 5.5.4
+      typescript: 5.6.3
       uuid: 9.0.1
     transitivePeerDependencies:
       - supports-color
@@ -10253,7 +10259,40 @@ snapshots:
       jsdom: 24.0.0
       lodash: 4.17.21
       mocha: 10.7.3
-      playwright: 1.47.2
+      playwright: 1.48.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      sinon: 18.0.1
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@types/react'
+      - '@types/react-dom'
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+
+  '@mui/internal-test-utils@1.0.16(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.25.2)
+      '@babel/preset-typescript': 7.24.7(@babel/core@7.25.2)
+      '@babel/register': 7.24.6(@babel/core@7.25.2)
+      '@babel/runtime': 7.25.6
+      '@emotion/cache': 11.13.1
+      '@emotion/react': 11.13.3(@types/react@18.3.10)(react@18.3.1)
+      '@testing-library/dom': 10.4.0
+      '@testing-library/react': 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
+      chai: 4.5.0
+      chai-dom: 1.12.0(chai@4.5.0)
+      dom-accessibility-api: 0.7.0
+      format-util: 1.0.5
+      fs-extra: 11.2.0
+      jsdom: 24.0.0
+      lodash: 4.17.21
+      mocha: 10.7.3
+      playwright: 1.48.0
       prop-types: 15.8.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -10281,19 +10320,20 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@mui/private-theming@6.1.1(@types/react@18.3.10)(react@18.3.1)':
+  '@mui/private-theming@6.1.3(@types/react@18.3.10)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
-      '@mui/utils': 6.1.1(@types/react@18.3.10)(react@18.3.1)
+      '@mui/utils': 6.1.3(@types/react@18.3.10)(react@18.3.1)
       prop-types: 15.8.1
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.10
 
-  '@mui/styled-engine@6.1.1(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(react@18.3.1)':
+  '@mui/styled-engine@6.1.3(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
       '@emotion/cache': 11.13.1
+      '@emotion/serialize': 1.3.2
       '@emotion/sheet': 1.4.0
       csstype: 3.1.3
       prop-types: 15.8.1
@@ -10302,13 +10342,13 @@ snapshots:
       '@emotion/react': 11.13.3(@types/react@18.3.10)(react@18.3.1)
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1)
 
-  '@mui/system@6.1.1(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1)':
+  '@mui/system@6.1.3(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
-      '@mui/private-theming': 6.1.1(@types/react@18.3.10)(react@18.3.1)
-      '@mui/styled-engine': 6.1.1(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(react@18.3.1)
-      '@mui/types': 7.2.17(@types/react@18.3.10)
-      '@mui/utils': 6.1.1(@types/react@18.3.10)(react@18.3.1)
+      '@mui/private-theming': 6.1.3(@types/react@18.3.10)(react@18.3.1)
+      '@mui/styled-engine': 6.1.3(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1))(react@18.3.1)
+      '@mui/types': 7.2.18(@types/react@18.3.10)
+      '@mui/utils': 6.1.3(@types/react@18.3.10)(react@18.3.1)
       clsx: 2.1.1
       csstype: 3.1.3
       prop-types: 15.8.1
@@ -10318,14 +10358,14 @@ snapshots:
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.10)(react@18.3.1))(@types/react@18.3.10)(react@18.3.1)
       '@types/react': 18.3.10
 
-  '@mui/types@7.2.17(@types/react@18.3.10)':
+  '@mui/types@7.2.18(@types/react@18.3.10)':
     optionalDependencies:
       '@types/react': 18.3.10
 
-  '@mui/utils@6.1.1(@types/react@18.3.10)(react@18.3.1)':
+  '@mui/utils@6.1.3(@types/react@18.3.10)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
-      '@mui/types': 7.2.17(@types/react@18.3.10)
+      '@mui/types': 7.2.18(@types/react@18.3.10)
       '@types/prop-types': 15.7.13
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -10876,9 +10916,9 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@playwright/test@1.47.2':
+  '@playwright/test@1.48.0':
     dependencies:
-      playwright: 1.47.2
+      playwright: 1.48.0
 
   '@polka/url@1.0.0-next.25': {}
 
@@ -11295,13 +11335,13 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint@8.57.1)(typescript@5.5.4)':
+  '@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)':
     dependencies:
       '@eslint-community/regexpp': 4.11.1
-      '@typescript-eslint/parser': 7.8.0(eslint@8.57.1)(typescript@5.5.4)
+      '@typescript-eslint/parser': 7.8.0(eslint@8.57.1)(typescript@5.6.3)
       '@typescript-eslint/scope-manager': 7.8.0
-      '@typescript-eslint/type-utils': 7.8.0(eslint@8.57.1)(typescript@5.5.4)
-      '@typescript-eslint/utils': 7.8.0(eslint@8.57.1)(typescript@5.5.4)
+      '@typescript-eslint/type-utils': 7.8.0(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/utils': 7.8.0(eslint@8.57.1)(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 7.8.0
       debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.57.1
@@ -11309,43 +11349,43 @@ snapshots:
       ignore: 5.3.2
       natural-compare: 1.4.0
       semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.5.4)
+      ts-api-utils: 1.3.0(typescript@5.6.3)
     optionalDependencies:
-      typescript: 5.5.4
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/experimental-utils@5.62.0(eslint@9.8.0)(typescript@5.5.4)':
+  '@typescript-eslint/experimental-utils@5.62.0(eslint@9.8.0)(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/utils': 5.62.0(eslint@9.8.0)(typescript@5.5.4)
+      '@typescript-eslint/utils': 5.62.0(eslint@9.8.0)(typescript@5.6.3)
       eslint: 9.8.0
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4)':
+  '@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 7.8.0
       '@typescript-eslint/types': 7.8.0
-      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.5.4)
+      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 7.8.0
       debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.57.1
     optionalDependencies:
-      typescript: 5.5.4
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.8.0(eslint@9.8.0)(typescript@5.5.4)':
+  '@typescript-eslint/parser@7.8.0(eslint@9.8.0)(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 7.8.0
       '@typescript-eslint/types': 7.8.0
-      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.5.4)
+      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 7.8.0
       debug: 4.3.7(supports-color@8.1.1)
       eslint: 9.8.0
     optionalDependencies:
-      typescript: 5.5.4
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
@@ -11359,15 +11399,15 @@ snapshots:
       '@typescript-eslint/types': 7.8.0
       '@typescript-eslint/visitor-keys': 7.8.0
 
-  '@typescript-eslint/type-utils@7.8.0(eslint@8.57.1)(typescript@5.5.4)':
+  '@typescript-eslint/type-utils@7.8.0(eslint@8.57.1)(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.5.4)
-      '@typescript-eslint/utils': 7.8.0(eslint@8.57.1)(typescript@5.5.4)
+      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 7.8.0(eslint@8.57.1)(typescript@5.6.3)
       debug: 4.3.7(supports-color@8.1.1)
       eslint: 8.57.1
-      ts-api-utils: 1.3.0(typescript@5.5.4)
+      ts-api-utils: 1.3.0(typescript@5.6.3)
     optionalDependencies:
-      typescript: 5.5.4
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
@@ -11375,7 +11415,7 @@ snapshots:
 
   '@typescript-eslint/types@7.8.0': {}
 
-  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.5.4)':
+  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
@@ -11383,13 +11423,13 @@ snapshots:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.3
-      tsutils: 3.21.0(typescript@5.5.4)
+      tsutils: 3.21.0(typescript@5.6.3)
     optionalDependencies:
-      typescript: 5.5.4
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@7.8.0(typescript@5.5.4)':
+  '@typescript-eslint/typescript-estree@7.8.0(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/types': 7.8.0
       '@typescript-eslint/visitor-keys': 7.8.0
@@ -11398,20 +11438,20 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.4
       semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.5.4)
+      ts-api-utils: 1.3.0(typescript@5.6.3)
     optionalDependencies:
-      typescript: 5.5.4
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@5.62.0(eslint@8.57.1)(typescript@5.5.4)':
+  '@typescript-eslint/utils@5.62.0(eslint@8.57.1)(typescript@5.6.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1)
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.5.4)
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.3)
       eslint: 8.57.1
       eslint-scope: 5.1.1
       semver: 7.6.3
@@ -11419,14 +11459,14 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@5.62.0(eslint@9.8.0)(typescript@5.5.4)':
+  '@typescript-eslint/utils@5.62.0(eslint@9.8.0)(typescript@5.6.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.8.0)
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.5.4)
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.3)
       eslint: 9.8.0
       eslint-scope: 5.1.1
       semver: 7.6.3
@@ -11434,14 +11474,14 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@7.8.0(eslint@8.57.1)(typescript@5.5.4)':
+  '@typescript-eslint/utils@7.8.0(eslint@8.57.1)(typescript@5.6.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1)
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 7.8.0
       '@typescript-eslint/types': 7.8.0
-      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.5.4)
+      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.6.3)
       eslint: 8.57.1
       semver: 7.6.3
     transitivePeerDependencies:
@@ -12456,23 +12496,23 @@ snapshots:
       path-type: 4.0.0
       yaml: 1.10.2
 
-  cosmiconfig@8.3.6(typescript@5.5.4):
+  cosmiconfig@8.3.6(typescript@5.6.3):
     dependencies:
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       parse-json: 5.2.0
       path-type: 4.0.0
     optionalDependencies:
-      typescript: 5.5.4
+      typescript: 5.6.3
 
-  cosmiconfig@9.0.0(typescript@5.5.4):
+  cosmiconfig@9.0.0(typescript@5.6.3):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       parse-json: 5.2.0
     optionalDependencies:
-      typescript: 5.5.4
+      typescript: 5.6.3
 
   cp-file@10.0.0:
     dependencies:
@@ -13045,29 +13085,29 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1):
+  eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       confusing-browser-globals: 1.0.11
       eslint: 8.57.1
-      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1)
+      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1)
       object.assign: 4.1.5
       object.entries: 1.1.8
       semver: 6.3.1
 
-  eslint-config-airbnb-typescript@18.0.0(@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint@8.57.1)(typescript@5.5.4))(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1):
+  eslint-config-airbnb-typescript@18.0.0(@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint@8.57.1)(typescript@5.5.4)
-      '@typescript-eslint/parser': 7.8.0(eslint@8.57.1)(typescript@5.5.4)
+      '@typescript-eslint/eslint-plugin': 7.8.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)
+      '@typescript-eslint/parser': 7.8.0(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
-      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - eslint-plugin-import
 
-  eslint-config-airbnb@19.0.4(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint-plugin-jsx-a11y@6.10.0(eslint@8.57.1))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.1))(eslint-plugin-react@7.37.0(eslint@8.57.1))(eslint@8.57.1):
+  eslint-config-airbnb@19.0.4(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint-plugin-jsx-a11y@6.10.0(eslint@8.57.1))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.1))(eslint-plugin-react@7.37.0(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       eslint: 8.57.1
-      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1)
+      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1)
       eslint-plugin-react: 7.37.0(eslint@8.57.1)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1)
@@ -13090,7 +13130,7 @@ snapshots:
     dependencies:
       debug: 3.2.7
       enhanced-resolve: 0.9.1
-      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1)
+      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1)
       find-root: 1.1.0
       hasown: 2.0.2
       interpret: 1.4.0
@@ -13103,11 +13143,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.9(eslint-plugin-import@2.30.0)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.9(eslint-plugin-import@2.30.0)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 7.8.0(eslint@8.57.1)(typescript@5.5.4)
+      '@typescript-eslint/parser': 7.8.0(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-webpack: 0.13.9(eslint-plugin-import@2.30.0)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)))
@@ -13127,7 +13167,7 @@ snapshots:
       lodash.snakecase: 4.1.1
       lodash.upperfirst: 4.3.1
 
-  eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1):
+  eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.9)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -13138,7 +13178,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.9(eslint-plugin-import@2.30.0)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.8.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.9(eslint-plugin-import@2.30.0)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -13149,7 +13189,7 @@ snapshots:
       semver: 6.3.1
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 7.8.0(eslint@8.57.1)(typescript@5.5.4)
+      '@typescript-eslint/parser': 7.8.0(eslint@8.57.1)(typescript@5.6.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -13208,9 +13248,9 @@ snapshots:
       string.prototype.matchall: 4.0.11
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-testing-library@6.3.0(eslint@8.57.1)(typescript@5.5.4):
+  eslint-plugin-testing-library@6.3.0(eslint@8.57.1)(typescript@5.6.3):
     dependencies:
-      '@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.5.4)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
     transitivePeerDependencies:
       - supports-color
@@ -14933,7 +14973,7 @@ snapshots:
 
   lerna@8.1.8(babel-plugin-macros@3.1.0)(encoding@0.1.13):
     dependencies:
-      '@lerna/create': 8.1.8(babel-plugin-macros@3.1.0)(encoding@0.1.13)(typescript@5.5.4)
+      '@lerna/create': 8.1.8(babel-plugin-macros@3.1.0)(encoding@0.1.13)(typescript@5.6.3)
       '@npmcli/arborist': 7.5.4
       '@npmcli/package-json': 5.2.0
       '@npmcli/run-script': 8.1.0
@@ -14951,7 +14991,7 @@ snapshots:
       conventional-changelog-angular: 7.0.0
       conventional-changelog-core: 5.0.1
       conventional-recommended-bump: 7.0.1
-      cosmiconfig: 8.3.6(typescript@5.5.4)
+      cosmiconfig: 8.3.6(typescript@5.6.3)
       dedent: 1.5.3(babel-plugin-macros@3.1.0)
       envinfo: 7.13.0
       execa: 5.0.0
@@ -15004,7 +15044,7 @@ snapshots:
       strong-log-transformer: 2.1.0
       tar: 6.2.1
       temp-dir: 1.0.0
-      typescript: 5.5.4
+      typescript: 5.6.3
       upath: 2.0.1
       uuid: 10.0.0
       validate-npm-package-license: 3.0.4
@@ -15919,7 +15959,7 @@ snapshots:
 
   nested-error-stacks@2.1.1: {}
 
-  next@14.2.13(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next@14.2.13(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@next/env': 14.2.13
       '@swc/helpers': 0.5.5
@@ -15941,7 +15981,7 @@ snapshots:
       '@next/swc-win32-ia32-msvc': 14.2.13
       '@next/swc-win32-x64-msvc': 14.2.13
       '@opentelemetry/api': 1.8.0
-      '@playwright/test': 1.47.2
+      '@playwright/test': 1.48.0
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -16598,11 +16638,11 @@ snapshots:
     dependencies:
       find-up: 3.0.0
 
-  playwright-core@1.47.2: {}
+  playwright-core@1.48.0: {}
 
-  playwright@1.47.2:
+  playwright@1.48.0:
     dependencies:
-      playwright-core: 1.47.2
+      playwright-core: 1.48.0
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -16634,9 +16674,9 @@ snapshots:
     optionalDependencies:
       postcss: 8.4.47
 
-  postcss-loader@8.1.1(postcss@8.4.47)(typescript@5.5.4)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
+  postcss-loader@8.1.1(postcss@8.4.47)(typescript@5.6.3)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))):
     dependencies:
-      cosmiconfig: 9.0.0(typescript@5.5.4)
+      cosmiconfig: 9.0.0(typescript@5.6.3)
       jiti: 1.21.0
       postcss: 8.4.47
       semver: 7.6.3
@@ -16685,7 +16725,7 @@ snapshots:
   postcss-styled-syntax@0.6.4(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47
-      typescript: 5.5.4
+      typescript: 5.6.3
 
   postcss-value-parser@4.2.0: {}
 
@@ -17741,16 +17781,16 @@ snapshots:
       '@babel/core': 7.25.2
       babel-plugin-macros: 3.1.0
 
-  stylelint-config-recommended@14.0.1(stylelint@16.4.0(typescript@5.5.4)):
+  stylelint-config-recommended@14.0.1(stylelint@16.4.0(typescript@5.6.3)):
     dependencies:
-      stylelint: 16.4.0(typescript@5.5.4)
+      stylelint: 16.4.0(typescript@5.6.3)
 
-  stylelint-config-standard@36.0.1(stylelint@16.4.0(typescript@5.5.4)):
+  stylelint-config-standard@36.0.1(stylelint@16.4.0(typescript@5.6.3)):
     dependencies:
-      stylelint: 16.4.0(typescript@5.5.4)
-      stylelint-config-recommended: 14.0.1(stylelint@16.4.0(typescript@5.5.4))
+      stylelint: 16.4.0(typescript@5.6.3)
+      stylelint-config-recommended: 14.0.1(stylelint@16.4.0(typescript@5.6.3))
 
-  stylelint@16.4.0(typescript@5.5.4):
+  stylelint@16.4.0(typescript@5.6.3):
     dependencies:
       '@csstools/css-parser-algorithms': 2.6.1(@csstools/css-tokenizer@2.2.4)
       '@csstools/css-tokenizer': 2.2.4
@@ -17759,7 +17799,7 @@ snapshots:
       '@dual-bundle/import-meta-resolve': 4.0.0
       balanced-match: 2.0.0
       colord: 2.9.3
-      cosmiconfig: 9.0.0(typescript@5.5.4)
+      cosmiconfig: 9.0.0(typescript@5.6.3)
       css-functions-list: 3.2.2
       css-tree: 2.3.1
       debug: 4.3.7(supports-color@8.1.1)
@@ -18001,9 +18041,9 @@ snapshots:
 
   trough@2.2.0: {}
 
-  ts-api-utils@1.3.0(typescript@5.5.4):
+  ts-api-utils@1.3.0(typescript@5.6.3):
     dependencies:
-      typescript: 5.5.4
+      typescript: 5.6.3
 
   ts-interface-checker@0.1.13: {}
 
@@ -18026,10 +18066,10 @@ snapshots:
 
   tsscmp@1.0.6: {}
 
-  tsutils@3.21.0(typescript@5.5.4):
+  tsutils@3.21.0(typescript@5.6.3):
     dependencies:
       tslib: 1.14.1
-      typescript: 5.5.4
+      typescript: 5.6.3
 
   tsx@4.8.2:
     dependencies:
@@ -18111,7 +18151,7 @@ snapshots:
 
   typedarray@0.0.6: {}
 
-  typescript@5.5.4: {}
+  typescript@5.6.3: {}
 
   ua-parser-js@0.7.37: {}
 
diff --git a/test/package.json b/test/package.json
index a298cef4c..2dc714658 100644
--- a/test/package.json
+++ b/test/package.json
@@ -10,8 +10,8 @@
     "@base_ui/react": "workspace:*",
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
-    "@mui/internal-test-utils": "1.0.14",
-    "@playwright/test": "1.47.2",
+    "@mui/internal-test-utils": "1.0.16",
+    "@playwright/test": "1.48.0",
     "@testing-library/dom": "^10.4.0",
     "@types/chai": "^4.3.20",
     "@types/react": "^18.3.10",
@@ -24,7 +24,7 @@
     "html-webpack-plugin": "^5.6.0",
     "is-wsl": "^3.1.0",
     "lodash": "^4.17.21",
-    "playwright": "^1.47.2",
+    "playwright": "^1.48.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

From bde120f25450dd75adb42c526c88caf20cc245fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 10 Oct 2024 09:46:50 +0200
Subject: [PATCH 15/22] [core] Add explicit type annotations to components
 (#705)

---
 packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.tsx | 4 ++--
 packages/mui-base/src/Field/Validity/FieldValidity.tsx     | 4 ++--
 packages/mui-base/src/Menu/Root/MenuRoot.tsx               | 4 ++--
 packages/mui-base/src/Popover/Root/PopoverRoot.tsx         | 4 ++--
 packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx | 4 ++--
 packages/mui-base/src/Slider/Root/SliderProvider.tsx       | 4 ++--
 packages/mui-base/src/Tabs/Root/TabsProvider.tsx           | 4 ++--
 packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx   | 4 ++--
 packages/mui-base/src/Tooltip/Provider/TooltipProvider.tsx | 4 ++--
 packages/mui-base/src/Tooltip/Root/TooltipRoot.tsx         | 4 ++--
 10 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.tsx b/packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.tsx
index d72f51f4c..9ae119f0d 100644
--- a/packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.tsx
+++ b/packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.tsx
@@ -15,7 +15,7 @@ import { useDialogRoot } from '../../Dialog/Root/useDialogRoot';
  *
  * - [AlertDialogRoot API](https://base-ui.netlify.app/components/react-alert-dialog/#api-reference-AlertDialogRoot)
  */
-function AlertDialogRoot(props: AlertDialogRoot.Props) {
+const AlertDialogRoot: React.FC<AlertDialogRoot.Props> = function AlertDialogRoot(props) {
   const { children, defaultOpen, onOpenChange, open: openProp, animated = true } = props;
 
   const dialogRootContext = React.useContext(AlertDialogRootContext);
@@ -41,7 +41,7 @@ function AlertDialogRoot(props: AlertDialogRoot.Props) {
       {children}
     </AlertDialogRootContext.Provider>
   );
-}
+};
 
 namespace AlertDialogRoot {
   export type Props = Omit<DialogRoot.Props, 'modal' | 'dismissible'>;
diff --git a/packages/mui-base/src/Field/Validity/FieldValidity.tsx b/packages/mui-base/src/Field/Validity/FieldValidity.tsx
index ebe70f797..f97ebac3d 100644
--- a/packages/mui-base/src/Field/Validity/FieldValidity.tsx
+++ b/packages/mui-base/src/Field/Validity/FieldValidity.tsx
@@ -16,7 +16,7 @@ import { FieldValidityData } from '../Root/FieldRoot';
  *
  * - [FieldValidity API](https://base-ui.netlify.app/components/react-field/#api-reference-FieldValidity)
  */
-function FieldValidity(props: FieldValidity.Props) {
+const FieldValidity: React.FC<FieldValidity.Props> = function FieldValidity(props) {
   const { validityData, invalid } = useFieldRootContext(false);
 
   const fieldValidityState: FieldValidityState = React.useMemo(() => {
@@ -28,7 +28,7 @@ function FieldValidity(props: FieldValidity.Props) {
   }, [validityData, invalid]);
 
   return <React.Fragment>{props.children(fieldValidityState)}</React.Fragment>;
-}
+};
 
 export interface FieldValidityState extends Omit<FieldValidityData, 'state'> {
   validity: FieldValidityData['state'];
diff --git a/packages/mui-base/src/Menu/Root/MenuRoot.tsx b/packages/mui-base/src/Menu/Root/MenuRoot.tsx
index 108e3cef7..68802b020 100644
--- a/packages/mui-base/src/Menu/Root/MenuRoot.tsx
+++ b/packages/mui-base/src/Menu/Root/MenuRoot.tsx
@@ -15,7 +15,7 @@ import { MenuDirection, MenuOrientation, useMenuRoot } from './useMenuRoot';
  *
  * - [MenuRoot API](https://base-ui.netlify.app/components/react-menu/#api-reference-MenuRoot)
  */
-function MenuRoot(props: MenuRoot.Props) {
+const MenuRoot: React.FC<MenuRoot.Props> = function MenuRoot(props) {
   const {
     animated = true,
     children,
@@ -89,7 +89,7 @@ function MenuRoot(props: MenuRoot.Props) {
   }
 
   return <MenuRootContext.Provider value={context}>{children}</MenuRootContext.Provider>;
-}
+};
 
 namespace MenuRoot {
   export interface Props {
diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.tsx
index bbed8202d..cfc4c2d24 100644
--- a/packages/mui-base/src/Popover/Root/PopoverRoot.tsx
+++ b/packages/mui-base/src/Popover/Root/PopoverRoot.tsx
@@ -16,7 +16,7 @@ import { OPEN_DELAY } from '../utils/constants';
  *
  * - [PopoverRoot API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverRoot)
  */
-function PopoverRoot(props: PopoverRoot.Props) {
+const PopoverRoot: React.FC<PopoverRoot.Props> = function PopoverRoot(props) {
   const { openOnHover = false, delayType = 'rest', delay, closeDelay = 0, animated = true } = props;
 
   const delayWithDefault = delay ?? OPEN_DELAY;
@@ -105,7 +105,7 @@ function PopoverRoot(props: PopoverRoot.Props) {
   return (
     <PopoverRootContext.Provider value={contextValue}>{props.children}</PopoverRootContext.Provider>
   );
-}
+};
 
 namespace PopoverRoot {
   export interface OwnerState {}
diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx
index 1c166768e..39922404c 100644
--- a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx
+++ b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx
@@ -15,7 +15,7 @@ import { CLOSE_DELAY, OPEN_DELAY } from '../utils/constants';
  *
  * - [PreviewCardRoot API](https://base-ui.netlify.app/components/react-preview-card/#api-reference-PreviewCardRoot)
  */
-function PreviewCardRoot(props: PreviewCardRoot.Props) {
+const PreviewCardRoot: React.FC<PreviewCardRoot.Props> = function PreviewCardRoot(props) {
   const { delayType = 'rest', delay, closeDelay, animated = true } = props;
 
   const delayWithDefault = delay ?? OPEN_DELAY;
@@ -92,7 +92,7 @@ function PreviewCardRoot(props: PreviewCardRoot.Props) {
       {props.children}
     </PreviewCardRootContext.Provider>
   );
-}
+};
 
 namespace PreviewCardRoot {
   export interface OwnerState {}
diff --git a/packages/mui-base/src/Slider/Root/SliderProvider.tsx b/packages/mui-base/src/Slider/Root/SliderProvider.tsx
index 7e3e158a3..12444b470 100644
--- a/packages/mui-base/src/Slider/Root/SliderProvider.tsx
+++ b/packages/mui-base/src/Slider/Root/SliderProvider.tsx
@@ -28,7 +28,7 @@ export function useSliderContext() {
  *
  * @ignore - do not document.
  */
-function SliderProvider(props: SliderProviderProps) {
+const SliderProvider: React.FC<SliderProviderProps> = function SliderProvider(props) {
   const { value: valueProp, children } = props;
 
   const { compoundComponentContextValue, ...contextValue } = valueProp;
@@ -38,7 +38,7 @@ function SliderProvider(props: SliderProviderProps) {
       <SliderContext.Provider value={contextValue}>{children}</SliderContext.Provider>
     </CompoundComponentContext.Provider>
   );
-}
+};
 
 SliderProvider.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
diff --git a/packages/mui-base/src/Tabs/Root/TabsProvider.tsx b/packages/mui-base/src/Tabs/Root/TabsProvider.tsx
index 2a6670b7a..d8d2e5515 100644
--- a/packages/mui-base/src/Tabs/Root/TabsProvider.tsx
+++ b/packages/mui-base/src/Tabs/Root/TabsProvider.tsx
@@ -22,7 +22,7 @@ export interface TabsProviderProps {
  *
  * @ignore - do not document.
  */
-function TabsProvider(props: TabsProviderProps) {
+const TabsProvider: React.FC<TabsProviderProps> = function TabsProvider(props) {
   const { value: valueProp, children } = props;
   const {
     direction,
@@ -76,7 +76,7 @@ function TabsProvider(props: TabsProviderProps) {
       <TabsRootContext.Provider value={tabsContextValue}>{children}</TabsRootContext.Provider>
     </CompoundComponentContext.Provider>
   );
-}
+};
 
 TabsProvider.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx b/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx
index 1e2a319e9..3567bc520 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx
@@ -21,7 +21,7 @@ export interface TabsListProviderProps {
  *
  * @ignore - do not document.
  */
-function TabsListProvider(props: TabsListProviderProps) {
+const TabsListProvider: React.FC<TabsListProviderProps> = function TabsListProvider(props) {
   const { value, children } = props;
   const {
     dispatch,
@@ -65,7 +65,7 @@ function TabsListProvider(props: TabsListProviderProps) {
       </ListContext.Provider>
     </CompoundComponentContext.Provider>
   );
-}
+};
 
 TabsListProvider.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
diff --git a/packages/mui-base/src/Tooltip/Provider/TooltipProvider.tsx b/packages/mui-base/src/Tooltip/Provider/TooltipProvider.tsx
index 6fc2580bb..948bd141f 100644
--- a/packages/mui-base/src/Tooltip/Provider/TooltipProvider.tsx
+++ b/packages/mui-base/src/Tooltip/Provider/TooltipProvider.tsx
@@ -15,14 +15,14 @@ import { FloatingDelayGroup } from '@floating-ui/react';
  *
  * - [TooltipProvider API](https://base-ui.netlify.app/components/react-tooltip/#api-reference-TooltipProvider)
  */
-function TooltipProvider(props: TooltipProvider.Props) {
+const TooltipProvider: React.FC<TooltipProvider.Props> = function TooltipProvider(props) {
   const { delay, closeDelay, timeout = 400 } = props;
   return (
     <FloatingDelayGroup delay={{ open: delay ?? 0, close: closeDelay ?? 0 }} timeoutMs={timeout}>
       {props.children}
     </FloatingDelayGroup>
   );
-}
+};
 
 namespace TooltipProvider {
   export interface Props {
diff --git a/packages/mui-base/src/Tooltip/Root/TooltipRoot.tsx b/packages/mui-base/src/Tooltip/Root/TooltipRoot.tsx
index b6851c253..71cf3d7b3 100644
--- a/packages/mui-base/src/Tooltip/Root/TooltipRoot.tsx
+++ b/packages/mui-base/src/Tooltip/Root/TooltipRoot.tsx
@@ -16,7 +16,7 @@ import { OPEN_DELAY } from '../utils/constants';
  *
  * - [TooltipRoot API](https://base-ui.netlify.app/components/react-tooltip/#api-reference-TooltipRoot)
  */
-function TooltipRoot(props: TooltipRoot.Props) {
+const TooltipRoot: React.FC<TooltipRoot.Props> = function TooltipRoot(props) {
   const {
     delayType = 'rest',
     delay,
@@ -102,7 +102,7 @@ function TooltipRoot(props: TooltipRoot.Props) {
   return (
     <TooltipRootContext.Provider value={contextValue}>{props.children}</TooltipRootContext.Provider>
   );
-}
+};
 
 namespace TooltipRoot {
   export interface OwnerState {}

From a85a51459e20cfc2743e96f98aa12eb7ba326e94 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 10 Oct 2024 20:34:29 +0200
Subject: [PATCH 16/22] [core] Increase the minimum Node.js version support to
 14.0.0 (#658)

---
 .browserslistrc                | 8 ++++----
 packages/mui-base/package.json | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/.browserslistrc b/.browserslistrc
index c5908f981..1b20f6868 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -43,16 +43,16 @@ samsung 22
 # snapshot of `npx browserslist "maintained node versions"`
 # On update check all #stable-snapshot markers
 [node]
-node 18.0
+node 14.0
 
 # same as `node`
 [coverage]
-node 18.0
+node 14.0
 
 # same as `node`
 [development]
-node 18.0
+node 14.0
 
 # same as `node`
 [test]
-node 18.0
+node 14.0
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index e936c416a..0faaf17c5 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -86,6 +86,6 @@
     "directory": "build"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   }
 }

From 68881a20c7dedca5027d413880324a61392de86e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 11 Oct 2024 11:16:15 +0200
Subject: [PATCH 17/22] Bump Public packages' dependencies (major) (#725)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michał Dudak <michal@mui.com>
---
 .../eslint-plugin-material-ui/package.json    |   2 +-
 packages/mui-base/package.json                |   4 +-
 pnpm-lock.yaml                                | 167 ++++++++++++------
 renovate.json                                 |   4 +-
 4 files changed, 116 insertions(+), 61 deletions(-)

diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json
index 9385a40ae..5a7e5a991 100644
--- a/packages/eslint-plugin-material-ui/package.json
+++ b/packages/eslint-plugin-material-ui/package.json
@@ -7,7 +7,7 @@
   "devDependencies": {
     "@types/eslint": "^8.56.12",
     "@typescript-eslint/experimental-utils": "^5.62.0",
-    "@typescript-eslint/parser": "^7.8.0"
+    "@typescript-eslint/parser": "^8.8.1"
   },
   "scripts": {
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000"
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index 0faaf17c5..0a2c4e0c5 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -53,7 +53,7 @@
   },
   "devDependencies": {
     "@mui/internal-test-utils": "1.0.14",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.20",
     "@types/chai-dom": "^1.11.3",
@@ -67,7 +67,7 @@
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sinon": "^17.0.1",
+    "sinon": "^19.0.2",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a38792543..08ae29252 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -540,8 +540,8 @@ importers:
         specifier: ^5.62.0
         version: 5.62.0(eslint@9.8.0)(typescript@5.6.3)
       '@typescript-eslint/parser':
-        specifier: ^7.8.0
-        version: 7.8.0(eslint@9.8.0)(typescript@5.6.3)
+        specifier: ^8.8.1
+        version: 8.8.1(eslint@9.8.0)(typescript@5.6.3)
 
   packages/mui-base:
     dependencies:
@@ -577,8 +577,8 @@ importers:
         specifier: 1.0.14
         version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/react':
-        specifier: ^15.0.7
-        version: 15.0.7(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^16.0.1
+        version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -619,8 +619,8 @@ importers:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
       sinon:
-        specifier: ^17.0.1
-        version: 17.0.1
+        specifier: ^19.0.2
+        version: 19.0.2
       typescript:
         specifier: ^5.4.5
         version: 5.6.3
@@ -2544,20 +2544,20 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
-  '@sinonjs/commons@2.0.0':
-    resolution: {integrity: sha512-uLa0j859mMrg2slwQYdO/AkrOfmH+X6LTVmNTS9CqexuE2IvVORIkSpJLqePAbEnKJ77aMmCwr1NUZ57120Xcg==}
-
   '@sinonjs/commons@3.0.1':
     resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
 
   '@sinonjs/fake-timers@11.2.2':
     resolution: {integrity: sha512-G2piCSxQ7oWOxwGSAyFHfPIsyeJGXYtc6mFbnFA+kRXkiEnTl8c/8jul2S329iFBnDI9HGoeWWAZvuvOkZccgw==}
 
-  '@sinonjs/samsam@8.0.0':
-    resolution: {integrity: sha512-Bp8KUVlLp8ibJZrnvq2foVhP0IVX2CIprMJPK0vqGqgrDa0OHVKeZyBykqskkrdxV6yKBPmGasO8LVjAKR3Gew==}
+  '@sinonjs/fake-timers@13.0.2':
+    resolution: {integrity: sha512-4Bb+oqXZTSTZ1q27Izly9lv8B9dlV61CROxPiVtywwzv5SnytJqhvYe6FclHYuXml4cd1VHPo1zd5PmTeJozvA==}
+
+  '@sinonjs/samsam@8.0.2':
+    resolution: {integrity: sha512-v46t/fwnhejRSFTGqbpn9u+LQ9xJDse10gNnPgAcxgdoCDMXj/G2asWAC/8Qs+BAZDicX+MNZouXT1A7c83kVw==}
 
-  '@sinonjs/text-encoding@0.7.2':
-    resolution: {integrity: sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==}
+  '@sinonjs/text-encoding@0.7.3':
+    resolution: {integrity: sha512-DE427ROAphMQzU4ENbliGYrBSYPXF+TtLg9S8vzeA+OF4ZKzoDdzfL8sxuMUGS/lgRhM6j1URSk9ghf7Xo1tyA==}
 
   '@slack/bolt@3.22.0':
     resolution: {integrity: sha512-iKDqGPEJDnrVwxSVlFW6OKTkijd7s4qLBeSufoBsTM0reTyfdp/5izIQVkxNfzjHi3o6qjdYbRXkYad5HBsBog==}
@@ -2604,17 +2604,6 @@ packages:
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
 
-  '@testing-library/react@15.0.7':
-    resolution: {integrity: sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@types/react': ^18.3.10
-      react: ^18.0.0
-      react-dom: ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@testing-library/react@16.0.1':
     resolution: {integrity: sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==}
     engines: {node: '>=18'}
@@ -2849,6 +2838,16 @@ packages:
       typescript:
         optional: true
 
+  '@typescript-eslint/parser@8.8.1':
+    resolution: {integrity: sha512-hQUVn2Lij2NAxVFEdvIGxT9gP1tq2yM83m+by3whWFsWC+1y8pxxxHUFE1UqDu2VsGi2i6RLcv4QvouM84U+ow==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@typescript-eslint/scope-manager@5.62.0':
     resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2857,6 +2856,10 @@ packages:
     resolution: {integrity: sha512-viEmZ1LmwsGcnr85gIq+FCYI7nO90DVbE37/ll51hjv9aG+YZMb4WDE2fyWpUR4O/UrhGRpYXK/XajcGTk2B8g==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
+  '@typescript-eslint/scope-manager@8.8.1':
+    resolution: {integrity: sha512-X4JdU+66Mazev/J0gfXlcC/dV6JI37h+93W9BRYXrSn0hrE64IoWgVkO9MSJgEzoWkxONgaQpICWg8vAN74wlA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/type-utils@7.8.0':
     resolution: {integrity: sha512-H70R3AefQDQpz9mGv13Uhi121FNMh+WEaRqcXTX09YEDky21km4dV1ZXJIp8QjXc4ZaVkXVdohvWDzbnbHDS+A==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -2875,6 +2878,10 @@ packages:
     resolution: {integrity: sha512-wf0peJ+ZGlcH+2ZS23aJbOv+ztjeeP8uQ9GgwMJGVLx/Nj9CJt17GWgWWoSmoRVKAX2X+7fzEnAjxdvK2gqCLw==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
+  '@typescript-eslint/types@8.8.1':
+    resolution: {integrity: sha512-WCcTP4SDXzMd23N27u66zTKMuEevH4uzU8C9jf0RO4E04yVHgQgW+r+TeVTNnO1KIfrL8ebgVVYYMMO3+jC55Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/typescript-estree@5.62.0':
     resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2893,6 +2900,15 @@ packages:
       typescript:
         optional: true
 
+  '@typescript-eslint/typescript-estree@8.8.1':
+    resolution: {integrity: sha512-A5d1R9p+X+1js4JogdNilDuuq+EHZdsH9MjTVxXOdVFfTJXunKJR/v+fNNyO4TnoOn5HqobzfRlc70NC6HTcdg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@typescript-eslint/utils@5.62.0':
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2913,6 +2929,10 @@ packages:
     resolution: {integrity: sha512-q4/gibTNBQNA0lGyYQCmWRS5D15n8rXh4QjK3KV+MBPlTYHpfBUT3D3PaPR/HeNiI9W6R7FvlkcGhNyAoP+caA==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
+  '@typescript-eslint/visitor-keys@8.8.1':
+    resolution: {integrity: sha512-0/TdC3aeRAsW7MDvYRwEc1Uwm0TIBfzjPFgg60UU2Haj5qsCs9cc3zNgY71edqE3LbWfF/WoZQd3lJoDXFQpag==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -4064,6 +4084,10 @@ packages:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
 
+  diff@7.0.0:
+    resolution: {integrity: sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==}
+    engines: {node: '>=0.3.1'}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -6437,8 +6461,8 @@ packages:
   nise@5.1.9:
     resolution: {integrity: sha512-qOnoujW4SV6e40dYxJOb3uvuoPHtmLzIk4TFo+j0jPJoC+5Z9xja5qH5JZobEPsa8+YYphMrOSwnrshEhG2qww==}
 
-  nise@6.0.0:
-    resolution: {integrity: sha512-K8ePqo9BFvN31HXwEtTNGzgrPpmvgciDsFz8aztFjt4LqKO/JeFD8tBOeuDiCMXrIl/m1YvfH8auSpxfaD09wg==}
+  nise@6.1.1:
+    resolution: {integrity: sha512-aMSAzLVY7LyeM60gvBS423nBmIPP+Wy7St7hsb+8/fc1HmeoHJfLO8CKse4u3BtOZvQLJghYPI2i/1WZrEj5/g==}
 
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
@@ -7696,6 +7720,9 @@ packages:
   sinon@18.0.1:
     resolution: {integrity: sha512-a2N2TDY1uGviajJ6r4D1CyRAkzE9NNVlYOV1wX5xQDuAk0ONgzgRl0EjCQuRCPxOwp13ghsMwt9Gdldujs39qw==}
 
+  sinon@19.0.2:
+    resolution: {integrity: sha512-euuToqM+PjO4UgXeLETsfQiuoyPXlqFezr6YZDFwHR3t4qaX0fZUe1MfPMznTL5f8BWrVS89KduLdMUsxFCO6g==}
+
   sirv@2.0.4:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
@@ -11000,10 +11027,6 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@sinonjs/commons@2.0.0':
-    dependencies:
-      type-detect: 4.0.8
-
   '@sinonjs/commons@3.0.1':
     dependencies:
       type-detect: 4.0.8
@@ -11012,13 +11035,17 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
-  '@sinonjs/samsam@8.0.0':
+  '@sinonjs/fake-timers@13.0.2':
     dependencies:
-      '@sinonjs/commons': 2.0.0
+      '@sinonjs/commons': 3.0.1
+
+  '@sinonjs/samsam@8.0.2':
+    dependencies:
+      '@sinonjs/commons': 3.0.1
       lodash.get: 4.4.2
       type-detect: 4.1.0
 
-  '@sinonjs/text-encoding@0.7.2': {}
+  '@sinonjs/text-encoding@0.7.3': {}
 
   '@slack/bolt@3.22.0':
     dependencies:
@@ -11121,16 +11148,6 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/react@15.0.7(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.25.6
-      '@testing-library/dom': 10.4.0
-      '@types/react-dom': 18.3.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.10
-
   '@testing-library/react@16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
@@ -11376,12 +11393,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.8.0(eslint@9.8.0)(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.8.1(eslint@9.8.0)(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 7.8.0
-      '@typescript-eslint/types': 7.8.0
-      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 7.8.0
+      '@typescript-eslint/scope-manager': 8.8.1
+      '@typescript-eslint/types': 8.8.1
+      '@typescript-eslint/typescript-estree': 8.8.1(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.8.1
       debug: 4.3.7(supports-color@8.1.1)
       eslint: 9.8.0
     optionalDependencies:
@@ -11399,6 +11416,11 @@ snapshots:
       '@typescript-eslint/types': 7.8.0
       '@typescript-eslint/visitor-keys': 7.8.0
 
+  '@typescript-eslint/scope-manager@8.8.1':
+    dependencies:
+      '@typescript-eslint/types': 8.8.1
+      '@typescript-eslint/visitor-keys': 8.8.1
+
   '@typescript-eslint/type-utils@7.8.0(eslint@8.57.1)(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.6.3)
@@ -11415,6 +11437,8 @@ snapshots:
 
   '@typescript-eslint/types@7.8.0': {}
 
+  '@typescript-eslint/types@8.8.1': {}
+
   '@typescript-eslint/typescript-estree@5.62.0(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/types': 5.62.0
@@ -11444,6 +11468,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/typescript-estree@8.8.1(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.8.1
+      '@typescript-eslint/visitor-keys': 8.8.1
+      debug: 4.3.7(supports-color@8.1.1)
+      fast-glob: 3.3.2
+      is-glob: 4.0.3
+      minimatch: 9.0.4
+      semver: 7.6.3
+      ts-api-utils: 1.3.0(typescript@5.6.3)
+    optionalDependencies:
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/utils@5.62.0(eslint@8.57.1)(typescript@5.6.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1)
@@ -11498,6 +11537,11 @@ snapshots:
       '@typescript-eslint/types': 7.8.0
       eslint-visitor-keys: 3.4.3
 
+  '@typescript-eslint/visitor-keys@8.8.1':
+    dependencies:
+      '@typescript-eslint/types': 8.8.1
+      eslint-visitor-keys: 3.4.3
+
   '@ungap/structured-clone@1.2.0': {}
 
   '@webassemblyjs/ast@1.12.1':
@@ -12786,6 +12830,8 @@ snapshots:
 
   diff@5.2.0: {}
 
+  diff@7.0.0: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -15990,17 +16036,17 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
       '@sinonjs/fake-timers': 11.2.2
-      '@sinonjs/text-encoding': 0.7.2
+      '@sinonjs/text-encoding': 0.7.3
       just-extend: 6.2.0
       path-to-regexp: 6.2.2
 
-  nise@6.0.0:
+  nise@6.1.1:
     dependencies:
       '@sinonjs/commons': 3.0.1
-      '@sinonjs/fake-timers': 11.2.2
-      '@sinonjs/text-encoding': 0.7.2
+      '@sinonjs/fake-timers': 13.0.2
+      '@sinonjs/text-encoding': 0.7.3
       just-extend: 6.2.0
-      path-to-regexp: 6.2.2
+      path-to-regexp: 8.2.0
 
   no-case@3.0.4:
     dependencies:
@@ -17479,7 +17525,7 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
       '@sinonjs/fake-timers': 11.2.2
-      '@sinonjs/samsam': 8.0.0
+      '@sinonjs/samsam': 8.0.2
       diff: 5.2.0
       nise: 5.1.9
       supports-color: 7.2.0
@@ -17488,9 +17534,18 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
       '@sinonjs/fake-timers': 11.2.2
-      '@sinonjs/samsam': 8.0.0
+      '@sinonjs/samsam': 8.0.2
       diff: 5.2.0
-      nise: 6.0.0
+      nise: 6.1.1
+      supports-color: 7.2.0
+
+  sinon@19.0.2:
+    dependencies:
+      '@sinonjs/commons': 3.0.1
+      '@sinonjs/fake-timers': 13.0.2
+      '@sinonjs/samsam': 8.0.2
+      diff: 7.0.0
+      nise: 6.1.1
       supports-color: 7.2.0
 
   sirv@2.0.4:
diff --git a/renovate.json b/renovate.json
index 5dbdb963f..9f3c3927b 100644
--- a/renovate.json
+++ b/renovate.json
@@ -96,7 +96,7 @@
     },
     {
       "groupName": "chai - incompatible versions",
-      "matchPackageNames": ["chai"],
+      "matchPackageNames": ["chai", "@types/chai"],
       "allowedVersions": "< 5.0.0"
     },
     {
@@ -106,7 +106,7 @@
     },
     {
       "groupName": "eslint - incompatible versions",
-      "matchPackageNames": ["eslint"],
+      "matchPackageNames": ["eslint", "@types/eslint"],
       "allowedVersions": "< 9.0.0"
     }
   ],

From 9e4c5e660a30472b204ced968729613b61ad6a09 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 11 Oct 2024 12:03:40 +0200
Subject: [PATCH 18/22] Bump Public packages' dependencies (#724)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michał Dudak <michal@mui.com>
---
 packages/mui-base/package.json           | 10 ++---
 packages/mui-base/test/createRenderer.ts |  8 +++-
 pnpm-lock.yaml                           | 49 +++---------------------
 3 files changed, 16 insertions(+), 51 deletions(-)

diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index 0a2c4e0c5..275f1d144 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -41,18 +41,18 @@
     "typescript": "tsc -b tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.6",
+    "@babel/runtime": "^7.25.7",
     "@floating-ui/react": "^0.26.24",
     "@floating-ui/react-dom": "^2.1.2",
     "@floating-ui/utils": "^0.2.8",
-    "@mui/types": "^7.2.17",
-    "@mui/utils": "^6.1.1",
+    "@mui/types": "^7.2.18",
+    "@mui/utils": "^6.1.3",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.2.2"
   },
   "devDependencies": {
-    "@mui/internal-test-utils": "1.0.14",
+    "@mui/internal-test-utils": "1.0.16",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.20",
@@ -68,7 +68,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sinon": "^19.0.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.6.3"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
diff --git a/packages/mui-base/test/createRenderer.ts b/packages/mui-base/test/createRenderer.ts
index a71f56089..d0e237f2c 100644
--- a/packages/mui-base/test/createRenderer.ts
+++ b/packages/mui-base/test/createRenderer.ts
@@ -10,16 +10,20 @@ import {
 
 type BaseUITestRenderer = Omit<Renderer, 'render'> & {
   render: (
-    element: React.ReactElement<unknown>,
+    element: React.ReactElement<DataAttributes>,
     options?: RenderOptions,
   ) => Promise<MuiRenderResult>;
 };
 
+interface DataAttributes {
+  [key: `data-${string}`]: string;
+}
+
 export function createRenderer(globalOptions?: CreateRendererOptions): BaseUITestRenderer {
   const createRendererResult = sharedCreateRenderer(globalOptions);
   const { render: originalRender } = createRendererResult;
 
-  const render = async (element: React.ReactElement<unknown>, options?: RenderOptions) =>
+  const render = async (element: React.ReactElement<DataAttributes>, options?: RenderOptions) =>
     act(async () => {
       const result = await originalRender(element, options);
       await flushMicrotasks();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08ae29252..5c674c693 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -558,10 +558,10 @@ importers:
         specifier: ^0.2.8
         version: 0.2.8
       '@mui/types':
-        specifier: ^7.2.17
+        specifier: ^7.2.18
         version: 7.2.18(@types/react@18.3.10)
       '@mui/utils':
-        specifier: ^6.1.1
+        specifier: ^6.1.3
         version: 6.1.3(@types/react@18.3.10)(react@18.3.1)
       clsx:
         specifier: ^2.1.1
@@ -574,8 +574,8 @@ importers:
         version: 1.2.2(react@18.3.1)
     devDependencies:
       '@mui/internal-test-utils':
-        specifier: 1.0.14
-        version: 1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 1.0.16
+        version: 1.0.16(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/react':
         specifier: ^16.0.1
         version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -622,7 +622,7 @@ importers:
         specifier: ^19.0.2
         version: 19.0.2
       typescript:
-        specifier: ^5.4.5
+        specifier: ^5.6.3
         version: 5.6.3
     publishDirectory: build
 
@@ -1913,12 +1913,6 @@ packages:
   '@mui/internal-scripts@1.0.23':
     resolution: {integrity: sha512-YUaIaZLpeazuw4tWt5G6aKXW9Zxy1fmOe/Xz0XlnbY9pINYEE8A4nNEU2kDZ8dWqgNxp0Hxzp0t/XrCm1EBDQQ==}
 
-  '@mui/internal-test-utils@1.0.14':
-    resolution: {integrity: sha512-yjaSlij39hzWZ643b9gTLLPur8JUF3lQDIs9fwDAgBERhyuhhfV7+6L7xpqAZ7hrkZ7Rr7YqbtiCtSgfgDRG5g==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
   '@mui/internal-test-utils@1.0.16':
     resolution: {integrity: sha512-giAwbpBEr61qZA2+aW1D+ZM9ZOfKdNnc9lfecTPmAoGr+Zg7sBS6OAjdNFUKjFWYFrR6yyZxNPeec8NiE26HBw==}
     peerDependencies:
@@ -10267,39 +10261,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-test-utils@1.0.14(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.25.2)
-      '@babel/preset-typescript': 7.24.7(@babel/core@7.25.2)
-      '@babel/register': 7.24.6(@babel/core@7.25.2)
-      '@babel/runtime': 7.25.6
-      '@emotion/cache': 11.13.1
-      '@emotion/react': 11.13.3(@types/react@18.3.10)(react@18.3.1)
-      '@testing-library/dom': 10.4.0
-      '@testing-library/react': 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
-      chai: 4.5.0
-      chai-dom: 1.12.0(chai@4.5.0)
-      dom-accessibility-api: 0.7.0
-      format-util: 1.0.5
-      fs-extra: 11.2.0
-      jsdom: 24.0.0
-      lodash: 4.17.21
-      mocha: 10.7.3
-      playwright: 1.48.0
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      sinon: 18.0.1
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@types/react'
-      - '@types/react-dom'
-      - bufferutil
-      - canvas
-      - supports-color
-      - utf-8-validate
-
   '@mui/internal-test-utils@1.0.16(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.25.2)

From 9d18ff94ee894a5a7ba392a2fbe8dd76b89b5978 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 13 Oct 2024 20:10:43 +0200
Subject: [PATCH 19/22] [examples] Avoid git diff when playing with examples

---
 examples/.gitignore | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/.gitignore b/examples/.gitignore
index e0f7d4b6d..d11ce49a1 100644
--- a/examples/.gitignore
+++ b/examples/.gitignore
@@ -1 +1,3 @@
-**/yarn.lock
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

From 0b5da679016467bbdd28d60825aad808c0ea576b Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Mon, 14 Oct 2024 12:45:34 +1100
Subject: [PATCH 20/22] =?UTF-8?q?[Checkbox][Switch]=20Split=20data-state?=
 =?UTF-8?q?=20into=20data-checked,=20data-unchecked=E2=80=A6=20(#721)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/index.js                              |  6 ++---
 .../css/index.tsx                             |  6 ++---
 .../system/index.js                           |  6 ++---
 .../system/index.tsx                          |  6 ++---
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../UnstyledCheckboxGroupNested.js            |  6 ++---
 .../UnstyledCheckboxGroupNested.tsx           |  6 ++---
 .../checkbox/UnstyledCheckboxIndeterminate.js |  8 +++---
 .../UnstyledCheckboxIndeterminate.tsx         |  8 +++---
 .../UnstyledCheckboxIndeterminateGroup.js     |  6 ++---
 .../UnstyledCheckboxIndeterminateGroup.tsx    |  6 ++---
 .../css-modules/index.js                      |  6 ++---
 .../css-modules/index.tsx                     |  6 ++---
 .../system/index.js                           |  6 ++---
 .../system/index.tsx                          |  6 ++---
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../css-modules/styles.module.css             |  6 ++---
 .../system/index.js                           |  6 ++---
 .../system/index.tsx                          |  6 ++---
 .../src/Checkbox/Root/CheckboxRoot.test.tsx   | 26 ++++++++++++-------
 .../utils/useCustomStyleHookMapping.ts        | 16 +++++++-----
 .../src/Switch/Root/SwitchRoot.test.tsx       | 20 +++++++++-----
 packages/mui-base/src/Switch/styleHooks.ts    | 12 ++++++++-
 25 files changed, 109 insertions(+), 79 deletions(-)

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
index 7a8dff8d4..6bd20db61 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
@@ -100,7 +100,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -112,7 +112,7 @@ function Styles() {
         color: ${grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -131,7 +131,7 @@ function Styles() {
           outline-offset: 2px;
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
index ad487a037..3d7b05826 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
@@ -100,7 +100,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -112,7 +112,7 @@ function Styles() {
         color: ${grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -131,7 +131,7 @@ function Styles() {
           outline-offset: 2px;
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
index 22affdf91..1033cfc87 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
@@ -98,7 +98,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -132,8 +132,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
index d3e65b1c7..a83acafc0 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
@@ -98,7 +98,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -132,8 +132,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
index f058738f5..577e7db15 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
@@ -104,7 +104,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+          'h-full inline-block invisible data-[checked]:visible text-gray-100',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
index 5c0615461..3169ca830 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
@@ -99,7 +99,7 @@ const Indicator = React.forwardRef<HTMLSpanElement, BaseCheckbox.Indicator.Props
         ref={ref}
         className={(state) =>
           classNames(
-            'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+            'h-full inline-block invisible data-[checked]:visible text-gray-100',
             typeof props.className === 'function'
               ? props.className(state)
               : props.className,
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
index ffe0f6883..c70d40384 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
@@ -89,7 +89,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -141,8 +141,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
index 2a212b9e9..13326baf0 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
@@ -89,7 +89,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -143,8 +143,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js
index 167666851..786d49acc 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js
@@ -52,8 +52,8 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state='checked'],
-    &[data-state='mixed'] {
+    &[data-checked],
+    &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -84,8 +84,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx
index 2a41d4853..3b9e87f9a 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx
@@ -52,8 +52,8 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state='checked'],
-    &[data-state='mixed'] {
+    &[data-checked],
+    &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -86,8 +86,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
index d80db2e23..44234bb4c 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
@@ -101,7 +101,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -153,8 +153,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
index 4f8cb9e50..f6907fe19 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
@@ -101,7 +101,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -155,8 +155,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js
index 1b5d63a53..b4a264dad 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js
@@ -92,7 +92,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -104,7 +104,7 @@ function Styles() {
         color: ${isDarkMode ? grey[900] : grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -118,7 +118,7 @@ function Styles() {
           border-color: ${grey[500]};
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx
index 130758f8f..758acd41b 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx
@@ -92,7 +92,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -104,7 +104,7 @@ function Styles() {
         color: ${isDarkMode ? grey[900] : grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -118,7 +118,7 @@ function Styles() {
           border-color: ${grey[500]};
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
index 517b2c262..d5004c166 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
@@ -66,7 +66,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -100,8 +100,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
index f3990ce3c..599539a6e 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
@@ -66,7 +66,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -100,8 +100,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
index d85f45e48..f27426ca2 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
@@ -76,7 +76,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+          'h-full inline-block invisible data-[checked]:visible text-gray-100',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
index 43d903023..595509db4 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
@@ -71,7 +71,7 @@ const Indicator = React.forwardRef<HTMLSpanElement, BaseCheckbox.Indicator.Props
         ref={ref}
         className={(state) =>
           classNames(
-            'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+            'h-full inline-block invisible data-[checked]:visible text-gray-100',
             typeof props.className === 'function'
               ? props.className(state)
               : props.className,
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css
index d0b25a599..37dde94ec 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css
@@ -42,12 +42,12 @@
     }
   }
 
-  &[data-state='checked'] {
+  &[data-checked] {
     border: none;
     background: var(--cyan-500);
   }
 
-  &[data-state='checked']:not([data-disabled]):hover {
+  &[data-checked]:not([data-disabled]):hover {
     background: var(--cyan-700);
   }
 }
@@ -73,7 +73,7 @@
   }
 }
 
-.thumb[data-state='checked'] {
+.thumb[data-checked] {
   left: 18px;
   background-color: #fff;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js
index bac765760..12d3ea815 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js
@@ -72,12 +72,12 @@ const Switch = styled(BaseSwitch.Root)(
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  &[data-state="checked"] {
+  &[data-checked] {
     border: none;
     background: ${blue[500]};
   }
 
-  &[data-state="checked"]:not([data-disabled]):hover {
+  &[data-checked]:not([data-disabled]):hover {
     background: ${blue[700]};
   }
   `,
@@ -101,7 +101,7 @@ const Thumb = styled(BaseSwitch.Thumb)(
       theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
     };
 
-    &[data-state="checked"] {
+    &[data-checked] {
       left: 18px;
       background-color: #fff;
       box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx
index bac765760..12d3ea815 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx
@@ -72,12 +72,12 @@ const Switch = styled(BaseSwitch.Root)(
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  &[data-state="checked"] {
+  &[data-checked] {
     border: none;
     background: ${blue[500]};
   }
 
-  &[data-state="checked"]:not([data-disabled]):hover {
+  &[data-checked]:not([data-disabled]):hover {
     background: ${blue[700]};
   }
   `,
@@ -101,7 +101,7 @@ const Thumb = styled(BaseSwitch.Thumb)(
       theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
     };
 
-    &[data-state="checked"] {
+    &[data-checked] {
       left: 18px;
       background-color: #fff;
       box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
index 5f136f54b..169a0f38a 100644
--- a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
+++ b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
@@ -17,7 +17,7 @@ describe('<Checkbox.Root />', () => {
 
   describe('extra props', () => {
     it('can override the built-in attributes', async () => {
-      const { container } = await render(<Checkbox.Root data-state="checked" role="switch" />);
+      const { container } = await render(<Checkbox.Root role="switch" />);
       expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'switch');
     });
   });
@@ -156,11 +156,6 @@ describe('<Checkbox.Root />', () => {
       expect(checkbox).to.have.attribute('aria-checked', 'mixed');
     });
 
-    it('should not set the `data-indeterminate` attribute', async () => {
-      const { getAllByRole } = await render(<Checkbox.Root indeterminate />);
-      expect(getAllByRole('checkbox')[0]).to.not.have.attribute('data-indeterminate', 'true');
-    });
-
     it('should not have the aria attribute when `indeterminate` is not set', async () => {
       const { getAllByRole } = await render(<Checkbox.Root />);
       expect(getAllByRole('checkbox')[0]).not.to.have.attribute('aria-checked', 'mixed');
@@ -185,7 +180,7 @@ describe('<Checkbox.Root />', () => {
   });
 
   it('should place the style hooks on the root and the indicator', async () => {
-    const { getAllByRole } = await render(
+    const { getAllByRole, setProps } = await render(
       <Checkbox.Root defaultChecked disabled readOnly required>
         <Checkbox.Indicator />
       </Checkbox.Root>,
@@ -194,15 +189,28 @@ describe('<Checkbox.Root />', () => {
     const [checkbox] = getAllByRole('checkbox');
     const indicator = checkbox.querySelector('span');
 
-    expect(checkbox).to.have.attribute('data-state', 'checked');
+    expect(checkbox).to.have.attribute('data-checked', '');
+    expect(checkbox).not.to.have.attribute('data-unchecked');
+
     expect(checkbox).to.have.attribute('data-disabled', 'true');
     expect(checkbox).to.have.attribute('data-readonly', 'true');
     expect(checkbox).to.have.attribute('data-required', 'true');
 
-    expect(indicator).to.have.attribute('data-state', 'checked');
+    expect(indicator).to.have.attribute('data-checked', '');
+    expect(indicator).not.to.have.attribute('data-unchecked');
+
     expect(indicator).to.have.attribute('data-disabled', 'true');
     expect(indicator).to.have.attribute('data-readonly', 'true');
     expect(indicator).to.have.attribute('data-required', 'true');
+
+    setProps({ disabled: false, readOnly: false });
+    fireEvent.click(checkbox);
+
+    expect(checkbox).to.have.attribute('data-unchecked', '');
+    expect(checkbox).not.to.have.attribute('data-checked');
+
+    expect(indicator).to.have.attribute('data-unchecked', '');
+    expect(indicator).not.to.have.attribute('data-checked');
   });
 
   it('should set the name attribute on the input', async () => {
diff --git a/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts b/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts
index d0b604d65..7b2d06cfc 100644
--- a/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts
+++ b/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts
@@ -6,16 +6,20 @@ import type { CheckboxRoot } from '../Root/CheckboxRoot';
 export function useCustomStyleHookMapping(ownerState: CheckboxRoot.OwnerState) {
   return React.useMemo<CustomStyleHookMapping<typeof ownerState>>(
     () => ({
-      // `data-state="mixed"` is used to style the checkbox when it's indeterminate
-      indeterminate: () => null,
-      checked(value) {
-        let state = value ? 'checked' : 'unchecked';
+      checked(value): Record<string, string> {
         if (ownerState.indeterminate) {
-          state = 'mixed';
+          // `data-indeterminate` is already handled by the `indeterminate` prop.
+          return {};
+        }
+
+        if (value) {
+          return {
+            'data-checked': '',
+          };
         }
 
         return {
-          'data-state': state,
+          'data-unchecked': '',
         };
       },
     }),
diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
index ecfc91645..110ee301e 100644
--- a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
+++ b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, screen } from '@mui/internal-test-utils';
+import { act, fireEvent, screen } from '@mui/internal-test-utils';
 import * as Switch from '@base_ui/react/Switch';
 import { userEvent } from '@testing-library/user-event';
 import { describeConformance, createRenderer } from '#test-utils';
@@ -72,9 +72,8 @@ describe('<Switch.Root />', () => {
 
   describe('extra props', () => {
     it('should override the built-in attributes', async () => {
-      await render(<Switch.Root data-state="checked" role="checkbox" data-testid="switch" />);
+      await render(<Switch.Root role="checkbox" data-testid="switch" />);
       expect(screen.getByTestId('switch')).to.have.attribute('role', 'checkbox');
-      expect(screen.getByTestId('switch')).to.have.attribute('data-state', 'checked');
     });
   });
 
@@ -247,7 +246,7 @@ describe('<Switch.Root />', () => {
   });
 
   it('should place the style hooks on the root and the thumb', async () => {
-    await render(
+    const { setProps } = await render(
       <Switch.Root defaultChecked disabled readOnly required>
         <Switch.Thumb data-testid="thumb" />
       </Switch.Root>,
@@ -256,15 +255,24 @@ describe('<Switch.Root />', () => {
     const switchElement = screen.getByRole('switch');
     const thumb = screen.getByTestId('thumb');
 
-    expect(switchElement).to.have.attribute('data-state', 'checked');
+    expect(switchElement).to.have.attribute('data-checked', '');
     expect(switchElement).to.have.attribute('data-disabled', 'true');
     expect(switchElement).to.have.attribute('data-readonly', 'true');
     expect(switchElement).to.have.attribute('data-required', 'true');
 
-    expect(thumb).to.have.attribute('data-state', 'checked');
+    expect(thumb).to.have.attribute('data-checked', '');
     expect(thumb).to.have.attribute('data-disabled', 'true');
     expect(thumb).to.have.attribute('data-readonly', 'true');
     expect(thumb).to.have.attribute('data-required', 'true');
+
+    setProps({ disabled: false, readOnly: false });
+    fireEvent.click(switchElement);
+
+    expect(switchElement).to.have.attribute('data-unchecked', '');
+    expect(switchElement).not.to.have.attribute('data-checked');
+
+    expect(thumb).to.have.attribute('data-unchecked', '');
+    expect(thumb).not.to.have.attribute('data-checked');
   });
 
   it('should set the name attribute on the input', async () => {
diff --git a/packages/mui-base/src/Switch/styleHooks.ts b/packages/mui-base/src/Switch/styleHooks.ts
index 0c8fd40ab..c95bcd792 100644
--- a/packages/mui-base/src/Switch/styleHooks.ts
+++ b/packages/mui-base/src/Switch/styleHooks.ts
@@ -2,5 +2,15 @@ import type { SwitchRoot } from './Root/SwitchRoot';
 import type { CustomStyleHookMapping } from '../utils/getStyleHookProps';
 
 export const styleHookMapping: CustomStyleHookMapping<SwitchRoot.OwnerState> = {
-  checked: (value) => ({ 'data-state': value ? 'checked' : 'unchecked' }),
+  checked(value): Record<string, string> {
+    if (value) {
+      return {
+        'data-checked': '',
+      };
+    }
+
+    return {
+      'data-unchecked': '',
+    };
+  },
 };

From d86a97c4daa83ea0fe3ccb3f4456f243e1cb19ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Mon, 14 Oct 2024 09:26:42 +0200
Subject: [PATCH 21/22] [core] Improve DX of importing Base UI components
 (#700)

---
 docs/app/DocsProviders.tsx                    |  2 +-
 .../app/experiments/collapsible-accordion.tsx |  2 +-
 docs/app/experiments/collapsible-framer.tsx   |  2 +-
 .../collapsible-hidden-until-found.tsx        |  2 +-
 docs/app/experiments/collapsible.tsx          |  2 +-
 docs/app/experiments/dialog.tsx               |  2 +-
 docs/app/experiments/menu-anchor-el.tsx       |  2 +-
 docs/app/experiments/menu-anchor-ref.tsx      |  2 +-
 docs/app/experiments/progress.tsx             |  2 +-
 .../slider-change-committed-lag.tsx           |  2 +-
 docs/app/experiments/slider-marks.tsx         |  5 +-
 docs/app/experiments/slider-template.tsx      |  2 +-
 docs/app/experiments/slider-tooltip.tsx       |  4 +-
 docs/app/experiments/slider.tsx               |  5 +-
 docs/app/experiments/tabs.tsx                 |  2 +-
 docs/app/experiments/tooltip.tsx              |  2 +-
 docs/data/api/alert-dialog-backdrop.json      |  2 +-
 docs/data/api/alert-dialog-close.json         |  2 +-
 docs/data/api/alert-dialog-description.json   |  2 +-
 docs/data/api/alert-dialog-popup.json         |  2 +-
 docs/data/api/alert-dialog-root.json          |  2 +-
 docs/data/api/alert-dialog-title.json         |  2 +-
 docs/data/api/alert-dialog-trigger.json       |  2 +-
 docs/data/api/checkbox-group-root.json        |  2 +-
 docs/data/api/checkbox-indicator.json         |  2 +-
 docs/data/api/checkbox-root.json              |  2 +-
 docs/data/api/collapsible-content.json        |  2 +-
 docs/data/api/collapsible-root.json           |  2 +-
 docs/data/api/collapsible-trigger.json        |  2 +-
 docs/data/api/dialog-backdrop.json            |  2 +-
 docs/data/api/dialog-close.json               |  4 +-
 docs/data/api/dialog-description.json         |  2 +-
 docs/data/api/dialog-popup.json               |  4 +-
 docs/data/api/dialog-root.json                |  2 +-
 docs/data/api/dialog-title.json               |  4 +-
 docs/data/api/dialog-trigger.json             |  2 +-
 docs/data/api/field-control.json              |  4 +-
 docs/data/api/field-description.json          |  2 +-
 docs/data/api/field-error.json                |  2 +-
 docs/data/api/field-label.json                |  2 +-
 docs/data/api/field-root.json                 |  2 +-
 docs/data/api/field-validity.json             |  2 +-
 docs/data/api/fieldset-legend.json            |  2 +-
 docs/data/api/fieldset-root.json              |  2 +-
 docs/data/api/form-root.json                  |  2 +-
 docs/data/api/menu-arrow.json                 |  2 +-
 .../api/menu-checkbox-item-indicator.json     |  2 +-
 docs/data/api/menu-checkbox-item.json         |  2 +-
 docs/data/api/menu-group-label.json           |  2 +-
 docs/data/api/menu-group.json                 |  2 +-
 docs/data/api/menu-item.json                  |  2 +-
 docs/data/api/menu-popup.json                 |  2 +-
 docs/data/api/menu-positioner.json            |  2 +-
 docs/data/api/menu-radio-group.json           |  2 +-
 docs/data/api/menu-radio-item-indicator.json  |  2 +-
 docs/data/api/menu-radio-item.json            |  4 +-
 docs/data/api/menu-root.json                  |  2 +-
 docs/data/api/menu-separator.json             |  4 +-
 docs/data/api/menu-trigger.json               |  2 +-
 docs/data/api/number-field-decrement.json     |  2 +-
 docs/data/api/number-field-group.json         |  2 +-
 docs/data/api/number-field-increment.json     |  2 +-
 docs/data/api/number-field-input.json         |  2 +-
 docs/data/api/number-field-root.json          |  2 +-
 .../api/number-field-scrub-area-cursor.json   |  2 +-
 docs/data/api/number-field-scrub-area.json    |  2 +-
 docs/data/api/popover-arrow.json              |  2 +-
 docs/data/api/popover-backdrop.json           |  2 +-
 docs/data/api/popover-close.json              |  2 +-
 docs/data/api/popover-description.json        |  2 +-
 docs/data/api/popover-popup.json              |  2 +-
 docs/data/api/popover-positioner.json         |  2 +-
 docs/data/api/popover-root.json               |  2 +-
 docs/data/api/popover-title.json              |  2 +-
 docs/data/api/popover-trigger.json            |  2 +-
 docs/data/api/preview-card-arrow.json         |  2 +-
 docs/data/api/preview-card-backdrop.json      |  2 +-
 docs/data/api/preview-card-popup.json         |  2 +-
 docs/data/api/preview-card-positioner.json    |  2 +-
 docs/data/api/preview-card-root.json          |  2 +-
 docs/data/api/preview-card-trigger.json       |  2 +-
 docs/data/api/progress-indicator.json         |  2 +-
 docs/data/api/progress-root.json              |  2 +-
 docs/data/api/progress-track.json             |  2 +-
 docs/data/api/radio-group-root.json           |  2 +-
 docs/data/api/radio-indicator.json            |  2 +-
 docs/data/api/radio-root.json                 |  2 +-
 docs/data/api/separator-root.json             |  2 +-
 docs/data/api/slider-control.json             |  2 +-
 docs/data/api/slider-indicator.json           |  2 +-
 docs/data/api/slider-output.json              |  2 +-
 docs/data/api/slider-root.json                |  2 +-
 docs/data/api/slider-thumb.json               |  4 +-
 docs/data/api/slider-track.json               |  4 +-
 docs/data/api/switch-root.json                |  2 +-
 docs/data/api/switch-thumb.json               |  4 +-
 docs/data/api/tab-indicator.json              |  2 +-
 docs/data/api/tab-panel.json                  |  2 +-
 docs/data/api/tab.json                        |  2 +-
 docs/data/api/tabs-list.json                  |  2 +-
 docs/data/api/tabs-root.json                  |  2 +-
 docs/data/api/tooltip-arrow.json              |  2 +-
 docs/data/api/tooltip-popup.json              |  2 +-
 docs/data/api/tooltip-positioner.json         |  2 +-
 docs/data/api/tooltip-provider.json           |  2 +-
 docs/data/api/tooltip-root.json               |  2 +-
 docs/data/api/tooltip-trigger.json            |  2 +-
 .../css-modules/index.js                      |  2 +-
 .../css-modules/index.tsx                     |  2 +-
 .../AlertDialogIntroduction/system/index.js   |  2 +-
 .../AlertDialogIntroduction/system/index.tsx  |  2 +-
 .../AlertDialogIntroduction/tailwind/index.js |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../AlertDialogWithTransitions.js             |  2 +-
 .../AlertDialogWithTransitions.tsx            |  2 +-
 .../alert-dialog/NestedAlertDialogs.js        |  2 +-
 .../alert-dialog/NestedAlertDialogs.tsx       |  2 +-
 .../css/index.js                              |  6 +--
 .../css/index.tsx                             |  6 +--
 .../system/index.js                           |  6 +--
 .../system/index.tsx                          |  6 +--
 .../tailwind/index.js                         |  6 +--
 .../tailwind/index.tsx                        |  6 +--
 .../UnstyledCheckboxGroupNested.js            |  6 +--
 .../UnstyledCheckboxGroupNested.tsx           |  6 +--
 .../checkbox-group/checkbox-group.mdx         |  2 +-
 .../checkbox/UnstyledCheckboxIndeterminate.js |  2 +-
 .../UnstyledCheckboxIndeterminate.tsx         |  2 +-
 .../UnstyledCheckboxIndeterminateGroup.js     |  2 +-
 .../UnstyledCheckboxIndeterminateGroup.tsx    |  2 +-
 .../css-modules/index.js                      |  2 +-
 .../css-modules/index.tsx                     |  2 +-
 .../system/index.js                           |  2 +-
 .../system/index.tsx                          |  2 +-
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../collapsible/CssAnimatedCollapsible.js     |  2 +-
 .../collapsible/CssAnimatedCollapsible.tsx    |  2 +-
 .../collapsible/CssTransitionCollapsible.js   |  2 +-
 .../collapsible/CssTransitionCollapsible.tsx  |  2 +-
 .../UnstyledCollapsibleIntroduction.js        |  2 +-
 .../UnstyledCollapsibleIntroduction.tsx       |  2 +-
 .../dialog/DialogWithTransitions.js           |  2 +-
 .../dialog/DialogWithTransitions.tsx          |  2 +-
 docs/data/components/dialog/NestedDialogs.js  |  2 +-
 docs/data/components/dialog/NestedDialogs.tsx |  2 +-
 .../css-modules/index.js                      |  2 +-
 .../css-modules/index.tsx                     |  2 +-
 .../system/index.js                           |  2 +-
 .../system/index.tsx                          |  2 +-
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../components/field/UnstyledFieldAsync.js    |  2 +-
 .../components/field/UnstyledFieldAsync.tsx   |  2 +-
 .../UnstyledFieldIntroduction/system/index.js |  2 +-
 .../system/index.tsx                          |  2 +-
 .../components/field/UnstyledFieldPassword.js |  2 +-
 .../field/UnstyledFieldPassword.tsx           |  2 +-
 .../field/UnstyledFieldServerError.js         |  2 +-
 .../field/UnstyledFieldServerError.tsx        |  2 +-
 .../system/index.js                           |  4 +-
 .../system/index.tsx                          |  4 +-
 .../form/FormIntroduction/system/index.js     |  6 +--
 .../form/FormIntroduction/system/index.tsx    |  6 +--
 docs/data/components/form/form.mdx            |  4 +-
 docs/data/components/menu/CheckboxItems.js    |  2 +-
 docs/data/components/menu/CheckboxItems.tsx   |  2 +-
 .../menu/MenuIntroduction/css-modules/Menu.js |  2 +-
 .../MenuIntroduction/css-modules/Menu.tsx     |  2 +-
 .../menu/MenuIntroduction/system/index.js     |  2 +-
 .../menu/MenuIntroduction/system/index.tsx    |  2 +-
 .../menu/MenuIntroduction/tailwind/index.js   |  2 +-
 .../menu/MenuIntroduction/tailwind/index.tsx  |  2 +-
 docs/data/components/menu/NestedMenu.js       |  2 +-
 docs/data/components/menu/NestedMenu.tsx      |  2 +-
 docs/data/components/menu/RadioItems.js       |  2 +-
 docs/data/components/menu/RadioItems.tsx      |  2 +-
 .../number-field/UnstyledNumberFieldFormat.js |  2 +-
 .../UnstyledNumberFieldFormat.tsx             |  2 +-
 .../css-modules/index.js                      |  2 +-
 .../css-modules/index.tsx                     |  2 +-
 .../system/index.js                           |  4 +-
 .../system/index.tsx                          |  4 +-
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../number-field/UnstyledNumberFieldScrub.js  |  2 +-
 .../number-field/UnstyledNumberFieldScrub.tsx |  2 +-
 .../UnstyledNumberFieldWheelScrub.js          |  2 +-
 .../UnstyledNumberFieldWheelScrub.tsx         |  2 +-
 .../system/index.js                           |  2 +-
 .../system/index.tsx                          |  2 +-
 .../popover/UnstyledPopoverTransition.js      |  2 +-
 .../popover/UnstyledPopoverTransition.tsx     |  2 +-
 .../system/index.js                           |  2 +-
 .../system/index.tsx                          |  2 +-
 .../UnstyledPreviewCardTransition.js          |  2 +-
 .../UnstyledPreviewCardTransition.tsx         |  2 +-
 .../progress/IndeterminateProgress.js         |  2 +-
 .../progress/IndeterminateProgress.tsx        |  2 +-
 docs/data/components/progress/RtlProgress.js  |  2 +-
 docs/data/components/progress/RtlProgress.tsx |  2 +-
 .../css-modules/index.js                      |  2 +-
 .../css-modules/index.tsx                     |  2 +-
 .../system/index.js                           |  2 +-
 .../system/index.tsx                          |  2 +-
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../system/index.js                           |  4 +-
 .../system/index.tsx                          |  4 +-
 .../separator/SeparatorIntroduction.js        |  2 +-
 .../separator/SeparatorIntroduction.tsx       |  2 +-
 docs/data/components/slider/RangeSlider.js    |  2 +-
 docs/data/components/slider/RangeSlider.tsx   |  2 +-
 docs/data/components/slider/RtlSlider.js      |  2 +-
 docs/data/components/slider/RtlSlider.tsx     |  2 +-
 .../css-modules/index.js                      |  2 +-
 .../css-modules/index.tsx                     |  2 +-
 .../system/index.js                           |  2 +-
 .../system/index.tsx                          |  2 +-
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 docs/data/components/slider/VerticalSlider.js |  2 +-
 .../data/components/slider/VerticalSlider.tsx |  2 +-
 .../css-modules/index.js                      |  2 +-
 .../css-modules/index.tsx                     |  2 +-
 .../system/index.js                           |  2 +-
 .../system/index.tsx                          |  2 +-
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 docs/data/components/tabs/IndicatorBubble.js  |  2 +-
 docs/data/components/tabs/IndicatorBubble.tsx |  2 +-
 .../components/tabs/IndicatorUnderline.js     |  2 +-
 .../components/tabs/IndicatorUnderline.tsx    |  2 +-
 .../components/tabs/KeyboardNavigation.js     |  2 +-
 .../components/tabs/KeyboardNavigation.tsx    |  2 +-
 .../css-modules/index.js                      |  2 +-
 .../css-modules/index.tsx                     |  2 +-
 .../UnstyledTabsIntroduction/system/index.js  |  2 +-
 .../UnstyledTabsIntroduction/system/index.tsx |  2 +-
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../components/tabs/UnstyledTabsRouting.js    |  2 +-
 .../components/tabs/UnstyledTabsRouting.tsx   |  2 +-
 .../tooltip/UnstyledTooltipDelayGroup.js      |  2 +-
 .../tooltip/UnstyledTooltipDelayGroup.tsx     |  2 +-
 .../tooltip/UnstyledTooltipFollowCursor.js    |  2 +-
 .../tooltip/UnstyledTooltipFollowCursor.tsx   |  2 +-
 .../system/index.js                           |  2 +-
 .../system/index.tsx                          |  2 +-
 .../tooltip/UnstyledTooltipTransition.js      |  2 +-
 .../tooltip/UnstyledTooltipTransition.tsx     |  2 +-
 .../accessibility/FocusRing.js                |  2 +-
 .../accessibility/FocusRing.tsx               |  2 +-
 .../PackageManagerSnippetCode.tsx             |  2 +-
 .../PackageManagerSnippetRoot.tsx             |  2 +-
 docs/src/components/DocsVersionSelector.tsx   |  2 +-
 .../content/InstallationInstructions.tsx      |  2 +-
 docs/src/components/demo/Demo.tsx             |  2 +-
 docs/src/components/demo/DemoFileSelector.tsx |  2 +-
 docs/src/design-system/Tooltip.tsx            |  2 +-
 .../Backdrop/AlertDialogBackdrop.test.tsx     |  2 +-
 .../Close/AlertDialogClose.test.tsx           |  2 +-
 .../AlertDialogDescription.test.tsx           |  2 +-
 .../Popup/AlertDialogPopup.test.tsx           |  2 +-
 .../Title/AlertDialogTitle.test.tsx           |  2 +-
 .../Trigger/AlertDialogTrigger.test.tsx       |  2 +-
 .../mui-base/src/AlertDialog/index.barrel.ts  |  7 ---
 .../mui-base/src/AlertDialog/index.parts.ts   |  7 +++
 packages/mui-base/src/AlertDialog/index.ts    |  8 +--
 .../Indicator/CheckboxIndicator.test.tsx      |  2 +-
 .../src/Checkbox/Root/CheckboxRoot.test.tsx   |  2 +-
 .../mui-base/src/Checkbox/index.barrel.ts     |  2 -
 packages/mui-base/src/Checkbox/index.parts.ts |  2 +
 packages/mui-base/src/Checkbox/index.ts       |  3 +-
 .../Parent/useCheckboxGroupParent.test.tsx    |  4 +-
 .../Root/CheckboxGroupRoot.test.tsx           |  4 +-
 .../src/CheckboxGroup/index.barrel.ts         |  1 -
 .../mui-base/src/CheckboxGroup/index.parts.ts |  1 +
 packages/mui-base/src/CheckboxGroup/index.ts  |  2 +-
 .../Content/CollapsibleContent.test.tsx       |  4 +-
 .../Collapsible/Root/CollapsibleRoot.test.tsx |  2 +-
 .../Trigger/CollapsibleTrigger.test.tsx       |  4 +-
 .../mui-base/src/Collapsible/index.parts.ts   |  3 ++
 packages/mui-base/src/Collapsible/index.ts    | 10 +---
 .../Dialog/Backdrop/DialogBackdrop.test.tsx   |  2 +-
 .../src/Dialog/Close/DialogClose.test.tsx     |  2 +-
 .../Description/DialogDescription.test.tsx    |  2 +-
 .../src/Dialog/Popup/DialogPopup.test.tsx     |  2 +-
 .../src/Dialog/Root/DialogRoot.test.tsx       |  2 +-
 .../src/Dialog/Title/DialogTitle.test.tsx     |  2 +-
 .../src/Dialog/Trigger/DialogTrigger.test.tsx |  2 +-
 packages/mui-base/src/Dialog/index.barrel.ts  |  7 ---
 packages/mui-base/src/Dialog/index.parts.ts   |  7 +++
 packages/mui-base/src/Dialog/index.ts         |  8 +--
 .../src/Field/Control/FieldControl.test.tsx   |  2 +-
 .../Description/FieldDescription.test.tsx     | 14 +++---
 .../src/Field/Error/FieldError.test.tsx       |  2 +-
 .../src/Field/Label/FieldLabel.test.tsx       | 14 +++---
 .../src/Field/Root/FieldRoot.test.tsx         | 14 +++---
 .../src/Field/Validity/FieldValidity.test.tsx |  2 +-
 packages/mui-base/src/Field/index.barrel.ts   |  8 ---
 packages/mui-base/src/Field/index.parts.ts    |  8 +++
 packages/mui-base/src/Field/index.ts          |  9 +---
 .../Fieldset/Legend/FieldsetLegend.test.tsx   |  2 +-
 .../src/Fieldset/Root/FieldsetRoot.test.tsx   |  2 +-
 .../mui-base/src/Fieldset/index.barrel.ts     |  2 -
 packages/mui-base/src/Fieldset/index.parts.ts |  2 +
 packages/mui-base/src/Fieldset/index.ts       |  3 +-
 .../mui-base/src/Form/Root/FormRoot.test.tsx  |  4 +-
 packages/mui-base/src/Form/index.barrel.ts    |  1 -
 packages/mui-base/src/Form/index.parts.ts     |  1 +
 packages/mui-base/src/Form/index.ts           |  2 +-
 .../src/Menu/Arrow/MenuArrow.test.tsx         |  2 +-
 .../CheckboxItem/MenuCheckboxItem.test.tsx    |  2 +-
 .../MenuCheckboxItemIndicator.test.tsx        |  2 +-
 .../src/Menu/Group/MenuGroup.test.tsx         |  2 +-
 .../Menu/GroupLabel/MenuGroupLabel.test.tsx   |  2 +-
 .../mui-base/src/Menu/Item/MenuItem.test.tsx  |  2 +-
 .../src/Menu/Popup/MenuPopup.test.tsx         |  2 +-
 .../Menu/Positioner/MenuPositioner.test.tsx   |  2 +-
 .../Menu/RadioGroup/MenuRadioGroup.test.tsx   |  2 +-
 .../src/Menu/RadioItem/MenuRadioItem.test.tsx |  2 +-
 .../MenuRadioItemIndicator.test.tsx           |  2 +-
 .../mui-base/src/Menu/Root/MenuRoot.test.tsx  |  2 +-
 .../src/Menu/Trigger/MenuTrigger.test.tsx     |  2 +-
 packages/mui-base/src/Menu/index.barrel.ts    | 14 ------
 packages/mui-base/src/Menu/index.parts.ts     | 15 ++++++
 packages/mui-base/src/Menu/index.ts           | 16 +-----
 .../Decrement/NumberFieldDecrement.test.tsx   |  2 +-
 .../Group/NumberFieldGroup.test.tsx           |  2 +-
 .../Increment/NumberFieldIncrement.test.tsx   |  2 +-
 .../Input/NumberFieldInput.test.tsx           |  2 +-
 .../NumberField/Root/NumberFieldRoot.test.tsx |  2 +-
 .../ScrubArea/NumberFieldScrubArea.test.tsx   |  2 +-
 .../NumberFieldScrubAreaCursor.test.tsx       |  2 +-
 .../mui-base/src/NumberField/index.barrel.ts  |  7 ---
 .../mui-base/src/NumberField/index.parts.ts   |  7 +++
 packages/mui-base/src/NumberField/index.ts    |  8 +--
 .../src/Popover/Arrow/PopoverArrow.test.tsx   |  2 +-
 .../Popover/Backdrop/PopoverBackdrop.test.tsx |  2 +-
 .../src/Popover/Close/PopoverClose.test.tsx   |  2 +-
 .../Description/PopoverDescription.test.tsx   |  2 +-
 .../src/Popover/Popup/PopoverPopup.test.tsx   |  2 +-
 .../Positioner/PopoverPositioner.test.tsx     |  2 +-
 .../src/Popover/Root/PopoverRoot.test.tsx     |  2 +-
 .../src/Popover/Title/PopoverTitle.test.tsx   |  2 +-
 .../Popover/Trigger/PopoverTrigger.test.tsx   |  2 +-
 packages/mui-base/src/Popover/index.barrel.ts |  9 ----
 packages/mui-base/src/Popover/index.parts.ts  |  9 ++++
 packages/mui-base/src/Popover/index.ts        | 10 +---
 .../Arrow/PreviewCardArrow.test.tsx           |  2 +-
 .../Backdrop/PreviewCardBackdrop.test.tsx     |  2 +-
 .../Popup/PreviewCardPopup.test.tsx           |  2 +-
 .../Positioner/PreviewCardPositioner.test.tsx |  2 +-
 .../PreviewCard/Root/PreviewCardRoot.test.tsx |  2 +-
 .../Trigger/PreviewCardTrigger.test.tsx       |  2 +-
 .../mui-base/src/PreviewCard/index.barrel.ts  |  6 ---
 .../mui-base/src/PreviewCard/index.parts.ts   |  6 +++
 packages/mui-base/src/PreviewCard/index.ts    |  7 +--
 .../Indicator/ProgressIndicator.test.tsx      |  2 +-
 .../src/Progress/Root/ProgressRoot.test.tsx   |  2 +-
 .../src/Progress/Track/ProgressTrack.test.tsx |  2 +-
 .../mui-base/src/Progress/index.barrel.ts     |  8 ---
 packages/mui-base/src/Progress/index.parts.ts |  8 +++
 packages/mui-base/src/Progress/index.ts       |  9 +---
 .../Radio/Indicator/RadioIndicator.test.tsx   |  2 +-
 .../src/Radio/Root/RadioRoot.test.tsx         |  2 +-
 packages/mui-base/src/Radio/index.barrel.ts   |  2 -
 packages/mui-base/src/Radio/index.parts.ts    |  2 +
 packages/mui-base/src/Radio/index.ts          |  3 +-
 .../RadioGroup/Root/RadioGroupRoot.test.tsx   |  4 +-
 .../mui-base/src/RadioGroup/index.barrel.ts   |  1 -
 .../mui-base/src/RadioGroup/index.parts.ts    |  1 +
 packages/mui-base/src/RadioGroup/index.ts     |  2 +-
 .../src/Separator/Root/SeparatorRoot.test.tsx |  2 +-
 .../mui-base/src/Separator/index.barrel.ts    |  1 -
 .../mui-base/src/Separator/index.parts.ts     |  1 +
 packages/mui-base/src/Separator/index.ts      |  2 +-
 .../src/Slider/Control/SliderControl.test.tsx |  4 +-
 .../Slider/Indicator/SliderIndicator.test.tsx |  4 +-
 .../src/Slider/Output/SliderOutput.test.tsx   |  4 +-
 .../src/Slider/Root/SliderRoot.test.tsx       |  2 +-
 .../src/Slider/Thumb/SliderThumb.test.tsx     |  4 +-
 .../src/Slider/Track/SliderTrack.test.tsx     |  4 +-
 .../{index.barrel.ts => index.parts.ts}       | 29 +++++++----
 packages/mui-base/src/Slider/index.ts         | 50 +------------------
 .../src/Switch/Root/SwitchRoot.test.tsx       |  2 +-
 .../src/Switch/Thumb/SwitchThumb.test.tsx     |  2 +-
 packages/mui-base/src/Switch/index.barrel.ts  |  2 -
 packages/mui-base/src/Switch/index.parts.ts   |  2 +
 packages/mui-base/src/Switch/index.ts         |  3 +-
 .../mui-base/src/Tabs/Root/TabsRoot.test.tsx  |  2 +-
 packages/mui-base/src/Tabs/Tab/Tab.test.tsx   |  2 +-
 .../mui-base/src/Tabs/Tab/useTab.test.tsx     |  2 +-
 .../Tabs/TabIndicator/TabIndicator.test.tsx   |  2 +-
 .../src/Tabs/TabPanel/TabPanel.test.tsx       |  2 +-
 .../src/Tabs/TabPanel/useTabPanel.test.tsx    |  2 +-
 .../src/Tabs/TabsList/TabsList.test.tsx       |  2 +-
 .../src/Tabs/TabsList/useTabsList.test.tsx    |  2 +-
 packages/mui-base/src/Tabs/index.barrel.ts    |  5 --
 packages/mui-base/src/Tabs/index.parts.ts     |  5 ++
 packages/mui-base/src/Tabs/index.ts           |  6 +--
 .../src/Tooltip/Arrow/TooltipArrow.test.tsx   |  2 +-
 .../src/Tooltip/Popup/TooltipPopup.test.tsx   |  2 +-
 .../Positioner/TooltipPositioner.test.tsx     |  2 +-
 .../Tooltip/Provider/TooltipProvider.test.tsx |  2 +-
 .../src/Tooltip/Root/TooltipRoot.test.tsx     |  2 +-
 .../Tooltip/Trigger/TooltipTrigger.test.tsx   |  2 +-
 packages/mui-base/src/Tooltip/index.barrel.ts |  6 ---
 packages/mui-base/src/Tooltip/index.parts.ts  |  6 +++
 packages/mui-base/src/Tooltip/index.ts        |  7 +--
 packages/mui-base/src/index.ts                | 32 +++++++-----
 .../config/getComponentImports.ts             |  4 +-
 413 files changed, 565 insertions(+), 694 deletions(-)
 delete mode 100644 packages/mui-base/src/AlertDialog/index.barrel.ts
 create mode 100644 packages/mui-base/src/AlertDialog/index.parts.ts
 delete mode 100644 packages/mui-base/src/Checkbox/index.barrel.ts
 create mode 100644 packages/mui-base/src/Checkbox/index.parts.ts
 delete mode 100644 packages/mui-base/src/CheckboxGroup/index.barrel.ts
 create mode 100644 packages/mui-base/src/CheckboxGroup/index.parts.ts
 create mode 100644 packages/mui-base/src/Collapsible/index.parts.ts
 delete mode 100644 packages/mui-base/src/Dialog/index.barrel.ts
 create mode 100644 packages/mui-base/src/Dialog/index.parts.ts
 delete mode 100644 packages/mui-base/src/Field/index.barrel.ts
 create mode 100644 packages/mui-base/src/Field/index.parts.ts
 delete mode 100644 packages/mui-base/src/Fieldset/index.barrel.ts
 create mode 100644 packages/mui-base/src/Fieldset/index.parts.ts
 delete mode 100644 packages/mui-base/src/Form/index.barrel.ts
 create mode 100644 packages/mui-base/src/Form/index.parts.ts
 delete mode 100644 packages/mui-base/src/Menu/index.barrel.ts
 create mode 100644 packages/mui-base/src/Menu/index.parts.ts
 delete mode 100644 packages/mui-base/src/NumberField/index.barrel.ts
 create mode 100644 packages/mui-base/src/NumberField/index.parts.ts
 delete mode 100644 packages/mui-base/src/Popover/index.barrel.ts
 create mode 100644 packages/mui-base/src/Popover/index.parts.ts
 delete mode 100644 packages/mui-base/src/PreviewCard/index.barrel.ts
 create mode 100644 packages/mui-base/src/PreviewCard/index.parts.ts
 delete mode 100644 packages/mui-base/src/Progress/index.barrel.ts
 create mode 100644 packages/mui-base/src/Progress/index.parts.ts
 delete mode 100644 packages/mui-base/src/Radio/index.barrel.ts
 create mode 100644 packages/mui-base/src/Radio/index.parts.ts
 delete mode 100644 packages/mui-base/src/RadioGroup/index.barrel.ts
 create mode 100644 packages/mui-base/src/RadioGroup/index.parts.ts
 delete mode 100644 packages/mui-base/src/Separator/index.barrel.ts
 create mode 100644 packages/mui-base/src/Separator/index.parts.ts
 rename packages/mui-base/src/Slider/{index.barrel.ts => index.parts.ts} (53%)
 delete mode 100644 packages/mui-base/src/Switch/index.barrel.ts
 create mode 100644 packages/mui-base/src/Switch/index.parts.ts
 delete mode 100644 packages/mui-base/src/Tabs/index.barrel.ts
 create mode 100644 packages/mui-base/src/Tabs/index.parts.ts
 delete mode 100644 packages/mui-base/src/Tooltip/index.barrel.ts
 create mode 100644 packages/mui-base/src/Tooltip/index.parts.ts

diff --git a/docs/app/DocsProviders.tsx b/docs/app/DocsProviders.tsx
index 7caa4a4ef..39b504c7c 100644
--- a/docs/app/DocsProviders.tsx
+++ b/docs/app/DocsProviders.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { DemoVariantSelectorProvider } from 'docs-base/src/components/demo/DemoVariantSelectorProvider';
 import { PackageManagerSnippetProvider } from 'docs-base/src/blocks/PackageManagerSnippet/PackageManagerSnippetProvider';
 
diff --git a/docs/app/experiments/collapsible-accordion.tsx b/docs/app/experiments/collapsible-accordion.tsx
index fa14e5ac6..65e531eb0 100644
--- a/docs/app/experiments/collapsible-accordion.tsx
+++ b/docs/app/experiments/collapsible-accordion.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const TRANSITION_DURATION = '350ms';
 
diff --git a/docs/app/experiments/collapsible-framer.tsx b/docs/app/experiments/collapsible-framer.tsx
index 92682ab30..3e5380949 100644
--- a/docs/app/experiments/collapsible-framer.tsx
+++ b/docs/app/experiments/collapsible-framer.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 import { motion } from 'framer-motion';
 
 export default function CollapsibleFramer() {
diff --git a/docs/app/experiments/collapsible-hidden-until-found.tsx b/docs/app/experiments/collapsible-hidden-until-found.tsx
index cfa9e0484..46b3ce295 100644
--- a/docs/app/experiments/collapsible-hidden-until-found.tsx
+++ b/docs/app/experiments/collapsible-hidden-until-found.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const DURATION = '350ms';
 
diff --git a/docs/app/experiments/collapsible.tsx b/docs/app/experiments/collapsible.tsx
index 55d3477a4..a1e2429a6 100644
--- a/docs/app/experiments/collapsible.tsx
+++ b/docs/app/experiments/collapsible.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const DURATION = '350ms';
 
diff --git a/docs/app/experiments/dialog.tsx b/docs/app/experiments/dialog.tsx
index c1dd9fe76..9d72f1bf8 100644
--- a/docs/app/experiments/dialog.tsx
+++ b/docs/app/experiments/dialog.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 // eslint-disable-next-line no-restricted-imports
 import { useTransitionStatus } from '@base_ui/react/utils/useTransitionStatus';
 import { animated as springAnimated, useSpring, useSpringRef } from '@react-spring/web';
diff --git a/docs/app/experiments/menu-anchor-el.tsx b/docs/app/experiments/menu-anchor-el.tsx
index 883bd9a72..bad4bdc47 100644
--- a/docs/app/experiments/menu-anchor-el.tsx
+++ b/docs/app/experiments/menu-anchor-el.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 
 export default function Page() {
   const [anchorEl, setAnchor] = React.useState<HTMLDivElement | null>(null);
diff --git a/docs/app/experiments/menu-anchor-ref.tsx b/docs/app/experiments/menu-anchor-ref.tsx
index e375b201d..68d67f7e8 100644
--- a/docs/app/experiments/menu-anchor-ref.tsx
+++ b/docs/app/experiments/menu-anchor-ref.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 
 export default function Page() {
   const anchor = React.useRef<HTMLDivElement>(null);
diff --git a/docs/app/experiments/progress.tsx b/docs/app/experiments/progress.tsx
index 1db6f0dc5..230fb3e45 100644
--- a/docs/app/experiments/progress.tsx
+++ b/docs/app/experiments/progress.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 
 const VAL1 = 33;
 
diff --git a/docs/app/experiments/slider-change-committed-lag.tsx b/docs/app/experiments/slider-change-committed-lag.tsx
index 8ced35a40..673b39ad7 100644
--- a/docs/app/experiments/slider-change-committed-lag.tsx
+++ b/docs/app/experiments/slider-change-committed-lag.tsx
@@ -2,7 +2,7 @@
 // https://github.com/mui/material-ui/issues/41739
 // to cross check whether this issue would still occur in the new API
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { Styles } from './slider';
 
 export default function App() {
diff --git a/docs/app/experiments/slider-marks.tsx b/docs/app/experiments/slider-marks.tsx
index 2026be9b0..04194347c 100644
--- a/docs/app/experiments/slider-marks.tsx
+++ b/docs/app/experiments/slider-marks.tsx
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 const STOPS = [
   {
@@ -33,7 +32,7 @@ function getSliderThumbAriaValueText(value: number) {
 // for "inverted track", the track/rail can be styled with CSS but a prop is needed to flip the "mark active" state
 function MarkWithLabel(props: { index: number; value: number; label: string; inverted?: boolean }) {
   const { index, value, label, inverted = false } = props;
-  const { direction, values } = useSliderContext();
+  const { direction, values } = Slider.useSliderContext();
   const isRtl = direction === 'rtl';
   const isFilled = inverted ? value >= values[0] : values[0] >= value;
   return (
diff --git a/docs/app/experiments/slider-template.tsx b/docs/app/experiments/slider-template.tsx
index 33bee84cf..7472d3a32 100644
--- a/docs/app/experiments/slider-template.tsx
+++ b/docs/app/experiments/slider-template.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { Styles } from './slider';
 
 export default function App() {
diff --git a/docs/app/experiments/slider-tooltip.tsx b/docs/app/experiments/slider-tooltip.tsx
index d221b5c63..2d8b14085 100644
--- a/docs/app/experiments/slider-tooltip.tsx
+++ b/docs/app/experiments/slider-tooltip.tsx
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Slider } from '@base_ui/react/Slider';
+import { Tooltip } from '@base_ui/react/Tooltip';
 
 function useIsDarkMode() {
   const theme = useTheme();
diff --git a/docs/app/experiments/slider.tsx b/docs/app/experiments/slider.tsx
index 449930434..3e8d29dc8 100644
--- a/docs/app/experiments/slider.tsx
+++ b/docs/app/experiments/slider.tsx
@@ -1,8 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 export default function App() {
   const [val1, setVal1] = React.useState(50);
@@ -233,7 +232,7 @@ function Label(props: any) {
   const defaultId = React.useId();
   const labelId = idProp ?? defaultId;
 
-  const { subitems } = useSliderContext();
+  const { subitems } = Slider.useSliderContext();
 
   const htmlFor = Array.from(subitems.values())
     .reduce((acc, item) => {
diff --git a/docs/app/experiments/tabs.tsx b/docs/app/experiments/tabs.tsx
index c78781513..36c8271b5 100644
--- a/docs/app/experiments/tabs.tsx
+++ b/docs/app/experiments/tabs.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   const [v, sv] = React.useState<string | number | null>(0);
diff --git a/docs/app/experiments/tooltip.tsx b/docs/app/experiments/tooltip.tsx
index 7a6cf11d4..40f010864 100644
--- a/docs/app/experiments/tooltip.tsx
+++ b/docs/app/experiments/tooltip.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled, keyframes } from '@mui/system';
 import { motion, AnimatePresence } from 'framer-motion';
 
diff --git a/docs/data/api/alert-dialog-backdrop.json b/docs/data/api/alert-dialog-backdrop.json
index e4c113258..4a4cadeae 100644
--- a/docs/data/api/alert-dialog-backdrop.json
+++ b/docs/data/api/alert-dialog-backdrop.json
@@ -6,7 +6,7 @@
   },
   "name": "AlertDialogBackdrop",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogBackdrop = AlertDialog.Backdrop;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogBackdrop = AlertDialog.Backdrop;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-close.json b/docs/data/api/alert-dialog-close.json
index ed0de8e5c..04e289d03 100644
--- a/docs/data/api/alert-dialog-close.json
+++ b/docs/data/api/alert-dialog-close.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogClose",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogClose = AlertDialog.Close;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogClose = AlertDialog.Close;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-description.json b/docs/data/api/alert-dialog-description.json
index 4004c33a3..ac3110306 100644
--- a/docs/data/api/alert-dialog-description.json
+++ b/docs/data/api/alert-dialog-description.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogDescription",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogDescription = AlertDialog.Description;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogDescription = AlertDialog.Description;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-popup.json b/docs/data/api/alert-dialog-popup.json
index 4e0642280..902e31c78 100644
--- a/docs/data/api/alert-dialog-popup.json
+++ b/docs/data/api/alert-dialog-popup.json
@@ -7,7 +7,7 @@
   },
   "name": "AlertDialogPopup",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogPopup = AlertDialog.Popup;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogPopup = AlertDialog.Popup;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-root.json b/docs/data/api/alert-dialog-root.json
index dddc81760..8e3b7c663 100644
--- a/docs/data/api/alert-dialog-root.json
+++ b/docs/data/api/alert-dialog-root.json
@@ -7,7 +7,7 @@
   },
   "name": "AlertDialogRoot",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogRoot = AlertDialog.Root;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogRoot = AlertDialog.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-title.json b/docs/data/api/alert-dialog-title.json
index 7d11d2f33..7ad51049e 100644
--- a/docs/data/api/alert-dialog-title.json
+++ b/docs/data/api/alert-dialog-title.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogTitle",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogTitle = AlertDialog.Title;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogTitle = AlertDialog.Title;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-trigger.json b/docs/data/api/alert-dialog-trigger.json
index e78589333..9e32aadba 100644
--- a/docs/data/api/alert-dialog-trigger.json
+++ b/docs/data/api/alert-dialog-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogTrigger",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogTrigger = AlertDialog.Trigger;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogTrigger = AlertDialog.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/checkbox-group-root.json b/docs/data/api/checkbox-group-root.json
index d7a9319d0..b030723dc 100644
--- a/docs/data/api/checkbox-group-root.json
+++ b/docs/data/api/checkbox-group-root.json
@@ -11,7 +11,7 @@
   },
   "name": "CheckboxGroupRoot",
   "imports": [
-    "import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';\nconst CheckboxGroupRoot = CheckboxGroup.Root;"
+    "import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';\nconst CheckboxGroupRoot = CheckboxGroup.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/checkbox-indicator.json b/docs/data/api/checkbox-indicator.json
index 14420a5b9..042044e63 100644
--- a/docs/data/api/checkbox-indicator.json
+++ b/docs/data/api/checkbox-indicator.json
@@ -6,7 +6,7 @@
   },
   "name": "CheckboxIndicator",
   "imports": [
-    "import * as Checkbox from '@base_ui/react/Checkbox';\nconst CheckboxIndicator = Checkbox.Indicator;"
+    "import { Checkbox } from '@base_ui/react/Checkbox';\nconst CheckboxIndicator = Checkbox.Indicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/checkbox-root.json b/docs/data/api/checkbox-root.json
index 7e2138278..a9dff6d98 100644
--- a/docs/data/api/checkbox-root.json
+++ b/docs/data/api/checkbox-root.json
@@ -23,7 +23,7 @@
   },
   "name": "CheckboxRoot",
   "imports": [
-    "import * as Checkbox from '@base_ui/react/Checkbox';\nconst CheckboxRoot = Checkbox.Root;"
+    "import { Checkbox } from '@base_ui/react/Checkbox';\nconst CheckboxRoot = Checkbox.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/collapsible-content.json b/docs/data/api/collapsible-content.json
index f756bd0bd..e44ca41c5 100644
--- a/docs/data/api/collapsible-content.json
+++ b/docs/data/api/collapsible-content.json
@@ -9,7 +9,7 @@
   },
   "name": "CollapsibleContent",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleContent = Collapsible.Content;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleContent = Collapsible.Content;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/collapsible-root.json b/docs/data/api/collapsible-root.json
index 4e1abe2c4..911399fe4 100644
--- a/docs/data/api/collapsible-root.json
+++ b/docs/data/api/collapsible-root.json
@@ -10,7 +10,7 @@
   },
   "name": "CollapsibleRoot",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleRoot = Collapsible.Root;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleRoot = Collapsible.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/collapsible-trigger.json b/docs/data/api/collapsible-trigger.json
index 0aa32c8e7..784494b73 100644
--- a/docs/data/api/collapsible-trigger.json
+++ b/docs/data/api/collapsible-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "CollapsibleTrigger",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/dialog-backdrop.json b/docs/data/api/dialog-backdrop.json
index 041757b2b..9a48a406a 100644
--- a/docs/data/api/dialog-backdrop.json
+++ b/docs/data/api/dialog-backdrop.json
@@ -6,7 +6,7 @@
   },
   "name": "DialogBackdrop",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogBackdrop = Dialog.Backdrop;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogBackdrop = Dialog.Backdrop;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/dialog-close.json b/docs/data/api/dialog-close.json
index f3c98f9ce..1229ef445 100644
--- a/docs/data/api/dialog-close.json
+++ b/docs/data/api/dialog-close.json
@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogClose",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogClose = Dialog.Close;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogClose = Dialog.Close;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/dialog-description.json b/docs/data/api/dialog-description.json
index 8733b10c7..8d2a1cf80 100644
--- a/docs/data/api/dialog-description.json
+++ b/docs/data/api/dialog-description.json
@@ -5,7 +5,7 @@
   },
   "name": "DialogDescription",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogDescription = Dialog.Description;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogDescription = Dialog.Description;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/dialog-popup.json b/docs/data/api/dialog-popup.json
index 3072b9ff3..4bb1be663 100644
--- a/docs/data/api/dialog-popup.json
+++ b/docs/data/api/dialog-popup.json
@@ -6,9 +6,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogPopup",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogPopup = Dialog.Popup;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogPopup = Dialog.Popup;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/dialog-root.json b/docs/data/api/dialog-root.json
index 20a26cb4f..3e8b87e70 100644
--- a/docs/data/api/dialog-root.json
+++ b/docs/data/api/dialog-root.json
@@ -8,7 +8,7 @@
     "open": { "type": { "name": "bool" } }
   },
   "name": "DialogRoot",
-  "imports": ["import * as Dialog from '@base_ui/react/Dialog';\nconst DialogRoot = Dialog.Root;"],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogRoot = Dialog.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": null,
diff --git a/docs/data/api/dialog-title.json b/docs/data/api/dialog-title.json
index 5a9cfb7e4..a05f6bd49 100644
--- a/docs/data/api/dialog-title.json
+++ b/docs/data/api/dialog-title.json
@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogTitle",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogTitle = Dialog.Title;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogTitle = Dialog.Title;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/dialog-trigger.json b/docs/data/api/dialog-trigger.json
index 08ba0d1ed..10f8f5139 100644
--- a/docs/data/api/dialog-trigger.json
+++ b/docs/data/api/dialog-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "DialogTrigger",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogTrigger = Dialog.Trigger;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogTrigger = Dialog.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/field-control.json b/docs/data/api/field-control.json
index 7932e11fc..fe0b98ff5 100644
--- a/docs/data/api/field-control.json
+++ b/docs/data/api/field-control.json
@@ -5,9 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldControl",
-  "imports": [
-    "import * as Field from '@base_ui/react/Field';\nconst FieldControl = Field.Control;"
-  ],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldControl = Field.Control;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/field-description.json b/docs/data/api/field-description.json
index 4654b11ac..88400bc52 100644
--- a/docs/data/api/field-description.json
+++ b/docs/data/api/field-description.json
@@ -5,7 +5,7 @@
   },
   "name": "FieldDescription",
   "imports": [
-    "import * as Field from '@base_ui/react/Field';\nconst FieldDescription = Field.Description;"
+    "import { Field } from '@base_ui/react/Field';\nconst FieldDescription = Field.Description;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/field-error.json b/docs/data/api/field-error.json
index b52587e68..b80033d4b 100644
--- a/docs/data/api/field-error.json
+++ b/docs/data/api/field-error.json
@@ -11,7 +11,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldError",
-  "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldError = Field.Error;"],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldError = Field.Error;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/field-label.json b/docs/data/api/field-label.json
index feebb4e27..87db1074c 100644
--- a/docs/data/api/field-label.json
+++ b/docs/data/api/field-label.json
@@ -4,7 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldLabel",
-  "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldLabel = Field.Label;"],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldLabel = Field.Label;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/field-root.json b/docs/data/api/field-root.json
index 946b4cc5b..a9cdf945a 100644
--- a/docs/data/api/field-root.json
+++ b/docs/data/api/field-root.json
@@ -13,7 +13,7 @@
     }
   },
   "name": "FieldRoot",
-  "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldRoot = Field.Root;"],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldRoot = Field.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/field-validity.json b/docs/data/api/field-validity.json
index 39bbdadb2..3e7b3c8d9 100644
--- a/docs/data/api/field-validity.json
+++ b/docs/data/api/field-validity.json
@@ -2,7 +2,7 @@
   "props": {},
   "name": "FieldValidity",
   "imports": [
-    "import * as Field from '@base_ui/react/Field';\nconst FieldValidity = Field.Validity;"
+    "import { Field } from '@base_ui/react/Field';\nconst FieldValidity = Field.Validity;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/fieldset-legend.json b/docs/data/api/fieldset-legend.json
index 08643190f..abebed30d 100644
--- a/docs/data/api/fieldset-legend.json
+++ b/docs/data/api/fieldset-legend.json
@@ -5,7 +5,7 @@
   },
   "name": "FieldsetLegend",
   "imports": [
-    "import * as Fieldset from '@base_ui/react/Fieldset';\nconst FieldsetLegend = Fieldset.Legend;"
+    "import { Fieldset } from '@base_ui/react/Fieldset';\nconst FieldsetLegend = Fieldset.Legend;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/fieldset-root.json b/docs/data/api/fieldset-root.json
index cd34d7cfc..7434ad43b 100644
--- a/docs/data/api/fieldset-root.json
+++ b/docs/data/api/fieldset-root.json
@@ -5,7 +5,7 @@
   },
   "name": "FieldsetRoot",
   "imports": [
-    "import * as Fieldset from '@base_ui/react/Fieldset';\nconst FieldsetRoot = Fieldset.Root;"
+    "import { Fieldset } from '@base_ui/react/Fieldset';\nconst FieldsetRoot = Fieldset.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/form-root.json b/docs/data/api/form-root.json
index a7517e42e..afcada879 100644
--- a/docs/data/api/form-root.json
+++ b/docs/data/api/form-root.json
@@ -6,7 +6,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FormRoot",
-  "imports": ["import * as Form from '@base_ui/react/Form';\nconst FormRoot = Form.Root;"],
+  "imports": ["import { Form } from '@base_ui/react/Form';\nconst FormRoot = Form.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-arrow.json b/docs/data/api/menu-arrow.json
index 026e242c1..39bf1b773 100644
--- a/docs/data/api/menu-arrow.json
+++ b/docs/data/api/menu-arrow.json
@@ -5,7 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MenuArrow",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuArrow = Menu.Arrow;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuArrow = Menu.Arrow;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-checkbox-item-indicator.json b/docs/data/api/menu-checkbox-item-indicator.json
index aaf1adec7..ae9716f80 100644
--- a/docs/data/api/menu-checkbox-item-indicator.json
+++ b/docs/data/api/menu-checkbox-item-indicator.json
@@ -6,7 +6,7 @@
   },
   "name": "MenuCheckboxItemIndicator",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-checkbox-item.json b/docs/data/api/menu-checkbox-item.json
index c622f6901..71f0dc291 100644
--- a/docs/data/api/menu-checkbox-item.json
+++ b/docs/data/api/menu-checkbox-item.json
@@ -8,7 +8,7 @@
   },
   "name": "MenuCheckboxItem",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuCheckboxItem = Menu.CheckboxItem;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuCheckboxItem = Menu.CheckboxItem;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-group-label.json b/docs/data/api/menu-group-label.json
index f25161ff1..31f344174 100644
--- a/docs/data/api/menu-group-label.json
+++ b/docs/data/api/menu-group-label.json
@@ -5,7 +5,7 @@
   },
   "name": "MenuGroupLabel",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuGroupLabel = Menu.GroupLabel;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuGroupLabel = Menu.GroupLabel;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-group.json b/docs/data/api/menu-group.json
index 5ef36cb04..a0c0074ed 100644
--- a/docs/data/api/menu-group.json
+++ b/docs/data/api/menu-group.json
@@ -5,7 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MenuGroup",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuGroup = Menu.Group;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuGroup = Menu.Group;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-item.json b/docs/data/api/menu-item.json
index 639cb2516..de2ce393b 100644
--- a/docs/data/api/menu-item.json
+++ b/docs/data/api/menu-item.json
@@ -7,7 +7,7 @@
     "onClick": { "type": { "name": "func" } }
   },
   "name": "MenuItem",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuItem = Menu.Item;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuItem = Menu.Item;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-popup.json b/docs/data/api/menu-popup.json
index 49cc98f61..ad8b18e3b 100644
--- a/docs/data/api/menu-popup.json
+++ b/docs/data/api/menu-popup.json
@@ -5,7 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MenuPopup",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuPopup = Menu.Popup;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuPopup = Menu.Popup;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-positioner.json b/docs/data/api/menu-positioner.json
index 6356647f8..c92652b6f 100644
--- a/docs/data/api/menu-positioner.json
+++ b/docs/data/api/menu-positioner.json
@@ -50,7 +50,7 @@
   },
   "name": "MenuPositioner",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuPositioner = Menu.Positioner;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuPositioner = Menu.Positioner;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-radio-group.json b/docs/data/api/menu-radio-group.json
index 7c93dbc87..5e70dafa4 100644
--- a/docs/data/api/menu-radio-group.json
+++ b/docs/data/api/menu-radio-group.json
@@ -9,7 +9,7 @@
   },
   "name": "MenuRadioGroup",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuRadioGroup = Menu.RadioGroup;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuRadioGroup = Menu.RadioGroup;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-radio-item-indicator.json b/docs/data/api/menu-radio-item-indicator.json
index 9cd21ccb5..eb88d1bfd 100644
--- a/docs/data/api/menu-radio-item-indicator.json
+++ b/docs/data/api/menu-radio-item-indicator.json
@@ -6,7 +6,7 @@
   },
   "name": "MenuRadioItemIndicator",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuRadioItemIndicator = Menu.RadioItemIndicator;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuRadioItemIndicator = Menu.RadioItemIndicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-radio-item.json b/docs/data/api/menu-radio-item.json
index fc3ac0f34..04a1482ed 100644
--- a/docs/data/api/menu-radio-item.json
+++ b/docs/data/api/menu-radio-item.json
@@ -8,9 +8,7 @@
     "onClick": { "type": { "name": "func" } }
   },
   "name": "MenuRadioItem",
-  "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuRadioItem = Menu.RadioItem;"
-  ],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuRadioItem = Menu.RadioItem;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-root.json b/docs/data/api/menu-root.json
index d79474fbb..216ed4544 100644
--- a/docs/data/api/menu-root.json
+++ b/docs/data/api/menu-root.json
@@ -19,7 +19,7 @@
     }
   },
   "name": "MenuRoot",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuRoot = Menu.Root;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuRoot = Menu.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": null,
diff --git a/docs/data/api/menu-separator.json b/docs/data/api/menu-separator.json
index b61e1d141..afb282bf2 100644
--- a/docs/data/api/menu-separator.json
+++ b/docs/data/api/menu-separator.json
@@ -5,9 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MenuSeparator",
-  "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuSeparator = Menu.Separator;"
-  ],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuSeparator = Menu.Separator;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-trigger.json b/docs/data/api/menu-trigger.json
index 05e73a2a8..f8f82aa2e 100644
--- a/docs/data/api/menu-trigger.json
+++ b/docs/data/api/menu-trigger.json
@@ -7,7 +7,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MenuTrigger",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuTrigger = Menu.Trigger;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuTrigger = Menu.Trigger;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/number-field-decrement.json b/docs/data/api/number-field-decrement.json
index cd1e3cea3..4a622144a 100644
--- a/docs/data/api/number-field-decrement.json
+++ b/docs/data/api/number-field-decrement.json
@@ -5,7 +5,7 @@
   },
   "name": "NumberFieldDecrement",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldDecrement = NumberField.Decrement;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldDecrement = NumberField.Decrement;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-group.json b/docs/data/api/number-field-group.json
index fc0aa6baf..c5538cf2a 100644
--- a/docs/data/api/number-field-group.json
+++ b/docs/data/api/number-field-group.json
@@ -5,7 +5,7 @@
   },
   "name": "NumberFieldGroup",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldGroup = NumberField.Group;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldGroup = NumberField.Group;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-increment.json b/docs/data/api/number-field-increment.json
index ccf741cae..b895d9a1e 100644
--- a/docs/data/api/number-field-increment.json
+++ b/docs/data/api/number-field-increment.json
@@ -5,7 +5,7 @@
   },
   "name": "NumberFieldIncrement",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldIncrement = NumberField.Increment;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldIncrement = NumberField.Increment;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-input.json b/docs/data/api/number-field-input.json
index e2252d771..5131ab443 100644
--- a/docs/data/api/number-field-input.json
+++ b/docs/data/api/number-field-input.json
@@ -5,7 +5,7 @@
   },
   "name": "NumberFieldInput",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldInput = NumberField.Input;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldInput = NumberField.Input;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-root.json b/docs/data/api/number-field-root.json
index 5b3e34aca..eb1020629 100644
--- a/docs/data/api/number-field-root.json
+++ b/docs/data/api/number-field-root.json
@@ -33,7 +33,7 @@
   },
   "name": "NumberFieldRoot",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldRoot = NumberField.Root;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldRoot = NumberField.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-scrub-area-cursor.json b/docs/data/api/number-field-scrub-area-cursor.json
index 095efebcb..006077f92 100644
--- a/docs/data/api/number-field-scrub-area-cursor.json
+++ b/docs/data/api/number-field-scrub-area-cursor.json
@@ -5,7 +5,7 @@
   },
   "name": "NumberFieldScrubAreaCursor",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldScrubAreaCursor = NumberField.ScrubAreaCursor;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldScrubAreaCursor = NumberField.ScrubAreaCursor;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-scrub-area.json b/docs/data/api/number-field-scrub-area.json
index f4c83c108..e328020db 100644
--- a/docs/data/api/number-field-scrub-area.json
+++ b/docs/data/api/number-field-scrub-area.json
@@ -11,7 +11,7 @@
   },
   "name": "NumberFieldScrubArea",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldScrubArea = NumberField.ScrubArea;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldScrubArea = NumberField.ScrubArea;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-arrow.json b/docs/data/api/popover-arrow.json
index 278c8cfd6..3e9eb76f2 100644
--- a/docs/data/api/popover-arrow.json
+++ b/docs/data/api/popover-arrow.json
@@ -6,7 +6,7 @@
   },
   "name": "PopoverArrow",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverArrow = Popover.Arrow;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverArrow = Popover.Arrow;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-backdrop.json b/docs/data/api/popover-backdrop.json
index c2c9ea760..62b24c08c 100644
--- a/docs/data/api/popover-backdrop.json
+++ b/docs/data/api/popover-backdrop.json
@@ -10,7 +10,7 @@
   },
   "name": "PopoverBackdrop",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverBackdrop = Popover.Backdrop;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverBackdrop = Popover.Backdrop;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-close.json b/docs/data/api/popover-close.json
index 31957848c..cc6e27f18 100644
--- a/docs/data/api/popover-close.json
+++ b/docs/data/api/popover-close.json
@@ -5,7 +5,7 @@
   },
   "name": "PopoverClose",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverClose = Popover.Close;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverClose = Popover.Close;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-description.json b/docs/data/api/popover-description.json
index b3eeb77f9..6fdaf51d5 100644
--- a/docs/data/api/popover-description.json
+++ b/docs/data/api/popover-description.json
@@ -5,7 +5,7 @@
   },
   "name": "PopoverDescription",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverDescription = Popover.Description;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverDescription = Popover.Description;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-popup.json b/docs/data/api/popover-popup.json
index 06a36805b..7a5894df8 100644
--- a/docs/data/api/popover-popup.json
+++ b/docs/data/api/popover-popup.json
@@ -5,7 +5,7 @@
   },
   "name": "PopoverPopup",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverPopup = Popover.Popup;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverPopup = Popover.Popup;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-positioner.json b/docs/data/api/popover-positioner.json
index adc543325..dc1d42a20 100644
--- a/docs/data/api/popover-positioner.json
+++ b/docs/data/api/popover-positioner.json
@@ -50,7 +50,7 @@
   },
   "name": "PopoverPositioner",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverPositioner = Popover.Positioner;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverPositioner = Popover.Positioner;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-root.json b/docs/data/api/popover-root.json
index 29da12e96..a18b9808e 100644
--- a/docs/data/api/popover-root.json
+++ b/docs/data/api/popover-root.json
@@ -14,7 +14,7 @@
   },
   "name": "PopoverRoot",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverRoot = Popover.Root;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverRoot = Popover.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-title.json b/docs/data/api/popover-title.json
index 239fcf291..b4661b4fa 100644
--- a/docs/data/api/popover-title.json
+++ b/docs/data/api/popover-title.json
@@ -5,7 +5,7 @@
   },
   "name": "PopoverTitle",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverTitle = Popover.Title;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverTitle = Popover.Title;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-trigger.json b/docs/data/api/popover-trigger.json
index cd6204789..b4b5fb84c 100644
--- a/docs/data/api/popover-trigger.json
+++ b/docs/data/api/popover-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "PopoverTrigger",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverTrigger = Popover.Trigger;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverTrigger = Popover.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-arrow.json b/docs/data/api/preview-card-arrow.json
index a37473e60..bd8d29a51 100644
--- a/docs/data/api/preview-card-arrow.json
+++ b/docs/data/api/preview-card-arrow.json
@@ -6,7 +6,7 @@
   },
   "name": "PreviewCardArrow",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardArrow = PreviewCard.Arrow;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardArrow = PreviewCard.Arrow;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-backdrop.json b/docs/data/api/preview-card-backdrop.json
index ef40f420f..131edeaef 100644
--- a/docs/data/api/preview-card-backdrop.json
+++ b/docs/data/api/preview-card-backdrop.json
@@ -7,7 +7,7 @@
   },
   "name": "PreviewCardBackdrop",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardBackdrop = PreviewCard.Backdrop;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardBackdrop = PreviewCard.Backdrop;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-popup.json b/docs/data/api/preview-card-popup.json
index 3d1b7e10a..18778886b 100644
--- a/docs/data/api/preview-card-popup.json
+++ b/docs/data/api/preview-card-popup.json
@@ -5,7 +5,7 @@
   },
   "name": "PreviewCardPopup",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardPopup = PreviewCard.Popup;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardPopup = PreviewCard.Popup;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-positioner.json b/docs/data/api/preview-card-positioner.json
index ae28e1f9c..bf14a1c1e 100644
--- a/docs/data/api/preview-card-positioner.json
+++ b/docs/data/api/preview-card-positioner.json
@@ -50,7 +50,7 @@
   },
   "name": "PreviewCardPositioner",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardPositioner = PreviewCard.Positioner;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardPositioner = PreviewCard.Positioner;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-root.json b/docs/data/api/preview-card-root.json
index 02a5916f0..df36fdd35 100644
--- a/docs/data/api/preview-card-root.json
+++ b/docs/data/api/preview-card-root.json
@@ -13,7 +13,7 @@
   },
   "name": "PreviewCardRoot",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardRoot = PreviewCard.Root;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardRoot = PreviewCard.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-trigger.json b/docs/data/api/preview-card-trigger.json
index 4fa0b2fa9..c6052f1b7 100644
--- a/docs/data/api/preview-card-trigger.json
+++ b/docs/data/api/preview-card-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "PreviewCardTrigger",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardTrigger = PreviewCard.Trigger;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardTrigger = PreviewCard.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/progress-indicator.json b/docs/data/api/progress-indicator.json
index 533523f18..8e5bbc7cd 100644
--- a/docs/data/api/progress-indicator.json
+++ b/docs/data/api/progress-indicator.json
@@ -5,7 +5,7 @@
   },
   "name": "ProgressIndicator",
   "imports": [
-    "import * as Progress from '@base_ui/react/Progress';\nconst ProgressIndicator = Progress.Indicator;"
+    "import { Progress } from '@base_ui/react/Progress';\nconst ProgressIndicator = Progress.Indicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/progress-root.json b/docs/data/api/progress-root.json
index 125c799f7..f1bac0dae 100644
--- a/docs/data/api/progress-root.json
+++ b/docs/data/api/progress-root.json
@@ -29,7 +29,7 @@
   },
   "name": "ProgressRoot",
   "imports": [
-    "import * as Progress from '@base_ui/react/Progress';\nconst ProgressRoot = Progress.Root;"
+    "import { Progress } from '@base_ui/react/Progress';\nconst ProgressRoot = Progress.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/progress-track.json b/docs/data/api/progress-track.json
index 22ed96222..fb0b9370b 100644
--- a/docs/data/api/progress-track.json
+++ b/docs/data/api/progress-track.json
@@ -5,7 +5,7 @@
   },
   "name": "ProgressTrack",
   "imports": [
-    "import * as Progress from '@base_ui/react/Progress';\nconst ProgressTrack = Progress.Track;"
+    "import { Progress } from '@base_ui/react/Progress';\nconst ProgressTrack = Progress.Track;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/radio-group-root.json b/docs/data/api/radio-group-root.json
index c18ad3f6c..064787ec8 100644
--- a/docs/data/api/radio-group-root.json
+++ b/docs/data/api/radio-group-root.json
@@ -12,7 +12,7 @@
   },
   "name": "RadioGroupRoot",
   "imports": [
-    "import * as RadioGroup from '@base_ui/react/RadioGroup';\nconst RadioGroupRoot = RadioGroup.Root;"
+    "import { RadioGroup } from '@base_ui/react/RadioGroup';\nconst RadioGroupRoot = RadioGroup.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/radio-indicator.json b/docs/data/api/radio-indicator.json
index 871ffdf1e..2ddde1f26 100644
--- a/docs/data/api/radio-indicator.json
+++ b/docs/data/api/radio-indicator.json
@@ -6,7 +6,7 @@
   },
   "name": "RadioIndicator",
   "imports": [
-    "import * as Radio from '@base_ui/react/Radio';\nconst RadioIndicator = Radio.Indicator;"
+    "import { Radio } from '@base_ui/react/Radio';\nconst RadioIndicator = Radio.Indicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/radio-root.json b/docs/data/api/radio-root.json
index 277bbc807..342dc2694 100644
--- a/docs/data/api/radio-root.json
+++ b/docs/data/api/radio-root.json
@@ -8,7 +8,7 @@
     "required": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "RadioRoot",
-  "imports": ["import * as Radio from '@base_ui/react/Radio';\nconst RadioRoot = Radio.Root;"],
+  "imports": ["import { Radio } from '@base_ui/react/Radio';\nconst RadioRoot = Radio.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/separator-root.json b/docs/data/api/separator-root.json
index 3ecf0bed9..ec0c91e37 100644
--- a/docs/data/api/separator-root.json
+++ b/docs/data/api/separator-root.json
@@ -5,7 +5,7 @@
   },
   "name": "SeparatorRoot",
   "imports": [
-    "import * as Separator from '@base_ui/react/Separator';\nconst SeparatorRoot = Separator.Root;"
+    "import { Separator } from '@base_ui/react/Separator';\nconst SeparatorRoot = Separator.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/slider-control.json b/docs/data/api/slider-control.json
index a5a029fd2..d48aef56c 100644
--- a/docs/data/api/slider-control.json
+++ b/docs/data/api/slider-control.json
@@ -5,7 +5,7 @@
   },
   "name": "SliderControl",
   "imports": [
-    "import * as Slider from '@base_ui/react/Slider';\nconst SliderControl = Slider.Control;"
+    "import { Slider } from '@base_ui/react/Slider';\nconst SliderControl = Slider.Control;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/slider-indicator.json b/docs/data/api/slider-indicator.json
index f56dec033..f84c3ee22 100644
--- a/docs/data/api/slider-indicator.json
+++ b/docs/data/api/slider-indicator.json
@@ -5,7 +5,7 @@
   },
   "name": "SliderIndicator",
   "imports": [
-    "import * as Slider from '@base_ui/react/Slider';\nconst SliderIndicator = Slider.Indicator;"
+    "import { Slider } from '@base_ui/react/Slider';\nconst SliderIndicator = Slider.Indicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/slider-output.json b/docs/data/api/slider-output.json
index 674878e39..63690fe61 100644
--- a/docs/data/api/slider-output.json
+++ b/docs/data/api/slider-output.json
@@ -5,7 +5,7 @@
   },
   "name": "SliderOutput",
   "imports": [
-    "import * as Slider from '@base_ui/react/Slider';\nconst SliderOutput = Slider.Output;"
+    "import { Slider } from '@base_ui/react/Slider';\nconst SliderOutput = Slider.Output;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/slider-root.json b/docs/data/api/slider-root.json
index 6c83045dc..9bf64ced0 100644
--- a/docs/data/api/slider-root.json
+++ b/docs/data/api/slider-root.json
@@ -42,7 +42,7 @@
     }
   },
   "name": "SliderRoot",
-  "imports": ["import * as Slider from '@base_ui/react/Slider';\nconst SliderRoot = Slider.Root;"],
+  "imports": ["import { Slider } from '@base_ui/react/Slider';\nconst SliderRoot = Slider.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/slider-thumb.json b/docs/data/api/slider-thumb.json
index 17027ffd0..c0af6817d 100644
--- a/docs/data/api/slider-thumb.json
+++ b/docs/data/api/slider-thumb.json
@@ -17,9 +17,7 @@
     "render": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;node" } }
   },
   "name": "SliderThumb",
-  "imports": [
-    "import * as Slider from '@base_ui/react/Slider';\nconst SliderThumb = Slider.Thumb;"
-  ],
+  "imports": ["import { Slider } from '@base_ui/react/Slider';\nconst SliderThumb = Slider.Thumb;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/slider-track.json b/docs/data/api/slider-track.json
index e226d779a..eb2d84441 100644
--- a/docs/data/api/slider-track.json
+++ b/docs/data/api/slider-track.json
@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "SliderTrack",
-  "imports": [
-    "import * as Slider from '@base_ui/react/Slider';\nconst SliderTrack = Slider.Track;"
-  ],
+  "imports": ["import { Slider } from '@base_ui/react/Slider';\nconst SliderTrack = Slider.Track;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/switch-root.json b/docs/data/api/switch-root.json
index ab1c15cd3..125ef0411 100644
--- a/docs/data/api/switch-root.json
+++ b/docs/data/api/switch-root.json
@@ -18,7 +18,7 @@
     "required": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "SwitchRoot",
-  "imports": ["import * as Switch from '@base_ui/react/Switch';\nconst SwitchRoot = Switch.Root;"],
+  "imports": ["import { Switch } from '@base_ui/react/Switch';\nconst SwitchRoot = Switch.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/switch-thumb.json b/docs/data/api/switch-thumb.json
index 7da6d60ff..a64466e39 100644
--- a/docs/data/api/switch-thumb.json
+++ b/docs/data/api/switch-thumb.json
@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "SwitchThumb",
-  "imports": [
-    "import * as Switch from '@base_ui/react/Switch';\nconst SwitchThumb = Switch.Thumb;"
-  ],
+  "imports": ["import { Switch } from '@base_ui/react/Switch';\nconst SwitchThumb = Switch.Thumb;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tab-indicator.json b/docs/data/api/tab-indicator.json
index e6661a774..54f4e04e1 100644
--- a/docs/data/api/tab-indicator.json
+++ b/docs/data/api/tab-indicator.json
@@ -5,7 +5,7 @@
     "renderBeforeHydration": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "TabIndicator",
-  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst TabIndicator = Tabs.Indicator;"],
+  "imports": ["import { Tabs } from '@base_ui/react/Tabs';\nconst TabIndicator = Tabs.Indicator;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tab-panel.json b/docs/data/api/tab-panel.json
index dc09c16d6..6221e09bd 100644
--- a/docs/data/api/tab-panel.json
+++ b/docs/data/api/tab-panel.json
@@ -6,7 +6,7 @@
     "value": { "type": { "name": "any" } }
   },
   "name": "TabPanel",
-  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst TabPanel = Tabs.Panel;"],
+  "imports": ["import { Tabs } from '@base_ui/react/Tabs';\nconst TabPanel = Tabs.Panel;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tab.json b/docs/data/api/tab.json
index 02c7d764c..9fbe333f5 100644
--- a/docs/data/api/tab.json
+++ b/docs/data/api/tab.json
@@ -5,7 +5,7 @@
     "value": { "type": { "name": "any" } }
   },
   "name": "Tab",
-  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst Tab = Tabs.Tab;"],
+  "imports": ["import { Tabs } from '@base_ui/react/Tabs';\nconst Tab = Tabs.Tab;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tabs-list.json b/docs/data/api/tabs-list.json
index c6f0fd0e7..c9d641eae 100644
--- a/docs/data/api/tabs-list.json
+++ b/docs/data/api/tabs-list.json
@@ -6,7 +6,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "TabsList",
-  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst TabsList = Tabs.List;"],
+  "imports": ["import { Tabs } from '@base_ui/react/Tabs';\nconst TabsList = Tabs.List;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tabs-root.json b/docs/data/api/tabs-root.json
index 1560c4cc2..4be24aeb8 100644
--- a/docs/data/api/tabs-root.json
+++ b/docs/data/api/tabs-root.json
@@ -15,7 +15,7 @@
     "value": { "type": { "name": "any" } }
   },
   "name": "TabsRoot",
-  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst TabsRoot = Tabs.Root;"],
+  "imports": ["import { Tabs } from '@base_ui/react/Tabs';\nconst TabsRoot = Tabs.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tooltip-arrow.json b/docs/data/api/tooltip-arrow.json
index b0c2e7756..25368d286 100644
--- a/docs/data/api/tooltip-arrow.json
+++ b/docs/data/api/tooltip-arrow.json
@@ -6,7 +6,7 @@
   },
   "name": "TooltipArrow",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipArrow = Tooltip.Arrow;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipArrow = Tooltip.Arrow;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/tooltip-popup.json b/docs/data/api/tooltip-popup.json
index d9fb393ef..7cba917a8 100644
--- a/docs/data/api/tooltip-popup.json
+++ b/docs/data/api/tooltip-popup.json
@@ -5,7 +5,7 @@
   },
   "name": "TooltipPopup",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipPopup = Tooltip.Popup;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipPopup = Tooltip.Popup;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/tooltip-positioner.json b/docs/data/api/tooltip-positioner.json
index 3d29c4807..23ca83cce 100644
--- a/docs/data/api/tooltip-positioner.json
+++ b/docs/data/api/tooltip-positioner.json
@@ -50,7 +50,7 @@
   },
   "name": "TooltipPositioner",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipPositioner = Tooltip.Positioner;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipPositioner = Tooltip.Positioner;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/tooltip-provider.json b/docs/data/api/tooltip-provider.json
index aecb4bf44..3454a0ef2 100644
--- a/docs/data/api/tooltip-provider.json
+++ b/docs/data/api/tooltip-provider.json
@@ -6,7 +6,7 @@
   },
   "name": "TooltipProvider",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipProvider = Tooltip.Provider;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipProvider = Tooltip.Provider;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/tooltip-root.json b/docs/data/api/tooltip-root.json
index 268cce71d..fb548b9ca 100644
--- a/docs/data/api/tooltip-root.json
+++ b/docs/data/api/tooltip-root.json
@@ -21,7 +21,7 @@
   },
   "name": "TooltipRoot",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipRoot = Tooltip.Root;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipRoot = Tooltip.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/tooltip-trigger.json b/docs/data/api/tooltip-trigger.json
index d7727ec84..e9b46eea5 100644
--- a/docs/data/api/tooltip-trigger.json
+++ b/docs/data/api/tooltip-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "TooltipTrigger",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipTrigger = Tooltip.Trigger;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipTrigger = Tooltip.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.js b/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.js
index dfece4502..73a50d374 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.js
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import classes from './styles.module.css';
 
 export default function AlertDialogIntroduction() {
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.tsx b/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.tsx
index dfece4502..73a50d374 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.tsx
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import classes from './styles.module.css';
 
 export default function AlertDialogIntroduction() {
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.js b/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.js
index d61c8a6af..72336480b 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.js
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function AlertDialogIntroduction() {
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.tsx b/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.tsx
index d61c8a6af..72336480b 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.tsx
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function AlertDialogIntroduction() {
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
index 282a7bada..a01762d0d 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 
 export default function UnstyledDialogIntroduction() {
   return (
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx
index c667df7e4..17c58e16a 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 
 export default function UnstyledDialogIntroduction() {
   return (
diff --git a/docs/data/components/alert-dialog/AlertDialogWithTransitions.js b/docs/data/components/alert-dialog/AlertDialogWithTransitions.js
index e1a4044c4..321e5e713 100644
--- a/docs/data/components/alert-dialog/AlertDialogWithTransitions.js
+++ b/docs/data/components/alert-dialog/AlertDialogWithTransitions.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseAlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog as BaseAlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function AlertDialogWithTransitions() {
diff --git a/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx b/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
index e1a4044c4..321e5e713 100644
--- a/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
+++ b/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseAlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog as BaseAlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function AlertDialogWithTransitions() {
diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.js b/docs/data/components/alert-dialog/NestedAlertDialogs.js
index 3e54627ca..4fc25e829 100644
--- a/docs/data/components/alert-dialog/NestedAlertDialogs.js
+++ b/docs/data/components/alert-dialog/NestedAlertDialogs.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseAlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog as BaseAlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function NestedAlertDialogs() {
diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx
index 3e54627ca..4fc25e829 100644
--- a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx
+++ b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseAlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog as BaseAlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function NestedAlertDialogs() {
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
index 6bd20db61..c98646c9e 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import * as Checkbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 export default function UnstyledCheckboxIndeterminateGroup() {
   return (
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
index 3d7b05826..6354c14fd 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import * as Checkbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 export default function UnstyledCheckboxIndeterminateGroup() {
   return (
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
index 1033cfc87..e9a4e28e4 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 export default function UnstyledCheckboxIndeterminateGroup() {
   return (
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
index a83acafc0..3cf31369e 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 export default function UnstyledCheckboxIndeterminateGroup() {
   return (
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
index 577e7db15..2dd01a12d 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
@@ -2,9 +2,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
index 3169ca830..a0a666edf 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 function classNames(...classes: Array<string | undefined | null | false>) {
   return classes.filter(Boolean).join(' ');
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
index c70d40384..9201619d6 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 const colors = ['red', 'green', 'blue'];
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
index 13326baf0..649d3e5d8 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 const colors = ['red', 'green', 'blue'];
diff --git a/docs/data/components/checkbox-group/checkbox-group.mdx b/docs/data/components/checkbox-group/checkbox-group.mdx
index e113cb30c..851d14b84 100644
--- a/docs/data/components/checkbox-group/checkbox-group.mdx
+++ b/docs/data/components/checkbox-group/checkbox-group.mdx
@@ -39,7 +39,7 @@ Checkbox Group is composed of a `Root` component and `Checkbox` components:
 `Field` components are used to label the Checkbox Group and individual Checkboxes:
 
 ```jsx
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 ```
 
 ```tsx
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js
index 786d49acc..edb83d101 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 export default function UnstyledCheckboxIndeterminate() {
   return (
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx
index 3b9e87f9a..07c87a75c 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 export default function UnstyledCheckboxIndeterminate() {
   return (
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
index 44234bb4c..7415e0637 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 const colors = ['Red', 'Green', 'Blue'];
 
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
index f6907fe19..3c60042b8 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 const colors = ['Red', 'Green', 'Blue'];
 
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js
index b4a264dad..a5b0de642 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledCheckboxIntroduction() {
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx
index 758acd41b..1605c4e7c 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledCheckboxIntroduction() {
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
index d5004c166..b4e424d54 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 export default function UnstyledSwitchIntroduction() {
   return (
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
index 599539a6e..155601a9f 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 export default function UnstyledSwitchIntroduction() {
   return (
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
index f27426ca2..42197c24e 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 
 function classNames(...classes) {
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
index 595509db4..9175a5bf8 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 
 function classNames(...classes: Array<string | undefined | null | false>) {
diff --git a/docs/data/components/collapsible/CssAnimatedCollapsible.js b/docs/data/components/collapsible/CssAnimatedCollapsible.js
index fe5e8fd2d..78f52dab8 100644
--- a/docs/data/components/collapsible/CssAnimatedCollapsible.js
+++ b/docs/data/components/collapsible/CssAnimatedCollapsible.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 export default function CssAnimatedCollapsible() {
   const [open, setOpen] = React.useState(true);
diff --git a/docs/data/components/collapsible/CssAnimatedCollapsible.tsx b/docs/data/components/collapsible/CssAnimatedCollapsible.tsx
index fe5e8fd2d..78f52dab8 100644
--- a/docs/data/components/collapsible/CssAnimatedCollapsible.tsx
+++ b/docs/data/components/collapsible/CssAnimatedCollapsible.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 export default function CssAnimatedCollapsible() {
   const [open, setOpen] = React.useState(true);
diff --git a/docs/data/components/collapsible/CssTransitionCollapsible.js b/docs/data/components/collapsible/CssTransitionCollapsible.js
index 164082bb7..0243c5417 100644
--- a/docs/data/components/collapsible/CssTransitionCollapsible.js
+++ b/docs/data/components/collapsible/CssTransitionCollapsible.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 export default function CssTransitionCollapsible() {
   const [open, setOpen] = React.useState(true);
diff --git a/docs/data/components/collapsible/CssTransitionCollapsible.tsx b/docs/data/components/collapsible/CssTransitionCollapsible.tsx
index 164082bb7..0243c5417 100644
--- a/docs/data/components/collapsible/CssTransitionCollapsible.tsx
+++ b/docs/data/components/collapsible/CssTransitionCollapsible.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 export default function CssTransitionCollapsible() {
   const [open, setOpen] = React.useState(true);
diff --git a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js
index e829370f9..40515a2d2 100644
--- a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js
+++ b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseCollapsible from '@base_ui/react/Collapsible';
+import { Collapsible as BaseCollapsible } from '@base_ui/react/Collapsible';
 
 const Collapsible = BaseCollapsible.Root;
 
diff --git a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx
index e829370f9..40515a2d2 100644
--- a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx
+++ b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseCollapsible from '@base_ui/react/Collapsible';
+import { Collapsible as BaseCollapsible } from '@base_ui/react/Collapsible';
 
 const Collapsible = BaseCollapsible.Root;
 
diff --git a/docs/data/components/dialog/DialogWithTransitions.js b/docs/data/components/dialog/DialogWithTransitions.js
index 7b219eb98..933fe38fa 100644
--- a/docs/data/components/dialog/DialogWithTransitions.js
+++ b/docs/data/components/dialog/DialogWithTransitions.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseDialog from '@base_ui/react/Dialog';
+import { Dialog as BaseDialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function DialogWithTransitions() {
diff --git a/docs/data/components/dialog/DialogWithTransitions.tsx b/docs/data/components/dialog/DialogWithTransitions.tsx
index 7b219eb98..933fe38fa 100644
--- a/docs/data/components/dialog/DialogWithTransitions.tsx
+++ b/docs/data/components/dialog/DialogWithTransitions.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseDialog from '@base_ui/react/Dialog';
+import { Dialog as BaseDialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function DialogWithTransitions() {
diff --git a/docs/data/components/dialog/NestedDialogs.js b/docs/data/components/dialog/NestedDialogs.js
index 1ecbc0446..b154fdf96 100644
--- a/docs/data/components/dialog/NestedDialogs.js
+++ b/docs/data/components/dialog/NestedDialogs.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseDialog from '@base_ui/react/Dialog';
+import { Dialog as BaseDialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function NestedDialogs() {
diff --git a/docs/data/components/dialog/NestedDialogs.tsx b/docs/data/components/dialog/NestedDialogs.tsx
index 1ecbc0446..b154fdf96 100644
--- a/docs/data/components/dialog/NestedDialogs.tsx
+++ b/docs/data/components/dialog/NestedDialogs.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseDialog from '@base_ui/react/Dialog';
+import { Dialog as BaseDialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function NestedDialogs() {
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.js b/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.js
index 9e9eaab47..e6868505f 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.js
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import classes from './styles.module.css';
 
 export default function UnstyledDialogIntroduction() {
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.tsx b/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.tsx
index 9e9eaab47..e6868505f 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.tsx
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import classes from './styles.module.css';
 
 export default function UnstyledDialogIntroduction() {
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.js b/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.js
index 4129596a8..6627436c7 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.js
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function UnstyledDialogIntroduction() {
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.tsx b/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.tsx
index 4129596a8..6627436c7 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.tsx
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function UnstyledDialogIntroduction() {
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
index f4ebdf05b..988a1e274 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 
 export default function UnstyledDialogIntroduction() {
   return (
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.tsx b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.tsx
index 5b07e9724..b1127efec 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.tsx
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 
 export default function UnstyledDialogIntroduction() {
   return (
diff --git a/docs/data/components/field/UnstyledFieldAsync.js b/docs/data/components/field/UnstyledFieldAsync.js
index 92d0baa38..e966a060e 100644
--- a/docs/data/components/field/UnstyledFieldAsync.js
+++ b/docs/data/components/field/UnstyledFieldAsync.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 const cache = new Map();
diff --git a/docs/data/components/field/UnstyledFieldAsync.tsx b/docs/data/components/field/UnstyledFieldAsync.tsx
index d560b2107..60f064b3e 100644
--- a/docs/data/components/field/UnstyledFieldAsync.tsx
+++ b/docs/data/components/field/UnstyledFieldAsync.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 const cache = new Map<string, string | null>();
diff --git a/docs/data/components/field/UnstyledFieldIntroduction/system/index.js b/docs/data/components/field/UnstyledFieldIntroduction/system/index.js
index e0f42d8ce..a1dd1e451 100644
--- a/docs/data/components/field/UnstyledFieldIntroduction/system/index.js
+++ b/docs/data/components/field/UnstyledFieldIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldIntroduction() {
diff --git a/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx b/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx
index e0f42d8ce..a1dd1e451 100644
--- a/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx
+++ b/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldIntroduction() {
diff --git a/docs/data/components/field/UnstyledFieldPassword.js b/docs/data/components/field/UnstyledFieldPassword.js
index ccc729cd0..2e233b17f 100644
--- a/docs/data/components/field/UnstyledFieldPassword.js
+++ b/docs/data/components/field/UnstyledFieldPassword.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 function validate(value) {
diff --git a/docs/data/components/field/UnstyledFieldPassword.tsx b/docs/data/components/field/UnstyledFieldPassword.tsx
index 1181ef90e..63adfbdf9 100644
--- a/docs/data/components/field/UnstyledFieldPassword.tsx
+++ b/docs/data/components/field/UnstyledFieldPassword.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 function validate(value: string) {
diff --git a/docs/data/components/field/UnstyledFieldServerError.js b/docs/data/components/field/UnstyledFieldServerError.js
index a9875b9e8..24e281a83 100644
--- a/docs/data/components/field/UnstyledFieldServerError.js
+++ b/docs/data/components/field/UnstyledFieldServerError.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldServerError() {
diff --git a/docs/data/components/field/UnstyledFieldServerError.tsx b/docs/data/components/field/UnstyledFieldServerError.tsx
index 35a880e84..edca241ac 100644
--- a/docs/data/components/field/UnstyledFieldServerError.tsx
+++ b/docs/data/components/field/UnstyledFieldServerError.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 type Status = 'initial' | 'loading' | 'success' | 'error';
diff --git a/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.js b/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.js
index fc0380e07..24178b06b 100644
--- a/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.js
+++ b/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
-import * as Fieldset from '@base_ui/react/Fieldset';
+import { Field } from '@base_ui/react/Field';
+import { Fieldset } from '@base_ui/react/Fieldset';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldsetIntroduction() {
diff --git a/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.tsx b/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.tsx
index fc0380e07..24178b06b 100644
--- a/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.tsx
+++ b/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
-import * as Fieldset from '@base_ui/react/Fieldset';
+import { Field } from '@base_ui/react/Field';
+import { Fieldset } from '@base_ui/react/Fieldset';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldsetIntroduction() {
diff --git a/docs/data/components/form/FormIntroduction/system/index.js b/docs/data/components/form/FormIntroduction/system/index.js
index 2e3d2a2c8..a36554850 100644
--- a/docs/data/components/form/FormIntroduction/system/index.js
+++ b/docs/data/components/form/FormIntroduction/system/index.js
@@ -1,9 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import * as Form from '@base_ui/react/Form';
-import * as Fieldset from '@base_ui/react/Fieldset';
-import * as Field from '@base_ui/react/Field';
+import { Form } from '@base_ui/react/Form';
+import { Fieldset } from '@base_ui/react/Fieldset';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 export default function FormIntroduction() {
diff --git a/docs/data/components/form/FormIntroduction/system/index.tsx b/docs/data/components/form/FormIntroduction/system/index.tsx
index be54ebd50..e4b3bb49e 100644
--- a/docs/data/components/form/FormIntroduction/system/index.tsx
+++ b/docs/data/components/form/FormIntroduction/system/index.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import * as Form from '@base_ui/react/Form';
-import * as Fieldset from '@base_ui/react/Fieldset';
-import * as Field from '@base_ui/react/Field';
+import { Form } from '@base_ui/react/Form';
+import { Fieldset } from '@base_ui/react/Fieldset';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 type Status = 'initial' | 'loading' | 'success' | 'error';
diff --git a/docs/data/components/form/form.mdx b/docs/data/components/form/form.mdx
index 72eaf9a5a..999b0bcaf 100644
--- a/docs/data/components/form/form.mdx
+++ b/docs/data/components/form/form.mdx
@@ -37,8 +37,8 @@ Forms are implemented using a `Root` component and `Field` components:
 Forms are intended to be used with the `Field` component, which provides labeling and validation for individual form controls. These are nested inside `Form.Root`:
 
 ```ts
-import * as Form from '@base_ui/react/Form';
-import * as Field from '@base_ui/react/Field';
+import { Form } from '@base_ui/react/Form';
+import { Field } from '@base_ui/react/Field';
 ```
 
 ```jsx
diff --git a/docs/data/components/menu/CheckboxItems.js b/docs/data/components/menu/CheckboxItems.js
index 8b316c8b4..0dd752b86 100644
--- a/docs/data/components/menu/CheckboxItems.js
+++ b/docs/data/components/menu/CheckboxItems.js
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function CheckboxItems() {
diff --git a/docs/data/components/menu/CheckboxItems.tsx b/docs/data/components/menu/CheckboxItems.tsx
index 930e8c709..1efbbd4de 100644
--- a/docs/data/components/menu/CheckboxItems.tsx
+++ b/docs/data/components/menu/CheckboxItems.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function CheckboxItems() {
diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.js b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.js
index d5c3d1b7f..37fec5c5a 100644
--- a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.js
+++ b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as BaseMenu from '@base_ui/react/Menu';
+import { Menu as BaseMenu } from '@base_ui/react/Menu';
 import classes from './Menu.module.css';
 
 export const Menu = BaseMenu.Root;
diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx
index 81ee796e8..87def4d72 100644
--- a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx
+++ b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseMenu from '@base_ui/react/Menu';
+import { Menu as BaseMenu } from '@base_ui/react/Menu';
 import classes from './Menu.module.css';
 
 export const Menu = BaseMenu.Root;
diff --git a/docs/data/components/menu/MenuIntroduction/system/index.js b/docs/data/components/menu/MenuIntroduction/system/index.js
index 945f5bd82..3b7dca224 100644
--- a/docs/data/components/menu/MenuIntroduction/system/index.js
+++ b/docs/data/components/menu/MenuIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function MenuIntroduction() {
diff --git a/docs/data/components/menu/MenuIntroduction/system/index.tsx b/docs/data/components/menu/MenuIntroduction/system/index.tsx
index 587097e71..a45fce979 100644
--- a/docs/data/components/menu/MenuIntroduction/system/index.tsx
+++ b/docs/data/components/menu/MenuIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function MenuIntroduction() {
diff --git a/docs/data/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/components/menu/MenuIntroduction/tailwind/index.js
index c88827b7e..74361643e 100644
--- a/docs/data/components/menu/MenuIntroduction/tailwind/index.js
+++ b/docs/data/components/menu/MenuIntroduction/tailwind/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/menu/MenuIntroduction/tailwind/index.tsx b/docs/data/components/menu/MenuIntroduction/tailwind/index.tsx
index 61821bb4a..c1203da2e 100644
--- a/docs/data/components/menu/MenuIntroduction/tailwind/index.tsx
+++ b/docs/data/components/menu/MenuIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/menu/NestedMenu.js b/docs/data/components/menu/NestedMenu.js
index 82d31a822..32a7cca1f 100644
--- a/docs/data/components/menu/NestedMenu.js
+++ b/docs/data/components/menu/NestedMenu.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function NestedMenu() {
diff --git a/docs/data/components/menu/NestedMenu.tsx b/docs/data/components/menu/NestedMenu.tsx
index 9eb43acaf..b13f069b1 100644
--- a/docs/data/components/menu/NestedMenu.tsx
+++ b/docs/data/components/menu/NestedMenu.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function NestedMenu() {
diff --git a/docs/data/components/menu/RadioItems.js b/docs/data/components/menu/RadioItems.js
index 314d6f34d..e00fdf1fd 100644
--- a/docs/data/components/menu/RadioItems.js
+++ b/docs/data/components/menu/RadioItems.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function RadioItems() {
diff --git a/docs/data/components/menu/RadioItems.tsx b/docs/data/components/menu/RadioItems.tsx
index 314d6f34d..e00fdf1fd 100644
--- a/docs/data/components/menu/RadioItems.tsx
+++ b/docs/data/components/menu/RadioItems.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function RadioItems() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldFormat.js b/docs/data/components/number-field/UnstyledNumberFieldFormat.js
index 6354175c3..250b32426 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldFormat.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldFormat.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled, css } from '@mui/system';
 
 export default function UnstyledNumberFieldFormat() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldFormat.tsx b/docs/data/components/number-field/UnstyledNumberFieldFormat.tsx
index 6354175c3..250b32426 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldFormat.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldFormat.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled, css } from '@mui/system';
 
 export default function UnstyledNumberFieldFormat() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.js b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.js
index f4919cd48..799163407 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.tsx b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.tsx
index f4919cd48..799163407 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.js b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.js
index 0ecfce83e..d93b97b1f 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
-import * as Field from '@base_ui/react/Field';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
+import { Field } from '@base_ui/react/Field';
 import { css, styled, useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx
index 0ecfce83e..d93b97b1f 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
-import * as Field from '@base_ui/react/Field';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
+import { Field } from '@base_ui/react/Field';
 import { css, styled, useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
index 7fb70bffe..465c128cb 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { useTheme } from '@mui/system';
 
 function classNames(...classes) {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx
index a93e48dcb..2fddd401f 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { useTheme } from '@mui/system';
 
 function classNames(...classes: Array<string | boolean | undefined | null>) {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldScrub.js b/docs/data/components/number-field/UnstyledNumberFieldScrub.js
index 164de5acf..e1a458e47 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldScrub.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldScrub.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled } from '@mui/system';
 
 export default function UnstyledNumberFieldScrub() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldScrub.tsx b/docs/data/components/number-field/UnstyledNumberFieldScrub.tsx
index 164de5acf..e1a458e47 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldScrub.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldScrub.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled } from '@mui/system';
 
 export default function UnstyledNumberFieldScrub() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.js b/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.js
index b0ef9a2b7..f452ec03a 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled } from '@mui/system';
 
 export default function UnstyledNumberFieldWheelScrub() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.tsx b/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.tsx
index b0ef9a2b7..f452ec03a 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled } from '@mui/system';
 
 export default function UnstyledNumberFieldWheelScrub() {
diff --git a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js
index 38d2d2de2..dc7cdccd4 100644
--- a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js
+++ b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { styled } from '@mui/system';
 
 export default function UnstyledPopoverIntroduction() {
diff --git a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx
index 38d2d2de2..dc7cdccd4 100644
--- a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx
+++ b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { styled } from '@mui/system';
 
 export default function UnstyledPopoverIntroduction() {
diff --git a/docs/data/components/popover/UnstyledPopoverTransition.js b/docs/data/components/popover/UnstyledPopoverTransition.js
index 5e50a7e09..b0af18359 100644
--- a/docs/data/components/popover/UnstyledPopoverTransition.js
+++ b/docs/data/components/popover/UnstyledPopoverTransition.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { styled } from '@mui/system';
 
 export default function UnstyledPopoverTransition() {
diff --git a/docs/data/components/popover/UnstyledPopoverTransition.tsx b/docs/data/components/popover/UnstyledPopoverTransition.tsx
index 5e50a7e09..b0af18359 100644
--- a/docs/data/components/popover/UnstyledPopoverTransition.tsx
+++ b/docs/data/components/popover/UnstyledPopoverTransition.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { styled } from '@mui/system';
 
 export default function UnstyledPopoverTransition() {
diff --git a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js
index e7506c5c7..98e97754b 100644
--- a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js
+++ b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { styled } from '@mui/system';
 
 export default function UnstyledPreviewCardIntroduction() {
diff --git a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx
index e7506c5c7..98e97754b 100644
--- a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx
+++ b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { styled } from '@mui/system';
 
 export default function UnstyledPreviewCardIntroduction() {
diff --git a/docs/data/components/preview-card/UnstyledPreviewCardTransition.js b/docs/data/components/preview-card/UnstyledPreviewCardTransition.js
index 346ba7917..0c40c7588 100644
--- a/docs/data/components/preview-card/UnstyledPreviewCardTransition.js
+++ b/docs/data/components/preview-card/UnstyledPreviewCardTransition.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { styled } from '@mui/system';
 
 export default function UnstyledPreviewCardTransition() {
diff --git a/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx b/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx
index 346ba7917..0c40c7588 100644
--- a/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx
+++ b/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { styled } from '@mui/system';
 
 export default function UnstyledPreviewCardTransition() {
diff --git a/docs/data/components/progress/IndeterminateProgress.js b/docs/data/components/progress/IndeterminateProgress.js
index b3195b7a1..2b81c447f 100644
--- a/docs/data/components/progress/IndeterminateProgress.js
+++ b/docs/data/components/progress/IndeterminateProgress.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 import { Box, styled, keyframes, css } from '@mui/system';
 
 export default function IndeterminateProgress() {
diff --git a/docs/data/components/progress/IndeterminateProgress.tsx b/docs/data/components/progress/IndeterminateProgress.tsx
index b3195b7a1..2b81c447f 100644
--- a/docs/data/components/progress/IndeterminateProgress.tsx
+++ b/docs/data/components/progress/IndeterminateProgress.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 import { Box, styled, keyframes, css } from '@mui/system';
 
 export default function IndeterminateProgress() {
diff --git a/docs/data/components/progress/RtlProgress.js b/docs/data/components/progress/RtlProgress.js
index 1c95abdc8..6654e62b6 100644
--- a/docs/data/components/progress/RtlProgress.js
+++ b/docs/data/components/progress/RtlProgress.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 import { Box, styled } from '@mui/system';
 
 export default function RtlProgress() {
diff --git a/docs/data/components/progress/RtlProgress.tsx b/docs/data/components/progress/RtlProgress.tsx
index 1c95abdc8..6654e62b6 100644
--- a/docs/data/components/progress/RtlProgress.tsx
+++ b/docs/data/components/progress/RtlProgress.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 import { Box, styled } from '@mui/system';
 
 export default function RtlProgress() {
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js
index bee6da9c0..5a2c23b5a 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   return (
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx
index bee6da9c0..5a2c23b5a 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   return (
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js
index 750a30a67..435d7d43b 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx
index 750a30a67..435d7d43b 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js
index 65cdae0d4..41cc11ec5 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/system';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx
index badde7161..650a4198d 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.js b/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.js
index 37a96630a..f1e246848 100644
--- a/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.js
+++ b/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import { styled } from '@mui/system';
 
 export default function UnstyledRadioGroupIntroduction() {
diff --git a/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.tsx b/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.tsx
index 37a96630a..f1e246848 100644
--- a/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.tsx
+++ b/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import { styled } from '@mui/system';
 
 export default function UnstyledRadioGroupIntroduction() {
diff --git a/docs/data/components/separator/SeparatorIntroduction.js b/docs/data/components/separator/SeparatorIntroduction.js
index d22184c6d..fdacf2965 100644
--- a/docs/data/components/separator/SeparatorIntroduction.js
+++ b/docs/data/components/separator/SeparatorIntroduction.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Separator from '@base_ui/react/Separator';
+import { Separator } from '@base_ui/react/Separator';
 import { styled } from '@mui/system';
 
 export default function SeparatorIntroduction() {
diff --git a/docs/data/components/separator/SeparatorIntroduction.tsx b/docs/data/components/separator/SeparatorIntroduction.tsx
index d22184c6d..fdacf2965 100644
--- a/docs/data/components/separator/SeparatorIntroduction.tsx
+++ b/docs/data/components/separator/SeparatorIntroduction.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Separator from '@base_ui/react/Separator';
+import { Separator } from '@base_ui/react/Separator';
 import { styled } from '@mui/system';
 
 export default function SeparatorIntroduction() {
diff --git a/docs/data/components/slider/RangeSlider.js b/docs/data/components/slider/RangeSlider.js
index f8b56822b..43c1a0158 100644
--- a/docs/data/components/slider/RangeSlider.js
+++ b/docs/data/components/slider/RangeSlider.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function RangeSlider() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/RangeSlider.tsx b/docs/data/components/slider/RangeSlider.tsx
index ddb0cdaba..53279eade 100644
--- a/docs/data/components/slider/RangeSlider.tsx
+++ b/docs/data/components/slider/RangeSlider.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function RangeSlider() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/RtlSlider.js b/docs/data/components/slider/RtlSlider.js
index 13c3d16ca..472dce469 100644
--- a/docs/data/components/slider/RtlSlider.js
+++ b/docs/data/components/slider/RtlSlider.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 import { styled, useTheme, Box } from '@mui/system';
 
 export default function RtlSlider() {
diff --git a/docs/data/components/slider/RtlSlider.tsx b/docs/data/components/slider/RtlSlider.tsx
index 62f0aea2d..31961f628 100644
--- a/docs/data/components/slider/RtlSlider.tsx
+++ b/docs/data/components/slider/RtlSlider.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 import { styled, useTheme, Box } from '@mui/system';
 
 export default function RtlSlider() {
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
index 966ce832a..c5c0546f4 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
index d69cde9cf..a7ca9c845 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
index dc0b9eec0..61da914e5 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
index 4d971a0cd..3e07ad98a 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
index 5f1c30861..5e06ad386 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
index f079c3ad4..232b32436 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 function classNames(...classes: Array<string | boolean | undefined | null>) {
   return classes.filter(Boolean).join(' ');
diff --git a/docs/data/components/slider/VerticalSlider.js b/docs/data/components/slider/VerticalSlider.js
index 13c57c833..0548448e7 100644
--- a/docs/data/components/slider/VerticalSlider.js
+++ b/docs/data/components/slider/VerticalSlider.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { useTheme } from '@mui/system';
 
 export default function VerticalSlider() {
diff --git a/docs/data/components/slider/VerticalSlider.tsx b/docs/data/components/slider/VerticalSlider.tsx
index a535eb341..e38e7c64a 100644
--- a/docs/data/components/slider/VerticalSlider.tsx
+++ b/docs/data/components/slider/VerticalSlider.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { useTheme } from '@mui/system';
 
 export default function VerticalSlider() {
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js
index d48f24dbe..3ad7b327d 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Switch from '@base_ui/react/Switch';
+import { Switch } from '@base_ui/react/Switch';
 import classes from './styles.module.css';
 
 export default function UnstyledSwitchIntroduction() {
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx
index d48f24dbe..3ad7b327d 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Switch from '@base_ui/react/Switch';
+import { Switch } from '@base_ui/react/Switch';
 import classes from './styles.module.css';
 
 export default function UnstyledSwitchIntroduction() {
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js
index 12d3ea815..c8ca0841b 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseSwitch from '@base_ui/react/Switch';
+import { Switch as BaseSwitch } from '@base_ui/react/Switch';
 
 export default function UnstyledSwitchIntroduction() {
   return (
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx
index 12d3ea815..c8ca0841b 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseSwitch from '@base_ui/react/Switch';
+import { Switch as BaseSwitch } from '@base_ui/react/Switch';
 
 export default function UnstyledSwitchIntroduction() {
   return (
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
index 9343aef64..53e9b4b23 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseSwitch from '@base_ui/react/Switch';
+import { Switch as BaseSwitch } from '@base_ui/react/Switch';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
index d3c6a6a13..36874d892 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseSwitch from '@base_ui/react/Switch';
+import { Switch as BaseSwitch } from '@base_ui/react/Switch';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/tabs/IndicatorBubble.js b/docs/data/components/tabs/IndicatorBubble.js
index 6866800e4..80ce1ffbd 100644
--- a/docs/data/components/tabs/IndicatorBubble.js
+++ b/docs/data/components/tabs/IndicatorBubble.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function IndicatorBubble() {
   return (
diff --git a/docs/data/components/tabs/IndicatorBubble.tsx b/docs/data/components/tabs/IndicatorBubble.tsx
index 6866800e4..80ce1ffbd 100644
--- a/docs/data/components/tabs/IndicatorBubble.tsx
+++ b/docs/data/components/tabs/IndicatorBubble.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function IndicatorBubble() {
   return (
diff --git a/docs/data/components/tabs/IndicatorUnderline.js b/docs/data/components/tabs/IndicatorUnderline.js
index cf78e34dd..441448e03 100644
--- a/docs/data/components/tabs/IndicatorUnderline.js
+++ b/docs/data/components/tabs/IndicatorUnderline.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function IndicatorUnderline() {
   return (
diff --git a/docs/data/components/tabs/IndicatorUnderline.tsx b/docs/data/components/tabs/IndicatorUnderline.tsx
index cf78e34dd..441448e03 100644
--- a/docs/data/components/tabs/IndicatorUnderline.tsx
+++ b/docs/data/components/tabs/IndicatorUnderline.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function IndicatorUnderline() {
   return (
diff --git a/docs/data/components/tabs/KeyboardNavigation.js b/docs/data/components/tabs/KeyboardNavigation.js
index 163f1229c..47d402c90 100644
--- a/docs/data/components/tabs/KeyboardNavigation.js
+++ b/docs/data/components/tabs/KeyboardNavigation.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function KeyboardNavigation() {
   return (
diff --git a/docs/data/components/tabs/KeyboardNavigation.tsx b/docs/data/components/tabs/KeyboardNavigation.tsx
index 163f1229c..47d402c90 100644
--- a/docs/data/components/tabs/KeyboardNavigation.tsx
+++ b/docs/data/components/tabs/KeyboardNavigation.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function KeyboardNavigation() {
   return (
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.js b/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.js
index 1044ae513..ba96422e6 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.js
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   return (
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.tsx b/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.tsx
index 1044ae513..ba96422e6 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.tsx
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   return (
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.js b/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.js
index aea0b9744..021c449cb 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.js
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   return (
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.tsx b/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.tsx
index aea0b9744..021c449cb 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.tsx
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   return (
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
index d8bd50d5b..fe9fc5625 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
index 92957ad45..609491d86 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/tabs/UnstyledTabsRouting.js b/docs/data/components/tabs/UnstyledTabsRouting.js
index 5bd42b9d8..5782a0785 100644
--- a/docs/data/components/tabs/UnstyledTabsRouting.js
+++ b/docs/data/components/tabs/UnstyledTabsRouting.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import {
   MemoryRouter,
   Route,
diff --git a/docs/data/components/tabs/UnstyledTabsRouting.tsx b/docs/data/components/tabs/UnstyledTabsRouting.tsx
index fff226d17..0ff86ac06 100644
--- a/docs/data/components/tabs/UnstyledTabsRouting.tsx
+++ b/docs/data/components/tabs/UnstyledTabsRouting.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import {
   MemoryRouter,
   Route,
diff --git a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js
index cfe835f23..e886d41b7 100644
--- a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js
+++ b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipDelayGroup() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx
index cfe835f23..e886d41b7 100644
--- a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx
+++ b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipDelayGroup() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js
index 1d8e8265a..cd2f93ed0 100644
--- a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js
+++ b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipFollowCursor() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx
index 1d8e8265a..cd2f93ed0 100644
--- a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx
+++ b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipFollowCursor() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js
index 6d2492f1c..f729f3763 100644
--- a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js
+++ b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipIntroduction() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx
index 6d2492f1c..f729f3763 100644
--- a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx
+++ b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipIntroduction() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipTransition.js b/docs/data/components/tooltip/UnstyledTooltipTransition.js
index 1ac008c3d..d07593a93 100644
--- a/docs/data/components/tooltip/UnstyledTooltipTransition.js
+++ b/docs/data/components/tooltip/UnstyledTooltipTransition.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipTransition() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipTransition.tsx b/docs/data/components/tooltip/UnstyledTooltipTransition.tsx
index 1ac008c3d..d07593a93 100644
--- a/docs/data/components/tooltip/UnstyledTooltipTransition.tsx
+++ b/docs/data/components/tooltip/UnstyledTooltipTransition.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipTransition() {
diff --git a/docs/data/getting-started/accessibility/FocusRing.js b/docs/data/getting-started/accessibility/FocusRing.js
index d115f561c..24d3c25be 100644
--- a/docs/data/getting-started/accessibility/FocusRing.js
+++ b/docs/data/getting-started/accessibility/FocusRing.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function FocusRing() {
   return (
diff --git a/docs/data/getting-started/accessibility/FocusRing.tsx b/docs/data/getting-started/accessibility/FocusRing.tsx
index d115f561c..24d3c25be 100644
--- a/docs/data/getting-started/accessibility/FocusRing.tsx
+++ b/docs/data/getting-started/accessibility/FocusRing.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function FocusRing() {
   return (
diff --git a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetCode.tsx b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetCode.tsx
index e2d74a1f1..1fd44aa06 100644
--- a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetCode.tsx
+++ b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetCode.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export function PackageManagerSnippetCode(props: PackageManagerSnippetCode.Props) {
   const { value, children } = props;
diff --git a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx
index a9d8e6c23..cd230bc1c 100644
--- a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx
+++ b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 // eslint-disable-next-line no-restricted-imports
 import { useEnhancedEffect } from '@base_ui/react/utils/useEnhancedEffect';
 import { usePackageManagerSnippetContext } from './PackageManagerSnippetProvider';
diff --git a/docs/src/components/DocsVersionSelector.tsx b/docs/src/components/DocsVersionSelector.tsx
index f1bb24dea..9ec9fdd78 100644
--- a/docs/src/components/DocsVersionSelector.tsx
+++ b/docs/src/components/DocsVersionSelector.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { SelectIcon } from 'docs-base/src/icons/Select';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import classes from './DocsVersionSelector.module.css';
 
 export interface DocumentationVersion {
diff --git a/docs/src/components/content/InstallationInstructions.tsx b/docs/src/components/content/InstallationInstructions.tsx
index c7f5bfcdb..63d9e1f19 100644
--- a/docs/src/components/content/InstallationInstructions.tsx
+++ b/docs/src/components/content/InstallationInstructions.tsx
@@ -27,7 +27,7 @@ export function InstallationInstructions(props: InstallationInstructionsProps) {
       <p>Once you have the package installed, import the component.</p>
       <pre>
         {componentNames
-          .map((name) => `import * as ${name} from '@base_ui/react/${name}';`)
+          .map((name) => `import { ${name} } from '@base_ui/react/${name}';`)
           .join('\n')}
       </pre>
     </React.Fragment>
diff --git a/docs/src/components/demo/Demo.tsx b/docs/src/components/demo/Demo.tsx
index cfeb7b6a8..519e82adb 100644
--- a/docs/src/components/demo/Demo.tsx
+++ b/docs/src/components/demo/Demo.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 import { ErrorBoundary } from 'react-error-boundary';
 import * as BaseDemo from 'docs-base/src/blocks/Demo';
 import { CopyIcon } from 'docs-base/src/icons/Copy';
diff --git a/docs/src/components/demo/DemoFileSelector.tsx b/docs/src/components/demo/DemoFileSelector.tsx
index c15610dc3..ad9bc98b3 100644
--- a/docs/src/components/demo/DemoFileSelector.tsx
+++ b/docs/src/components/demo/DemoFileSelector.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { DemoContext } from 'docs-base/src/blocks/Demo';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import classes from './DemoFileSelector.module.css';
 
 export interface DemoFileSelectorProps {
diff --git a/docs/src/design-system/Tooltip.tsx b/docs/src/design-system/Tooltip.tsx
index c18a043e4..c887c66de 100644
--- a/docs/src/design-system/Tooltip.tsx
+++ b/docs/src/design-system/Tooltip.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseTooltip from '@base_ui/react/Tooltip';
+import { Tooltip as BaseTooltip } from '@base_ui/react/Tooltip';
 import classes from './Tooltip.module.css';
 
 export function Tooltip(props: Tooltip.Props) {
diff --git a/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx b/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx
index 323a65516..dc7e7ebc3 100644
--- a/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Backdrop />', () => {
diff --git a/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx b/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx
index 65f4bba90..7490ada7a 100644
--- a/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Close />', () => {
diff --git a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx
index da704e271..802229101 100644
--- a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Description />', () => {
diff --git a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx
index 40fec9672..e11cd0b2a 100644
--- a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Popup />', () => {
diff --git a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx
index 44ba27380..d2711e623 100644
--- a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Title />', () => {
diff --git a/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx b/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx
index c06bb9ea5..a4dc6cc12 100644
--- a/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Trigger />', () => {
diff --git a/packages/mui-base/src/AlertDialog/index.barrel.ts b/packages/mui-base/src/AlertDialog/index.barrel.ts
deleted file mode 100644
index 281822c58..000000000
--- a/packages/mui-base/src/AlertDialog/index.barrel.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { AlertDialogBackdrop } from './Backdrop/AlertDialogBackdrop';
-export { AlertDialogClose } from './Close/AlertDialogClose';
-export { AlertDialogDescription } from './Description/AlertDialogDescription';
-export { AlertDialogPopup } from './Popup/AlertDialogPopup';
-export { AlertDialogRoot } from './Root/AlertDialogRoot';
-export { AlertDialogTitle } from './Title/AlertDialogTitle';
-export { AlertDialogTrigger } from './Trigger/AlertDialogTrigger';
diff --git a/packages/mui-base/src/AlertDialog/index.parts.ts b/packages/mui-base/src/AlertDialog/index.parts.ts
new file mode 100644
index 000000000..ad0f1a228
--- /dev/null
+++ b/packages/mui-base/src/AlertDialog/index.parts.ts
@@ -0,0 +1,7 @@
+export { AlertDialogBackdrop as Backdrop } from './Backdrop/AlertDialogBackdrop';
+export { AlertDialogClose as Close } from './Close/AlertDialogClose';
+export { AlertDialogDescription as Description } from './Description/AlertDialogDescription';
+export { AlertDialogPopup as Popup } from './Popup/AlertDialogPopup';
+export { AlertDialogRoot as Root } from './Root/AlertDialogRoot';
+export { AlertDialogTitle as Title } from './Title/AlertDialogTitle';
+export { AlertDialogTrigger as Trigger } from './Trigger/AlertDialogTrigger';
diff --git a/packages/mui-base/src/AlertDialog/index.ts b/packages/mui-base/src/AlertDialog/index.ts
index ad0f1a228..766a0ca54 100644
--- a/packages/mui-base/src/AlertDialog/index.ts
+++ b/packages/mui-base/src/AlertDialog/index.ts
@@ -1,7 +1 @@
-export { AlertDialogBackdrop as Backdrop } from './Backdrop/AlertDialogBackdrop';
-export { AlertDialogClose as Close } from './Close/AlertDialogClose';
-export { AlertDialogDescription as Description } from './Description/AlertDialogDescription';
-export { AlertDialogPopup as Popup } from './Popup/AlertDialogPopup';
-export { AlertDialogRoot as Root } from './Root/AlertDialogRoot';
-export { AlertDialogTitle as Title } from './Title/AlertDialogTitle';
-export { AlertDialogTrigger as Trigger } from './Trigger/AlertDialogTrigger';
+export * as AlertDialog from './index.parts';
diff --git a/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx b/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx
index 7dbca304d..1bcc780c2 100644
--- a/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx
+++ b/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { createRenderer, describeConformance } from '#test-utils';
 import { CheckboxRootContext } from '../Root/CheckboxRootContext';
 
diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
index 169a0f38a..40a9eccbe 100644
--- a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
+++ b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, fireEvent } from '@mui/internal-test-utils';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
diff --git a/packages/mui-base/src/Checkbox/index.barrel.ts b/packages/mui-base/src/Checkbox/index.barrel.ts
deleted file mode 100644
index 5a27a441d..000000000
--- a/packages/mui-base/src/Checkbox/index.barrel.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { CheckboxRoot } from './Root/CheckboxRoot';
-export { CheckboxIndicator } from './Indicator/CheckboxIndicator';
diff --git a/packages/mui-base/src/Checkbox/index.parts.ts b/packages/mui-base/src/Checkbox/index.parts.ts
new file mode 100644
index 000000000..c046f6b44
--- /dev/null
+++ b/packages/mui-base/src/Checkbox/index.parts.ts
@@ -0,0 +1,2 @@
+export { CheckboxRoot as Root } from './Root/CheckboxRoot';
+export { CheckboxIndicator as Indicator } from './Indicator/CheckboxIndicator';
diff --git a/packages/mui-base/src/Checkbox/index.ts b/packages/mui-base/src/Checkbox/index.ts
index c046f6b44..4e96104ea 100644
--- a/packages/mui-base/src/Checkbox/index.ts
+++ b/packages/mui-base/src/Checkbox/index.ts
@@ -1,2 +1 @@
-export { CheckboxRoot as Root } from './Root/CheckboxRoot';
-export { CheckboxIndicator as Indicator } from './Indicator/CheckboxIndicator';
+export * as Checkbox from './index.parts';
diff --git a/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx b/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx
index a3ae0e9fc..98cb90bfd 100644
--- a/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx
+++ b/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { expect } from 'chai';
 
 describe('useCheckboxGroupParent', () => {
diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx
index 402769c6a..e7011b524 100644
--- a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx
+++ b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<CheckboxGroup.Root />', () => {
diff --git a/packages/mui-base/src/CheckboxGroup/index.barrel.ts b/packages/mui-base/src/CheckboxGroup/index.barrel.ts
deleted file mode 100644
index 2f4786b2a..000000000
--- a/packages/mui-base/src/CheckboxGroup/index.barrel.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Root/CheckboxGroupRoot';
diff --git a/packages/mui-base/src/CheckboxGroup/index.parts.ts b/packages/mui-base/src/CheckboxGroup/index.parts.ts
new file mode 100644
index 000000000..dd08fe5b4
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/index.parts.ts
@@ -0,0 +1 @@
+export { CheckboxGroupRoot as Root } from './Root/CheckboxGroupRoot';
diff --git a/packages/mui-base/src/CheckboxGroup/index.ts b/packages/mui-base/src/CheckboxGroup/index.ts
index dd08fe5b4..da7ae148d 100644
--- a/packages/mui-base/src/CheckboxGroup/index.ts
+++ b/packages/mui-base/src/CheckboxGroup/index.ts
@@ -1 +1 @@
-export { CheckboxGroupRoot as Root } from './Root/CheckboxGroupRoot';
+export * as CheckboxGroup from './index.parts';
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
index 2fa98e940..435562e03 100644
--- a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
+++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Collapsible from '@base_ui/react/Collapsible';
-import { CollapsibleContext } from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
+import { CollapsibleContext } from '../Root/CollapsibleContext';
 import { describeConformance } from '../../../test/describeConformance';
 
 const contextValue: Collapsible.Root.Context = {
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
index d1395b0c2..ec5888e7f 100644
--- a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
+++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, act } from '@mui/internal-test-utils';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Collapsible.Root />', () => {
diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
index 13ffe3567..0e7a77d5d 100644
--- a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
+++ b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Collapsible from '@base_ui/react/Collapsible';
-import { CollapsibleContext } from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
+import { CollapsibleContext } from '../Root/CollapsibleContext';
 import { describeConformance } from '../../../test/describeConformance';
 
 const contextValue: Collapsible.Root.Context = {
diff --git a/packages/mui-base/src/Collapsible/index.parts.ts b/packages/mui-base/src/Collapsible/index.parts.ts
new file mode 100644
index 000000000..3736ae4de
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/index.parts.ts
@@ -0,0 +1,3 @@
+export { CollapsibleRoot as Root } from './Root/CollapsibleRoot';
+export { CollapsibleTrigger as Trigger } from './Trigger/CollapsibleTrigger';
+export { CollapsibleContent as Content } from './Content/CollapsibleContent';
diff --git a/packages/mui-base/src/Collapsible/index.ts b/packages/mui-base/src/Collapsible/index.ts
index facd5dee2..6d2cba0c7 100644
--- a/packages/mui-base/src/Collapsible/index.ts
+++ b/packages/mui-base/src/Collapsible/index.ts
@@ -1,9 +1 @@
-export { CollapsibleRoot as Root } from './Root/CollapsibleRoot';
-export { useCollapsibleRoot } from './Root/useCollapsibleRoot';
-export { CollapsibleContext, useCollapsibleContext } from './Root/CollapsibleContext';
-
-export { CollapsibleTrigger as Trigger } from './Trigger/CollapsibleTrigger';
-export { useCollapsibleTrigger } from './Trigger/useCollapsibleTrigger';
-
-export { CollapsibleContent as Content } from './Content/CollapsibleContent';
-export { useCollapsibleContent } from './Content/useCollapsibleContent';
+export * as Collapsible from './index.parts';
diff --git a/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx b/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx
index f59fdf0fe..8dead2426 100644
--- a/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx
+++ b/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Dialog.Backdrop />', () => {
diff --git a/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx b/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx
index f91456aa7..511b62008 100644
--- a/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx
+++ b/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Dialog.Close />', () => {
diff --git a/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx b/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx
index 31ce4b158..3bc0abdb0 100644
--- a/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx
+++ b/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Dialog.Description />', () => {
diff --git a/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx b/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx
index 056effacd..7f1114b7c 100644
--- a/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx
+++ b/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { describeConformance, createRenderer } from '#test-utils';
 
 describe('<Dialog.Popup />', () => {
diff --git a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx
index 0c7afd848..6ae50fd2a 100644
--- a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx
+++ b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, fireEvent, waitFor } from '@mui/internal-test-utils';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer } from '#test-utils';
 
 describe('<Dialog.Root />', () => {
diff --git a/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx b/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx
index 726da92fb..92e6f9679 100644
--- a/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx
+++ b/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Dialog.Title />', () => {
diff --git a/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx b/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx
index 07594a959..14eff99a0 100644
--- a/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx
+++ b/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Dialog.Trigger />', () => {
diff --git a/packages/mui-base/src/Dialog/index.barrel.ts b/packages/mui-base/src/Dialog/index.barrel.ts
deleted file mode 100644
index b12eac69e..000000000
--- a/packages/mui-base/src/Dialog/index.barrel.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { DialogBackdrop } from './Backdrop/DialogBackdrop';
-export { DialogClose } from './Close/DialogClose';
-export { DialogDescription } from './Description/DialogDescription';
-export { DialogPopup } from './Popup/DialogPopup';
-export { DialogRoot } from './Root/DialogRoot';
-export { DialogTitle } from './Title/DialogTitle';
-export { DialogTrigger } from './Trigger/DialogTrigger';
diff --git a/packages/mui-base/src/Dialog/index.parts.ts b/packages/mui-base/src/Dialog/index.parts.ts
new file mode 100644
index 000000000..f242e5602
--- /dev/null
+++ b/packages/mui-base/src/Dialog/index.parts.ts
@@ -0,0 +1,7 @@
+export { DialogBackdrop as Backdrop } from './Backdrop/DialogBackdrop';
+export { DialogClose as Close } from './Close/DialogClose';
+export { DialogDescription as Description } from './Description/DialogDescription';
+export { DialogPopup as Popup } from './Popup/DialogPopup';
+export { DialogRoot as Root } from './Root/DialogRoot';
+export { DialogTitle as Title } from './Title/DialogTitle';
+export { DialogTrigger as Trigger } from './Trigger/DialogTrigger';
diff --git a/packages/mui-base/src/Dialog/index.ts b/packages/mui-base/src/Dialog/index.ts
index f242e5602..823c17d24 100644
--- a/packages/mui-base/src/Dialog/index.ts
+++ b/packages/mui-base/src/Dialog/index.ts
@@ -1,7 +1 @@
-export { DialogBackdrop as Backdrop } from './Backdrop/DialogBackdrop';
-export { DialogClose as Close } from './Close/DialogClose';
-export { DialogDescription as Description } from './Description/DialogDescription';
-export { DialogPopup as Popup } from './Popup/DialogPopup';
-export { DialogRoot as Root } from './Root/DialogRoot';
-export { DialogTitle as Title } from './Title/DialogTitle';
-export { DialogTrigger as Trigger } from './Trigger/DialogTrigger';
+export * as Dialog from './index.parts';
diff --git a/packages/mui-base/src/Field/Control/FieldControl.test.tsx b/packages/mui-base/src/Field/Control/FieldControl.test.tsx
index 677cac06a..cf6187722 100644
--- a/packages/mui-base/src/Field/Control/FieldControl.test.tsx
+++ b/packages/mui-base/src/Field/Control/FieldControl.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Field.Control />', () => {
diff --git a/packages/mui-base/src/Field/Description/FieldDescription.test.tsx b/packages/mui-base/src/Field/Description/FieldDescription.test.tsx
index 56ade9fbf..c0aa55dec 100644
--- a/packages/mui-base/src/Field/Description/FieldDescription.test.tsx
+++ b/packages/mui-base/src/Field/Description/FieldDescription.test.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
-import * as Checkbox from '@base_ui/react/Checkbox';
-import * as Switch from '@base_ui/react/Switch';
-import * as NumberField from '@base_ui/react/NumberField';
-import * as Slider from '@base_ui/react/Slider';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { Field } from '@base_ui/react/Field';
+import { Checkbox } from '@base_ui/react/Checkbox';
+import { Switch } from '@base_ui/react/Switch';
+import { NumberField } from '@base_ui/react/NumberField';
+import { Slider } from '@base_ui/react/Slider';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { describeConformance } from '../../../test/describeConformance';
diff --git a/packages/mui-base/src/Field/Error/FieldError.test.tsx b/packages/mui-base/src/Field/Error/FieldError.test.tsx
index 0fb6ea967..1255e3598 100644
--- a/packages/mui-base/src/Field/Error/FieldError.test.tsx
+++ b/packages/mui-base/src/Field/Error/FieldError.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Field.Error />', () => {
diff --git a/packages/mui-base/src/Field/Label/FieldLabel.test.tsx b/packages/mui-base/src/Field/Label/FieldLabel.test.tsx
index c1cf8d645..39424f57c 100644
--- a/packages/mui-base/src/Field/Label/FieldLabel.test.tsx
+++ b/packages/mui-base/src/Field/Label/FieldLabel.test.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
-import * as Checkbox from '@base_ui/react/Checkbox';
-import * as Switch from '@base_ui/react/Switch';
-import * as NumberField from '@base_ui/react/NumberField';
-import * as Slider from '@base_ui/react/Slider';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { Field } from '@base_ui/react/Field';
+import { Checkbox } from '@base_ui/react/Checkbox';
+import { Switch } from '@base_ui/react/Switch';
+import { NumberField } from '@base_ui/react/NumberField';
+import { Slider } from '@base_ui/react/Slider';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { describeConformance } from '../../../test/describeConformance';
diff --git a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
index a488d8053..8fe0d8b65 100644
--- a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
+++ b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
-import * as Checkbox from '@base_ui/react/Checkbox';
-import * as Switch from '@base_ui/react/Switch';
-import * as NumberField from '@base_ui/react/NumberField';
-import * as Slider from '@base_ui/react/Slider';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { Field } from '@base_ui/react/Field';
+import { Checkbox } from '@base_ui/react/Checkbox';
+import { Switch } from '@base_ui/react/Switch';
+import { NumberField } from '@base_ui/react/NumberField';
+import { Slider } from '@base_ui/react/Slider';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import userEvent from '@testing-library/user-event';
 import {
   act,
diff --git a/packages/mui-base/src/Field/Validity/FieldValidity.test.tsx b/packages/mui-base/src/Field/Validity/FieldValidity.test.tsx
index 8974a440b..98ba936da 100644
--- a/packages/mui-base/src/Field/Validity/FieldValidity.test.tsx
+++ b/packages/mui-base/src/Field/Validity/FieldValidity.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 
 describe('<Field.Validity />', () => {
   const { render } = createRenderer();
diff --git a/packages/mui-base/src/Field/index.barrel.ts b/packages/mui-base/src/Field/index.barrel.ts
deleted file mode 100644
index e9604532c..000000000
--- a/packages/mui-base/src/Field/index.barrel.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './Root/FieldRoot';
-export * from './Label/FieldLabel';
-export * from './Error/FieldError';
-export * from './Description/FieldDescription';
-export * from './Control/FieldControl';
-export * from './Validity/FieldValidity';
-
-export type { FieldValidityData } from './Root/FieldRoot';
diff --git a/packages/mui-base/src/Field/index.parts.ts b/packages/mui-base/src/Field/index.parts.ts
new file mode 100644
index 000000000..caded1396
--- /dev/null
+++ b/packages/mui-base/src/Field/index.parts.ts
@@ -0,0 +1,8 @@
+export { FieldRoot as Root } from './Root/FieldRoot';
+export { FieldLabel as Label } from './Label/FieldLabel';
+export { FieldError as Error } from './Error/FieldError';
+export { FieldDescription as Description } from './Description/FieldDescription';
+export { FieldControl as Control } from './Control/FieldControl';
+export { FieldValidity as Validity } from './Validity/FieldValidity';
+
+export type { FieldValidityData as ValidityData } from './Root/FieldRoot';
diff --git a/packages/mui-base/src/Field/index.ts b/packages/mui-base/src/Field/index.ts
index caded1396..45425dec2 100644
--- a/packages/mui-base/src/Field/index.ts
+++ b/packages/mui-base/src/Field/index.ts
@@ -1,8 +1 @@
-export { FieldRoot as Root } from './Root/FieldRoot';
-export { FieldLabel as Label } from './Label/FieldLabel';
-export { FieldError as Error } from './Error/FieldError';
-export { FieldDescription as Description } from './Description/FieldDescription';
-export { FieldControl as Control } from './Control/FieldControl';
-export { FieldValidity as Validity } from './Validity/FieldValidity';
-
-export type { FieldValidityData as ValidityData } from './Root/FieldRoot';
+export * as Field from './index.parts';
diff --git a/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.test.tsx b/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.test.tsx
index 101280858..44b65dc34 100644
--- a/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.test.tsx
+++ b/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRenderer, screen } from '@mui/internal-test-utils';
-import * as Fieldset from '@base_ui/react/Fieldset';
+import { Fieldset } from '@base_ui/react/Fieldset';
 import { expect } from 'chai';
 import { describeConformance } from '../../../test/describeConformance';
 
diff --git a/packages/mui-base/src/Fieldset/Root/FieldsetRoot.test.tsx b/packages/mui-base/src/Fieldset/Root/FieldsetRoot.test.tsx
index a397f47d9..1172c88a7 100644
--- a/packages/mui-base/src/Fieldset/Root/FieldsetRoot.test.tsx
+++ b/packages/mui-base/src/Fieldset/Root/FieldsetRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Fieldset from '@base_ui/react/Fieldset';
+import { Fieldset } from '@base_ui/react/Fieldset';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Fieldset.Root />', () => {
diff --git a/packages/mui-base/src/Fieldset/index.barrel.ts b/packages/mui-base/src/Fieldset/index.barrel.ts
deleted file mode 100644
index b5a4cbaf4..000000000
--- a/packages/mui-base/src/Fieldset/index.barrel.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Root/FieldsetRoot';
-export * from './Legend/FieldsetLegend';
diff --git a/packages/mui-base/src/Fieldset/index.parts.ts b/packages/mui-base/src/Fieldset/index.parts.ts
new file mode 100644
index 000000000..ee2ae05cb
--- /dev/null
+++ b/packages/mui-base/src/Fieldset/index.parts.ts
@@ -0,0 +1,2 @@
+export { FieldsetRoot as Root } from './Root/FieldsetRoot';
+export { FieldsetLegend as Legend } from './Legend/FieldsetLegend';
diff --git a/packages/mui-base/src/Fieldset/index.ts b/packages/mui-base/src/Fieldset/index.ts
index ee2ae05cb..1320ce190 100644
--- a/packages/mui-base/src/Fieldset/index.ts
+++ b/packages/mui-base/src/Fieldset/index.ts
@@ -1,2 +1 @@
-export { FieldsetRoot as Root } from './Root/FieldsetRoot';
-export { FieldsetLegend as Legend } from './Legend/FieldsetLegend';
+export * as Fieldset from './index.parts';
diff --git a/packages/mui-base/src/Form/Root/FormRoot.test.tsx b/packages/mui-base/src/Form/Root/FormRoot.test.tsx
index ae08084c8..bfaca78d8 100644
--- a/packages/mui-base/src/Form/Root/FormRoot.test.tsx
+++ b/packages/mui-base/src/Form/Root/FormRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as Form from '@base_ui/react/Form';
-import * as Field from '@base_ui/react/Field';
+import { Form } from '@base_ui/react/Form';
+import { Field } from '@base_ui/react/Field';
 import { expect } from 'chai';
 import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { describeConformance } from '../../../test/describeConformance';
diff --git a/packages/mui-base/src/Form/index.barrel.ts b/packages/mui-base/src/Form/index.barrel.ts
deleted file mode 100644
index acab7f429..000000000
--- a/packages/mui-base/src/Form/index.barrel.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FormRoot } from './Root/FormRoot';
diff --git a/packages/mui-base/src/Form/index.parts.ts b/packages/mui-base/src/Form/index.parts.ts
new file mode 100644
index 000000000..896025acc
--- /dev/null
+++ b/packages/mui-base/src/Form/index.parts.ts
@@ -0,0 +1 @@
+export { FormRoot as Root } from './Root/FormRoot';
diff --git a/packages/mui-base/src/Form/index.ts b/packages/mui-base/src/Form/index.ts
index 896025acc..75652f7f1 100644
--- a/packages/mui-base/src/Form/index.ts
+++ b/packages/mui-base/src/Form/index.ts
@@ -1 +1 @@
-export { FormRoot as Root } from './Root/FormRoot';
+export * as Form from './index.parts';
diff --git a/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx b/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx
index 231e31d1e..ac92bb633 100644
--- a/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx
+++ b/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Menu.Arrow />', () => {
diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx
index 9593007d2..b8b598b18 100644
--- a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx
+++ b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx
@@ -4,7 +4,7 @@ import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
 import { fireEvent, act, waitFor } from '@mui/internal-test-utils';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { describeConformance, createRenderer } from '../../../test';
 import { MenuRootContext } from '../Root/MenuRootContext';
 
diff --git a/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.test.tsx b/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.test.tsx
index dd0cfefae..769922566 100644
--- a/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.test.tsx
+++ b/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Menu.CheckboxItemIndicator />', () => {
diff --git a/packages/mui-base/src/Menu/Group/MenuGroup.test.tsx b/packages/mui-base/src/Menu/Group/MenuGroup.test.tsx
index 93d0e37d0..d21fa87b8 100644
--- a/packages/mui-base/src/Menu/Group/MenuGroup.test.tsx
+++ b/packages/mui-base/src/Menu/Group/MenuGroup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Menu.Group />', () => {
diff --git a/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.test.tsx b/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.test.tsx
index ec699ef3a..335aa8f2e 100644
--- a/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.test.tsx
+++ b/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 import { MenuGroupContext } from '../Group/MenuGroupContext';
 
diff --git a/packages/mui-base/src/Menu/Item/MenuItem.test.tsx b/packages/mui-base/src/Menu/Item/MenuItem.test.tsx
index ccb335ca1..1195d4f17 100644
--- a/packages/mui-base/src/Menu/Item/MenuItem.test.tsx
+++ b/packages/mui-base/src/Menu/Item/MenuItem.test.tsx
@@ -4,7 +4,7 @@ import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
 import { act, waitFor } from '@mui/internal-test-utils';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { describeConformance, createRenderer } from '#test-utils';
 import { MenuRootContext } from '../Root/MenuRootContext';
 
diff --git a/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx b/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx
index 64951f945..cf5904881 100644
--- a/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx
+++ b/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
 import { createRenderer, describeConformance } from '#test-utils';
 import { MenuPositionerContext } from '../Positioner/MenuPositionerContext';
diff --git a/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx b/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx
index 6e9664d35..70adbf142 100644
--- a/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx
+++ b/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
 import userEvent from '@testing-library/user-event';
 import { flushMicrotasks } from '@mui/internal-test-utils';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { describeConformance, createRenderer } from '#test-utils';
 import { MenuRootContext } from '../Root/MenuRootContext';
 
diff --git a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.test.tsx b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.test.tsx
index 0116f9c17..d3dc7223c 100644
--- a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.test.tsx
+++ b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Menu.RadioGroup />', () => {
diff --git a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx
index 7819cbc12..0a0c1e1c4 100644
--- a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx
+++ b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx
@@ -4,7 +4,7 @@ import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
 import { fireEvent, act, waitFor } from '@mui/internal-test-utils';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { describeConformance, createRenderer } from '#test-utils';
 import { MenuRadioGroupContext } from '../RadioGroup/MenuRadioGroupContext';
 import { MenuRootContext } from '../Root/MenuRootContext';
diff --git a/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.test.tsx b/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.test.tsx
index 023aa4437..429b7b793 100644
--- a/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.test.tsx
+++ b/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Menu.RadioItemIndicator />', () => {
diff --git a/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx b/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx
index b3b41ad61..591247046 100644
--- a/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx
+++ b/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { act, flushMicrotasks, waitFor } from '@mui/internal-test-utils';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import userEvent from '@testing-library/user-event';
 import { spy } from 'sinon';
 import { createRenderer } from '#test-utils';
diff --git a/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx b/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx
index 16b250010..1ee512071 100644
--- a/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx
+++ b/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
 import userEvent from '@testing-library/user-event';
 import { act } from '@mui/internal-test-utils';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { describeConformance, createRenderer } from '#test-utils';
 import { MenuRootContext } from '../Root/MenuRootContext';
 
diff --git a/packages/mui-base/src/Menu/index.barrel.ts b/packages/mui-base/src/Menu/index.barrel.ts
deleted file mode 100644
index 166bf5c67..000000000
--- a/packages/mui-base/src/Menu/index.barrel.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export { MenuArrow } from './Arrow/MenuArrow';
-export { MenuCheckboxItem } from './CheckboxItem/MenuCheckboxItem';
-export { MenuCheckboxItemIndicator } from './CheckboxItemIndicator/MenuCheckboxItemIndicator';
-export { MenuGroup } from './Group/MenuGroup';
-export { MenuGroupLabel } from './GroupLabel/MenuGroupLabel';
-export { MenuItem } from './Item/MenuItem';
-export { MenuPopup } from './Popup/MenuPopup';
-export { MenuPositioner } from './Positioner/MenuPositioner';
-export { MenuRadioGroup } from './RadioGroup/MenuRadioGroup';
-export { MenuRadioItem } from './RadioItem/MenuRadioItem';
-export { MenuRadioItemIndicator } from './RadioItemIndicator/MenuRadioItemIndicator';
-export { MenuRoot } from './Root/MenuRoot';
-export { MenuTrigger } from './Trigger/MenuTrigger';
-export { SubmenuTrigger } from './SubmenuTrigger/SubmenuTrigger';
diff --git a/packages/mui-base/src/Menu/index.parts.ts b/packages/mui-base/src/Menu/index.parts.ts
new file mode 100644
index 000000000..ac63a706d
--- /dev/null
+++ b/packages/mui-base/src/Menu/index.parts.ts
@@ -0,0 +1,15 @@
+export { MenuArrow as Arrow } from './Arrow/MenuArrow';
+export { MenuCheckboxItem as CheckboxItem } from './CheckboxItem/MenuCheckboxItem';
+export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from './CheckboxItemIndicator/MenuCheckboxItemIndicator';
+export { MenuGroup as Group } from './Group/MenuGroup';
+export { MenuGroupLabel as GroupLabel } from './GroupLabel/MenuGroupLabel';
+export { MenuItem as Item } from './Item/MenuItem';
+export { MenuPopup as Popup } from './Popup/MenuPopup';
+export { MenuPositioner as Positioner } from './Positioner/MenuPositioner';
+export { MenuRadioGroup as RadioGroup } from './RadioGroup/MenuRadioGroup';
+export { MenuRadioItem as RadioItem } from './RadioItem/MenuRadioItem';
+export { MenuRadioItemIndicator as RadioItemIndicator } from './RadioItemIndicator/MenuRadioItemIndicator';
+export { MenuRoot as Root } from './Root/MenuRoot';
+export { MenuTrigger as Trigger } from './Trigger/MenuTrigger';
+export { SeparatorRoot as Separator } from '../Separator/Root/SeparatorRoot';
+export { SubmenuTrigger } from './SubmenuTrigger/SubmenuTrigger';
diff --git a/packages/mui-base/src/Menu/index.ts b/packages/mui-base/src/Menu/index.ts
index ac63a706d..515d1290d 100644
--- a/packages/mui-base/src/Menu/index.ts
+++ b/packages/mui-base/src/Menu/index.ts
@@ -1,15 +1 @@
-export { MenuArrow as Arrow } from './Arrow/MenuArrow';
-export { MenuCheckboxItem as CheckboxItem } from './CheckboxItem/MenuCheckboxItem';
-export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from './CheckboxItemIndicator/MenuCheckboxItemIndicator';
-export { MenuGroup as Group } from './Group/MenuGroup';
-export { MenuGroupLabel as GroupLabel } from './GroupLabel/MenuGroupLabel';
-export { MenuItem as Item } from './Item/MenuItem';
-export { MenuPopup as Popup } from './Popup/MenuPopup';
-export { MenuPositioner as Positioner } from './Positioner/MenuPositioner';
-export { MenuRadioGroup as RadioGroup } from './RadioGroup/MenuRadioGroup';
-export { MenuRadioItem as RadioItem } from './RadioItem/MenuRadioItem';
-export { MenuRadioItemIndicator as RadioItemIndicator } from './RadioItemIndicator/MenuRadioItemIndicator';
-export { MenuRoot as Root } from './Root/MenuRoot';
-export { MenuTrigger as Trigger } from './Trigger/MenuTrigger';
-export { SeparatorRoot as Separator } from '../Separator/Root/SeparatorRoot';
-export { SubmenuTrigger } from './SubmenuTrigger/SubmenuTrigger';
+export * as Menu from './index.parts';
diff --git a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx
index 9b9811abc..2ca25b155 100644
--- a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx
+++ b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen, fireEvent } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY } from '../utils/constants';
 import { NumberFieldContext } from '../Root/NumberFieldContext';
diff --git a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx
index 140c66865..bda5d52f1 100644
--- a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx
+++ b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { NumberFieldContext } from '../Root/NumberFieldContext';
 
diff --git a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx
index e2153caa9..dc90a6857 100644
--- a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx
+++ b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen, fireEvent } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY } from '../utils/constants';
 import { NumberFieldContext } from '../Root/NumberFieldContext';
diff --git a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx
index b9c97f093..46ef5531e 100644
--- a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx
+++ b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { act, screen, fireEvent } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { NumberFieldContext } from '../Root/NumberFieldContext';
 
diff --git a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx
index 24b9547e1..f9f0e6aae 100644
--- a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx
+++ b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, screen, fireEvent } from '@mui/internal-test-utils';
-import * as NumberFieldBase from '@base_ui/react/NumberField';
+import { NumberField as NumberFieldBase } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<NumberField />', () => {
diff --git a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx
index a368ea791..26a693730 100644
--- a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx
+++ b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen, waitFor } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { isWebKit } from '../../utils/detectBrowser';
 import { NumberFieldContext } from '../Root/NumberFieldContext';
diff --git a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx
index 4b577113b..de3ef46f0 100644
--- a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx
+++ b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { isWebKit } from '../../utils/detectBrowser';
 import { NumberFieldContext } from '../Root/NumberFieldContext';
diff --git a/packages/mui-base/src/NumberField/index.barrel.ts b/packages/mui-base/src/NumberField/index.barrel.ts
deleted file mode 100644
index c11c363b2..000000000
--- a/packages/mui-base/src/NumberField/index.barrel.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { NumberFieldRoot } from './Root/NumberFieldRoot';
-export { NumberFieldGroup } from './Group/NumberFieldGroup';
-export { NumberFieldIncrement } from './Increment/NumberFieldIncrement';
-export { NumberFieldDecrement } from './Decrement/NumberFieldDecrement';
-export { NumberFieldInput } from './Input/NumberFieldInput';
-export { NumberFieldScrubArea } from './ScrubArea/NumberFieldScrubArea';
-export { NumberFieldScrubAreaCursor } from './ScrubAreaCursor/NumberFieldScrubAreaCursor';
diff --git a/packages/mui-base/src/NumberField/index.parts.ts b/packages/mui-base/src/NumberField/index.parts.ts
new file mode 100644
index 000000000..1f0f7cd87
--- /dev/null
+++ b/packages/mui-base/src/NumberField/index.parts.ts
@@ -0,0 +1,7 @@
+export { NumberFieldRoot as Root } from './Root/NumberFieldRoot';
+export { NumberFieldGroup as Group } from './Group/NumberFieldGroup';
+export { NumberFieldIncrement as Increment } from './Increment/NumberFieldIncrement';
+export { NumberFieldDecrement as Decrement } from './Decrement/NumberFieldDecrement';
+export { NumberFieldInput as Input } from './Input/NumberFieldInput';
+export { NumberFieldScrubArea as ScrubArea } from './ScrubArea/NumberFieldScrubArea';
+export { NumberFieldScrubAreaCursor as ScrubAreaCursor } from './ScrubAreaCursor/NumberFieldScrubAreaCursor';
diff --git a/packages/mui-base/src/NumberField/index.ts b/packages/mui-base/src/NumberField/index.ts
index 1f0f7cd87..e97deaf60 100644
--- a/packages/mui-base/src/NumberField/index.ts
+++ b/packages/mui-base/src/NumberField/index.ts
@@ -1,7 +1 @@
-export { NumberFieldRoot as Root } from './Root/NumberFieldRoot';
-export { NumberFieldGroup as Group } from './Group/NumberFieldGroup';
-export { NumberFieldIncrement as Increment } from './Increment/NumberFieldIncrement';
-export { NumberFieldDecrement as Decrement } from './Decrement/NumberFieldDecrement';
-export { NumberFieldInput as Input } from './Input/NumberFieldInput';
-export { NumberFieldScrubArea as ScrubArea } from './ScrubArea/NumberFieldScrubArea';
-export { NumberFieldScrubAreaCursor as ScrubAreaCursor } from './ScrubAreaCursor/NumberFieldScrubAreaCursor';
+export * as NumberField from './index.parts';
diff --git a/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx b/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx
index f65456fa2..3a4642d49 100644
--- a/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx
+++ b/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Popover.Arrow />', () => {
diff --git a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx
index 4ac40c877..98dccd1c0 100644
--- a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx
+++ b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Popover.Backdrop />', () => {
diff --git a/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx b/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx
index afae2d742..c1c5f89d8 100644
--- a/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx
+++ b/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { fireEvent, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx b/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx
index ee77306db..0a5026766 100644
--- a/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx
+++ b/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx b/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx
index 6475a3162..f3f3b6809 100644
--- a/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx
+++ b/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx
index 826b63acb..f784a5109 100644
--- a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx
+++ b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { createRenderer, describeConformance } from '#test-utils';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx
index 1beb90695..029c349c1 100644
--- a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx
+++ b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { fireEvent, flushMicrotasks, screen, waitFor } from '@mui/internal-test-utils';
 import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
diff --git a/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx b/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx
index 9898507ba..3b039e6c2 100644
--- a/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx
+++ b/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx
index 2a6f1879a..9bb0c7773 100644
--- a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx
+++ b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Popover.Trigger />', () => {
diff --git a/packages/mui-base/src/Popover/index.barrel.ts b/packages/mui-base/src/Popover/index.barrel.ts
deleted file mode 100644
index d970c32ab..000000000
--- a/packages/mui-base/src/Popover/index.barrel.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { PopoverRoot } from './Root/PopoverRoot';
-export { PopoverTrigger } from './Trigger/PopoverTrigger';
-export { PopoverPositioner } from './Positioner/PopoverPositioner';
-export { PopoverPopup } from './Popup/PopoverPopup';
-export { PopoverArrow } from './Arrow/PopoverArrow';
-export { PopoverBackdrop } from './Backdrop/PopoverBackdrop';
-export { PopoverTitle } from './Title/PopoverTitle';
-export { PopoverDescription } from './Description/PopoverDescription';
-export { PopoverClose } from './Close/PopoverClose';
diff --git a/packages/mui-base/src/Popover/index.parts.ts b/packages/mui-base/src/Popover/index.parts.ts
new file mode 100644
index 000000000..a025e3962
--- /dev/null
+++ b/packages/mui-base/src/Popover/index.parts.ts
@@ -0,0 +1,9 @@
+export { PopoverRoot as Root } from './Root/PopoverRoot';
+export { PopoverTrigger as Trigger } from './Trigger/PopoverTrigger';
+export { PopoverPositioner as Positioner } from './Positioner/PopoverPositioner';
+export { PopoverPopup as Popup } from './Popup/PopoverPopup';
+export { PopoverArrow as Arrow } from './Arrow/PopoverArrow';
+export { PopoverBackdrop as Backdrop } from './Backdrop/PopoverBackdrop';
+export { PopoverTitle as Title } from './Title/PopoverTitle';
+export { PopoverDescription as Description } from './Description/PopoverDescription';
+export { PopoverClose as Close } from './Close/PopoverClose';
diff --git a/packages/mui-base/src/Popover/index.ts b/packages/mui-base/src/Popover/index.ts
index a025e3962..9d2d8d70b 100644
--- a/packages/mui-base/src/Popover/index.ts
+++ b/packages/mui-base/src/Popover/index.ts
@@ -1,9 +1 @@
-export { PopoverRoot as Root } from './Root/PopoverRoot';
-export { PopoverTrigger as Trigger } from './Trigger/PopoverTrigger';
-export { PopoverPositioner as Positioner } from './Positioner/PopoverPositioner';
-export { PopoverPopup as Popup } from './Popup/PopoverPopup';
-export { PopoverArrow as Arrow } from './Arrow/PopoverArrow';
-export { PopoverBackdrop as Backdrop } from './Backdrop/PopoverBackdrop';
-export { PopoverTitle as Title } from './Title/PopoverTitle';
-export { PopoverDescription as Description } from './Description/PopoverDescription';
-export { PopoverClose as Close } from './Close/PopoverClose';
+export * as Popover from './index.parts';
diff --git a/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx b/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx
index 5fa3656de..4ba368f3c 100644
--- a/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<PreviewCard.Arrow />', () => {
diff --git a/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx b/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx
index 92bba7d84..41bef53f6 100644
--- a/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<PreviewCard.Backdrop />', () => {
diff --git a/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx b/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx
index b7568d8e5..9f417277c 100644
--- a/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx b/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx
index 30ce4ce86..1c57cda67 100644
--- a/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<PreviewCard.Positioner />', () => {
diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx
index 14d80b1e6..b379c31fe 100644
--- a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { act, fireEvent, screen, flushMicrotasks } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
diff --git a/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx b/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx
index 8afd7ddc5..6051aafcc 100644
--- a/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<PreviewCard.Trigger />', () => {
diff --git a/packages/mui-base/src/PreviewCard/index.barrel.ts b/packages/mui-base/src/PreviewCard/index.barrel.ts
deleted file mode 100644
index 685af207d..000000000
--- a/packages/mui-base/src/PreviewCard/index.barrel.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { PreviewCardRoot } from './Root/PreviewCardRoot';
-export { PreviewCardTrigger } from './Trigger/PreviewCardTrigger';
-export { PreviewCardPositioner } from './Positioner/PreviewCardPositioner';
-export { PreviewCardPopup } from './Popup/PreviewCardPopup';
-export { PreviewCardArrow } from './Arrow/PreviewCardArrow';
-export { PreviewCardBackdrop } from './Backdrop/PreviewCardBackdrop';
diff --git a/packages/mui-base/src/PreviewCard/index.parts.ts b/packages/mui-base/src/PreviewCard/index.parts.ts
new file mode 100644
index 000000000..291940ad6
--- /dev/null
+++ b/packages/mui-base/src/PreviewCard/index.parts.ts
@@ -0,0 +1,6 @@
+export { PreviewCardRoot as Root } from './Root/PreviewCardRoot';
+export { PreviewCardTrigger as Trigger } from './Trigger/PreviewCardTrigger';
+export { PreviewCardPositioner as Positioner } from './Positioner/PreviewCardPositioner';
+export { PreviewCardPopup as Popup } from './Popup/PreviewCardPopup';
+export { PreviewCardArrow as Arrow } from './Arrow/PreviewCardArrow';
+export { PreviewCardBackdrop as Backdrop } from './Backdrop/PreviewCardBackdrop';
diff --git a/packages/mui-base/src/PreviewCard/index.ts b/packages/mui-base/src/PreviewCard/index.ts
index 291940ad6..848affb96 100644
--- a/packages/mui-base/src/PreviewCard/index.ts
+++ b/packages/mui-base/src/PreviewCard/index.ts
@@ -1,6 +1 @@
-export { PreviewCardRoot as Root } from './Root/PreviewCardRoot';
-export { PreviewCardTrigger as Trigger } from './Trigger/PreviewCardTrigger';
-export { PreviewCardPositioner as Positioner } from './Positioner/PreviewCardPositioner';
-export { PreviewCardPopup as Popup } from './Popup/PreviewCardPopup';
-export { PreviewCardArrow as Arrow } from './Arrow/PreviewCardArrow';
-export { PreviewCardBackdrop as Backdrop } from './Backdrop/PreviewCardBackdrop';
+export * as PreviewCard from './index.parts';
diff --git a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx
index 33256bf37..a2012fb4c 100644
--- a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx
+++ b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 import { createRenderer, describeConformance } from '#test-utils';
 import { ProgressRootContext } from '../Root/ProgressRootContext';
 
diff --git a/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx b/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx
index 1e9e12fca..344f4d981 100644
--- a/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx
+++ b/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import * as React from 'react';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 import { createRenderer, describeConformance } from '#test-utils';
 import type { ProgressRoot } from './ProgressRoot';
 
diff --git a/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx b/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx
index 197207bfa..27e8c204a 100644
--- a/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx
+++ b/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 import { createRenderer, describeConformance } from '#test-utils';
 import { ProgressRootContext } from '../Root/ProgressRootContext';
 
diff --git a/packages/mui-base/src/Progress/index.barrel.ts b/packages/mui-base/src/Progress/index.barrel.ts
deleted file mode 100644
index 677acec64..000000000
--- a/packages/mui-base/src/Progress/index.barrel.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { ProgressRoot } from './Root/ProgressRoot';
-export { ProgressTrack } from './Track/ProgressTrack';
-export { ProgressIndicator } from './Indicator/ProgressIndicator';
-
-export type {
-  ProgressStatus as Status,
-  ProgressDirection as Direction,
-} from './Root/useProgressRoot';
diff --git a/packages/mui-base/src/Progress/index.parts.ts b/packages/mui-base/src/Progress/index.parts.ts
new file mode 100644
index 000000000..5e0d1453f
--- /dev/null
+++ b/packages/mui-base/src/Progress/index.parts.ts
@@ -0,0 +1,8 @@
+export { ProgressRoot as Root } from './Root/ProgressRoot';
+export { ProgressTrack as Track } from './Track/ProgressTrack';
+export { ProgressIndicator as Indicator } from './Indicator/ProgressIndicator';
+
+export type {
+  ProgressStatus as Status,
+  ProgressDirection as Direction,
+} from './Root/useProgressRoot';
diff --git a/packages/mui-base/src/Progress/index.ts b/packages/mui-base/src/Progress/index.ts
index 5e0d1453f..ee913fe81 100644
--- a/packages/mui-base/src/Progress/index.ts
+++ b/packages/mui-base/src/Progress/index.ts
@@ -1,8 +1 @@
-export { ProgressRoot as Root } from './Root/ProgressRoot';
-export { ProgressTrack as Track } from './Track/ProgressTrack';
-export { ProgressIndicator as Indicator } from './Indicator/ProgressIndicator';
-
-export type {
-  ProgressStatus as Status,
-  ProgressDirection as Direction,
-} from './Root/useProgressRoot';
+export * as Progress from './index.parts';
diff --git a/packages/mui-base/src/Radio/Indicator/RadioIndicator.test.tsx b/packages/mui-base/src/Radio/Indicator/RadioIndicator.test.tsx
index d2d03649d..9250c941f 100644
--- a/packages/mui-base/src/Radio/Indicator/RadioIndicator.test.tsx
+++ b/packages/mui-base/src/Radio/Indicator/RadioIndicator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Radio from '@base_ui/react/Radio';
+import { Radio } from '@base_ui/react/Radio';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Radio.Indicator />', () => {
diff --git a/packages/mui-base/src/Radio/Root/RadioRoot.test.tsx b/packages/mui-base/src/Radio/Root/RadioRoot.test.tsx
index cc117d358..75fac1a11 100644
--- a/packages/mui-base/src/Radio/Root/RadioRoot.test.tsx
+++ b/packages/mui-base/src/Radio/Root/RadioRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Radio from '@base_ui/react/Radio';
+import { Radio } from '@base_ui/react/Radio';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Radio.Root />', () => {
diff --git a/packages/mui-base/src/Radio/index.barrel.ts b/packages/mui-base/src/Radio/index.barrel.ts
deleted file mode 100644
index dc4fbc653..000000000
--- a/packages/mui-base/src/Radio/index.barrel.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { RadioRoot } from './Root/RadioRoot';
-export { RadioIndicator } from './Indicator/RadioIndicator';
diff --git a/packages/mui-base/src/Radio/index.parts.ts b/packages/mui-base/src/Radio/index.parts.ts
new file mode 100644
index 000000000..e5baf0747
--- /dev/null
+++ b/packages/mui-base/src/Radio/index.parts.ts
@@ -0,0 +1,2 @@
+export { RadioRoot as Root } from './Root/RadioRoot';
+export { RadioIndicator as Indicator } from './Indicator/RadioIndicator';
diff --git a/packages/mui-base/src/Radio/index.ts b/packages/mui-base/src/Radio/index.ts
index e5baf0747..19f101399 100644
--- a/packages/mui-base/src/Radio/index.ts
+++ b/packages/mui-base/src/Radio/index.ts
@@ -1,2 +1 @@
-export { RadioRoot as Root } from './Root/RadioRoot';
-export { RadioIndicator as Indicator } from './Indicator/RadioIndicator';
+export * as Radio from './index.parts';
diff --git a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx
index ff9cc5b44..8336d7c4e 100644
--- a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx
+++ b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, act, screen, fireEvent } from '@mui/internal-test-utils';
diff --git a/packages/mui-base/src/RadioGroup/index.barrel.ts b/packages/mui-base/src/RadioGroup/index.barrel.ts
deleted file mode 100644
index 3d7b2c936..000000000
--- a/packages/mui-base/src/RadioGroup/index.barrel.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Root/RadioGroupRoot';
diff --git a/packages/mui-base/src/RadioGroup/index.parts.ts b/packages/mui-base/src/RadioGroup/index.parts.ts
new file mode 100644
index 000000000..f78d65457
--- /dev/null
+++ b/packages/mui-base/src/RadioGroup/index.parts.ts
@@ -0,0 +1 @@
+export { RadioGroupRoot as Root } from './Root/RadioGroupRoot';
diff --git a/packages/mui-base/src/RadioGroup/index.ts b/packages/mui-base/src/RadioGroup/index.ts
index f78d65457..4dd85fb1e 100644
--- a/packages/mui-base/src/RadioGroup/index.ts
+++ b/packages/mui-base/src/RadioGroup/index.ts
@@ -1 +1 @@
-export { RadioGroupRoot as Root } from './Root/RadioGroupRoot';
+export * as RadioGroup from './index.parts';
diff --git a/packages/mui-base/src/Separator/Root/SeparatorRoot.test.tsx b/packages/mui-base/src/Separator/Root/SeparatorRoot.test.tsx
index a6b54ae71..9edbcbd32 100644
--- a/packages/mui-base/src/Separator/Root/SeparatorRoot.test.tsx
+++ b/packages/mui-base/src/Separator/Root/SeparatorRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Separator from '@base_ui/react/Separator';
+import { Separator } from '@base_ui/react/Separator';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Separator.Root />', () => {
diff --git a/packages/mui-base/src/Separator/index.barrel.ts b/packages/mui-base/src/Separator/index.barrel.ts
deleted file mode 100644
index 92574247c..000000000
--- a/packages/mui-base/src/Separator/index.barrel.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { SeparatorRoot } from './Root/SeparatorRoot';
diff --git a/packages/mui-base/src/Separator/index.parts.ts b/packages/mui-base/src/Separator/index.parts.ts
new file mode 100644
index 000000000..01851cba2
--- /dev/null
+++ b/packages/mui-base/src/Separator/index.parts.ts
@@ -0,0 +1 @@
+export { SeparatorRoot as Root } from './Root/SeparatorRoot';
diff --git a/packages/mui-base/src/Separator/index.ts b/packages/mui-base/src/Separator/index.ts
index 01851cba2..da5e8c68c 100644
--- a/packages/mui-base/src/Separator/index.ts
+++ b/packages/mui-base/src/Separator/index.ts
@@ -1 +1 @@
-export { SeparatorRoot as Root } from './Root/SeparatorRoot';
+export * as Separator from './index.parts';
diff --git a/packages/mui-base/src/Slider/Control/SliderControl.test.tsx b/packages/mui-base/src/Slider/Control/SliderControl.test.tsx
index 45f5c31eb..c09ba78a1 100644
--- a/packages/mui-base/src/Slider/Control/SliderControl.test.tsx
+++ b/packages/mui-base/src/Slider/Control/SliderControl.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const NOOP = () => {};
diff --git a/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx b/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx
index b5f19049b..979b288ed 100644
--- a/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx
+++ b/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const NOOP = () => {};
diff --git a/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx b/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx
index fac49ee9e..62d26e9c5 100644
--- a/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx
+++ b/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Slider from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const NOOP = () => {};
diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx
index 6a1741c2b..e6ca53c50 100644
--- a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx
+++ b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx
@@ -2,7 +2,7 @@ import { expect } from 'chai';
 import * as React from 'react';
 import { spy, stub } from 'sinon';
 import { act, fireEvent, screen } from '@mui/internal-test-utils';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { createRenderer, describeConformance } from '#test-utils';
 import type { SliderRootProps } from './SliderRoot.types';
 
diff --git a/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx b/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx
index 3d6519853..c04cf8180 100644
--- a/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx
+++ b/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const NOOP = () => {};
diff --git a/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx b/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx
index a28829b12..382583c21 100644
--- a/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx
+++ b/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const NOOP = () => {};
diff --git a/packages/mui-base/src/Slider/index.barrel.ts b/packages/mui-base/src/Slider/index.parts.ts
similarity index 53%
rename from packages/mui-base/src/Slider/index.barrel.ts
rename to packages/mui-base/src/Slider/index.parts.ts
index 79a640ba7..be5d9c2dc 100644
--- a/packages/mui-base/src/Slider/index.barrel.ts
+++ b/packages/mui-base/src/Slider/index.parts.ts
@@ -1,9 +1,18 @@
-export { SliderRoot } from './Root/SliderRoot';
-export type * from './Root/SliderRoot.types';
+export { SliderRoot as Root } from './Root/SliderRoot';
+export type {
+  SliderRootOwnerState as SliderOwnerState,
+  SliderRootProps as RootProps,
+  UseSliderParameters,
+  UseSliderReturnValue,
+  SliderContextValue,
+  SliderProviderValue,
+  SliderThumbMetadata,
+  Axis,
+} from './Root/SliderRoot.types';
 export { useSliderRoot } from './Root/useSliderRoot';
 export * from './Root/SliderProvider';
 
-export { SliderOutput } from './Output/SliderOutput';
+export { SliderOutput as Output } from './Output/SliderOutput';
 export type {
   SliderOutputProps as OutputProps,
   UseSliderOutputParameters,
@@ -11,7 +20,7 @@ export type {
 } from './Output/SliderOutput.types';
 export { useSliderOutput } from './Output/useSliderOutput';
 
-export { SliderControl } from './Control/SliderControl';
+export { SliderControl as Control } from './Control/SliderControl';
 export type {
   SliderControlProps as ControlProps,
   UseSliderControlParameters,
@@ -19,19 +28,19 @@ export type {
 } from './Control/SliderControl.types';
 export { useSliderControl } from './Control/useSliderControl';
 
-export { SliderTrack } from './Track/SliderTrack';
-export type { SliderTrackProps } from './Track/SliderTrack.types';
+export { SliderTrack as Track } from './Track/SliderTrack';
+export type { SliderTrackProps as TrackProps } from './Track/SliderTrack.types';
 
-export { SliderThumb } from './Thumb/SliderThumb';
+export { SliderThumb as Thumb } from './Thumb/SliderThumb';
 export type {
-  SliderThumbOwnerState,
-  SliderThumbProps,
+  SliderThumbOwnerState as ThumbOwnerState,
+  SliderThumbProps as ThumbProps,
   UseSliderThumbParameters,
   UseSliderThumbReturnValue,
 } from './Thumb/SliderThumb.types';
 export { useSliderThumb } from './Thumb/useSliderThumb';
 
-export { SliderIndicator } from './Indicator/SliderIndicator';
+export { SliderIndicator as Indicator } from './Indicator/SliderIndicator';
 export type {
   SliderIndicatorProps as IndicatorProps,
   UseSliderIndicatorParameters,
diff --git a/packages/mui-base/src/Slider/index.ts b/packages/mui-base/src/Slider/index.ts
index be5d9c2dc..953696abe 100644
--- a/packages/mui-base/src/Slider/index.ts
+++ b/packages/mui-base/src/Slider/index.ts
@@ -1,49 +1 @@
-export { SliderRoot as Root } from './Root/SliderRoot';
-export type {
-  SliderRootOwnerState as SliderOwnerState,
-  SliderRootProps as RootProps,
-  UseSliderParameters,
-  UseSliderReturnValue,
-  SliderContextValue,
-  SliderProviderValue,
-  SliderThumbMetadata,
-  Axis,
-} from './Root/SliderRoot.types';
-export { useSliderRoot } from './Root/useSliderRoot';
-export * from './Root/SliderProvider';
-
-export { SliderOutput as Output } from './Output/SliderOutput';
-export type {
-  SliderOutputProps as OutputProps,
-  UseSliderOutputParameters,
-  UseSliderOutputReturnValue,
-} from './Output/SliderOutput.types';
-export { useSliderOutput } from './Output/useSliderOutput';
-
-export { SliderControl as Control } from './Control/SliderControl';
-export type {
-  SliderControlProps as ControlProps,
-  UseSliderControlParameters,
-  UseSliderControlReturnValue,
-} from './Control/SliderControl.types';
-export { useSliderControl } from './Control/useSliderControl';
-
-export { SliderTrack as Track } from './Track/SliderTrack';
-export type { SliderTrackProps as TrackProps } from './Track/SliderTrack.types';
-
-export { SliderThumb as Thumb } from './Thumb/SliderThumb';
-export type {
-  SliderThumbOwnerState as ThumbOwnerState,
-  SliderThumbProps as ThumbProps,
-  UseSliderThumbParameters,
-  UseSliderThumbReturnValue,
-} from './Thumb/SliderThumb.types';
-export { useSliderThumb } from './Thumb/useSliderThumb';
-
-export { SliderIndicator as Indicator } from './Indicator/SliderIndicator';
-export type {
-  SliderIndicatorProps as IndicatorProps,
-  UseSliderIndicatorParameters,
-  UseSliderIndicatorReturnValue,
-} from './Indicator/SliderIndicator.types';
-export { useSliderIndicator } from './Indicator/useSliderIndicator';
+export * as Slider from './index.parts';
diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
index 110ee301e..0a612b998 100644
--- a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
+++ b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, fireEvent, screen } from '@mui/internal-test-utils';
-import * as Switch from '@base_ui/react/Switch';
+import { Switch } from '@base_ui/react/Switch';
 import { userEvent } from '@testing-library/user-event';
 import { describeConformance, createRenderer } from '#test-utils';
 
diff --git a/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx b/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx
index 9e49e094b..8f002d66b 100644
--- a/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx
+++ b/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Switch from '@base_ui/react/Switch';
+import { Switch } from '@base_ui/react/Switch';
 import { createRenderer, describeConformance } from '#test-utils';
 import { SwitchRootContext } from '../Root/SwitchRootContext';
 
diff --git a/packages/mui-base/src/Switch/index.barrel.ts b/packages/mui-base/src/Switch/index.barrel.ts
deleted file mode 100644
index f717fab5a..000000000
--- a/packages/mui-base/src/Switch/index.barrel.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { SwitchRoot } from './Root/SwitchRoot';
-export { SwitchThumb } from './Thumb/SwitchThumb';
diff --git a/packages/mui-base/src/Switch/index.parts.ts b/packages/mui-base/src/Switch/index.parts.ts
new file mode 100644
index 000000000..7edb4a433
--- /dev/null
+++ b/packages/mui-base/src/Switch/index.parts.ts
@@ -0,0 +1,2 @@
+export { SwitchRoot as Root } from './Root/SwitchRoot';
+export { SwitchThumb as Thumb } from './Thumb/SwitchThumb';
diff --git a/packages/mui-base/src/Switch/index.ts b/packages/mui-base/src/Switch/index.ts
index 7edb4a433..4b7a983cb 100644
--- a/packages/mui-base/src/Switch/index.ts
+++ b/packages/mui-base/src/Switch/index.ts
@@ -1,2 +1 @@
-export { SwitchRoot as Root } from './Root/SwitchRoot';
-export { SwitchThumb as Thumb } from './Thumb/SwitchThumb';
+export * as Switch from './index.parts';
diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
index 24900b5a2..30be9b350 100644
--- a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
+++ b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, fireEvent, screen } from '@mui/internal-test-utils';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Tabs.Root />', () => {
diff --git a/packages/mui-base/src/Tabs/Tab/Tab.test.tsx b/packages/mui-base/src/Tabs/Tab/Tab.test.tsx
index 328052085..5a899d1fb 100644
--- a/packages/mui-base/src/Tabs/Tab/Tab.test.tsx
+++ b/packages/mui-base/src/Tabs/Tab/Tab.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
 import { TabsListProviderValue, TabsListProvider } from '../TabsList/TabsListProvider';
 import { TabsRootContext } from '../Root/TabsRootContext';
diff --git a/packages/mui-base/src/Tabs/Tab/useTab.test.tsx b/packages/mui-base/src/Tabs/Tab/useTab.test.tsx
index 34b550ee9..7d7e5a304 100644
--- a/packages/mui-base/src/Tabs/Tab/useTab.test.tsx
+++ b/packages/mui-base/src/Tabs/Tab/useTab.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { useTab } from './useTab';
 
 describe('useTab', () => {
diff --git a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx b/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx
index 7cfbe38a8..16b755f0d 100644
--- a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx
+++ b/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { waitFor } from '@mui/internal-test-utils';
 import { createRenderer, describeConformance } from '#test-utils';
 
diff --git a/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx b/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx
index b17e0b994..727044873 100644
--- a/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
 import { TabsProvider, TabsProviderValue } from '../Root/TabsProvider';
 
diff --git a/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx b/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx
index 3e9b644a9..bbbe3ba40 100644
--- a/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx
+++ b/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { useTabPanel } from './useTabPanel';
 
 describe('useTabPanel', () => {
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
index 959a65bca..9f040541c 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { act } from '@mui/internal-test-utils';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
 import { TabsRootContext } from '../Root/TabsRootContext';
 
diff --git a/packages/mui-base/src/Tabs/TabsList/useTabsList.test.tsx b/packages/mui-base/src/Tabs/TabsList/useTabsList.test.tsx
index 5efc61429..7a89c7d6d 100644
--- a/packages/mui-base/src/Tabs/TabsList/useTabsList.test.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/useTabsList.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { useTabsList } from './useTabsList';
 
 describe('useTabsList', () => {
diff --git a/packages/mui-base/src/Tabs/index.barrel.ts b/packages/mui-base/src/Tabs/index.barrel.ts
deleted file mode 100644
index d8c499e9e..000000000
--- a/packages/mui-base/src/Tabs/index.barrel.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { TabsRoot } from './Root/TabsRoot';
-export { Tab } from './Tab/Tab';
-export { TabIndicator } from './TabIndicator/TabIndicator';
-export { TabPanel } from './TabPanel/TabPanel';
-export { TabsList } from './TabsList/TabsList';
diff --git a/packages/mui-base/src/Tabs/index.parts.ts b/packages/mui-base/src/Tabs/index.parts.ts
new file mode 100644
index 000000000..acb9d122d
--- /dev/null
+++ b/packages/mui-base/src/Tabs/index.parts.ts
@@ -0,0 +1,5 @@
+export { TabsRoot as Root } from './Root/TabsRoot';
+export { Tab } from './Tab/Tab';
+export { TabIndicator as Indicator } from './TabIndicator/TabIndicator';
+export { TabPanel as Panel } from './TabPanel/TabPanel';
+export { TabsList as List } from './TabsList/TabsList';
diff --git a/packages/mui-base/src/Tabs/index.ts b/packages/mui-base/src/Tabs/index.ts
index acb9d122d..10ed66c37 100644
--- a/packages/mui-base/src/Tabs/index.ts
+++ b/packages/mui-base/src/Tabs/index.ts
@@ -1,5 +1 @@
-export { TabsRoot as Root } from './Root/TabsRoot';
-export { Tab } from './Tab/Tab';
-export { TabIndicator as Indicator } from './TabIndicator/TabIndicator';
-export { TabPanel as Panel } from './TabPanel/TabPanel';
-export { TabsList as List } from './TabsList/TabsList';
+export * as Tabs from './index.parts';
diff --git a/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.test.tsx b/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.test.tsx
index 53fda0b47..f7311dd8d 100644
--- a/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.test.tsx
+++ b/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Tooltip.Arrow />', () => {
diff --git a/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx b/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx
index 8841512bb..b0fa70b6c 100644
--- a/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx
+++ b/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx b/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx
index 7d8af1460..eba09c753 100644
--- a/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx
+++ b/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Tooltip.Positioner />', () => {
diff --git a/packages/mui-base/src/Tooltip/Provider/TooltipProvider.test.tsx b/packages/mui-base/src/Tooltip/Provider/TooltipProvider.test.tsx
index 9fd5b8acb..503541aff 100644
--- a/packages/mui-base/src/Tooltip/Provider/TooltipProvider.test.tsx
+++ b/packages/mui-base/src/Tooltip/Provider/TooltipProvider.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { screen, fireEvent, flushMicrotasks } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer } from '#test-utils';
diff --git a/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx b/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx
index a73c74901..809bc2ce6 100644
--- a/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx
+++ b/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { act, fireEvent, flushMicrotasks, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
diff --git a/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx b/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx
index d030237d1..c3406649d 100644
--- a/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx
+++ b/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Tooltip.Trigger />', () => {
diff --git a/packages/mui-base/src/Tooltip/index.barrel.ts b/packages/mui-base/src/Tooltip/index.barrel.ts
deleted file mode 100644
index 79e7247ec..000000000
--- a/packages/mui-base/src/Tooltip/index.barrel.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { TooltipRoot } from './Root/TooltipRoot';
-export { TooltipTrigger } from './Trigger/TooltipTrigger';
-export { TooltipPositioner } from './Positioner/TooltipPositioner';
-export { TooltipPopup } from './Popup/TooltipPopup';
-export { TooltipArrow } from './Arrow/TooltipArrow';
-export { TooltipProvider } from './Provider/TooltipProvider';
diff --git a/packages/mui-base/src/Tooltip/index.parts.ts b/packages/mui-base/src/Tooltip/index.parts.ts
new file mode 100644
index 000000000..00ec741c9
--- /dev/null
+++ b/packages/mui-base/src/Tooltip/index.parts.ts
@@ -0,0 +1,6 @@
+export { TooltipRoot as Root } from './Root/TooltipRoot';
+export { TooltipTrigger as Trigger } from './Trigger/TooltipTrigger';
+export { TooltipPositioner as Positioner } from './Positioner/TooltipPositioner';
+export { TooltipPopup as Popup } from './Popup/TooltipPopup';
+export { TooltipArrow as Arrow } from './Arrow/TooltipArrow';
+export { TooltipProvider as Provider } from './Provider/TooltipProvider';
diff --git a/packages/mui-base/src/Tooltip/index.ts b/packages/mui-base/src/Tooltip/index.ts
index 00ec741c9..6fb3a4251 100644
--- a/packages/mui-base/src/Tooltip/index.ts
+++ b/packages/mui-base/src/Tooltip/index.ts
@@ -1,6 +1 @@
-export { TooltipRoot as Root } from './Root/TooltipRoot';
-export { TooltipTrigger as Trigger } from './Trigger/TooltipTrigger';
-export { TooltipPositioner as Positioner } from './Positioner/TooltipPositioner';
-export { TooltipPopup as Popup } from './Popup/TooltipPopup';
-export { TooltipArrow as Arrow } from './Arrow/TooltipArrow';
-export { TooltipProvider as Provider } from './Provider/TooltipProvider';
+export * as Tooltip from './index.parts';
diff --git a/packages/mui-base/src/index.ts b/packages/mui-base/src/index.ts
index c8ae7fc38..5c2fbaeff 100644
--- a/packages/mui-base/src/index.ts
+++ b/packages/mui-base/src/index.ts
@@ -1,13 +1,19 @@
-export * from './AlertDialog/index.barrel';
-export * from './Checkbox/index.barrel';
-export * from './CheckboxGroup/index.barrel';
-export * from './Dialog/index.barrel';
-export * from './Menu/index.barrel';
-export * from './NumberField/index.barrel';
-export * from './Popover/index.barrel';
-export * from './Progress/index.barrel';
-export * from './Separator/index.barrel';
-export * from './Slider/index.barrel';
-export * from './Switch/index.barrel';
-export * from './Tabs/index.barrel';
-export * from './Tooltip/index.barrel';
+export * from './AlertDialog';
+export * from './Checkbox';
+export * from './CheckboxGroup';
+export * from './Collapsible';
+export * from './Dialog';
+export * from './Field';
+export * from './Fieldset';
+export * from './Form';
+export * from './Menu';
+export * from './NumberField';
+export * from './Popover';
+export * from './PreviewCard';
+export * from './Progress';
+export * from './RadioGroup';
+export * from './Separator';
+export * from './Slider';
+export * from './Switch';
+export * from './Tabs';
+export * from './Tooltip';
diff --git a/scripts/buildApiDocs/config/getComponentImports.ts b/scripts/buildApiDocs/config/getComponentImports.ts
index 4e2968527..0e88f6fcc 100644
--- a/scripts/buildApiDocs/config/getComponentImports.ts
+++ b/scripts/buildApiDocs/config/getComponentImports.ts
@@ -27,7 +27,7 @@ export function getComponentImports(name: string, filename: string) {
 
   if (Object.keys(componentExportExceptions).includes(name)) {
     return [
-      `import * as ${componentDirectory} from '@base_ui/react/${componentDirectory}';\nconst ${name} = ${componentDirectory}.${componentExportExceptions[name]};`,
+      `import { ${componentDirectory} } from '@base_ui/react/${componentDirectory}';\nconst ${name} = ${componentDirectory}.${componentExportExceptions[name]};`,
     ];
   }
 
@@ -35,7 +35,7 @@ export function getComponentImports(name: string, filename: string) {
     // cases like Switch/SwitchTrack.tsx
     const childName = name.slice(componentDirectory.length);
     return [
-      `import * as ${componentDirectory} from '@base_ui/react/${componentDirectory}';\nconst ${name} = ${componentDirectory}.${childName};`,
+      `import { ${componentDirectory} } from '@base_ui/react/${componentDirectory}';\nconst ${name} = ${componentDirectory}.${childName};`,
     ];
   }
 

From 006f8fdaac12d3879d358c35d97363cf7381c0db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Mon, 14 Oct 2024 10:33:05 +0200
Subject: [PATCH 22/22] [core] Restore development playground (#701)

---
 .gitignore                           |  3 +-
 docs/app/not-found.tsx               | 15 +++++++-
 docs/app/playground/[slug]/page.tsx  | 53 ++++++++++++++++++++++++++++
 docs/src/blocks/GoogleAnalytics.tsx  | 20 +++++++++++
 docs/src/blocks/GoogleTagManager.tsx | 29 +++------------
 5 files changed, 94 insertions(+), 26 deletions(-)
 create mode 100644 docs/app/playground/[slug]/page.tsx

diff --git a/.gitignore b/.gitignore
index a48dc934e..af81c2c90 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,7 +14,8 @@
 /coverage
 /docs/.env.local
 /docs/export
-/docs/pages/playground/
+/docs/app/playground/*
+!/docs/app/playground/\[slug\]
 /docs/public/feed/
 /examples/**/.cache
 /test/bundling/fixtures/*/yarn.lock
diff --git a/docs/app/not-found.tsx b/docs/app/not-found.tsx
index d676eb675..fd8e66cc5 100644
--- a/docs/app/not-found.tsx
+++ b/docs/app/not-found.tsx
@@ -1,5 +1,18 @@
 import * as React from 'react';
 
+import { AppBar } from 'docs-base/src/components/AppBar';
+import { Navigation } from 'docs-base/src/components/Navigation';
+import routes from 'docs-base/data/pages';
+import classes from './(content)/styles.module.css';
+
 export default function NotFound() {
-  return <h1>Page not found</h1>;
+  return (
+    <React.Fragment>
+      <AppBar />
+      <Navigation routes={routes} />
+      <main className={classes.content}>
+        <h1>Page not found</h1>
+      </main>
+    </React.Fragment>
+  );
 }
diff --git a/docs/app/playground/[slug]/page.tsx b/docs/app/playground/[slug]/page.tsx
new file mode 100644
index 000000000..f4be320ee
--- /dev/null
+++ b/docs/app/playground/[slug]/page.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { type Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { type Dirent } from 'node:fs';
+import { basename, extname } from 'node:path';
+import { readdir } from 'node:fs/promises';
+
+interface Props {
+  params: {
+    slug: string;
+  };
+}
+
+const DUMMY_SLUG = '_';
+
+export default async function Page(props: Props) {
+  const {
+    params: { slug },
+  } = props;
+
+  if (slug === DUMMY_SLUG) {
+    notFound();
+  }
+
+  try {
+    const Playground = (await import(`../${slug}.tsx`)).default;
+    return <Playground />;
+  } catch (error) {
+    notFound();
+  }
+}
+
+export async function generateStaticParams() {
+  const routes = (await readdir('app/playground', { withFileTypes: true }))
+    .filter(
+      (entry: Dirent) => entry.name.endsWith('.tsx') && entry.name !== 'page.tsx' && entry.isFile(),
+    )
+    .map((entry: Dirent) => ({ slug: basename(entry.name, extname(entry.name)) }));
+
+  if (routes.length === 0) {
+    return [{ slug: DUMMY_SLUG }];
+  }
+
+  return routes;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = params;
+
+  return {
+    title: `${slug} - Playground`,
+  };
+}
diff --git a/docs/src/blocks/GoogleAnalytics.tsx b/docs/src/blocks/GoogleAnalytics.tsx
index a1e83a8c5..ce97cdcf2 100644
--- a/docs/src/blocks/GoogleAnalytics.tsx
+++ b/docs/src/blocks/GoogleAnalytics.tsx
@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useMediaQuery } from '@base_ui/react/useMediaQuery';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 
 let boundDataGaListener = false;
 
@@ -19,6 +20,25 @@ const GoogleAnalytics = React.memo(function GoogleAnalytics(props: GoogleAnalyti
     userLanguage,
   } = props;
 
+  useEnhancedEffect(() => {
+    // @ts-expect-error
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag(...args: unknown[]) {
+      // @ts-expect-error
+      window.dataLayer.push(...args);
+    }
+
+    window.gtag = gtag;
+
+    gtag('js', new Date());
+
+    // eslint-disable-next-line no-template-curly-in-string
+    gtag('config', '${id}', {
+      send_page_view: false,
+    });
+  }, []);
+
   React.useEffect(() => {
     if (!boundDataGaListener) {
       boundDataGaListener = true;
diff --git a/docs/src/blocks/GoogleTagManager.tsx b/docs/src/blocks/GoogleTagManager.tsx
index 3888df072..1ea6f5904 100644
--- a/docs/src/blocks/GoogleTagManager.tsx
+++ b/docs/src/blocks/GoogleTagManager.tsx
@@ -8,29 +8,10 @@ interface GoogleTagManagerProps {
 export function GoogleTagManager(props: React.PropsWithChildren<GoogleTagManagerProps>) {
   const { id } = props;
   return (
-    <React.Fragment>
-      <script
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-window.gtag = gtag;
-gtag('js', new Date());
-gtag('config', '${id}', {
-  send_page_view: false,
-});
-`,
-        }}
-      />
-      {/**
-       * A better alternative to <script async>, to delay its execution
-       * https://developer.chrome.com/blog/script-component/
-       */}
-      <Script
-        strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
-      />
-    </React.Fragment>
+    /**
+     * A better alternative to <script async>, to delay its execution
+     * https://developer.chrome.com/blog/script-component/
+     */
+    <Script strategy="afterInteractive" src={`https://www.googletagmanager.com/gtag/js?id=${id}`} />
   );
 }