From 44ffe25dc3f0250aed3f0053a5d68bfaae267d56 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 27 Nov 2023 15:55:52 +0100
Subject: [PATCH] [Portal] Improve docs for container prop (#39180)

Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
---
 .../AutocompleteIntroduction/css/index.js     |   4 +-
 .../AutocompleteIntroduction/css/index.tsx    |   4 +-
 .../AutocompleteIntroduction/system/index.js  |   4 +-
 .../AutocompleteIntroduction/system/index.tsx |   4 +-
 .../autocomplete/ControlledStates.js          |   4 +-
 .../autocomplete/ControlledStates.tsx         |   4 +-
 .../autocomplete/UseAutocomplete.js           |   4 +-
 .../autocomplete/UseAutocomplete.tsx          |   4 +-
 .../autocomplete/UseAutocompletePopper.js     |   4 +-
 .../autocomplete/UseAutocompletePopper.tsx    |   4 +-
 .../base/components/badge/AccessibleBadges.js |   4 +-
 .../components/badge/AccessibleBadges.tsx     |   4 +-
 docs/data/base/components/badge/BadgeMax.js   |   2 +-
 docs/data/base/components/badge/BadgeMax.tsx  |   2 +-
 .../base/components/badge/BadgeVisibility.js  |   4 +-
 .../base/components/badge/BadgeVisibility.tsx |   4 +-
 .../base/components/badge/ShowZeroBadge.js    |   2 +-
 .../base/components/badge/ShowZeroBadge.tsx   |   2 +-
 .../badge/UnstyledBadge/css/index.js          |   2 +-
 .../badge/UnstyledBadge/css/index.tsx         |   2 +-
 .../badge/UnstyledBadge/system/index.js       |   2 +-
 .../badge/UnstyledBadge/system/index.tsx      |   2 +-
 .../UnstyledBadgeIntroduction/css/index.js    |   2 +-
 .../UnstyledBadgeIntroduction/css/index.tsx   |   2 +-
 .../UnstyledBadgeIntroduction/system/index.js |   2 +-
 .../system/index.tsx                          |   2 +-
 .../components/button/UnstyledButtonCustom.js |   2 +-
 .../button/UnstyledButtonCustom.tsx           |   2 +-
 .../UnstyledButtonIntroduction/css/index.js   |   2 +-
 .../UnstyledButtonIntroduction/css/index.tsx  |   2 +-
 .../system/index.js                           |   2 +-
 .../system/index.tsx                          |   2 +-
 .../button/UnstyledButtonsDisabledFocus.js    |   2 +-
 .../button/UnstyledButtonsDisabledFocus.tsx   |   2 +-
 .../UnstyledButtonsDisabledFocusCustom.js     |   2 +-
 .../UnstyledButtonsDisabledFocusCustom.tsx    |   2 +-
 .../button/UnstyledButtonsSimple.js           |   2 +-
 .../button/UnstyledButtonsSimple.tsx          |   2 +-
 .../components/button/UnstyledButtonsSpan.js  |   2 +-
 .../components/button/UnstyledButtonsSpan.tsx |   2 +-
 .../components/button/UnstyledLinkButton.js   |   2 +-
 .../components/button/UnstyledLinkButton.tsx  |   2 +-
 docs/data/base/components/button/UseButton.js |   2 +-
 .../data/base/components/button/UseButton.tsx |   2 +-
 .../BasicFormControl/css/index.js             |   2 +-
 .../BasicFormControl/css/index.tsx            |   2 +-
 .../BasicFormControl/system/index.js          |   2 +-
 .../BasicFormControl/system/index.tsx         |   2 +-
 .../form-control/FormControlFunctionChild.js  |   2 +-
 .../form-control/FormControlFunctionChild.tsx |   2 +-
 .../base/components/input/InputAdornments.js  |   2 +-
 .../base/components/input/InputAdornments.tsx |   2 +-
 .../base/components/input/InputMultiline.js   |   2 +-
 .../base/components/input/InputMultiline.tsx  |   2 +-
 .../input/InputMultilineAutosize.js           |   2 +-
 .../input/InputMultilineAutosize.tsx          |   2 +-
 .../input/UnstyledInputBasic/css/index.js     |   2 +-
 .../input/UnstyledInputBasic/css/index.tsx    |   2 +-
 .../input/UnstyledInputBasic/system/index.js  |   2 +-
 .../input/UnstyledInputBasic/system/index.tsx |   2 +-
 .../UnstyledInputIntroduction/css/index.js    |   2 +-
 .../UnstyledInputIntroduction/css/index.tsx   |   2 +-
 .../UnstyledInputIntroduction/system/index.js |   2 +-
 .../system/index.tsx                          |   2 +-
 docs/data/base/components/input/UseInput.js   |   2 +-
 docs/data/base/components/input/UseInput.tsx  |   2 +-
 .../menu/MenuIntroduction/css/index.js        |  10 +-
 .../menu/MenuIntroduction/css/index.tsx       |  10 +-
 .../menu/MenuIntroduction/system/index.js     |   4 +-
 .../menu/MenuIntroduction/system/index.tsx    |   4 +-
 .../components/menu/MenuSimple/css/index.js   |  10 +-
 .../components/menu/MenuSimple/css/index.tsx  |  10 +-
 .../menu/MenuSimple/system/index.js           |   4 +-
 .../menu/MenuSimple/system/index.tsx          |   4 +-
 docs/data/base/components/menu/UseMenu.js     |  12 +-
 docs/data/base/components/menu/UseMenu.tsx    |  12 +-
 .../base/components/menu/WrappedMenuItems.js  |   4 +-
 .../base/components/menu/WrappedMenuItems.tsx |   4 +-
 .../base/components/modal/KeepMountedModal.js | 127 +++++++++---------
 .../components/modal/KeepMountedModal.tsx     | 117 ++++++++--------
 .../base/components/modal/ModalUnstyled.js    | 126 +++++++++--------
 .../base/components/modal/ModalUnstyled.tsx   | 116 ++++++++--------
 .../data/base/components/modal/NestedModal.js |  71 +++++-----
 .../base/components/modal/NestedModal.tsx     |  71 +++++-----
 .../data/base/components/modal/ServerModal.js |  72 +++++-----
 .../base/components/modal/ServerModal.tsx     |  74 +++++-----
 .../data/base/components/modal/SpringModal.js | 120 ++++++++---------
 .../base/components/modal/SpringModal.tsx     | 120 ++++++++---------
 .../base/components/modal/TransitionsModal.js | 120 ++++++++---------
 .../components/modal/TransitionsModal.tsx     | 110 +++++++--------
 docs/data/base/components/modal/UseModal.js   | 110 ++++++++-------
 docs/data/base/components/modal/UseModal.tsx  | 110 ++++++++-------
 docs/data/base/components/modal/modal.md      |   8 +-
 .../number-input/NumberInputAdornments.js     |   2 +-
 .../number-input/NumberInputAdornments.tsx    |   2 +-
 .../NumberInputBasic/css/index.js             |   2 +-
 .../NumberInputBasic/css/index.tsx            |   2 +-
 .../NumberInputBasic/system/index.js          |   2 +-
 .../NumberInputBasic/system/index.tsx         |   2 +-
 .../NumberInputIntroduction/css/index.js      |   2 +-
 .../NumberInputIntroduction/css/index.tsx     |   2 +-
 .../NumberInputIntroduction/system/index.js   |   2 +-
 .../NumberInputIntroduction/system/index.tsx  |   2 +-
 .../components/number-input/QuantityInput.js  |   4 +-
 .../components/number-input/QuantityInput.tsx |   4 +-
 .../components/number-input/UseNumberInput.js |   4 +-
 .../number-input/UseNumberInput.tsx           |   4 +-
 .../popper/UnstyledPopperBasic/css/index.js   |   6 +-
 .../popper/UnstyledPopperBasic/css/index.tsx  |   6 +-
 .../UnstyledPopperBasic/system/index.js       |   4 +-
 .../UnstyledPopperBasic/system/index.tsx      |   4 +-
 .../base/components/popup/AnimatedPopup.js    |   4 +-
 .../base/components/popup/AnimatedPopup.tsx   |   4 +-
 .../components/popup/DisabledPortalPopup.js   |   4 +-
 .../components/popup/DisabledPortalPopup.tsx  |   4 +-
 docs/data/base/components/popup/Placement.js  |   2 +-
 docs/data/base/components/popup/Placement.tsx |   2 +-
 .../data/base/components/popup/SimplePopup.js |   4 +-
 .../base/components/popup/SimplePopup.tsx     |   4 +-
 .../UnstyledPopupIntroduction/css/index.js    |   8 +-
 .../UnstyledPopupIntroduction/css/index.tsx   |   8 +-
 .../UnstyledPopupIntroduction/system/index.js |   4 +-
 .../system/index.tsx                          |   4 +-
 .../base/components/portal/SimplePortal.js    |   2 +-
 .../base/components/portal/SimplePortal.tsx   |   2 +-
 .../portal/SimplePortal.tsx.preview           |   2 +-
 docs/data/base/components/portal/portal.md    |  15 ++-
 .../select/UnstyledSelectBasic/css/index.js   |   6 +-
 .../select/UnstyledSelectBasic/css/index.tsx  |   6 +-
 .../UnstyledSelectBasic/system/index.js       |   4 +-
 .../UnstyledSelectBasic/system/index.tsx      |   4 +-
 .../select/UnstyledSelectControlled.js        |   6 +-
 .../select/UnstyledSelectControlled.tsx       |   6 +-
 .../select/UnstyledSelectCustomRenderValue.js |   4 +-
 .../UnstyledSelectCustomRenderValue.tsx       |   4 +-
 .../components/select/UnstyledSelectForm.js   |   6 +-
 .../components/select/UnstyledSelectForm.tsx  |   6 +-
 .../select/UnstyledSelectGrouping.js          |   4 +-
 .../select/UnstyledSelectGrouping.tsx         |   4 +-
 .../UnstyledSelectIntroduction/css/index.js   |   4 +-
 .../UnstyledSelectIntroduction/css/index.tsx  |   4 +-
 .../system/index.js                           |   4 +-
 .../system/index.tsx                          |   4 +-
 .../select/UnstyledSelectMultiple.js          |   4 +-
 .../select/UnstyledSelectMultiple.tsx         |   4 +-
 .../select/UnstyledSelectObjectValues.js      |   6 +-
 .../select/UnstyledSelectObjectValues.tsx     |   6 +-
 .../select/UnstyledSelectObjectValuesForm.js  |   8 +-
 .../select/UnstyledSelectObjectValuesForm.tsx |   8 +-
 .../select/UnstyledSelectRichOptions.js       |   4 +-
 .../select/UnstyledSelectRichOptions.tsx      |   4 +-
 docs/data/base/components/select/UseSelect.js |   4 +-
 .../data/base/components/select/UseSelect.tsx |   4 +-
 .../snackbar/TransitionComponentSnackbar.js   |   4 +-
 .../snackbar/TransitionComponentSnackbar.tsx  |   4 +-
 .../snackbar/UnstyledSnackbar/css/index.js    |   8 +-
 .../snackbar/UnstyledSnackbar/css/index.tsx   |   8 +-
 .../snackbar/UnstyledSnackbar/system/index.js |   4 +-
 .../UnstyledSnackbar/system/index.tsx         |   4 +-
 .../UnstyledSnackbarIntroduction/css/index.js |  10 +-
 .../css/index.tsx                             |  10 +-
 .../system/index.js                           |   6 +-
 .../system/index.tsx                          |   6 +-
 .../base/components/snackbar/UseSnackbar.js   |   4 +-
 .../base/components/snackbar/UseSnackbar.tsx  |   4 +-
 .../TableCustomized/css/index.js              |   2 +-
 .../TableCustomized/css/index.tsx             |   2 +-
 .../TableCustomized/system/index.js           |   2 +-
 .../TableCustomized/system/index.tsx          |   2 +-
 .../table-pagination/TableUnstyled.js         |   2 +-
 .../table-pagination/TableUnstyled.tsx        |   2 +-
 .../css/index.js                              |   2 +-
 .../css/index.tsx                             |   2 +-
 .../system/index.js                           |   2 +-
 .../system/index.tsx                          |   2 +-
 .../UnstyledTabsIntroduction/system/index.js  |   2 +-
 .../UnstyledTabsIntroduction/system/index.tsx |   2 +-
 .../textarea-autosize/EmptyTextarea.js        |   2 +-
 .../textarea-autosize/EmptyTextarea.tsx       |   2 +-
 .../textarea-autosize/MaxHeightTextarea.js    |   2 +-
 .../textarea-autosize/MaxHeightTextarea.tsx   |   2 +-
 .../textarea-autosize/MinHeightTextarea.js    |   2 +-
 .../textarea-autosize/MinHeightTextarea.tsx   |   2 +-
 .../UnstyledTextarea/css/index.js             |   4 +-
 .../UnstyledTextarea/css/index.tsx            |   4 +-
 .../UnstyledTextarea/system/index.js          |   2 +-
 .../UnstyledTextarea/system/index.tsx         |   2 +-
 .../UnstyledTextareaIntroduction/css/index.js |   2 +-
 .../css/index.tsx                             |   2 +-
 .../system/index.js                           |   2 +-
 .../system/index.tsx                          |   2 +-
 .../accessibility/KeyboardNavigation.js       |   6 +-
 .../accessibility/KeyboardNavigation.tsx      |   6 +-
 .../data/joy/components/modal/ServerModal.tsx |   4 +-
 .../material/components/modal/ServerModal.tsx |   2 +-
 .../components/portal/SimplePortal.js         |  29 ----
 .../components/portal/SimplePortal.tsx        |  29 ----
 .../portal/SimplePortal.tsx.preview           |  12 --
 docs/pages/base-theme.css                     |  22 +--
 docs/pages/experiments/base/listbox.tsx       |   2 +-
 docs/pages/experiments/base/tabs.tsx          |   2 +-
 .../productBaseUI/BaseUIThemesDemo.tsx        |   4 +-
 .../components/BaseButtonDemo.tsx             |  18 +--
 .../productBaseUI/components/BaseMenuDemo.tsx |  82 +++++------
 .../productBaseUI/components/BaseTabsDemo.tsx |  56 ++++----
 .../src/modules/components/MarkdownElement.js |   2 +-
 .../api-docs-base/modal/modal.json            |   2 +-
 .../api-docs-base/popper/popper.json          |   2 +-
 .../api-docs-base/portal/portal.json          |   2 +-
 .../api-docs-joy/drawer/drawer.json           |   2 +-
 .../api-docs-joy/modal/modal.json             |   2 +-
 docs/translations/api-docs/modal/modal.json   |   2 +-
 docs/translations/api-docs/popper/popper.json |   2 +-
 .../api-docs/use-modal/use-modal.json         |   2 +-
 packages/mui-base/src/Modal/Modal.tsx         |   3 +
 packages/mui-base/src/Modal/Modal.types.ts    |   3 +
 packages/mui-base/src/Popper/Popper.tsx       |   3 +
 packages/mui-base/src/Popper/Popper.types.ts  |   3 +
 packages/mui-base/src/Portal/Portal.tsx       |   3 +
 packages/mui-base/src/Portal/Portal.types.ts  |   3 +
 .../src/unstable_useModal/useModal.types.ts   |   3 +
 packages/mui-joy/src/Drawer/Drawer.tsx        |   3 +
 packages/mui-joy/src/Modal/Modal.tsx          |   3 +
 packages/mui-material/src/Modal/Modal.d.ts    |   3 +
 packages/mui-material/src/Modal/Modal.js      |   3 +
 packages/mui-material/src/Popper/Popper.tsx   |   3 +
 226 files changed, 1190 insertions(+), 1243 deletions(-)
 delete mode 100644 docs/data/material/components/portal/SimplePortal.js
 delete mode 100644 docs/data/material/components/portal/SimplePortal.tsx
 delete mode 100644 docs/data/material/components/portal/SimplePortal.tsx.preview

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
index c7dbada292900e..588d75658c9695 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
@@ -188,7 +188,7 @@ function Styles() {
     <style>
       {`
       .Autocomplete__root {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 400;
         border-radius: 8px;
         background: ${isDarkMode ? grey[900] : '#fff'};
@@ -270,7 +270,7 @@ function Styles() {
       }
 
       .Autocomplete__listbox {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         padding: 6px;
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
index ba6884a7d1cdb5..35183255be945e 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
@@ -162,7 +162,7 @@ function Styles() {
     <style>
       {`
       .Autocomplete__root {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 400;
         border-radius: 8px;
         background: ${isDarkMode ? grey[900] : '#fff'};
@@ -244,7 +244,7 @@ function Styles() {
       }
 
       .Autocomplete__listbox {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         padding: 6px;
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
index f1937c1540f74a..851e5555d194c3 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
@@ -141,7 +141,7 @@ const grey = {
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -197,7 +197,7 @@ const StyledPopper = styled('div')`
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
index 846751ab5dd11d..31414d16949692 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
@@ -124,7 +124,7 @@ const grey = {
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -180,7 +180,7 @@ const StyledPopper = styled('div')`
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/autocomplete/ControlledStates.js b/docs/data/base/components/autocomplete/ControlledStates.js
index 35c9f1c0cd9fa2..7f888528349899 100644
--- a/docs/data/base/components/autocomplete/ControlledStates.js
+++ b/docs/data/base/components/autocomplete/ControlledStates.js
@@ -79,7 +79,7 @@ const StyledAutocomplete = styled('div')`
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -127,7 +127,7 @@ const StyledInput = styled('input')(
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/autocomplete/ControlledStates.tsx b/docs/data/base/components/autocomplete/ControlledStates.tsx
index 2e93c412e008a1..6b88ce274834c0 100644
--- a/docs/data/base/components/autocomplete/ControlledStates.tsx
+++ b/docs/data/base/components/autocomplete/ControlledStates.tsx
@@ -79,7 +79,7 @@ const StyledAutocomplete = styled('div')`
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -127,7 +127,7 @@ const StyledInput = styled('input')(
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.js b/docs/data/base/components/autocomplete/UseAutocomplete.js
index d23bc5b786446f..20205136e88a19 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete.js
+++ b/docs/data/base/components/autocomplete/UseAutocomplete.js
@@ -76,7 +76,7 @@ const StyledLabel = styled('label')`
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -124,7 +124,7 @@ const StyledInput = styled('input')(
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.tsx b/docs/data/base/components/autocomplete/UseAutocomplete.tsx
index 517d58363090c6..43f8f79856fa62 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocomplete.tsx
@@ -78,7 +78,7 @@ const StyledLabel = styled('label')`
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -126,7 +126,7 @@ const StyledInput = styled('input')(
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.js b/docs/data/base/components/autocomplete/UseAutocompletePopper.js
index a4f3bb902fcda7..17b95f7be6e3de 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper.js
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper.js
@@ -88,7 +88,7 @@ const grey = {
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -144,7 +144,7 @@ const StyledPopper = styled('div')`
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
index 6cb0e979a57443..26f783a1c974a9 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
@@ -96,7 +96,7 @@ const grey = {
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -152,7 +152,7 @@ const StyledPopper = styled('div')`
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/badge/AccessibleBadges.js b/docs/data/base/components/badge/AccessibleBadges.js
index a808adc1d9667d..6b4573d7e8833b 100644
--- a/docs/data/base/components/badge/AccessibleBadges.js
+++ b/docs/data/base/components/badge/AccessibleBadges.js
@@ -46,7 +46,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
@@ -69,7 +69,7 @@ const Badge = styled(BaseBadge)(
     background: ${blue[500]};
     box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
     transform: translate(50%, -50%);
-    transform-origin: 100% 0; 
+    transform-origin: 100% 0;
   }
   `,
 );
diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx b/docs/data/base/components/badge/AccessibleBadges.tsx
index 04e71f1b09d942..fb1aca023f3e9c 100644
--- a/docs/data/base/components/badge/AccessibleBadges.tsx
+++ b/docs/data/base/components/badge/AccessibleBadges.tsx
@@ -46,7 +46,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
@@ -69,7 +69,7 @@ const Badge = styled(BaseBadge)(
     background: ${blue[500]};
     box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
     transform: translate(50%, -50%);
-    transform-origin: 100% 0; 
+    transform-origin: 100% 0;
   }
   `,
 );
diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js
index 25dcf5dc4f5475..c6a11d32f43599 100644
--- a/docs/data/base/components/badge/BadgeMax.js
+++ b/docs/data/base/components/badge/BadgeMax.js
@@ -43,7 +43,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx
index 25dcf5dc4f5475..c6a11d32f43599 100644
--- a/docs/data/base/components/badge/BadgeMax.tsx
+++ b/docs/data/base/components/badge/BadgeMax.tsx
@@ -43,7 +43,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
index d0fcb8ba998577..1acc876e0b7a35 100644
--- a/docs/data/base/components/badge/BadgeVisibility.js
+++ b/docs/data/base/components/badge/BadgeVisibility.js
@@ -37,7 +37,7 @@ const Badge = styled(BaseBadge)(
   margin: 0;
   padding: 0;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 14px;
   line-height: 1;
 
@@ -159,7 +159,7 @@ const Root = styled('span')(
 
 const StyledLabel = styled('label')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   `,
diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
index d0fcb8ba998577..1acc876e0b7a35 100644
--- a/docs/data/base/components/badge/BadgeVisibility.tsx
+++ b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -37,7 +37,7 @@ const Badge = styled(BaseBadge)(
   margin: 0;
   padding: 0;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 14px;
   line-height: 1;
 
@@ -159,7 +159,7 @@ const Root = styled('span')(
 
 const StyledLabel = styled('label')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   `,
diff --git a/docs/data/base/components/badge/ShowZeroBadge.js b/docs/data/base/components/badge/ShowZeroBadge.js
index 0e02d16b07e147..79178504f03065 100644
--- a/docs/data/base/components/badge/ShowZeroBadge.js
+++ b/docs/data/base/components/badge/ShowZeroBadge.js
@@ -41,7 +41,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx b/docs/data/base/components/badge/ShowZeroBadge.tsx
index 0e02d16b07e147..79178504f03065 100644
--- a/docs/data/base/components/badge/ShowZeroBadge.tsx
+++ b/docs/data/base/components/badge/ShowZeroBadge.tsx
@@ -41,7 +41,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
diff --git a/docs/data/base/components/badge/UnstyledBadge/css/index.js b/docs/data/base/components/badge/UnstyledBadge/css/index.js
index 5483382a058a26..5f605530843b3d 100644
--- a/docs/data/base/components/badge/UnstyledBadge/css/index.js
+++ b/docs/data/base/components/badge/UnstyledBadge/css/index.js
@@ -63,7 +63,7 @@ function Styles() {
         font-size: 14px;
         font-variant: tabular-nums;
         list-style: none;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         position: relative;
         display: inline-block;
         line-height: 1;
diff --git a/docs/data/base/components/badge/UnstyledBadge/css/index.tsx b/docs/data/base/components/badge/UnstyledBadge/css/index.tsx
index 5483382a058a26..5f605530843b3d 100644
--- a/docs/data/base/components/badge/UnstyledBadge/css/index.tsx
+++ b/docs/data/base/components/badge/UnstyledBadge/css/index.tsx
@@ -63,7 +63,7 @@ function Styles() {
         font-size: 14px;
         font-variant: tabular-nums;
         list-style: none;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         position: relative;
         display: inline-block;
         line-height: 1;
diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.js b/docs/data/base/components/badge/UnstyledBadge/system/index.js
index 672f7e8f87e347..fe2f6ee2d16813 100644
--- a/docs/data/base/components/badge/UnstyledBadge/system/index.js
+++ b/docs/data/base/components/badge/UnstyledBadge/system/index.js
@@ -52,7 +52,7 @@ const Badge = styled(BaseBadge)(
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.tsx b/docs/data/base/components/badge/UnstyledBadge/system/index.tsx
index 672f7e8f87e347..fe2f6ee2d16813 100644
--- a/docs/data/base/components/badge/UnstyledBadge/system/index.tsx
+++ b/docs/data/base/components/badge/UnstyledBadge/system/index.tsx
@@ -52,7 +52,7 @@ const Badge = styled(BaseBadge)(
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.js
index 1e819886a1709d..36079a78be3624 100644
--- a/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.js
+++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.js
@@ -63,7 +63,7 @@ function Styles() {
         font-size: 14px;
         font-variant: tabular-nums;
         list-style: none;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         position: relative;
         display: inline-block;
         line-height: 1;
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.tsx
index 1e819886a1709d..36079a78be3624 100644
--- a/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.tsx
+++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.tsx
@@ -63,7 +63,7 @@ function Styles() {
         font-size: 14px;
         font-variant: tabular-nums;
         list-style: none;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         position: relative;
         display: inline-block;
         line-height: 1;
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js
index b0e8e1b8cef614..220d05649da1d7 100644
--- a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js
+++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js
@@ -54,7 +54,7 @@ const Badge = styled(BaseBadge)(
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx
index b0e8e1b8cef614..220d05649da1d7 100644
--- a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx
+++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx
@@ -54,7 +54,7 @@ const Badge = styled(BaseBadge)(
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js
index c057fef09c7499..80b112845cbee6 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonCustom.js
@@ -99,7 +99,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
 
     & .content {
       font-size: 0.875rem;
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       line-height: 1.5;
       height: 100%;
diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx
index e98295562540a0..2697a535acb9f1 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonCustom.tsx
@@ -100,7 +100,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
 
     & .content {
       font-size: 0.875rem;
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       line-height: 1.5;
       height: 100%;
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
index d60494f1647dc1..edf899d9ed95c4 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
@@ -55,7 +55,7 @@ function Styles() {
   return (
     <style>{`
   .IntroductionButton {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
     line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
index d60494f1647dc1..edf899d9ed95c4 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
@@ -55,7 +55,7 @@ function Styles() {
   return (
     <style>{`
   .IntroductionButton {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
     line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
index f4fb7b397e82e7..a9ea39a2eddbae 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
@@ -36,7 +36,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
index f4fb7b397e82e7..a9ea39a2eddbae 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
@@ -36,7 +36,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
index 5de362a93bda6a..017f4cd7511d76 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
@@ -38,7 +38,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
index 5de362a93bda6a..017f4cd7511d76 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
@@ -38,7 +38,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
index 2b1817d016ee03..fac334a2fb66b4 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
@@ -40,7 +40,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
index 27d361413b8fe4..8b2dd51856813a 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -45,7 +45,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple.js b/docs/data/base/components/button/UnstyledButtonsSimple.js
index 35e72c4373306f..782b7be4039fa5 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple.js
+++ b/docs/data/base/components/button/UnstyledButtonsSimple.js
@@ -36,7 +36,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple.tsx b/docs/data/base/components/button/UnstyledButtonsSimple.tsx
index 35e72c4373306f..782b7be4039fa5 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSimple.tsx
@@ -36,7 +36,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.js b/docs/data/base/components/button/UnstyledButtonsSpan.js
index 976a79bb52caaf..411ac7b0039891 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.js
@@ -38,7 +38,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
index 976a79bb52caaf..411ac7b0039891 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -38,7 +38,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledLinkButton.js b/docs/data/base/components/button/UnstyledLinkButton.js
index a39184fd15bad9..066ea7372126f8 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.js
+++ b/docs/data/base/components/button/UnstyledLinkButton.js
@@ -42,7 +42,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UnstyledLinkButton.tsx b/docs/data/base/components/button/UnstyledLinkButton.tsx
index a39184fd15bad9..066ea7372126f8 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.tsx
+++ b/docs/data/base/components/button/UnstyledLinkButton.tsx
@@ -42,7 +42,7 @@ const grey = {
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UseButton.js b/docs/data/base/components/button/UseButton.js
index cb4ffcdb27b603..75416cb585c13e 100644
--- a/docs/data/base/components/button/UseButton.js
+++ b/docs/data/base/components/button/UseButton.js
@@ -68,7 +68,7 @@ const grey = {
 
 const CustomButtonRoot = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/button/UseButton.tsx b/docs/data/base/components/button/UseButton.tsx
index bb277cba10acb6..9891894a0de49a 100644
--- a/docs/data/base/components/button/UseButton.tsx
+++ b/docs/data/base/components/button/UseButton.tsx
@@ -62,7 +62,7 @@ const grey = {
 
 const CustomButtonRoot = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/form-control/BasicFormControl/css/index.js b/docs/data/base/components/form-control/BasicFormControl/css/index.js
index fbf20b5688e529..e1d339ed6918d3 100644
--- a/docs/data/base/components/form-control/BasicFormControl/css/index.js
+++ b/docs/data/base/components/form-control/BasicFormControl/css/index.js
@@ -119,7 +119,7 @@ function Styles() {
       {`
       .CustomInput .${inputClasses.input} {
         width: 320px;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
diff --git a/docs/data/base/components/form-control/BasicFormControl/css/index.tsx b/docs/data/base/components/form-control/BasicFormControl/css/index.tsx
index b535412e337e82..a409a8d09136d7 100644
--- a/docs/data/base/components/form-control/BasicFormControl/css/index.tsx
+++ b/docs/data/base/components/form-control/BasicFormControl/css/index.tsx
@@ -119,7 +119,7 @@ function Styles() {
       {`
       .CustomInput .${inputClasses.input} {
         width: 320px;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
diff --git a/docs/data/base/components/form-control/BasicFormControl/system/index.js b/docs/data/base/components/form-control/BasicFormControl/system/index.js
index a09f7f24a0379d..c1d067c13a9fe8 100644
--- a/docs/data/base/components/form-control/BasicFormControl/system/index.js
+++ b/docs/data/base/components/form-control/BasicFormControl/system/index.js
@@ -19,7 +19,7 @@ const StyledInput = styled(Input)(
 
   .${inputClasses.input} {
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/form-control/BasicFormControl/system/index.tsx b/docs/data/base/components/form-control/BasicFormControl/system/index.tsx
index ff2a4084239e96..0148825c5850fe 100644
--- a/docs/data/base/components/form-control/BasicFormControl/system/index.tsx
+++ b/docs/data/base/components/form-control/BasicFormControl/system/index.tsx
@@ -19,7 +19,7 @@ const StyledInput = styled(Input)(
 
   .${inputClasses.input} {
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.js b/docs/data/base/components/form-control/FormControlFunctionChild.js
index 4dd4610b3c5312..c0f5e3e3c8a89c 100644
--- a/docs/data/base/components/form-control/FormControlFunctionChild.js
+++ b/docs/data/base/components/form-control/FormControlFunctionChild.js
@@ -22,7 +22,7 @@ const StyledInput = styled(Input)(
 
   .${inputClasses.input} {
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.tsx b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
index 96aaf5a81e958e..60c3735f940f5c 100644
--- a/docs/data/base/components/form-control/FormControlFunctionChild.tsx
+++ b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
@@ -22,7 +22,7 @@ const StyledInput = styled(Input)(
 
   .${inputClasses.input} {
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/input/InputAdornments.js b/docs/data/base/components/input/InputAdornments.js
index efd5e7af282fb7..87ee2c20d481c2 100644
--- a/docs/data/base/components/input/InputAdornments.js
+++ b/docs/data/base/components/input/InputAdornments.js
@@ -120,7 +120,7 @@ const grey = {
 
 const InputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
diff --git a/docs/data/base/components/input/InputAdornments.tsx b/docs/data/base/components/input/InputAdornments.tsx
index aae5d4d74ae330..fc7adc7db3f28c 100644
--- a/docs/data/base/components/input/InputAdornments.tsx
+++ b/docs/data/base/components/input/InputAdornments.tsx
@@ -118,7 +118,7 @@ const grey = {
 
 const InputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
diff --git a/docs/data/base/components/input/InputMultiline.js b/docs/data/base/components/input/InputMultiline.js
index a16da3f6660399..c4bf824270f98a 100644
--- a/docs/data/base/components/input/InputMultiline.js
+++ b/docs/data/base/components/input/InputMultiline.js
@@ -53,7 +53,7 @@ const TextareaElement = styled('textarea', {
 })(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5rem;
diff --git a/docs/data/base/components/input/InputMultiline.tsx b/docs/data/base/components/input/InputMultiline.tsx
index 42c49c50e19a57..975576da3f49ce 100644
--- a/docs/data/base/components/input/InputMultiline.tsx
+++ b/docs/data/base/components/input/InputMultiline.tsx
@@ -56,7 +56,7 @@ const TextareaElement = styled('textarea', {
 })(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5rem;
diff --git a/docs/data/base/components/input/InputMultilineAutosize.js b/docs/data/base/components/input/InputMultilineAutosize.js
index f0c58bd3bf4ebd..79e91f903d423f 100644
--- a/docs/data/base/components/input/InputMultilineAutosize.js
+++ b/docs/data/base/components/input/InputMultilineAutosize.js
@@ -51,7 +51,7 @@ const RootDiv = styled('div')`
 const TextareaElement = styled(TextareaAutosize)(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5rem;
diff --git a/docs/data/base/components/input/InputMultilineAutosize.tsx b/docs/data/base/components/input/InputMultilineAutosize.tsx
index 8afa7d87dd372a..aab50aed8804c4 100644
--- a/docs/data/base/components/input/InputMultilineAutosize.tsx
+++ b/docs/data/base/components/input/InputMultilineAutosize.tsx
@@ -54,7 +54,7 @@ const RootDiv = styled('div')`
 const TextareaElement = styled(TextareaAutosize)(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5rem;
diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.js b/docs/data/base/components/input/UnstyledInputBasic/css/index.js
index 7317626a9d4ed7..a25c3b40a1668c 100644
--- a/docs/data/base/components/input/UnstyledInputBasic/css/index.js
+++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.js
@@ -55,7 +55,7 @@ function Styles() {
       {`
       .CustomInput {
         width: 320px;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
index 7317626a9d4ed7..a25c3b40a1668c 100644
--- a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
@@ -55,7 +55,7 @@ function Styles() {
       {`
       .CustomInput {
         width: 320px;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
diff --git a/docs/data/base/components/input/UnstyledInputBasic/system/index.js b/docs/data/base/components/input/UnstyledInputBasic/system/index.js
index 14b279498b4b55..8f8a8cd835fcfd 100644
--- a/docs/data/base/components/input/UnstyledInputBasic/system/index.js
+++ b/docs/data/base/components/input/UnstyledInputBasic/system/index.js
@@ -34,7 +34,7 @@ const grey = {
 const InputElement = styled('input')(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
diff --git a/docs/data/base/components/input/UnstyledInputBasic/system/index.tsx b/docs/data/base/components/input/UnstyledInputBasic/system/index.tsx
index f121b3b46204a8..2d6520354d8209 100644
--- a/docs/data/base/components/input/UnstyledInputBasic/system/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputBasic/system/index.tsx
@@ -37,7 +37,7 @@ const grey = {
 const InputElement = styled('input')(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
index 5f0c9c769fea45..af851dc9fcabb0 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
@@ -55,7 +55,7 @@ function Styles() {
       {`
       .CustomInputIntroduction {
         width: 320px;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
index 5f0c9c769fea45..af851dc9fcabb0 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
@@ -55,7 +55,7 @@ function Styles() {
       {`
       .CustomInputIntroduction {
         width: 320px;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/system/index.js b/docs/data/base/components/input/UnstyledInputIntroduction/system/index.js
index b019aa651c2e54..41cc8bb45d8f6c 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/system/index.js
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/system/index.js
@@ -35,7 +35,7 @@ const grey = {
 const InputElement = styled('input')(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/system/index.tsx b/docs/data/base/components/input/UnstyledInputIntroduction/system/index.tsx
index 3a916712d3d9bd..d623f5c16d26ae 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/system/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/system/index.tsx
@@ -38,7 +38,7 @@ const grey = {
 const InputElement = styled('input')(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
diff --git a/docs/data/base/components/input/UseInput.js b/docs/data/base/components/input/UseInput.js
index 9cc3d4295cbb1b..1aa1ebb897148f 100644
--- a/docs/data/base/components/input/UseInput.js
+++ b/docs/data/base/components/input/UseInput.js
@@ -47,7 +47,7 @@ const grey = {
 const StyledInputElement = styled('input')(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
diff --git a/docs/data/base/components/input/UseInput.tsx b/docs/data/base/components/input/UseInput.tsx
index ba6a4394f9128f..63e868f1c1429d 100644
--- a/docs/data/base/components/input/UseInput.tsx
+++ b/docs/data/base/components/input/UseInput.tsx
@@ -50,7 +50,7 @@ const grey = {
 const StyledInputElement = styled('input')(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.js b/docs/data/base/components/menu/MenuIntroduction/css/index.js
index 8a9793cf215952..a57a0205e9a7e8 100644
--- a/docs/data/base/components/menu/MenuIntroduction/css/index.js
+++ b/docs/data/base/components/menu/MenuIntroduction/css/index.js
@@ -84,7 +84,7 @@ function Styles() {
   return (
     <style>{`
     .CustomMenuIntroduction--listbox {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-size: 0.875rem;
       box-sizing: border-box;
       padding: 6px;
@@ -127,7 +127,7 @@ function Styles() {
     }
 
     .TriggerButtonIntroduction {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
       line-height: 1.5;
@@ -140,16 +140,16 @@ function Styles() {
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       color: ${isDarkMode ? grey[200] : grey[900]};
       box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    
+
       &:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-    
+
       &:active {
         background: ${isDarkMode ? grey[700] : grey[100]};
       }
-    
+
       &:focus-visible {
         box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
         outline: none;
diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.tsx b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx
index 3ef0c7e9860ceb..00a011e014066e 100644
--- a/docs/data/base/components/menu/MenuIntroduction/css/index.tsx
+++ b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx
@@ -84,7 +84,7 @@ function Styles() {
   return (
     <style>{`
     .CustomMenuIntroduction--listbox {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-size: 0.875rem;
       box-sizing: border-box;
       padding: 6px;
@@ -127,7 +127,7 @@ function Styles() {
     }
 
     .TriggerButtonIntroduction {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
       line-height: 1.5;
@@ -140,16 +140,16 @@ function Styles() {
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       color: ${isDarkMode ? grey[200] : grey[900]};
       box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    
+
       &:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-    
+
       &:active {
         background: ${isDarkMode ? grey[700] : grey[100]};
       }
-    
+
       &:focus-visible {
         box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
         outline: none;
diff --git a/docs/data/base/components/menu/MenuIntroduction/system/index.js b/docs/data/base/components/menu/MenuIntroduction/system/index.js
index 5e7c7c36312592..b57e884703335f 100644
--- a/docs/data/base/components/menu/MenuIntroduction/system/index.js
+++ b/docs/data/base/components/menu/MenuIntroduction/system/index.js
@@ -54,7 +54,7 @@ const grey = {
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -102,7 +102,7 @@ const MenuItem = styled(BaseMenuItem)(
 
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/menu/MenuIntroduction/system/index.tsx b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx
index d5ce5a00829dd2..d3ed96e7fd0bb4 100644
--- a/docs/data/base/components/menu/MenuIntroduction/system/index.tsx
+++ b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx
@@ -54,7 +54,7 @@ const grey = {
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -102,7 +102,7 @@ const MenuItem = styled(BaseMenuItem)(
 
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/menu/MenuSimple/css/index.js b/docs/data/base/components/menu/MenuSimple/css/index.js
index 647234e23b076d..5b5f4fc567fba3 100644
--- a/docs/data/base/components/menu/MenuSimple/css/index.js
+++ b/docs/data/base/components/menu/MenuSimple/css/index.js
@@ -84,7 +84,7 @@ function Styles() {
   return (
     <style>{`
     .CustomMenuSimple--listbox {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-size: 0.875rem;
       box-sizing: border-box;
       padding: 6px;
@@ -129,7 +129,7 @@ function Styles() {
     }
 
     .TriggerButtonSimple {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
       line-height: 1.5;
@@ -142,16 +142,16 @@ function Styles() {
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       color: ${isDarkMode ? grey[200] : grey[900]};
       box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    
+
       &:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-    
+
       &:active {
         background: ${isDarkMode ? grey[700] : grey[100]};
       }
-    
+
       &:focus-visible {
         box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
         outline: none;
diff --git a/docs/data/base/components/menu/MenuSimple/css/index.tsx b/docs/data/base/components/menu/MenuSimple/css/index.tsx
index a08f2a585c735f..6307aec0c7a101 100644
--- a/docs/data/base/components/menu/MenuSimple/css/index.tsx
+++ b/docs/data/base/components/menu/MenuSimple/css/index.tsx
@@ -84,7 +84,7 @@ function Styles() {
   return (
     <style>{`
     .CustomMenuSimple--listbox {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-size: 0.875rem;
       box-sizing: border-box;
       padding: 6px;
@@ -129,7 +129,7 @@ function Styles() {
     }
 
     .TriggerButtonSimple {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
       line-height: 1.5;
@@ -142,16 +142,16 @@ function Styles() {
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       color: ${isDarkMode ? grey[200] : grey[900]};
       box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    
+
       &:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-    
+
       &:active {
         background: ${isDarkMode ? grey[700] : grey[100]};
       }
-    
+
       &:focus-visible {
         box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
         outline: none;
diff --git a/docs/data/base/components/menu/MenuSimple/system/index.js b/docs/data/base/components/menu/MenuSimple/system/index.js
index fca67ddc4cc089..3a3d492801aa66 100644
--- a/docs/data/base/components/menu/MenuSimple/system/index.js
+++ b/docs/data/base/components/menu/MenuSimple/system/index.js
@@ -54,7 +54,7 @@ const grey = {
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -104,7 +104,7 @@ const MenuItem = styled(BaseMenuItem)(
 
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/menu/MenuSimple/system/index.tsx b/docs/data/base/components/menu/MenuSimple/system/index.tsx
index bb87629ee6d423..55c5c808dc0f11 100644
--- a/docs/data/base/components/menu/MenuSimple/system/index.tsx
+++ b/docs/data/base/components/menu/MenuSimple/system/index.tsx
@@ -54,7 +54,7 @@ const grey = {
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -104,7 +104,7 @@ const MenuItem = styled(BaseMenuItem)(
 
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
index 8b769eafea93bf..95f8d5baa713da 100644
--- a/docs/data/base/components/menu/UseMenu.js
+++ b/docs/data/base/components/menu/UseMenu.js
@@ -126,7 +126,7 @@ function Styles() {
   return (
     <style>{`
   .menu-root {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     box-sizing: border-box;
     padding: 5px;
@@ -140,7 +140,7 @@ function Styles() {
     outline: 0px;
     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05);
   }
-  
+
   .mode-dark .menu-root {
     background: ${grey[900]};
     border-color: ${grey[700]};
@@ -190,7 +190,7 @@ function Styles() {
   }
 
   .button {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
     line-height: 1.5;
@@ -203,16 +203,16 @@ function Styles() {
     border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
     color: ${isDarkMode ? grey[200] : grey[900]};
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  
+
     &:hover {
       background: ${isDarkMode ? grey[800] : grey[50]};
       border-color: ${isDarkMode ? grey[600] : grey[300]};
     }
-  
+
     &:active {
       background: ${isDarkMode ? grey[700] : grey[100]};
     }
-  
+
     &:focus-visible {
       box-shadow: 0 0 0 4px ${isDarkMode ? blue[300] : blue[200]};
       outline: none;
diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
index 43b77f3a070a26..b579ad683f7e70 100644
--- a/docs/data/base/components/menu/UseMenu.tsx
+++ b/docs/data/base/components/menu/UseMenu.tsx
@@ -125,7 +125,7 @@ function Styles() {
   return (
     <style>{`
   .menu-root {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     box-sizing: border-box;
     padding: 5px;
@@ -139,7 +139,7 @@ function Styles() {
     outline: 0px;
     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05);
   }
-  
+
   .mode-dark .menu-root {
     background: ${grey[900]};
     border-color: ${grey[700]};
@@ -189,7 +189,7 @@ function Styles() {
   }
 
   .button {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
     line-height: 1.5;
@@ -202,16 +202,16 @@ function Styles() {
     border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
     color: ${isDarkMode ? grey[200] : grey[900]};
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  
+
     &:hover {
       background: ${isDarkMode ? grey[800] : grey[50]};
       border-color: ${isDarkMode ? grey[600] : grey[300]};
     }
-  
+
     &:active {
       background: ${isDarkMode ? grey[700] : grey[100]};
     }
-  
+
     &:focus-visible {
       box-shadow: 0 0 0 4px ${isDarkMode ? blue[300] : blue[200]};
       outline: none;
diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js
index 88537861997d4f..5c427fd0a167cb 100644
--- a/docs/data/base/components/menu/WrappedMenuItems.js
+++ b/docs/data/base/components/menu/WrappedMenuItems.js
@@ -82,7 +82,7 @@ const grey = {
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -132,7 +132,7 @@ const MenuItem = styled(BaseMenuItem)(
 
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx
index 489c1070d415b4..2fe22e1e0040b4 100644
--- a/docs/data/base/components/menu/WrappedMenuItems.tsx
+++ b/docs/data/base/components/menu/WrappedMenuItems.tsx
@@ -76,7 +76,7 @@ const grey = {
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -126,7 +126,7 @@ const MenuItem = styled(BaseMenuItem)(
 
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/modal/KeepMountedModal.js b/docs/data/base/components/modal/KeepMountedModal.js
index c5dff51ccf116b..d4d692f25f7eb4 100644
--- a/docs/data/base/components/modal/KeepMountedModal.js
+++ b/docs/data/base/components/modal/KeepMountedModal.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled, Box } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 
 export default function KeepMountedModal() {
@@ -22,7 +22,7 @@ export default function KeepMountedModal() {
         slots={{ backdrop: StyledBackdrop }}
         keepMounted
       >
-        <ModalContent sx={style}>
+        <ModalContent sx={{ width: 400 }}>
           <h2 id="keep-mounted-modal-title" className="modal-title">
             Text in a modal
           </h2>
@@ -83,6 +83,7 @@ const Modal = styled(BaseModal)(`
   display: flex;
   align-items: center;
   justify-content: center;
+
   &.MuiModal-hidden {
     visibility: hidden;
   }
@@ -96,71 +97,67 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = {
-  width: 400,
-};
-
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
-
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
+
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
 const TriggerButton = styled('button')(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-  }
-
-  &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+    }
+
+    &:active {
+      background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
+    }
+  `,
 );
diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx b/docs/data/base/components/modal/KeepMountedModal.tsx
index 7e9f218edd44ee..05892c44430a75 100644
--- a/docs/data/base/components/modal/KeepMountedModal.tsx
+++ b/docs/data/base/components/modal/KeepMountedModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, Box } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 
 export default function KeepMountedModal() {
@@ -21,7 +21,7 @@ export default function KeepMountedModal() {
         slots={{ backdrop: StyledBackdrop }}
         keepMounted
       >
-        <ModalContent sx={style}>
+        <ModalContent sx={{ width: 400 }}>
           <h2 id="keep-mounted-modal-title" className="modal-title">
             Text in a modal
           </h2>
@@ -80,6 +80,7 @@ const Modal = styled(BaseModal)(`
   display: flex;
   align-items: center;
   justify-content: center;
+
   &.MuiModal-hidden {
     visibility: hidden;
   }
@@ -93,71 +94,67 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = {
-  width: 400,
-};
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
 
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
 
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
 const TriggerButton = styled('button')(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-  }
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+    }
 
-  &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
-  }
+    &:active {
+      background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
+    }
+  `,
 );
diff --git a/docs/data/base/components/modal/ModalUnstyled.js b/docs/data/base/components/modal/ModalUnstyled.js
index 4d85d01c983d46..fafb61f4cd05f7 100644
--- a/docs/data/base/components/modal/ModalUnstyled.js
+++ b/docs/data/base/components/modal/ModalUnstyled.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled, Box } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 
 export default function ModalUnstyled() {
@@ -21,7 +21,7 @@ export default function ModalUnstyled() {
         onClose={handleClose}
         slots={{ backdrop: StyledBackdrop }}
       >
-        <ModalContent sx={style}>
+        <ModalContent sx={{ width: 400 }}>
           <h2 id="unstyled-modal-title" className="modal-title">
             Text in a modal
           </h2>
@@ -89,71 +89,67 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = {
-  width: 400,
-};
-
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
-
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
+
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
 const TriggerButton = styled('button')(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-  }
-
-  &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+    }
+
+    &:active {
+      background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
+    }
+  `,
 );
diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx b/docs/data/base/components/modal/ModalUnstyled.tsx
index 053da92f2e9118..e235b79af28aa1 100644
--- a/docs/data/base/components/modal/ModalUnstyled.tsx
+++ b/docs/data/base/components/modal/ModalUnstyled.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, Box } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 
 export default function ModalUnstyled() {
@@ -20,7 +20,7 @@ export default function ModalUnstyled() {
         onClose={handleClose}
         slots={{ backdrop: StyledBackdrop }}
       >
-        <ModalContent sx={style}>
+        <ModalContent sx={{ width: 400 }}>
           <h2 id="unstyled-modal-title" className="modal-title">
             Text in a modal
           </h2>
@@ -86,71 +86,67 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = {
-  width: 400,
-};
-
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
 
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
 
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
 const TriggerButton = styled('button')(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-  }
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+    }
 
-  &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
-  }
+    &:active {
+      background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
+    }
+  `,
 );
diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
index bb928c4f1ea5eb..acef01599ee93b 100644
--- a/docs/data/base/components/modal/NestedModal.js
+++ b/docs/data/base/components/modal/NestedModal.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled, Box } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 import { Button } from '@mui/base/Button';
 
@@ -134,42 +134,43 @@ const style = {
   width: 400,
 };
 
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
 
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -182,16 +183,16 @@ const TriggerButton = styled(Button)(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  
+
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
-  
+
   &:active {
     background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
   }
-  
+
   &:focus-visible {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
@@ -201,7 +202,7 @@ const TriggerButton = styled(Button)(
 
 const ModalButton = styled(Button)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
index 2db265d191b9a3..4a7b96e91b769e 100644
--- a/docs/data/base/components/modal/NestedModal.tsx
+++ b/docs/data/base/components/modal/NestedModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, Box } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 import { Button } from '@mui/base/Button';
 
@@ -131,42 +131,43 @@ const style = {
   width: 400,
 };
 
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
 
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -179,16 +180,16 @@ const TriggerButton = styled(Button)(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  
+
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
-  
+
   &:active {
     background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
   }
-  
+
   &:focus-visible {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
@@ -198,7 +199,7 @@ const TriggerButton = styled(Button)(
 
 const ModalButton = styled(Button)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/modal/ServerModal.js b/docs/data/base/components/modal/ServerModal.js
index a2adcdf71cad97..c30ff45a9232ce 100644
--- a/docs/data/base/components/modal/ServerModal.js
+++ b/docs/data/base/components/modal/ServerModal.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { Box, styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
-import { Box, styled } from '@mui/system';
 
 export default function ServerModal() {
   const rootRef = React.useRef(null);
@@ -11,12 +11,8 @@ export default function ServerModal() {
         height: 300,
         flexGrow: 1,
         minWidth: 300,
+        // Isolate the modal to the demo
         transform: 'translateZ(0)',
-        // The position fixed scoping doesn't work in IE11.
-        // Disable this demo to preserve the others.
-        '@media all and (-ms-high-contrast: none)': {
-          display: 'none',
-        },
       }}
       ref={rootRef}
     >
@@ -29,7 +25,7 @@ export default function ServerModal() {
         aria-describedby="server-modal-description"
         container={() => rootRef.current}
       >
-        <ModalContent sx={style}>
+        <ModalContent sx={{ width: 400 }}>
           <h2 id="server-modal-title" className="modal-title">
             Server-side modal
           </h2>
@@ -62,45 +58,43 @@ const Modal = styled(BaseModal)`
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: rgba(0 0 0 / 0.4);
 
   &.MuiModal-hidden {
     visibility: hidden;
   }
 `;
 
-const style = {
-  width: 400,
-};
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
 
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
 
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
-
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
diff --git a/docs/data/base/components/modal/ServerModal.tsx b/docs/data/base/components/modal/ServerModal.tsx
index a2593b10ebaa73..f6a17a353a129f 100644
--- a/docs/data/base/components/modal/ServerModal.tsx
+++ b/docs/data/base/components/modal/ServerModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { Box, styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
-import { Box, styled } from '@mui/system';
 
 export default function ServerModal() {
   const rootRef = React.useRef<HTMLDivElement>(null);
@@ -11,12 +11,8 @@ export default function ServerModal() {
         height: 300,
         flexGrow: 1,
         minWidth: 300,
+        // Isolate the modal to the demo
         transform: 'translateZ(0)',
-        // The position fixed scoping doesn't work in IE11.
-        // Disable this demo to preserve the others.
-        '@media all and (-ms-high-contrast: none)': {
-          display: 'none',
-        },
       }}
       ref={rootRef}
     >
@@ -27,9 +23,9 @@ export default function ServerModal() {
         open
         aria-labelledby="server-modal-title"
         aria-describedby="server-modal-description"
-        container={() => rootRef.current}
+        container={() => rootRef.current!}
       >
-        <ModalContent sx={style}>
+        <ModalContent sx={{ width: 400 }}>
           <h2 id="server-modal-title" className="modal-title">
             Server-side modal
           </h2>
@@ -62,45 +58,43 @@ const Modal = styled(BaseModal)`
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: rgba(0 0 0 / 0.4);
 
   &.MuiModal-hidden {
     visibility: hidden;
   }
 `;
 
-const style = {
-  width: 400,
-};
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
 
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
 
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
-
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
diff --git a/docs/data/base/components/modal/SpringModal.js b/docs/data/base/components/modal/SpringModal.js
index 751ff3c29e55cb..93e7ca66f93e74 100644
--- a/docs/data/base/components/modal/SpringModal.js
+++ b/docs/data/base/components/modal/SpringModal.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Box, styled } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 import { Button } from '@mui/base/Button';
 import { useSpring, animated } from '@react-spring/web';
@@ -123,67 +123,67 @@ const style = {
   width: 400,
 };
 
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
-
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
+
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
 const TriggerButton = styled(Button)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-  }
-
-  &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+    }
+
+    &:active {
+      background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
+    }
+  `,
 );
diff --git a/docs/data/base/components/modal/SpringModal.tsx b/docs/data/base/components/modal/SpringModal.tsx
index 80a3395dcab5f8..e2411c77d73684 100644
--- a/docs/data/base/components/modal/SpringModal.tsx
+++ b/docs/data/base/components/modal/SpringModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, styled } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 import { Button } from '@mui/base/Button';
 import { useSpring, animated } from '@react-spring/web';
@@ -122,67 +122,67 @@ const style = {
   width: 400,
 };
 
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
-
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
+
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
 const TriggerButton = styled(Button)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-  }
-
-  &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+    }
+
+    &:active {
+      background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
+    }
+  `,
 );
diff --git a/docs/data/base/components/modal/TransitionsModal.js b/docs/data/base/components/modal/TransitionsModal.js
index 02a8ed807ad7f9..576acaa608eda4 100644
--- a/docs/data/base/components/modal/TransitionsModal.js
+++ b/docs/data/base/components/modal/TransitionsModal.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Box, styled } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 import Fade from '@mui/material/Fade';
 import { Button } from '@mui/base/Button';
@@ -96,67 +96,67 @@ const style = {
   width: 400,
 };
 
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
-
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
+
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
 const TriggerButton = styled(Button)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-  }
-
-  &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+    }
+
+    &:active {
+      background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
+    }
+  `,
 );
diff --git a/docs/data/base/components/modal/TransitionsModal.tsx b/docs/data/base/components/modal/TransitionsModal.tsx
index dad0ab9bb8b4ba..8ddae33cd1d8d7 100644
--- a/docs/data/base/components/modal/TransitionsModal.tsx
+++ b/docs/data/base/components/modal/TransitionsModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, styled } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 import Fade from '@mui/material/Fade';
 import { Button } from '@mui/base/Button';
@@ -93,67 +93,67 @@ const style = {
   width: 400,
 };
 
-const ModalContent = styled(Box)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 16px;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+const ModalContent = styled('div')(
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
 
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-  }
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
 
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
 const TriggerButton = styled(Button)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-  }
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+    }
 
-  &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
-  }
+    &:active {
+      background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
+    }
+  `,
 );
diff --git a/docs/data/base/components/modal/UseModal.js b/docs/data/base/components/modal/UseModal.js
index 8746d9d6569bd8..b35a6642a33844 100644
--- a/docs/data/base/components/modal/UseModal.js
+++ b/docs/data/base/components/modal/UseModal.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Portal } from '@mui/base/Portal';
 import { FocusTrap } from '@mui/base/FocusTrap';
 import { Button } from '@mui/base/Button';
@@ -214,37 +214,36 @@ const style = {
 };
 
 const ModalContent = styled('div')(
-  ({ theme }) => `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 1rem;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
 
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
 
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-    margin-right: 0.5rem;
-  }
-
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
@@ -266,33 +265,32 @@ const CustomModalBackdrop = styled(Backdrop)`
 `;
 
 const TriggerButton = styled(Button)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-  }
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+    }
 
-  &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
-  }
+    &:active {
+      background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
+    }
+  `,
 );
diff --git a/docs/data/base/components/modal/UseModal.tsx b/docs/data/base/components/modal/UseModal.tsx
index 8caa9e766b1090..8024572f55d57b 100644
--- a/docs/data/base/components/modal/UseModal.tsx
+++ b/docs/data/base/components/modal/UseModal.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
+import { styled, css } from '@mui/system';
 import { Portal } from '@mui/base/Portal';
 import { FocusTrap } from '@mui/base/FocusTrap';
 import { Button } from '@mui/base/Button';
@@ -206,37 +206,36 @@ const style = {
 };
 
 const ModalContent = styled('div')(
-  ({ theme }) => `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
-  };
-  padding: 1rem;
-  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 500;
+    text-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border-radius: 8px;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0 4px 12px
+      ${theme.palette.mode === 'dark' ? 'rgb(0 0 0 / 0.5)' : 'rgb(0 0 0 / 0.2)'};
+    padding: 24px;
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
 
+    & .modal-title {
+      margin: 0;
+      line-height: 1.5rem;
+      margin-bottom: 8px;
+    }
 
-  & .modal-title {
-    margin: 0;
-    line-height: 1.5rem;
-    margin-right: 0.5rem;
-  }
-
-  & .modal-description {
-    margin: 0;
-    line-height: 1.5rem;
-    font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
-  }
+    & .modal-description {
+      margin: 0;
+      line-height: 1.5rem;
+      font-weight: 400;
+      color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+      margin-bottom: 4px;
+    }
   `,
 );
 
@@ -258,33 +257,32 @@ const CustomModalBackdrop = styled(Backdrop)`
 `;
 
 const TriggerButton = styled(Button)(
-  ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  cursor: pointer;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  ({ theme }) => css`
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: all 150ms ease;
+    cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-  }
+    &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+    }
 
-  &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
-  }
+    &:active {
+      background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    }
 
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
+    }
+  `,
 );
diff --git a/docs/data/base/components/modal/modal.md b/docs/data/base/components/modal/modal.md
index 7a2fbe88739b35..88b80048a83a25 100644
--- a/docs/data/base/components/modal/modal.md
+++ b/docs/data/base/components/modal/modal.md
@@ -107,9 +107,9 @@ Explore other possible bottlenecks in performance where you could make more cons
 
 React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://react.dev/reference/react-dom/createPortal) API on the server.
 
-In order to display a Modal rendered on the server, you need to disable the portal feature with the `disablePortal` prop, as shown in the following demo:
+To display a Modal rendered on the server, you need to disable the portal feature with the `disablePortal` prop, as shown in the following demo:
 
-{{"demo": "ServerModal.js", "defaultCodeOpen": false}}
+{{"demo": "ServerModal.js"}}
 
 ## Limitations
 
@@ -145,7 +145,7 @@ It returns props to be placed on the custom component, along with fields represe
 Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
 :::info
-Hooks give you the most room for customization, but require more work to implement.
+Hooks give you the most room for customization but require more work to implement.
 With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
 
 You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#anatomy).
@@ -178,7 +178,7 @@ See the [WAI-ARIA guide on the Dialog (Modal) pattern](https://www.w3.org/WAI/AR
 
 - Follow the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) to help you set the initial focus on the most relevant element based on the content of the Modal.
   :::warning
-  A modal window can sit on top of either the parent application, or another modal window.
+  A modal window can sit on top of either the parent application or another modal window.
   _All_ windows under the topmost modal are **inert**, meaning the user cannot interact with them.
   This can lead to [conflicting behaviors](#focus-trap).
   :::
diff --git a/docs/data/base/components/number-input/NumberInputAdornments.js b/docs/data/base/components/number-input/NumberInputAdornments.js
index ac8b9f923b950e..f5287260fc7d72 100644
--- a/docs/data/base/components/number-input/NumberInputAdornments.js
+++ b/docs/data/base/components/number-input/NumberInputAdornments.js
@@ -99,7 +99,7 @@ const grey = {
 
 const InputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
diff --git a/docs/data/base/components/number-input/NumberInputAdornments.tsx b/docs/data/base/components/number-input/NumberInputAdornments.tsx
index 138bf439637d70..6e8a17c213c057 100644
--- a/docs/data/base/components/number-input/NumberInputAdornments.tsx
+++ b/docs/data/base/components/number-input/NumberInputAdornments.tsx
@@ -103,7 +103,7 @@ const grey = {
 
 const InputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
diff --git a/docs/data/base/components/number-input/NumberInputBasic/css/index.js b/docs/data/base/components/number-input/NumberInputBasic/css/index.js
index 252144c741ae4f..19c9a5879e6448 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/css/index.js
+++ b/docs/data/base/components/number-input/NumberInputBasic/css/index.js
@@ -62,7 +62,7 @@ function Styles() {
     <style>
       {`
       .CustomNumberInput {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 400;
         border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
diff --git a/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx
index 252144c741ae4f..19c9a5879e6448 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx
@@ -62,7 +62,7 @@ function Styles() {
     <style>
       {`
       .CustomNumberInput {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 400;
         border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
diff --git a/docs/data/base/components/number-input/NumberInputBasic/system/index.js b/docs/data/base/components/number-input/NumberInputBasic/system/index.js
index e486e55bbeaf71..545c79706e17db 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/system/index.js
+++ b/docs/data/base/components/number-input/NumberInputBasic/system/index.js
@@ -63,7 +63,7 @@ const grey = {
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
diff --git a/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx
index a88dab5ba2e94c..477f77edc33025 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx
@@ -67,7 +67,7 @@ const grey = {
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js
index 03b67e637c1c0d..d879838af60f5a 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js
@@ -62,7 +62,7 @@ function Styles() {
     <style>
       {`
       .CustomNumberInput {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 400;
         border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx
index 03b67e637c1c0d..d879838af60f5a 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx
@@ -62,7 +62,7 @@ function Styles() {
     <style>
       {`
       .CustomNumberInput {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 400;
         border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/system/index.js b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.js
index f50f91b573d39d..ddc2d54b08e65c 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/system/index.js
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.js
@@ -58,7 +58,7 @@ const grey = {
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx
index 322075170795db..654f4140b92f9e 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx
@@ -62,7 +62,7 @@ const grey = {
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
diff --git a/docs/data/base/components/number-input/QuantityInput.js b/docs/data/base/components/number-input/QuantityInput.js
index ac57eb33e1aa47..54c19b527b375a 100644
--- a/docs/data/base/components/number-input/QuantityInput.js
+++ b/docs/data/base/components/number-input/QuantityInput.js
@@ -58,7 +58,7 @@ const grey = {
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   display: flex;
@@ -105,7 +105,7 @@ const StyledInput = styled('input')(
 
 const StyledButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   line-height: 1.5;
diff --git a/docs/data/base/components/number-input/QuantityInput.tsx b/docs/data/base/components/number-input/QuantityInput.tsx
index 2ef96c410f5d56..9a6b066af54f70 100644
--- a/docs/data/base/components/number-input/QuantityInput.tsx
+++ b/docs/data/base/components/number-input/QuantityInput.tsx
@@ -64,7 +64,7 @@ const grey = {
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   display: flex;
@@ -111,7 +111,7 @@ const StyledInput = styled('input')(
 
 const StyledButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   line-height: 1.5;
diff --git a/docs/data/base/components/number-input/UseNumberInput.js b/docs/data/base/components/number-input/UseNumberInput.js
index bb680b3484cd19..a2620b6f195d1f 100644
--- a/docs/data/base/components/number-input/UseNumberInput.js
+++ b/docs/data/base/components/number-input/UseNumberInput.js
@@ -61,7 +61,7 @@ const grey = {
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -157,7 +157,7 @@ const StyledStepperButton = styled('button')(
       border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
       background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
       color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-      
+
       &:hover {
         cursor: pointer;
         color: #FFF;
diff --git a/docs/data/base/components/number-input/UseNumberInput.tsx b/docs/data/base/components/number-input/UseNumberInput.tsx
index c9b50809e3a411..5b77bab17145bd 100644
--- a/docs/data/base/components/number-input/UseNumberInput.tsx
+++ b/docs/data/base/components/number-input/UseNumberInput.tsx
@@ -67,7 +67,7 @@ const grey = {
 
 const StyledInputRoot: React.ElementType = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -163,7 +163,7 @@ const StyledStepperButton = styled('button')(
       border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
       background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
       color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-      
+
       &:hover {
         cursor: pointer;
         color: #FFF;
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
index 2dd7a3a80fd20f..a26f596b9ae4ea 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
@@ -67,7 +67,7 @@ function Styles() {
   return (
     <style>{`
       .Button {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 600;
         font-size: 0.875rem;
         line-height: 1.5;
@@ -81,7 +81,7 @@ function Styles() {
         box-shadow: 0 2px 1px ${
           isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
         }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
-  
+
         &:hover {
           background-color: ${cyan[600]};
         }
@@ -90,7 +90,7 @@ function Styles() {
           background-color: ${cyan[700]};
           box-shadow: none;
         }
-  
+
         &:focus-visible {
           box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
           outline: none;
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
index adcf247f9610a2..459e284b29c6b4 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
@@ -67,7 +67,7 @@ function Styles() {
   return (
     <style>{`
       .Button {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 600;
         font-size: 0.875rem;
         line-height: 1.5;
@@ -81,7 +81,7 @@ function Styles() {
         box-shadow: 0 2px 1px ${
           isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
         }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
-  
+
         &:hover {
           background-color: ${cyan[600]};
         }
@@ -90,7 +90,7 @@ function Styles() {
           background-color: ${cyan[700]};
           box-shadow: none;
         }
-  
+
         &:focus-visible {
           box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
           outline: none;
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
index c39c62e12c35fd..1b5e5f4d7c921c 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
@@ -52,7 +52,7 @@ const grey = {
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -94,7 +94,7 @@ const TriggerButton = styled('button')(
 
 const StyledPopperDiv = styled('div')(
   ({ theme }) => css`
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
index 0704801b4cb96e..802b936a9431c4 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
@@ -52,7 +52,7 @@ const grey = {
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -94,7 +94,7 @@ const TriggerButton = styled('button')(
 
 const StyledPopperDiv = styled('div')(
   ({ theme }) => css`
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
diff --git a/docs/data/base/components/popup/AnimatedPopup.js b/docs/data/base/components/popup/AnimatedPopup.js
index 4b7e2eba246d84..1805bfcaa206c5 100644
--- a/docs/data/base/components/popup/AnimatedPopup.js
+++ b/docs/data/base/components/popup/AnimatedPopup.js
@@ -114,7 +114,7 @@ const PopupBody = styled('div')(
     padding: 0.5rem 1rem;
     margin: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border-radius: 8px;
     box-shadow: ${
       theme.palette.mode === 'dark'
@@ -138,7 +138,7 @@ const blue = {
 
 const Button = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/popup/AnimatedPopup.tsx b/docs/data/base/components/popup/AnimatedPopup.tsx
index de703436d6d272..b82143913b4b91 100644
--- a/docs/data/base/components/popup/AnimatedPopup.tsx
+++ b/docs/data/base/components/popup/AnimatedPopup.tsx
@@ -115,7 +115,7 @@ const PopupBody = styled('div')(
     padding: 0.5rem 1rem;
     margin: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border-radius: 8px;
     box-shadow: ${
       theme.palette.mode === 'dark'
@@ -139,7 +139,7 @@ const blue = {
 
 const Button = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/popup/DisabledPortalPopup.js b/docs/data/base/components/popup/DisabledPortalPopup.js
index 779a7e3f950c72..f025cde88eff2a 100644
--- a/docs/data/base/components/popup/DisabledPortalPopup.js
+++ b/docs/data/base/components/popup/DisabledPortalPopup.js
@@ -85,7 +85,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -107,7 +107,7 @@ const blue = {
 
 const Button = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/popup/DisabledPortalPopup.tsx b/docs/data/base/components/popup/DisabledPortalPopup.tsx
index 0b90244f5ce625..89208937281a5d 100644
--- a/docs/data/base/components/popup/DisabledPortalPopup.tsx
+++ b/docs/data/base/components/popup/DisabledPortalPopup.tsx
@@ -79,7 +79,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -101,7 +101,7 @@ const blue = {
 
 const Button = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/popup/Placement.js b/docs/data/base/components/popup/Placement.js
index 877cc88ad4676a..d70dc31969e63c 100644
--- a/docs/data/base/components/popup/Placement.js
+++ b/docs/data/base/components/popup/Placement.js
@@ -135,7 +135,7 @@ const PopupBody = styled('div')(
   ({ theme }) => css`
     padding: 0.5rem 1rem;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border-radius: 8px;
     box-shadow: ${theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
diff --git a/docs/data/base/components/popup/Placement.tsx b/docs/data/base/components/popup/Placement.tsx
index 0c0ac167fbffd7..f32a105d6478ac 100644
--- a/docs/data/base/components/popup/Placement.tsx
+++ b/docs/data/base/components/popup/Placement.tsx
@@ -129,7 +129,7 @@ const PopupBody = styled('div')(
   ({ theme }: { theme: Theme }) => css`
     padding: 0.5rem 1rem;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border-radius: 8px;
     box-shadow: ${theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
diff --git a/docs/data/base/components/popup/SimplePopup.js b/docs/data/base/components/popup/SimplePopup.js
index 9887d1877c3bfc..283186f6c79338 100644
--- a/docs/data/base/components/popup/SimplePopup.js
+++ b/docs/data/base/components/popup/SimplePopup.js
@@ -53,7 +53,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -67,7 +67,7 @@ const PopupBody = styled('div')(
 
 const Button = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/popup/SimplePopup.tsx b/docs/data/base/components/popup/SimplePopup.tsx
index 9d815faaf8b870..a664c51f668e01 100644
--- a/docs/data/base/components/popup/SimplePopup.tsx
+++ b/docs/data/base/components/popup/SimplePopup.tsx
@@ -53,7 +53,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -67,7 +67,7 @@ const PopupBody = styled('div')(
 
 const Button = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js
index 24f5c886e91cea..c6f6e04897c290 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js
@@ -67,7 +67,7 @@ function Styles() {
   return (
     <style>{`
         .Button {
-          font-family: IBM Plex Sans, sans-serif;
+          font-family: 'IBM Plex Sans', sans-serif;
           font-weight: 600;
           font-size: 0.875rem;
           line-height: 1.5;
@@ -81,16 +81,16 @@ function Styles() {
           box-shadow: 0 2px 4px ${
             isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
           }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
-    
+
           &:hover {
             background-color: ${cyan[600]};
           }
-    
+
           &:active {
             background-color: ${cyan[700]};
             box-shadow: none;
           }
-    
+
           &:focus-visible {
             box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
             outline: none;
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx
index 260d036d271bea..125aa7e88f41df 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx
@@ -67,7 +67,7 @@ function Styles() {
   return (
     <style>{`
         .Button {
-          font-family: IBM Plex Sans, sans-serif;
+          font-family: 'IBM Plex Sans', sans-serif;
           font-weight: 600;
           font-size: 0.875rem;
           line-height: 1.5;
@@ -81,16 +81,16 @@ function Styles() {
           box-shadow: 0 2px 4px ${
             isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
           }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
-    
+
           &:hover {
             background-color: ${cyan[600]};
           }
-    
+
           &:active {
             background-color: ${cyan[700]};
             box-shadow: none;
           }
-    
+
           &:focus-visible {
             box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
             outline: none;
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.js b/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.js
index 89ce35fd0547bc..192d701532dd85 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.js
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.js
@@ -53,7 +53,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -68,7 +68,7 @@ const PopupBody = styled('div')(
 
 const Button = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.tsx b/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.tsx
index 0785458278e778..18be629b2e7292 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.tsx
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.tsx
@@ -53,7 +53,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -68,7 +68,7 @@ const PopupBody = styled('div')(
 
 const Button = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/portal/SimplePortal.js b/docs/data/base/components/portal/SimplePortal.js
index f6b3720dfc9e65..786526b0f7801a 100644
--- a/docs/data/base/components/portal/SimplePortal.js
+++ b/docs/data/base/components/portal/SimplePortal.js
@@ -18,7 +18,7 @@ export default function SimplePortal() {
       <Box sx={{ p: 1, my: 1, border: '1px solid' }}>
         It looks like I will render here.
         {show ? (
-          <Portal container={container.current}>
+          <Portal container={() => container.current}>
             <span>But I actually render here!</span>
           </Portal>
         ) : null}
diff --git a/docs/data/base/components/portal/SimplePortal.tsx b/docs/data/base/components/portal/SimplePortal.tsx
index f6b3720dfc9e65..f56ab479d52650 100644
--- a/docs/data/base/components/portal/SimplePortal.tsx
+++ b/docs/data/base/components/portal/SimplePortal.tsx
@@ -18,7 +18,7 @@ export default function SimplePortal() {
       <Box sx={{ p: 1, my: 1, border: '1px solid' }}>
         It looks like I will render here.
         {show ? (
-          <Portal container={container.current}>
+          <Portal container={() => container.current!}>
             <span>But I actually render here!</span>
           </Portal>
         ) : null}
diff --git a/docs/data/base/components/portal/SimplePortal.tsx.preview b/docs/data/base/components/portal/SimplePortal.tsx.preview
index 1f38e1c13e51d1..8d96c108b1317b 100644
--- a/docs/data/base/components/portal/SimplePortal.tsx.preview
+++ b/docs/data/base/components/portal/SimplePortal.tsx.preview
@@ -4,7 +4,7 @@
 <Box sx={{ p: 1, my: 1, border: '1px solid' }}>
   It looks like I will render here.
   {show ? (
-    <Portal container={container.current}>
+    <Portal container={() => container.current!}>
       <span>But I actually render here!</span>
     </Portal>
   ) : null}
diff --git a/docs/data/base/components/portal/portal.md b/docs/data/base/components/portal/portal.md
index 0b562e5f4d1457..6e060cae6bc911 100644
--- a/docs/data/base/components/portal/portal.md
+++ b/docs/data/base/components/portal/portal.md
@@ -41,9 +41,18 @@ The following demo shows how a `<span>` nested within a Portal can be appended t
 
 ### Server-side
 
+The DOM API isn't available on the server, so you need to use the `container` prop callback.
+This callback is called during a React layout effect:
+
+```jsx
+<Portal container={() => document.getElementById('filter-panel')!}>
+  <Child />
+</Portal>
+```
+
 :::error
-React doesn't support the [`createPortal()` API](https://react.dev/reference/react-dom/createPortal) on the server.
+The Portal component cannot be used to render child elements on the server—client-side hydration is necessary.
+
+This is because React doesn't support the [`createPortal()` API](https://react.dev/reference/react-dom/createPortal) on the server.
 See [this GitHub issue](https://github.com/facebook/react/issues/13097) for details.
 :::
-
-The Portal component cannot be used to render child elements on the server—client-side hydration is necessary.
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/css/index.js b/docs/data/base/components/select/UnstyledSelectBasic/css/index.js
index 9ed9e624da2639..48b235982d6318 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/css/index.js
+++ b/docs/data/base/components/select/UnstyledSelectBasic/css/index.js
@@ -89,7 +89,7 @@ function Styles() {
       {`
       .CustomSelect {
         position: relative;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         min-width: 320px;
@@ -117,7 +117,7 @@ function Styles() {
           border-color: ${cyan[400]};
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         }
-        
+
         & > svg {
           font-size: 1rem;
           position: absolute;
@@ -127,7 +127,7 @@ function Styles() {
         }
       }
       .CustomSelect-listbox {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx
index eba98d0049ddcc..5cdbc3445fabf6 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx
@@ -89,7 +89,7 @@ function Styles() {
       {`
       .CustomSelect {
         position: relative;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         min-width: 320px;
@@ -117,7 +117,7 @@ function Styles() {
           border-color: ${cyan[400]};
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         }
-        
+
         & > svg {
           font-size: 1rem;
           position: absolute;
@@ -127,7 +127,7 @@ function Styles() {
         }
       }
       .CustomSelect-listbox {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/system/index.js b/docs/data/base/components/select/UnstyledSelectBasic/system/index.js
index 088e3de8d52615..59157c819059d3 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/system/index.js
+++ b/docs/data/base/components/select/UnstyledSelectBasic/system/index.js
@@ -68,7 +68,7 @@ CustomButton.propTypes = {
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   position: relative;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -110,7 +110,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx
index 9b4ae4ba9d2b35..2235088fbca775 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx
@@ -78,7 +78,7 @@ const CustomButton = React.forwardRef(function CustomButton<
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   position: relative;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -120,7 +120,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectControlled.js b/docs/data/base/components/select/UnstyledSelectControlled.js
index 1e629197ca609b..1851500afb3f14 100644
--- a/docs/data/base/components/select/UnstyledSelectControlled.js
+++ b/docs/data/base/components/select/UnstyledSelectControlled.js
@@ -94,7 +94,7 @@ CustomButton.propTypes = {
 
 const StyledButton = styled(CustomButton, { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -131,7 +131,7 @@ const StyledButton = styled(CustomButton, { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -192,7 +192,7 @@ const Popper = styled(BasePopper)`
 
 const Paragraph = styled('p')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   margin: 10px 0;
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
diff --git a/docs/data/base/components/select/UnstyledSelectControlled.tsx b/docs/data/base/components/select/UnstyledSelectControlled.tsx
index d02285b7c1de3b..c4fbe159f4c17a 100644
--- a/docs/data/base/components/select/UnstyledSelectControlled.tsx
+++ b/docs/data/base/components/select/UnstyledSelectControlled.tsx
@@ -83,7 +83,7 @@ const CustomButton = React.forwardRef(function CustomButton(
 
 const StyledButton = styled(CustomButton, { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -120,7 +120,7 @@ const StyledButton = styled(CustomButton, { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -181,7 +181,7 @@ const Popper = styled(BasePopper)`
 
 const Paragraph = styled('p')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   margin: 10px 0;
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
index eb1962c1a9d7bf..c22829ae7ab16e 100644
--- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
+++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
@@ -90,7 +90,7 @@ Button.propTypes = {
 
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -133,7 +133,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
index 72135fd548f175..be375dc14dd425 100644
--- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
+++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
@@ -82,7 +82,7 @@ const Button = React.forwardRef(function Button<
 
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -125,7 +125,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectForm.js b/docs/data/base/components/select/UnstyledSelectForm.js
index f5fd8035f846fe..1dd3124b5b8c88 100644
--- a/docs/data/base/components/select/UnstyledSelectForm.js
+++ b/docs/data/base/components/select/UnstyledSelectForm.js
@@ -82,7 +82,7 @@ Button.propTypes = {
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   position: relative;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -124,7 +124,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -185,7 +185,7 @@ const Popper = styled(BasePopper)`
 
 const Label = styled('label')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.85rem;
   display: block;
   margin-bottom: 4px;
diff --git a/docs/data/base/components/select/UnstyledSelectForm.tsx b/docs/data/base/components/select/UnstyledSelectForm.tsx
index d6f4f62f0f21f2..c95aeeeef2d98a 100644
--- a/docs/data/base/components/select/UnstyledSelectForm.tsx
+++ b/docs/data/base/components/select/UnstyledSelectForm.tsx
@@ -92,7 +92,7 @@ const Button = React.forwardRef(function Button<
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   position: relative;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -134,7 +134,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -195,7 +195,7 @@ const Popper = styled(BasePopper)`
 
 const Label = styled('label')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.85rem;
   display: block;
   margin-bottom: 4px;
diff --git a/docs/data/base/components/select/UnstyledSelectGrouping.js b/docs/data/base/components/select/UnstyledSelectGrouping.js
index 3f96cde58923d5..b99dc010870d9c 100644
--- a/docs/data/base/components/select/UnstyledSelectGrouping.js
+++ b/docs/data/base/components/select/UnstyledSelectGrouping.js
@@ -112,7 +112,7 @@ Button.propTypes = {
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   position: relative;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -154,7 +154,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectGrouping.tsx b/docs/data/base/components/select/UnstyledSelectGrouping.tsx
index 1bf9131ab338b6..81431277e0d373 100644
--- a/docs/data/base/components/select/UnstyledSelectGrouping.tsx
+++ b/docs/data/base/components/select/UnstyledSelectGrouping.tsx
@@ -97,7 +97,7 @@ const Button = React.forwardRef(function Button<
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   position: relative;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -139,7 +139,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
index cc6eb7ba4619cd..d480982e71392d 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
@@ -88,7 +88,7 @@ function Styles() {
     <style>
       {`
       .CustomSelectIntroduction {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         min-width: 320px;
@@ -127,7 +127,7 @@ function Styles() {
         }
       }
       .CustomSelectIntroduction-listbox {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx
index 07b855d3c4d484..f24ac26c31d4cc 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx
@@ -88,7 +88,7 @@ function Styles() {
     <style>
       {`
       .CustomSelectIntroduction {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         min-width: 320px;
@@ -127,7 +127,7 @@ function Styles() {
         }
       }
       .CustomSelectIntroduction-listbox {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.js b/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.js
index db71eabd8e6f27..6a2125a91c3828 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.js
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.js
@@ -80,7 +80,7 @@ Button.propTypes = {
 
 const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -123,7 +123,7 @@ const StyledButton = styled(Button, { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.tsx
index c2fe53365ea9c4..e152aae95e21d0 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.tsx
@@ -75,7 +75,7 @@ const Button = React.forwardRef(function Button<
 
 const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -118,7 +118,7 @@ const StyledButton = styled(Button, { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.js b/docs/data/base/components/select/UnstyledSelectMultiple.js
index 155e1094f803f3..b8525fdbe0fb02 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.js
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.js
@@ -81,7 +81,7 @@ Button.propTypes = {
 
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -122,7 +122,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.tsx b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
index d5b1b0e9c99646..37607c9bd6317b 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.tsx
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
@@ -76,7 +76,7 @@ const Button = React.forwardRef(function Button<
 
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -117,7 +117,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.js b/docs/data/base/components/select/UnstyledSelectObjectValues.js
index 529eb06e383fb5..cb57e5a1bbe309 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValues.js
+++ b/docs/data/base/components/select/UnstyledSelectObjectValues.js
@@ -97,7 +97,7 @@ Button.propTypes = {
 
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -138,7 +138,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -199,7 +199,7 @@ const Popper = styled(BasePopper)`
 
 const Paragraph = styled('p')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   margin: 12px 0;
   color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
index 4f179ec08f1304..60e0af4f981847 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
+++ b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
@@ -96,7 +96,7 @@ const Button = React.forwardRef(function Button<
 
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -137,7 +137,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -198,7 +198,7 @@ const Popper = styled(BasePopper)`
 
 const Paragraph = styled('p')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   margin: 12px 0;
   color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
index 08c0beaa211c30..9d96b61db67dbb 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
+++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
@@ -156,7 +156,7 @@ Button.propTypes = {
 
 const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -199,7 +199,7 @@ const StyledButton = styled(Button, { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 8px;
@@ -260,7 +260,7 @@ const Popper = styled(BasePopper)`
 
 const Label = styled('label')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.85rem;
   display: block;
   margin-bottom: 4px;
@@ -271,7 +271,7 @@ const Label = styled('label')(
 
 const SubmitButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
index 2a95314b2852b9..f458fb94511649 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
+++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
@@ -155,7 +155,7 @@ const Button = React.forwardRef(function Button<
 
 const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -198,7 +198,7 @@ const StyledButton = styled(Button, { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 8px;
@@ -259,7 +259,7 @@ const Popper = styled(BasePopper)`
 
 const Label = styled('label')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.85rem;
   display: block;
   margin-bottom: 4px;
@@ -270,7 +270,7 @@ const Label = styled('label')(
 
 const SubmitButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.js b/docs/data/base/components/select/UnstyledSelectRichOptions.js
index bef781fbae5e8a..4e9c38169b7eb1 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.js
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.js
@@ -89,7 +89,7 @@ Button.propTypes = {
 
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -130,7 +130,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
index 18c025895df61c..0e5c1620a8a5e3 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
@@ -84,7 +84,7 @@ const Button = React.forwardRef(function Button<
 
 const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -125,7 +125,7 @@ const StyledButton = styled('button', { shouldForwardProp: () => true })(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/data/base/components/select/UseSelect.js b/docs/data/base/components/select/UseSelect.js
index 1535d3eff28729..9a72f9e31e2ea7 100644
--- a/docs/data/base/components/select/UseSelect.js
+++ b/docs/data/base/components/select/UseSelect.js
@@ -38,7 +38,7 @@ const Root = styled('div')`
 
 const Toggle = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -80,7 +80,7 @@ const Toggle = styled('button')(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
diff --git a/docs/data/base/components/select/UseSelect.tsx b/docs/data/base/components/select/UseSelect.tsx
index c89ac15d889bee..104f99912ef6cf 100644
--- a/docs/data/base/components/select/UseSelect.tsx
+++ b/docs/data/base/components/select/UseSelect.tsx
@@ -41,7 +41,7 @@ const Root = styled('div')`
 
 const Toggle = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -83,7 +83,7 @@ const Toggle = styled('button')(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
index ccca7f61d858c4..338ad9a413bedf 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
@@ -91,7 +91,7 @@ const grey = {
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -140,7 +140,7 @@ const SnackbarContent = styled('div')(
   justify-content: space-between;
   max-width: 560px;
   min-width: 300px;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: ${
diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
index 503646886bad7e..c04116d1174cfc 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
@@ -92,7 +92,7 @@ const grey = {
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -141,7 +141,7 @@ const SnackbarContent = styled('div')(
   justify-content: space-between;
   max-width: 560px;
   min-width: 300px;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: ${
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js
index c4dd3c13018c4c..4118fef04462dd 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js
@@ -84,7 +84,7 @@ function Styles() {
     }
 
     .TriggerButton {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
       line-height: 1.5;
@@ -97,16 +97,16 @@ function Styles() {
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       color: ${isDarkMode ? grey[200] : grey[900]};
       box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    
+
       &:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-    
+
       &:active {
         background: ${isDarkMode ? grey[700] : grey[100]};
       }
-    
+
       &:focus-visible {
         box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
         outline: none;
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx
index c4dd3c13018c4c..4118fef04462dd 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx
@@ -84,7 +84,7 @@ function Styles() {
     }
 
     .TriggerButton {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
       line-height: 1.5;
@@ -97,16 +97,16 @@ function Styles() {
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       color: ${isDarkMode ? grey[200] : grey[900]};
       box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    
+
       &:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-    
+
       &:active {
         background: ${isDarkMode ? grey[700] : grey[100]};
       }
-    
+
       &:focus-visible {
         box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
         outline: none;
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.js b/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.js
index 7d835be0cd1c5c..af9520d92c017b 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.js
@@ -72,7 +72,7 @@ const snackbarInRight = keyframes`
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -113,7 +113,7 @@ const CustomSnackbar = styled('div')(
     justify-content: start;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.tsx
index 7d835be0cd1c5c..af9520d92c017b 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.tsx
@@ -72,7 +72,7 @@ const snackbarInRight = keyframes`
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -113,7 +113,7 @@ const CustomSnackbar = styled('div')(
     justify-content: start;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js
index f45ff5df67660c..6ce7638bd49c9d 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js
@@ -144,7 +144,7 @@ function Styles() {
     }
 
     .TriggerButtonIntroduction {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
       line-height: 1.5;
@@ -157,16 +157,16 @@ function Styles() {
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       color: ${isDarkMode ? grey[200] : grey[900]};
       box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    
+
       &:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-    
+
       &:active {
         background: ${isDarkMode ? grey[700] : grey[100]};
       }
-    
+
       &:focus-visible {
         box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
         outline: none;
@@ -195,7 +195,7 @@ function Styles() {
       };
       padding: 0.75rem;
       color: ${isDarkMode ? grey[50] : grey[900]};
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 500;
       text-align: start;
       position: relative;
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
index 7ab3746ad4a712..36e003cd345db8 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
@@ -145,7 +145,7 @@ function Styles() {
     }
 
     .TriggerButtonIntroduction {
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
       line-height: 1.5;
@@ -158,16 +158,16 @@ function Styles() {
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       color: ${isDarkMode ? grey[200] : grey[900]};
       box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    
+
       &:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-    
+
       &:active {
         background: ${isDarkMode ? grey[700] : grey[100]};
       }
-    
+
       &:focus-visible {
         box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
         outline: none;
@@ -196,7 +196,7 @@ function Styles() {
       };
       padding: 0.75rem;
       color: ${isDarkMode ? grey[50] : grey[900]};
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 500;
       text-align: start;
       position: relative;
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.js b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.js
index db75d01838ccc2..d92c112f4140f3 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.js
@@ -107,7 +107,7 @@ const blue = {
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -152,7 +152,7 @@ const SnackbarContent = styled('div')(
   display: flex;
   gap: 8px;
   overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: ${
@@ -162,7 +162,7 @@ const SnackbarContent = styled('div')(
   };
   padding: 0.75rem;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 500;
   text-align: start;
   position: relative;
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx
index 2c216f5827b252..d73eb6c45eea53 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx
@@ -108,7 +108,7 @@ const blue = {
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -153,7 +153,7 @@ const SnackbarContent = styled('div')(
   display: flex;
   gap: 8px;
   overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: ${
@@ -163,7 +163,7 @@ const SnackbarContent = styled('div')(
   };
   padding: 0.75rem;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 500;
   text-align: start;
   position: relative;
diff --git a/docs/data/base/components/snackbar/UseSnackbar.js b/docs/data/base/components/snackbar/UseSnackbar.js
index ecbf70c3f09819..a479feb8477ee7 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.js
+++ b/docs/data/base/components/snackbar/UseSnackbar.js
@@ -68,7 +68,7 @@ const snackbarInRight = keyframes`
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -111,7 +111,7 @@ const CustomSnackbar = styled('div')(
     justify-content: space-between;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
diff --git a/docs/data/base/components/snackbar/UseSnackbar.tsx b/docs/data/base/components/snackbar/UseSnackbar.tsx
index ecbf70c3f09819..a479feb8477ee7 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.tsx
+++ b/docs/data/base/components/snackbar/UseSnackbar.tsx
@@ -68,7 +68,7 @@ const snackbarInRight = keyframes`
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -111,7 +111,7 @@ const CustomSnackbar = styled('div')(
     justify-content: space-between;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
diff --git a/docs/data/base/components/table-pagination/TableCustomized/css/index.js b/docs/data/base/components/table-pagination/TableCustomized/css/index.js
index 0e9f43124cd969..014098e3910f41 100644
--- a/docs/data/base/components/table-pagination/TableCustomized/css/index.js
+++ b/docs/data/base/components/table-pagination/TableCustomized/css/index.js
@@ -148,7 +148,7 @@ function Styles() {
         max-width: 100%;
       }
       .TablePaginationDemo table {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         border-collapse: collapse;
         width: 100%;
diff --git a/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx b/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx
index e6eeb300ce7dc9..ada8fc4e6d083d 100644
--- a/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx
+++ b/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx
@@ -153,7 +153,7 @@ function Styles() {
         max-width: 100%;
       }
       .TablePaginationDemo table {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         border-collapse: collapse;
         width: 100%;
diff --git a/docs/data/base/components/table-pagination/TableCustomized/system/index.js b/docs/data/base/components/table-pagination/TableCustomized/system/index.js
index 162e3b184b62a9..1895a9da0b9a9a 100644
--- a/docs/data/base/components/table-pagination/TableCustomized/system/index.js
+++ b/docs/data/base/components/table-pagination/TableCustomized/system/index.js
@@ -124,7 +124,7 @@ const grey = {
 const Root = styled('div')(
   ({ theme }) => `
   table {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     border-collapse: collapse;
     width: 100%;
diff --git a/docs/data/base/components/table-pagination/TableCustomized/system/index.tsx b/docs/data/base/components/table-pagination/TableCustomized/system/index.tsx
index 03f6127e4d8413..b96312794e9629 100644
--- a/docs/data/base/components/table-pagination/TableCustomized/system/index.tsx
+++ b/docs/data/base/components/table-pagination/TableCustomized/system/index.tsx
@@ -129,7 +129,7 @@ const grey = {
 const Root = styled('div')(
   ({ theme }) => `
   table {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     border-collapse: collapse;
     width: 100%;
diff --git a/docs/data/base/components/table-pagination/TableUnstyled.js b/docs/data/base/components/table-pagination/TableUnstyled.js
index 6333c3701f0f71..4808ec40bd5c7b 100644
--- a/docs/data/base/components/table-pagination/TableUnstyled.js
+++ b/docs/data/base/components/table-pagination/TableUnstyled.js
@@ -116,7 +116,7 @@ const grey = {
 const Root = styled('div')(
   ({ theme }) => `
   table {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     border-collapse: collapse;
     width: 100%;
diff --git a/docs/data/base/components/table-pagination/TableUnstyled.tsx b/docs/data/base/components/table-pagination/TableUnstyled.tsx
index 78d90232950109..65788f413a1e59 100644
--- a/docs/data/base/components/table-pagination/TableUnstyled.tsx
+++ b/docs/data/base/components/table-pagination/TableUnstyled.tsx
@@ -121,7 +121,7 @@ const grey = {
 const Root = styled('div')(
   ({ theme }) => `
   table {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     border-collapse: collapse;
     width: 100%;
diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js
index 7a842398ab3c1d..c46d82e878fc57 100644
--- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js
+++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js
@@ -100,7 +100,7 @@ function Styles() {
       }
 
       .TablePaginationIntroductionDemo table {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         width: 100%;
         background-color: ${isDarkMode ? grey[900] : '#fff'};
diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx
index 0c65f2464bb2b0..b2159d8c937e74 100644
--- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx
+++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx
@@ -105,7 +105,7 @@ function Styles() {
       }
 
       .TablePaginationIntroductionDemo table {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         width: 100%;
         background-color: ${isDarkMode ? grey[900] : '#fff'};
diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/system/index.js b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/system/index.js
index 4eb9f2b89821a8..465770bb813795 100644
--- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/system/index.js
+++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/system/index.js
@@ -69,7 +69,7 @@ const grey = {
 const Root = styled('div')(
   ({ theme }) => `
   table {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     width: 100%;
     background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/system/index.tsx b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/system/index.tsx
index 4053bf926ee2b4..9307775dc3b00a 100644
--- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/system/index.tsx
+++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/system/index.tsx
@@ -74,7 +74,7 @@ const grey = {
 const Root = styled('div')(
   ({ theme }) => `
   table {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     width: 100%;
     background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.js b/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.js
index f2edc1892941ce..95d5efbac95ead 100644
--- a/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.js
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.js
@@ -85,7 +85,7 @@ const Tab = styled(BaseTab)`
 const TabPanel = styled(BaseTabPanel)(
   ({ theme }) => `
   width: 100%;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   padding: 20px 12px;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx b/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx
index f2edc1892941ce..95d5efbac95ead 100644
--- a/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction/system/index.tsx
@@ -85,7 +85,7 @@ const Tab = styled(BaseTab)`
 const TabPanel = styled(BaseTabPanel)(
   ({ theme }) => `
   width: 100%;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   padding: 20px 12px;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.js b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
index b0e969cdae197a..0b4d410b78b157 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.js
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
@@ -28,7 +28,7 @@ export default function EmptyTextarea() {
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
index b0e969cdae197a..0b4d410b78b157 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
@@ -28,7 +28,7 @@ export default function EmptyTextarea() {
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
index 5938c00e40c5b3..f3423480f17356 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
@@ -28,7 +28,7 @@ export default function MaxHeightTextarea() {
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
index 5938c00e40c5b3..f3423480f17356 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
@@ -28,7 +28,7 @@ export default function MaxHeightTextarea() {
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
index 1dcdedc12ab458..d241bf3985ad83 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
@@ -28,7 +28,7 @@ export default function MinHeightTextarea() {
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
index 1dcdedc12ab458..d241bf3985ad83 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
@@ -28,7 +28,7 @@ export default function MinHeightTextarea() {
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
index a6eced8534d878..3315ed8fd72393 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
@@ -54,7 +54,7 @@ function Styles() {
       {`
       .CustomTextarea {
         width: 320px;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
@@ -73,7 +73,7 @@ function Styles() {
      .CustomTextarea:focus {
         outline: 0;
         border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};        
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
       }
 
       // firefox
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
index a6eced8534d878..3315ed8fd72393 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
@@ -54,7 +54,7 @@ function Styles() {
       {`
       .CustomTextarea {
         width: 320px;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
@@ -73,7 +73,7 @@ function Styles() {
      .CustomTextarea:focus {
         outline: 0;
         border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};        
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
       }
 
       // firefox
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
index b9c773dfe7155b..d6e31ea1f2b85a 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
@@ -28,7 +28,7 @@ export default function EmptyTextarea() {
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
index b9c773dfe7155b..d6e31ea1f2b85a 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
@@ -28,7 +28,7 @@ export default function EmptyTextarea() {
   const Textarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
     width: 320px;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
index dc7ec322fd2cc4..3aa49c68177932 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js
@@ -54,7 +54,7 @@ function Styles() {
       {`
       .CustomTextareaIntrocudtion {
         width: 320px;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
index dc7ec322fd2cc4..3aa49c68177932 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx
@@ -54,7 +54,7 @@ function Styles() {
       {`
       .CustomTextareaIntrocudtion {
         width: 320px;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
index ae971b49873fbc..0c89e5e0be6ea6 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
@@ -31,7 +31,7 @@ const grey = {
 const TextareaAutosize = styled(BaseTextareaAutosize)(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
index ae971b49873fbc..0c89e5e0be6ea6 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
@@ -31,7 +31,7 @@ const grey = {
 const TextareaAutosize = styled(BaseTextareaAutosize)(
   ({ theme }) => `
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
diff --git a/docs/data/base/getting-started/accessibility/KeyboardNavigation.js b/docs/data/base/getting-started/accessibility/KeyboardNavigation.js
index 47719bb137273e..f501c1a6a0bc9f 100644
--- a/docs/data/base/getting-started/accessibility/KeyboardNavigation.js
+++ b/docs/data/base/getting-started/accessibility/KeyboardNavigation.js
@@ -72,7 +72,7 @@ const grey = {
 
 const Button = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 200px;
@@ -116,7 +116,7 @@ const Button = styled('button')(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -202,7 +202,7 @@ const MenuItem = styled(BaseMenuItem)(
 
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   box-sizing: border-box;
diff --git a/docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx b/docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx
index 0068167b817735..31a74346805379 100644
--- a/docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx
+++ b/docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx
@@ -77,7 +77,7 @@ const grey = {
 
 const Button = styled('button')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 200px;
@@ -121,7 +121,7 @@ const Button = styled('button')(
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -207,7 +207,7 @@ const MenuItem = styled(BaseMenuItem)(
 
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   box-sizing: border-box;
diff --git a/docs/data/joy/components/modal/ServerModal.tsx b/docs/data/joy/components/modal/ServerModal.tsx
index 589a5f546e6e53..f404399c2ddfc3 100644
--- a/docs/data/joy/components/modal/ServerModal.tsx
+++ b/docs/data/joy/components/modal/ServerModal.tsx
@@ -5,7 +5,7 @@ import ModalDialog from '@mui/joy/ModalDialog';
 import Typography from '@mui/joy/Typography';
 
 export default function ServerModal() {
-  const rootRef = React.useRef(null);
+  const rootRef = React.useRef<HTMLDivElement>(null);
 
   return (
     <Box
@@ -27,7 +27,7 @@ export default function ServerModal() {
         disableEnforceFocus
         disableAutoFocus
         open
-        container={() => rootRef.current}
+        container={() => rootRef.current!}
       >
         <ModalDialog
           aria-labelledby="server-modal-title"
diff --git a/docs/data/material/components/modal/ServerModal.tsx b/docs/data/material/components/modal/ServerModal.tsx
index 5a6f7f8dcd470e..883ec5f5abca8c 100644
--- a/docs/data/material/components/modal/ServerModal.tsx
+++ b/docs/data/material/components/modal/ServerModal.tsx
@@ -34,7 +34,7 @@ export default function ServerModal() {
           alignItems: 'center',
           justifyContent: 'center',
         }}
-        container={() => rootRef.current}
+        container={() => rootRef.current!}
       >
         <Box
           sx={{
diff --git a/docs/data/material/components/portal/SimplePortal.js b/docs/data/material/components/portal/SimplePortal.js
deleted file mode 100644
index 830945c112ba63..00000000000000
--- a/docs/data/material/components/portal/SimplePortal.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Portal from '@mui/material/Portal';
-
-export default function SimplePortal() {
-  const [show, setShow] = React.useState(false);
-  const container = React.useRef(null);
-
-  const handleClick = () => {
-    setShow(!show);
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={handleClick}>
-        {show ? 'Unmount children' : 'Mount children'}
-      </button>
-      <Box sx={{ p: 1, my: 1, border: '1px solid' }}>
-        It looks like I will render here.
-        {show ? (
-          <Portal container={container.current}>
-            <span>But I actually render here!</span>
-          </Portal>
-        ) : null}
-      </Box>
-      <Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />
-    </div>
-  );
-}
diff --git a/docs/data/material/components/portal/SimplePortal.tsx b/docs/data/material/components/portal/SimplePortal.tsx
deleted file mode 100644
index 830945c112ba63..00000000000000
--- a/docs/data/material/components/portal/SimplePortal.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Portal from '@mui/material/Portal';
-
-export default function SimplePortal() {
-  const [show, setShow] = React.useState(false);
-  const container = React.useRef(null);
-
-  const handleClick = () => {
-    setShow(!show);
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={handleClick}>
-        {show ? 'Unmount children' : 'Mount children'}
-      </button>
-      <Box sx={{ p: 1, my: 1, border: '1px solid' }}>
-        It looks like I will render here.
-        {show ? (
-          <Portal container={container.current}>
-            <span>But I actually render here!</span>
-          </Portal>
-        ) : null}
-      </Box>
-      <Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />
-    </div>
-  );
-}
diff --git a/docs/data/material/components/portal/SimplePortal.tsx.preview b/docs/data/material/components/portal/SimplePortal.tsx.preview
deleted file mode 100644
index 1f38e1c13e51d1..00000000000000
--- a/docs/data/material/components/portal/SimplePortal.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-<button type="button" onClick={handleClick}>
-  {show ? 'Unmount children' : 'Mount children'}
-</button>
-<Box sx={{ p: 1, my: 1, border: '1px solid' }}>
-  It looks like I will render here.
-  {show ? (
-    <Portal container={container.current}>
-      <span>But I actually render here!</span>
-    </Portal>
-  ) : null}
-</Box>
-<Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />
\ No newline at end of file
diff --git a/docs/pages/base-theme.css b/docs/pages/base-theme.css
index 15601f3dbf8d25..3d260ccaee0f88 100644
--- a/docs/pages/base-theme.css
+++ b/docs/pages/base-theme.css
@@ -28,7 +28,7 @@
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
@@ -73,7 +73,7 @@
 }
 
 .GalleryButton {
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -121,7 +121,7 @@
 
 .GalleryInput .MuiInput-input {
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
@@ -152,7 +152,7 @@
 }
 
 .GalleryMenu-listbox {
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -214,7 +214,7 @@
 }
 
 .GalleryNumberInput {
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: var(--GalleryNumberInput-color, var(--grey-900));
@@ -391,7 +391,7 @@
 }
 
 .GallerySelect {
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
@@ -428,7 +428,7 @@
   }
 }
 .GallerySelect-listbox {
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
@@ -615,7 +615,7 @@
   box-shadow: 0 2px 16px var(--GallerySnackbar-content-boxShadow-color, var(--grey-200));
   padding: 0.75rem;
   color: var(--GallerySnackbar-content-color, var(--grey-900));
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 500;
   text-align: start;
   position: relative;
@@ -756,7 +756,7 @@
 }
 
 .GalleryTablePaginationDemo table {
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   width: 100%;
   background-color: var(--GalleryTablePainationDemo-table-background-color, #fff);
@@ -792,7 +792,7 @@
 }
 
 .GalleryTablePagination .MuiTablePagination-toolbar {
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   display: flex;
   flex-direction: column;
@@ -943,7 +943,7 @@
 
 .GalleryTextarea {
   width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
diff --git a/docs/pages/experiments/base/listbox.tsx b/docs/pages/experiments/base/listbox.tsx
index da5d66eaaa15f9..46f528de5ff49b 100644
--- a/docs/pages/experiments/base/listbox.tsx
+++ b/docs/pages/experiments/base/listbox.tsx
@@ -7,7 +7,7 @@ const styles = `
   body {
     padding: 0;
     margin: 0;
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
   }
 
   .list {
diff --git a/docs/pages/experiments/base/tabs.tsx b/docs/pages/experiments/base/tabs.tsx
index 226c57ebbdfcc5..bebb732eec96f1 100644
--- a/docs/pages/experiments/base/tabs.tsx
+++ b/docs/pages/experiments/base/tabs.tsx
@@ -68,7 +68,7 @@ const StyledTab = styled(Tab)`
 const StyledTabPanel = styled(TabPanel)(
   ({ theme }) => `
   width: 100%;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   padding: 20px 12px;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
diff --git a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
index 2f569410874280..cbbfb03d39ba39 100644
--- a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
+++ b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
@@ -622,7 +622,7 @@ const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
 
@@ -692,7 +692,7 @@ const StyledMenuItem = styled(MenuItem)(
 );
 
 const StyledMenuListbox = styled('ul')(`
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;
diff --git a/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx b/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx
index aba9bfd7ce0162..ae82c744f3c0cc 100644
--- a/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx
@@ -4,7 +4,7 @@ import { Button } from '@mui/base/Button';
 import { styled, GlobalStyles } from '@mui/system';
 
 const buttonStyles = `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: bold;
   font-size: 0.875rem;
   background-color: var(--palette-primary);
@@ -111,22 +111,22 @@ import './styles.css';
 <Button
   className="transition-all-[150ms_ease] cursor-pointer
     rounded-[8px] border-none bg-[--palette-primary]
-    p-[10px_16px] text-[0.875rem] font-bold 
-    text-white [font-family:IBM_Plex_sans] 
+    p-[10px_16px] text-[0.875rem] font-bold
+    text-white [font-family:IBM_Plex_sans]
     hover:bg-[--palette-primary-hover]
     shadow-[--shadow]
-    ui-active:bg-[--palette-primary-dark] 
-    ui-disabled:cursor-not-allowed ui-disabled:opacity-50 
+    ui-active:bg-[--palette-primary-dark]
+    ui-disabled:cursor-not-allowed ui-disabled:opacity-50
     ui-focus-visible:[outline:4px_solid_var(--focus-ring) transition">
   Button
 </Button>
 <Button
   className="transition-all-[150ms_ease] cursor-pointer
     rounded-[8px] border-none bg-[--palette-primary]
-    p-[10px_16px] text-[0.875rem] font-bold 
-    text-white [font-family:IBM_Plex_sans] 
-    ui-active:bg-[--palette-primary-dark] 
-    ui-disabled:cursor-not-allowed ui-disabled:opacity-50 
+    p-[10px_16px] text-[0.875rem] font-bold
+    text-white [font-family:IBM_Plex_sans]
+    ui-active:bg-[--palette-primary-dark]
+    ui-disabled:cursor-not-allowed ui-disabled:opacity-50
     ui-focus-visible:[outline:4px_solid_var(--focus-ring)]">
   Disabled
 </Button>`;
diff --git a/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx b/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
index 2e1a53c6cf47fc..0fb21e6eeadb82 100644
--- a/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
@@ -11,7 +11,7 @@ const buttonStyles = `
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
@@ -265,16 +265,16 @@ function Demo() {
   return (
     <Dropdown>
       <MenuButtonUnstyled
-        className="min-h-[calc(1.5em + 22px)] inline-flex 
-          items-center gap-[0.5rem] rounded-[8px] border 
-          border-solid border-[--muidocs-palette-grey-200] 
-          bg-[--muidocs-palette-background-paper] 
-          p-[8px_12px_8px_6px] text-[0.875rem] 
-          leading-[1.5] transition-all [font-family:IBM_Plex_sans] 
+        className="min-h-[calc(1.5em + 22px)] inline-flex
+          items-center gap-[0.5rem] rounded-[8px] border
+          border-solid border-[--muidocs-palette-grey-200]
+          bg-[--muidocs-palette-background-paper]
+          p-[8px_12px_8px_6px] text-[0.875rem]
+          leading-[1.5] transition-all [font-family:IBM_Plex_sans]
           [box-shadow:var(--shadow)]
-          hover:bg-[--muidocs-palette-grey-50] 
+          hover:bg-[--muidocs-palette-grey-50]
           ui-focus-visible:[outline:3px_solid_var(--focus-ring)]
-          dark:border-[--muidocs-palette-primaryDark-700] 
+          dark:border-[--muidocs-palette-primaryDark-700]
           dark:hover:bg-[--muidocs-palette-primaryDark-800]"
       >
         <Person className="text-[--palette-primary]" />
@@ -285,53 +285,53 @@ function Demo() {
           root: { placement: 'top', className: 'z-[1000]' },
           listbox: {
             id: 'simple-menu',
-            className: \`mx-0 my-[8px] p-[4px] flex flex-col rounded-[8px] 
-              border border-solid border-[--muidocs-palette-grey-200] 
-              bg-[--muidocs-palette-background-paper] 
-              shadow-[0px_4px_40px_rgba(62,80,96,0.1)] 
-              dark:border-[--muidocs-palette-primaryDark-700] 
+            className: \`mx-0 my-[8px] p-[4px] flex flex-col rounded-[8px]
+              border border-solid border-[--muidocs-palette-grey-200]
+              bg-[--muidocs-palette-background-paper]
+              shadow-[0px_4px_40px_rgba(62,80,96,0.1)]
+              dark:border-[--muidocs-palette-primaryDark-700]
               dark:shadow-[0px_4px_40px_rgba(11,13,14,0.5)]\`,
           },
         }}
       >
         <MenuItemUnstyled
-          className="hover:color-[--muidocs-palette-text-primary] 
-            flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
-            border border-solid border-transparent px-[12px] 
-            py-[6px] hover:cursor-default 
-            hover:border-[--muidocs-palette-grey-100] 
-            hover:bg-[--muidocs-palette-grey-50] 
-            ui-focus-visible:cursor-default 
-            ui-focus-visible:border-[--muidocs-palette-grey-100] 
-            ui-focus-visible:bg-[--muidocs-palette-grey-50] 
+          className="hover:color-[--muidocs-palette-text-primary]
+            flex min-h-[24px] items-center gap-[4px] rounded-[4px]
+            border border-solid border-transparent px-[12px]
+            py-[6px] hover:cursor-default
+            hover:border-[--muidocs-palette-grey-100]
+            hover:bg-[--muidocs-palette-grey-50]
+            ui-focus-visible:cursor-default
+            ui-focus-visible:border-[--muidocs-palette-grey-100]
+            ui-focus-visible:bg-[--muidocs-palette-grey-50]
             ui-focus-visible:outline-none"
         >
           Profile
         </MenuItemUnstyled>
         <MenuItemUnstyled
-          className="hover:color-[--muidocs-palette-text-primary] 
-            flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
-            border border-solid border-transparent px-[12px] 
-            py-[6px] hover:cursor-default 
-            hover:border-[--muidocs-palette-grey-100] 
-            hover:bg-[--muidocs-palette-grey-50] 
-            ui-focus-visible:cursor-default 
-            ui-focus-visible:border-[--muidocs-palette-grey-100] 
-            ui-focus-visible:bg-[--muidocs-palette-grey-50] 
+          className="hover:color-[--muidocs-palette-text-primary]
+            flex min-h-[24px] items-center gap-[4px] rounded-[4px]
+            border border-solid border-transparent px-[12px]
+            py-[6px] hover:cursor-default
+            hover:border-[--muidocs-palette-grey-100]
+            hover:bg-[--muidocs-palette-grey-50]
+            ui-focus-visible:cursor-default
+            ui-focus-visible:border-[--muidocs-palette-grey-100]
+            ui-focus-visible:bg-[--muidocs-palette-grey-50]
             ui-focus-visible:outline-none"
         >
           Language settings
         </MenuItemUnstyled>
         <MenuItemUnstyled
-          className="hover:color-[--muidocs-palette-text-primary] 
-            flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
-            border border-solid border-transparent px-[12px] 
-            py-[6px] hover:cursor-default 
-            hover:border-[--muidocs-palette-grey-100] 
-            hover:bg-[--muidocs-palette-grey-50] 
-            ui-focus-visible:cursor-default 
-            ui-focus-visible:border-[--muidocs-palette-grey-100] 
-            ui-focus-visible:bg-[--muidocs-palette-grey-50] 
+          className="hover:color-[--muidocs-palette-text-primary]
+            flex min-h-[24px] items-center gap-[4px] rounded-[4px]
+            border border-solid border-transparent px-[12px]
+            py-[6px] hover:cursor-default
+            hover:border-[--muidocs-palette-grey-100]
+            hover:bg-[--muidocs-palette-grey-50]
+            ui-focus-visible:cursor-default
+            ui-focus-visible:border-[--muidocs-palette-grey-100]
+            ui-focus-visible:bg-[--muidocs-palette-grey-50]
             ui-focus-visible:outline-none"
         >
           Log out
diff --git a/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx b/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx
index 1b21ec04decf82..943b3abf3bdea0 100644
--- a/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx
@@ -21,13 +21,13 @@ const StyledTabsList = styled('div')(tabListStyles);
 
 const tabPanelStyles = `
   width: 100%;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
 `;
 const StyledTabPanel = styled('div')(tabPanelStyles);
 
 const tabStyles = `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   color: white;
   cursor: pointer;
   font-size: 0.875rem;
@@ -174,39 +174,39 @@ import { TabUnstyled } from '@mui/base/Tab';
 
 <TabsUnstyled selectionFollowsFocus defaultValue={0}>
   <TabsListUnstyled
-    className="mb-[16px] flex min-w-[300px] content-between 
-      items-center justify-center rounded-[12px] 
+    className="mb-[16px] flex min-w-[300px] content-between
+      items-center justify-center rounded-[12px]
       bg-[--palette-primary] [box-shadow:var(--shadow)]">
-    <TabUnstyled 
-      className="m-[6px] flex w-full cursor-pointer 
-        justify-center rounded-[7px] border-none 
-        bg-transparent p-[12px] text-[0.875rem] 
-        font-bold text-white [font-family:IBM_Plex_sans] 
-        focus:text-white 
-        focus:[outline:3px_solid_var(--focus-ring)] 
-        ui-selected:bg-white 
+    <TabUnstyled
+      className="m-[6px] flex w-full cursor-pointer
+        justify-center rounded-[7px] border-none
+        bg-transparent p-[12px] text-[0.875rem]
+        font-bold text-white [font-family:IBM_Plex_sans]
+        focus:text-white
+        focus:[outline:3px_solid_var(--focus-ring)]
+        ui-selected:bg-white
         ui-selected:text-[--palette-primary]">
       One
     </TabUnstyled>
-    <TabUnstyled 
-      className="m-[6px] flex w-full cursor-pointer 
-        justify-center rounded-[7px] border-none 
-        bg-transparent p-[12px] text-[0.875rem] 
-        font-bold text-white [font-family:IBM_Plex_sans] 
-        focus:text-white 
-        focus:[outline:3px_solid_var(--focus-ring)] 
-        ui-selected:bg-white 
+    <TabUnstyled
+      className="m-[6px] flex w-full cursor-pointer
+        justify-center rounded-[7px] border-none
+        bg-transparent p-[12px] text-[0.875rem]
+        font-bold text-white [font-family:IBM_Plex_sans]
+        focus:text-white
+        focus:[outline:3px_solid_var(--focus-ring)]
+        ui-selected:bg-white
         ui-selected:text-[--palette-primary]">
       Two
     </TabUnstyled>
-    <TabUnstyled 
-      className="m-[6px] flex w-full cursor-pointer 
-        justify-center rounded-[7px] border-none 
-        bg-transparent p-[12px] text-[0.875rem] 
-        font-bold text-white [font-family:IBM_Plex_sans] 
-        focus:text-white 
-        focus:[outline:3px_solid_var(--focus-ring)] 
-        ui-selected:bg-white 
+    <TabUnstyled
+      className="m-[6px] flex w-full cursor-pointer
+        justify-center rounded-[7px] border-none
+        bg-transparent p-[12px] text-[0.875rem]
+        font-bold text-white [font-family:IBM_Plex_sans]
+        focus:text-white
+        focus:[outline:3px_solid_var(--focus-ring)]
+        ui-selected:bg-white
         ui-selected:text-[--palette-primary]">
       Three
     </TabUnstyled>
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 2630939f0c3776..22eab535bff399 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -456,7 +456,7 @@ const Root = styled('div')(
       cursor: 'pointer',
       position: 'absolute',
       top: theme.spacing(1),
-      right: theme.spacing(1),
+      right: 20,
       padding: theme.spacing(0.5),
       fontFamily: 'inherit',
       fontWeight: 500,
diff --git a/docs/translations/api-docs-base/modal/modal.json b/docs/translations/api-docs-base/modal/modal.json
index ec5fe5f54ca3a5..d1b09e0d326266 100644
--- a/docs/translations/api-docs-base/modal/modal.json
+++ b/docs/translations/api-docs-base/modal/modal.json
@@ -6,7 +6,7 @@
       "description": "When set to true the Modal waits until a nested Transition is completed before closing."
     },
     "container": {
-      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
+      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
     },
     "disableAutoFocus": {
       "description": "If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers."
diff --git a/docs/translations/api-docs-base/popper/popper.json b/docs/translations/api-docs-base/popper/popper.json
index c6992d55ad4cb2..729a6f9eeb270f 100644
--- a/docs/translations/api-docs-base/popper/popper.json
+++ b/docs/translations/api-docs-base/popper/popper.json
@@ -6,7 +6,7 @@
     },
     "children": { "description": "Popper render function or node." },
     "container": {
-      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
+      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
     },
     "direction": { "description": "Direction of the text." },
     "disablePortal": {
diff --git a/docs/translations/api-docs-base/portal/portal.json b/docs/translations/api-docs-base/portal/portal.json
index 5cf030caee57c1..d7fb72bca569c9 100644
--- a/docs/translations/api-docs-base/portal/portal.json
+++ b/docs/translations/api-docs-base/portal/portal.json
@@ -3,7 +3,7 @@
   "propDescriptions": {
     "children": { "description": "The children to render into the <code>container</code>." },
     "container": {
-      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
+      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
     },
     "disablePortal": {
       "description": "The <code>children</code> will be under the DOM hierarchy of the parent component."
diff --git a/docs/translations/api-docs-joy/drawer/drawer.json b/docs/translations/api-docs-joy/drawer/drawer.json
index ce8f718ab285fb..7a5b63ac3d0e63 100644
--- a/docs/translations/api-docs-joy/drawer/drawer.json
+++ b/docs/translations/api-docs-joy/drawer/drawer.json
@@ -9,7 +9,7 @@
       "description": "The component used for the root node. Either a string to use a HTML element or a component."
     },
     "container": {
-      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
+      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
     },
     "disableAutoFocus": {
       "description": "If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers."
diff --git a/docs/translations/api-docs-joy/modal/modal.json b/docs/translations/api-docs-joy/modal/modal.json
index 380f77c803b1bd..3c4171fd19a10e 100644
--- a/docs/translations/api-docs-joy/modal/modal.json
+++ b/docs/translations/api-docs-joy/modal/modal.json
@@ -6,7 +6,7 @@
       "description": "The component used for the root node. Either a string to use a HTML element or a component."
     },
     "container": {
-      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
+      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
     },
     "disableAutoFocus": {
       "description": "If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers."
diff --git a/docs/translations/api-docs/modal/modal.json b/docs/translations/api-docs/modal/modal.json
index 4cc4f17facdde5..252946ec392c0f 100644
--- a/docs/translations/api-docs/modal/modal.json
+++ b/docs/translations/api-docs/modal/modal.json
@@ -22,7 +22,7 @@
       "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future."
     },
     "container": {
-      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
+      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
     },
     "disableAutoFocus": {
       "description": "If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers."
diff --git a/docs/translations/api-docs/popper/popper.json b/docs/translations/api-docs/popper/popper.json
index 40bd20d5c20451..178879e0bd5352 100644
--- a/docs/translations/api-docs/popper/popper.json
+++ b/docs/translations/api-docs/popper/popper.json
@@ -13,7 +13,7 @@
     },
     "componentsProps": { "description": "The props used for each slot inside the Popper." },
     "container": {
-      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
+      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
     },
     "disablePortal": {
       "description": "The <code>children</code> will be under the DOM hierarchy of the parent component."
diff --git a/docs/translations/api-docs/use-modal/use-modal.json b/docs/translations/api-docs/use-modal/use-modal.json
index b40404bc574128..4552414fc002ce 100644
--- a/docs/translations/api-docs/use-modal/use-modal.json
+++ b/docs/translations/api-docs/use-modal/use-modal.json
@@ -6,7 +6,7 @@
       "description": "When set to true the Modal waits until a nested Transition is completed before closing."
     },
     "container": {
-      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
+      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
     },
     "disableEscapeKeyDown": {
       "description": "If <code>true</code>, hitting escape will not fire the <code>onClose</code> callback."
diff --git a/packages/mui-base/src/Modal/Modal.tsx b/packages/mui-base/src/Modal/Modal.tsx
index 074e0e83cf5c5a..3071262c0ab160 100644
--- a/packages/mui-base/src/Modal/Modal.tsx
+++ b/packages/mui-base/src/Modal/Modal.tsx
@@ -198,6 +198,9 @@ Modal.propTypes /* remove-proptypes */ = {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-base/src/Modal/Modal.types.ts b/packages/mui-base/src/Modal/Modal.types.ts
index 57ed4cca880c9a..899d1721291cdc 100644
--- a/packages/mui-base/src/Modal/Modal.types.ts
+++ b/packages/mui-base/src/Modal/Modal.types.ts
@@ -20,6 +20,9 @@ export interface ModalOwnProps {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-base/src/Popper/Popper.tsx b/packages/mui-base/src/Popper/Popper.tsx
index b7a44861a4fcf6..062be865278d2f 100644
--- a/packages/mui-base/src/Popper/Popper.tsx
+++ b/packages/mui-base/src/Popper/Popper.tsx
@@ -406,6 +406,9 @@ Popper.propTypes /* remove-proptypes */ = {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-base/src/Popper/Popper.types.ts b/packages/mui-base/src/Popper/Popper.types.ts
index f5c100dea6ce3e..abeac3ec83c587 100644
--- a/packages/mui-base/src/Popper/Popper.types.ts
+++ b/packages/mui-base/src/Popper/Popper.types.ts
@@ -34,6 +34,9 @@ export interface PopperOwnProps {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-base/src/Portal/Portal.tsx b/packages/mui-base/src/Portal/Portal.tsx
index 4e8031091a06bf..983fb0d829312b 100644
--- a/packages/mui-base/src/Portal/Portal.tsx
+++ b/packages/mui-base/src/Portal/Portal.tsx
@@ -83,6 +83,9 @@ Portal.propTypes /* remove-proptypes */ = {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-base/src/Portal/Portal.types.ts b/packages/mui-base/src/Portal/Portal.types.ts
index 467e00c7a9a891..8e5717db2742bf 100644
--- a/packages/mui-base/src/Portal/Portal.types.ts
+++ b/packages/mui-base/src/Portal/Portal.types.ts
@@ -9,6 +9,9 @@ export interface PortalProps {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-base/src/unstable_useModal/useModal.types.ts b/packages/mui-base/src/unstable_useModal/useModal.types.ts
index 84103e6757ab87..337b5b3918dfd0 100644
--- a/packages/mui-base/src/unstable_useModal/useModal.types.ts
+++ b/packages/mui-base/src/unstable_useModal/useModal.types.ts
@@ -32,6 +32,9 @@ export type UseModalParameters = {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-joy/src/Drawer/Drawer.tsx b/packages/mui-joy/src/Drawer/Drawer.tsx
index 9be276cca86d7d..19c279c7e2d6ee 100644
--- a/packages/mui-joy/src/Drawer/Drawer.tsx
+++ b/packages/mui-joy/src/Drawer/Drawer.tsx
@@ -298,6 +298,9 @@ Drawer.propTypes /* remove-proptypes */ = {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-joy/src/Modal/Modal.tsx b/packages/mui-joy/src/Modal/Modal.tsx
index 2c0925055bde24..7d196b3e4df787 100644
--- a/packages/mui-joy/src/Modal/Modal.tsx
+++ b/packages/mui-joy/src/Modal/Modal.tsx
@@ -192,6 +192,9 @@ Modal.propTypes /* remove-proptypes */ = {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-material/src/Modal/Modal.d.ts b/packages/mui-material/src/Modal/Modal.d.ts
index db21682663aae2..a9ad08c406c944 100644
--- a/packages/mui-material/src/Modal/Modal.d.ts
+++ b/packages/mui-material/src/Modal/Modal.d.ts
@@ -93,6 +93,9 @@ export interface ModalOwnProps {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-material/src/Modal/Modal.js b/packages/mui-material/src/Modal/Modal.js
index 1587a668aeb392..eb7e2ee8c80d17 100644
--- a/packages/mui-material/src/Modal/Modal.js
+++ b/packages/mui-material/src/Modal/Modal.js
@@ -295,6 +295,9 @@ Modal.propTypes /* remove-proptypes */ = {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
index f0a62e5ecf9ca8..6d9cabfd721a25 100644
--- a/packages/mui-material/src/Popper/Popper.tsx
+++ b/packages/mui-material/src/Popper/Popper.tsx
@@ -151,6 +151,9 @@ Popper.propTypes /* remove-proptypes */ = {
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */