diff --git a/.changeset/checkbox-switch-single-label-node.md b/.changeset/checkbox-switch-single-label-node.md
new file mode 100644
index 0000000000..ea071b2b7a
--- /dev/null
+++ b/.changeset/checkbox-switch-single-label-node.md
@@ -0,0 +1,13 @@
+---
+'@toptal/picasso-form-label': minor
+'@toptal/picasso-checkbox': minor
+'@toptal/picasso-switch': minor
+---
+
+### Checkbox, Switch
+
+- expose a single label-associated node when a `label` is provided, so `getByLabelText`, `getByText` and `getByRole` match once. The base-ui control renders an accessible `role` element plus a hidden native `<input>`; both used to be label-associated (the `role` element via `aria-labelledby`, the input via the wrapping `<label>`), which made those queries throw "Found multiple elements" in consumer tests. The control now names itself via `aria-labelledby`. Note the DOM contract change: a labeled control's root element changes from `<label>` to `<div>`, and the derived `"<id>-label"` node id is gone — update selectors/styles that relied on the `label` tag or that id. Label clicks are still forwarded to preserve click-to-toggle and focus, and interactive content inside the label (links, buttons) no longer toggles the control
+
+### FormControlLabel
+
+- add an optional `labelId` prop. When provided, the wrapper renders as a non-`<label>` element (so a control's hidden native input is not a second label-associated node) and forwards label-text clicks to the control (skipping interactive descendants). The default `<label>` path is unchanged, so `Radio` and other consumers are unaffected
diff --git a/.changeset/container-spacing-classes-move.md b/.changeset/container-spacing-classes-move.md
new file mode 100644
index 0000000000..a195207b66
--- /dev/null
+++ b/.changeset/container-spacing-classes-move.md
@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-container': patch
+---
+
+### Container
+
+- resolve spacing classes through `@toptal/picasso-utils` — the resolver and class table moved there unchanged; no consumer-visible change
diff --git a/.changeset/decommission-mui-provider.md b/.changeset/decommission-mui-provider.md
new file mode 100644
index 0000000000..ccd1cc5afc
--- /dev/null
+++ b/.changeset/decommission-mui-provider.md
@@ -0,0 +1,27 @@
+---
+'@toptal/picasso-provider': major
+'@toptal/picasso': major
+'@toptal/picasso-utils': patch
+'@toptal/picasso-collapse': patch
+'@toptal/picasso-fade': patch
+'@toptal/picasso-slide': patch
+---
+
+Decommission the MUI v4 runtime and remove the `@material-ui/core` peer dependency.
+
+`@toptal/picasso-provider` no longer ships an MUI theme runtime, and `@toptal/picasso` no longer requires `@material-ui/core` as a peer dependency. Both packages now allow React 19 (the `react`/`react-dom` peer range widens to `>=16.12.0`).
+
+Breaking changes (consumer action required):
+
+- a `PicassoProvider` and its `.override()`, `.extendTheme()`, and `.disableResponsiveStyle()` methods are removed. There is no runtime MUI theme — override component styling with Tailwind `className`/`data-*` variants instead of `PicassoProvider.override()`.
+- the `theme`, `injectFirst`, and `disableClassNamePrefix` props are removed from `<Picasso>` and `<PicassoLight>` (they only configured the MUI theme and JSS style injection, both gone). For the one field with a runtime effect — page content width — set it on `<Page>` via a CSS-variable class (e.g. `<Page className="[--content-width:80em]">`) rather than the `theme` prop.
+- `getServersideStylesheets` is removed. Tailwind extracts CSS at build time, so JSS server-side stylesheet collection is obsolete — drop it from SSR setup.
+- a `@material-ui/core` is no longer a peer dependency of `@toptal/picasso`, and `@material-ui/core` / `@material-ui/utils` are no longer dependencies of `@toptal/picasso-provider`.
+- the `reset` prop is removed from `<Picasso>` / `<PicassoLight>`, and the provider no longer injects a runtime reset `<style>` (`CssBaseline` is removed). The global reset now ships as CSS — add `@import '@toptal/picasso-tailwind/base';` to the Tailwind entry CSS, after the theme import. Omitting the import replaces `reset={false}`. The reset lives in `@layer base`, so Tailwind utilities and unlayered app CSS win over it by cascade-layer rules.
+- jest snapshots rendered through `TestingPicasso` no longer contain a reset `<style>` element (expect a one-time snapshot regeneration).
+- `makeResponsiveSpacingProps` is removed (org-wide audit: zero external usage; the sole in-repo consumer was Dropdown `offset`). Per-breakpoint responsive spacing now compiles to static Tailwind classes shipped in build-time CSS, so it is correct on SSR first paint. The removed implementation was client-only: server-rendered HTML carried the generated class names and CSS variables but no bridging `@media` rules until hydration — a silent first-paint layout shift for any SSR consumer of responsive spacing objects. With it gone, the "Tailwind extracts CSS at build time" rationale above genuinely covers every stylesheet.
+- the `preventPageWidthChangeOnScrollbar` prop, the `usePreventPageWidthChangeOnScrollbar` hook (zero external consumers), and the runtime `<style>` they controlled are removed — **the provider no longer injects any runtime CSS**. The page-width-jump fix (`html` hides horizontal overflow, `body` spans `100vw`, from 768px up) now ships in `@toptal/picasso-tailwind/base`. Behavior deltas: under `responsive={false}` the fix previously started at 1024px, now always 768px; `<PicassoLight>` consumers importing the base entry gain the fix (PicassoLight never rendered it); `Page.TopBar` applies `md:w-screen` unconditionally to stay coordinated (override via its `className` if needed). Opt-out remedies: apps that need horizontal page scroll (e.g. signal's wide tables) re-disable it with unlayered app CSS — `html { overflow-x: visible }` + `body { width: 100% }` — which wins over `@layer base` by cascade rules, no `!important` needed (existing `!important` overrides like top-assessment's keep working and can drop the `!important`); browser extensions that inject Picasso into third-party pages (sourcing-extension) must not import the base entry into host-page context at all; test wrappers simply delete the prop. Storybook-like environments that render `<Page>` inside a story frame (a transformed ancestor re-contains the fixed TopBar while `md:w-screen`/`100vw` still sizes against the real viewport) additionally need the CSS opt-out plus `header.mui-fixed { width: 100% }` — see Picasso's own `.storybook/styles.css` for the reference override.
+
+`@toptal/picasso-utils` also drops a vestigial `notistack@1.0.10` peer dependency (unused in its source) — it was the last transitive pull of `@material-ui/core` v4 in the tree. `@toptal/picasso-collapse`, `@toptal/picasso-fade`, and `@toptal/picasso-slide` now declare `@types/react-transition-group` directly (previously resolved transitively through `@material-ui`).
+
+A `@toptal/picasso-codemod` transform to strip the removed `<Picasso>` props will ship alongside the consumer migration (tracked in PF-1995).
diff --git a/.changeset/dropdown-offset-static.md b/.changeset/dropdown-offset-static.md
new file mode 100644
index 0000000000..e7b0464a98
--- /dev/null
+++ b/.changeset/dropdown-offset-static.md
@@ -0,0 +1,11 @@
+---
+'@toptal/picasso-dropdown': patch
+---
+
+### Dropdown
+
+- `offset` now resolves through the shared static spacing-class table from `@toptal/picasso-utils` (the same table Container's spacing props use): spacing tokens and deprecated size strings become static Tailwind margin classes; deprecated raw numbers stay inline rem styles. Computed margins are unchanged
+- fix the inverted responsive-offset cascade: per-breakpoint offset objects emitted their media queries largest-first, so on wide viewports the smallest specified breakpoint won. The bug shipped with the feature; an org-wide audit found zero users of the responsive object form. With Tailwind's mobile-first variants, `offset={{ top: { sm: SPACING_2, lg: SPACING_8 } }}` now correctly applies the `lg` value on `lg`+ screens
+- responsive offsets are now correct on SSR first paint — the classes live in the build-time Tailwind CSS, where the previous runtime `<style>` bridge was client-only (reachable in SSR HTML with `keepMounted` + `disablePortal`)
+- token/string offsets moved from inline styles to classes, so consumer CSS targeting the popper can now override the offset margins (inline styles previously always won)
+- responsive offsets no longer react to `disableMobileBreakpoints()` — they use the fixed Tailwind screens, matching Container's responsive spacing props
diff --git a/.changeset/page-responsive-root-context.md b/.changeset/page-responsive-root-context.md
new file mode 100644
index 0000000000..767c8297e0
--- /dev/null
+++ b/.changeset/page-responsive-root-context.md
@@ -0,0 +1,14 @@
+---
+'@toptal/picasso-provider': minor
+'@toptal/picasso-page': minor
+---
+
+### PicassoProvider
+
+- expose the `responsive` flag through `RootContext` / `useAppConfig()` (new optional `responsive` prop on `PicassoGlobalStylesProvider`)
+
+### Page
+
+- read the non-responsive min-width from `useAppConfig()` instead of `PicassoProvider.theme.layout`, and apply it as a static Tailwind class (`min-w-[768px]`) instead of an inline style
+- merge the consumer `className` after the `--content-width*` CSS variable defaults, so overrides like `<Page className='[--content-width:80em]'>` win
+- in `Page.Content` and `Page.Footer` read their max-width from the `--content-width` / `--content-width-wide` variables (with the previous values as fallbacks) instead of hardcoded values
diff --git a/.changeset/page-topbar-wscreen.md b/.changeset/page-topbar-wscreen.md
new file mode 100644
index 0000000000..3b016009b4
--- /dev/null
+++ b/.changeset/page-topbar-wscreen.md
@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-page': major
+---
+
+### PageTopBar
+
+- the `Page.TopBar` header always applies `md:w-screen`, keeping the top bar coordinated with the page-width-jump fix that now ships unconditionally in `@toptal/picasso-tailwind/base`. It was previously conditional on the provider's `preventPageWidthChangeOnScrollbar` prop, which is removed. Consumers that opted out of the fix and need the old top-bar width back override via `className` (e.g. `md:w-full`) — consumer `className` is last in the merge, so it wins
diff --git a/.changeset/picasso-tailwind-base-entry.md b/.changeset/picasso-tailwind-base-entry.md
new file mode 100644
index 0000000000..2796b72a17
--- /dev/null
+++ b/.changeset/picasso-tailwind-base-entry.md
@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-tailwind': minor
+---
+
+### Base layer
+
+- add an opt-in `@toptal/picasso-tailwind/base` CSS entry that ships the Picasso global reset inside `@layer base`. Import it in the Tailwind entry CSS after the theme import (`@import '@toptal/picasso-tailwind/base';`). It replaces the runtime reset previously injected by `@toptal/picasso-provider`; omit the import to opt out (the former `<Picasso reset={false}>`). Because the reset is cascade-layered, all Tailwind utilities and any unlayered app CSS win over it.
+- the base entry also ships the page-width-jump fix formerly injected at runtime by the provider (`html { width: 100%; overflow-x: hidden }` + `body { width: 100vw }` from 768px up): page width no longer changes when the vertical scrollbar appears or disappears. Opt out with unlayered app CSS — `html { overflow-x: visible }` + `body { width: 100% }` — which wins over `@layer base` by cascade rules.
diff --git a/.changeset/utils-spacing-classes.md b/.changeset/utils-spacing-classes.md
new file mode 100644
index 0000000000..f565a29b3d
--- /dev/null
+++ b/.changeset/utils-spacing-classes.md
@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-utils': minor
+---
+
+### Utils
+
+- add the spacing-class resolver — `getSpacingClasses`, `getSpacingStyles`, `getMappedClass`, `getResponsiveClasses` over a static, mobile-first Tailwind class table — moved unchanged from `@toptal/picasso-container` internals so Container spacing props and Dropdown `offset` share one implementation
diff --git a/.storybook/components/CodeExample/CodeExample.tsx b/.storybook/components/CodeExample/CodeExample.tsx
index 18cccb03c7..dc00d79d41 100755
--- a/.storybook/components/CodeExample/CodeExample.tsx
+++ b/.storybook/components/CodeExample/CodeExample.tsx
@@ -10,7 +10,6 @@ import React, {
 } from 'react'
 import debounce from 'debounce'
 import styled from 'styled-components'
-import { makeStyles, Theme } from '@material-ui/core/styles'
 import SourceRender, { RenderResult } from 'react-source-render'
 import copy from 'copy-to-clipboard'
 
@@ -21,16 +20,12 @@ import { Code16, Link16 } from '@toptal/picasso-icons'
 
 import Editor from '../Editor'
 import purifyFixedPosition from '../../utils/purify-fixed-position'
-import styles from './styles'
+import * as classes from './styles'
 
 const COPY_LINK_DEFAULT_TEXT = 'Link'
 const COPY_LINK_COPIED_TEXT = 'Copied!'
 const PRESETS = [['typescript', { allExtensions: true, isTSX: true }], 'es2015']
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoCodeExample',
-})
-
 interface Props extends BaseProps {
   permanentLink: string
   src: string
@@ -175,11 +170,7 @@ const PicassoSSR: FunctionComponent = ({ children }) => {
   }
 
   return (
-    <Picasso
-      fixViewport={false}
-      loadFavicon={false}
-      preventPageWidthChangeOnScrollbar={false}
-    >
+    <Picasso fixViewport={false} loadFavicon={false}>
       <Purifier>{children}</Purifier>
     </Picasso>
   )
@@ -240,7 +231,6 @@ const CodeExample = ({
   permanentLink,
   src,
 }: Props) => {
-  const classes = useStyles()
   const [sourceCode, setSourceCode] = useState(
     getOriginalSourceCode({
       src,
@@ -272,12 +262,7 @@ const CodeExample = ({
    */
   if (TEST_ENV === 'visual') {
     const renderInTestPicasso = (element: ReactNode) => (
-      <Picasso
-        loadFonts={false}
-        fixViewport={false}
-        loadFavicon={false}
-        preventPageWidthChangeOnScrollbar={false}
-      >
+      <Picasso loadFonts={false} fixViewport={false} loadFavicon={false}>
         <Purifier>{element}</Purifier>
       </Picasso>
     )
diff --git a/.storybook/components/CodeExample/styles.ts b/.storybook/components/CodeExample/styles.ts
index 440af6901a..c81cf0d7d7 100644
--- a/.storybook/components/CodeExample/styles.ts
+++ b/.storybook/components/CodeExample/styles.ts
@@ -1,28 +1,9 @@
-import { createStyles } from '@material-ui/core'
+export const root = 'relative w-full'
 
-export default () =>
-  createStyles({
-    root: {
-      position: 'relative',
-      width: '100%'
-    },
-    component: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    },
-    componentRenderer: {
-      flex: 1,
-      position: 'relative'
-    },
-    buttons: {
-      top: '-.75rem',
-      right: '-1rem',
-      position: 'absolute'
-    },
-    editor: {
-      width: '100%',
-      backgroundColor: '#141414',
-      padding: '1rem 0'
-    }
-  })
+export const component = 'flex justify-between items-center'
+
+export const componentRenderer = 'flex-1 relative'
+
+export const buttons = '-top-3 -right-4 absolute'
+
+export const editor = 'w-full bg-[#141414] py-4 px-0'
diff --git a/.storybook/components/Editor/Editor.tsx b/.storybook/components/Editor/Editor.tsx
index b8a5d9a40b..0c8d65a130 100644
--- a/.storybook/components/Editor/Editor.tsx
+++ b/.storybook/components/Editor/Editor.tsx
@@ -1,13 +1,12 @@
 import React, { FunctionComponent } from 'react'
 import AceEditor from 'react-ace'
 import { BaseProps } from '@toptal/picasso-shared'
-import { makeStyles, Theme } from '@material-ui/core/styles'
 import 'brace/ext/language_tools'
 import 'brace/mode/jsx'
 import 'brace/mode/html'
 import 'brace/theme/twilight'
 
-import styles from './styles'
+import * as classes from './styles'
 
 interface Props extends BaseProps {
   id: string
@@ -16,16 +15,12 @@ interface Props extends BaseProps {
   onChange: (value: string) => void
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoEditor' })
-
 const Editor: FunctionComponent<Props> = ({
   mode = 'jsx',
   id,
   value,
   ...rest
 }) => {
-  const classes = useStyles()
-
   return (
     <div className={classes.root}>
       <AceEditor
diff --git a/.storybook/components/Editor/styles.ts b/.storybook/components/Editor/styles.ts
index 427e5719fa..f995dc0f9c 100644
--- a/.storybook/components/Editor/styles.ts
+++ b/.storybook/components/Editor/styles.ts
@@ -1,10 +1,4 @@
-export default {
-  root: {
-    width: '100%',
-
-    '& *': {
-      fontFamily:
-        "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace"
-    }
-  }
-}
+// PicassoRootNode's subtree font default is zero-specificity (`:where(.root) *`),
+// so this ordinary (0,1,0) monospace rule wins naturally — no `!important` needed.
+export const root =
+  'w-full [&_*]:font-[Monaco,Menlo,Ubuntu_Mono,Consolas,source-code-pro,monospace]'
diff --git a/.storybook/components/Markdown/Markdown.tsx b/.storybook/components/Markdown/Markdown.tsx
index bc94b64994..9ac5ca8e6b 100644
--- a/.storybook/components/Markdown/Markdown.tsx
+++ b/.storybook/components/Markdown/Markdown.tsx
@@ -3,22 +3,17 @@ import cx from 'classnames'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { BaseProps } from '@toptal/picasso-shared'
-import { makeStyles, Theme } from '@material-ui/core/styles'
 
-import styles from './styles'
+import * as classes from './styles'
 
 interface Props extends BaseProps {
   children: string
   className?: string
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoMarkdown' })
-
 const Markdown = (props: Props): JSX.Element => {
   const { children, className } = props
 
-  const classes = useStyles()
-
   return (
     <ReactMarkdown
       className={cx(classes.root, className)}
diff --git a/.storybook/components/Markdown/styles.ts b/.storybook/components/Markdown/styles.ts
index d15d4e7580..90723d6d56 100644
--- a/.storybook/components/Markdown/styles.ts
+++ b/.storybook/components/Markdown/styles.ts
@@ -1,27 +1,2 @@
-export default {
-  root: {
-    '& code': {
-      backgroundColor: 'rgb(236, 236, 236, 0.5)',
-      borderRadius: '0.4em',
-      padding: '0.3em 0.7em',
-      fontWeight: 400,
-      fontSize: '0.8em',
-      fontFamily:
-        "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace"
-    },
-    '& p:first-child': {
-      marginTop: 0
-    },
-    '& p:last-child': {
-      marginBottom: 0
-    },
-    '& pre': {
-      backgroundColor: 'rgb(236, 236, 236, 0.5)',
-
-      '& code': {
-        padding: '0em',
-        backgroundColor: 'initial'
-      }
-    }
-  }
-}
+export const root =
+  '[&_code]:bg-[rgb(236,236,236,0.5)] [&_code]:rounded-[0.4em] [&_code]:px-[0.7em] [&_code]:py-[0.3em] [&_code]:font-normal [&_code]:text-[0.8em] [&_code]:font-[Monaco,Menlo,Ubuntu_Mono,Consolas,source-code-pro,monospace] [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_pre]:bg-[rgb(236,236,236,0.5)] [&_pre_code]:p-0 [&_pre_code]:bg-[initial]'
diff --git a/.storybook/components/PicassoBook/components/PropsTable/EnumsList.tsx b/.storybook/components/PicassoBook/components/PropsTable/EnumsList.tsx
index 954b620811..7cbc88f81c 100644
--- a/.storybook/components/PicassoBook/components/PropsTable/EnumsList.tsx
+++ b/.storybook/components/PicassoBook/components/PropsTable/EnumsList.tsx
@@ -1,11 +1,10 @@
 import React, { FunctionComponent } from 'react'
-import { makeStyles, Theme } from '@material-ui/core/styles'
 import { BaseProps } from '@toptal/picasso-shared'
 
 import { PropTypeDocumentation } from '~/.storybook/utils/documentation-generator'
 import cx from 'classnames'
 
-import styles from './styles'
+import { classes } from './styles'
 
 interface Props extends BaseProps {
   enums?: string[]
@@ -14,13 +13,9 @@ interface Props extends BaseProps {
 
 const trim = (value: string) => String(value).replace(/\'|\"/gi, '')
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoEnumsList' })
-
 const EnumsList: FunctionComponent<Props> = props => {
   const { enums, type } = props
 
-  const classes = useStyles()
-
   let enumList = enums
 
   if (!Array.isArray(enums)) {
diff --git a/.storybook/components/PicassoBook/components/PropsTable/PropTypeTableCell.tsx b/.storybook/components/PicassoBook/components/PropsTable/PropTypeTableCell.tsx
index 3d7359fd46..5dbedfc0a8 100644
--- a/.storybook/components/PicassoBook/components/PropsTable/PropTypeTableCell.tsx
+++ b/.storybook/components/PicassoBook/components/PropsTable/PropTypeTableCell.tsx
@@ -1,26 +1,18 @@
 import React, { FunctionComponent } from 'react'
 
-import { makeStyles, Theme } from '@material-ui/core/styles'
-
 import { Tooltip, Table } from '@toptal/picasso'
 import { BaseProps } from '@toptal/picasso-shared'
 
 import Markdown from '~/.storybook/components/Markdown'
 import { PropTypeDocumentation } from '~/.storybook/utils/documentation-generator'
-import styles from './styles'
+import { classes } from './styles'
 
 interface Props extends BaseProps {
   className?: string
   type: string | PropTypeDocumentation
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPropTypeTableCell'
-})
-
 const PropTypeTableCell: FunctionComponent<Props> = props => {
-  const classes = useStyles()
-
   const { type, className } = props
 
   if (typeof type === 'string') {
diff --git a/.storybook/components/PicassoBook/components/PropsTable/PropsTable.tsx b/.storybook/components/PicassoBook/components/PropsTable/PropsTable.tsx
index 917fb5e312..244bc48045 100644
--- a/.storybook/components/PicassoBook/components/PropsTable/PropsTable.tsx
+++ b/.storybook/components/PicassoBook/components/PropsTable/PropsTable.tsx
@@ -1,29 +1,23 @@
 import React, { Fragment, FunctionComponent } from 'react'
-import { makeStyles, Theme } from '@material-ui/core/styles'
 import { Table, Typography, Tooltip } from '@toptal/picasso'
 import { BaseProps } from '@toptal/picasso-shared'
 
 import {
   PropDocumentation,
   PropTypeDocumentation,
-  sortBy
+  sortBy,
 } from '~/.storybook/utils'
 import PropTypeTableCell from './PropTypeTableCell'
 import EnumsList from './EnumsList'
 import Description from './Description'
-import styles from './styles'
+import { classes } from './styles'
 
 interface Props extends BaseProps {
   documentation: PropDocumentation[]
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPropsTable'
-})
-
 function useRows(props: Props): JSX.Element {
   const { documentation } = props
-  const classes = useStyles()
 
   const isEnum = (type: string | PropTypeDocumentation) =>
     type === 'enum' || (type as PropTypeDocumentation).name === 'enum'
@@ -42,7 +36,7 @@ function useRows(props: Props): JSX.Element {
           description,
           enums,
           required,
-          deprecated
+          deprecated,
         }) => {
           const propNameTypography = (
             <Typography weight='semibold' inline lineThrough={deprecated}>
@@ -87,8 +81,6 @@ function useRows(props: Props): JSX.Element {
 }
 
 const PropsTable: FunctionComponent<Props> = props => {
-  const classes = useStyles()
-
   const rows = useRows(props)
 
   return (
diff --git a/.storybook/components/PicassoBook/components/PropsTable/styles.ts b/.storybook/components/PicassoBook/components/PropsTable/styles.ts
index dd2905a1ce..cb8c9503a2 100644
--- a/.storybook/components/PicassoBook/components/PropsTable/styles.ts
+++ b/.storybook/components/PicassoBook/components/PropsTable/styles.ts
@@ -1,85 +1,19 @@
-import { Theme, createStyles } from '@material-ui/core/styles'
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      overflowX: 'auto',
-    },
-    table: {
-      width: '100%',
-    },
-    name: {
-      width: '100px',
-    },
-    type: {
-      width: '1%',
-    },
-    description: {
-      width: '100%',
-    },
-    defaultValue: {
-      width: '1%',
-    },
-    tooltipTarget: {
-      borderBottom: '1px dotted',
-      fontWeight: 600,
-      cursor: 'help',
-    },
-    highlight: {
-      backgroundColor: 'rgb(236, 236, 236, 0.5)',
-      borderRadius: '0.4em',
-      padding: '0.3em 0.7em',
-      fontWeight: 600,
-    },
-    typeCell: {
-      whiteSpace: 'nowrap',
-    },
-    defaultValueCell: {
-      whiteSpace: 'nowrap',
-    },
-    descriptionCell: {
-      paddingTop: '1em',
-      paddingBottom: '1em',
-    },
-    enums: {
-      marginTop: '1em',
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-    },
-    enumLabel: {
-      marginRight: '0.2em',
-      marginBottom: '0.2em',
-    },
-    enum: {
-      fontSize: '0.8rem',
-      marginRight: '0.2em',
-      marginBottom: '0.2em',
-    },
-    markdown: {
-      '& code': {
-        backgroundColor: 'rgb(236, 236, 236, 0.5)',
-        borderRadius: '0.4em',
-        padding: '0.3em 0.7em',
-        fontWeight: 400,
-        fontSize: '0.8em',
-        fontFamily:
-          "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace",
-      },
-      '& p:first-child': {
-        marginTop: 0,
-      },
-      '& p:last-child': {
-        marginBottom: 0,
-      },
-      '& pre': {
-        backgroundColor: 'rgb(236, 236, 236, 0.5)',
-
-        '& code': {
-          padding: '0em',
-          backgroundColor: 'initial',
-        },
-      },
-    },
-  })
+export const classes = {
+  root: 'w-full overflow-x-auto',
+  table: 'w-full',
+  name: 'w-[100px]',
+  type: 'w-[1%]',
+  description: 'w-full',
+  defaultValue: 'w-[1%]',
+  tooltipTarget: 'border-b border-dotted font-semibold cursor-help',
+  highlight:
+    'bg-[rgb(236,236,236,0.5)] rounded-[0.4em] px-[0.7em] py-[0.3em] font-semibold',
+  typeCell: 'whitespace-nowrap',
+  defaultValueCell: 'whitespace-nowrap',
+  descriptionCell: '',
+  enums: 'mt-[1em] flex flex-wrap items-center',
+  enumLabel: 'mr-[0.2em] mb-[0.2em]',
+  enum: 'text-[0.8rem] mr-[0.2em] mb-[0.2em]',
+  markdown:
+    '[&_code]:bg-[rgb(236,236,236,0.5)] [&_code]:rounded-[0.4em] [&_code]:px-[0.7em] [&_code]:py-[0.3em] [&_code]:font-normal [&_code]:text-[0.8em] [&_code]:font-[Monaco,Menlo,Ubuntu_Mono,Consolas,source-code-pro,monospace] [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_pre]:bg-[rgb(236,236,236,0.5)] [&_pre_code]:p-0 [&_pre_code]:bg-[initial]',
+}
diff --git a/.storybook/components/PicassoBook/components/TabsSection/TabsSectionHeader.tsx b/.storybook/components/PicassoBook/components/TabsSection/TabsSectionHeader.tsx
index ba53890710..a276ef9281 100644
--- a/.storybook/components/PicassoBook/components/TabsSection/TabsSectionHeader.tsx
+++ b/.storybook/components/PicassoBook/components/TabsSection/TabsSectionHeader.tsx
@@ -1,11 +1,9 @@
 import React, { Fragment, FunctionComponent } from 'react'
-import { makeStyles, Theme } from '@material-ui/core/styles'
 
 import { Typography, Tabs } from '@toptal/picasso'
-import { Classes } from '@toptal/picasso-shared'
 
 import { TabOptions } from './TabsSection'
-import styles from './styles'
+import { description } from './styles'
 import Markdown from '~/.storybook/components/Markdown'
 
 interface Props {
@@ -14,13 +12,7 @@ interface Props {
   onChange: (event: React.ChangeEvent<{}>, value: number) => void
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoTabsSectionHeader',
-})
-
 const TabsSectionHeader: FunctionComponent<Props> = props => {
-  const classes = useStyles()
-
   const { tabs, selectedTab, onChange } = props
 
   return (
@@ -30,7 +22,7 @@ const TabsSectionHeader: FunctionComponent<Props> = props => {
           <Tabs.Tab key={tab.name} label={tab.name} />
         ))}
       </Tabs>
-      <Typography weight='semibold' className={classes.description}>
+      <Typography weight='semibold' className={description}>
         <Markdown>{tabs[selectedTab].description ?? ''}</Markdown>
       </Typography>
     </Fragment>
diff --git a/.storybook/components/PicassoBook/components/TabsSection/styles.ts b/.storybook/components/PicassoBook/components/TabsSection/styles.ts
index 03990c1420..b6b4b8ce76 100644
--- a/.storybook/components/PicassoBook/components/TabsSection/styles.ts
+++ b/.storybook/components/PicassoBook/components/TabsSection/styles.ts
@@ -1,13 +1,3 @@
-import { createStyles } from '@material-ui/core/styles'
+export const tabs = 'mb-4'
 
-export default () =>
-  createStyles({
-    tabs: {
-      marginBottom: '1rem'
-    },
-    description: {
-      fontSize: '0.75em',
-      marginTop: '0.5rem',
-      marginBottom: '1rem'
-    }
-  })
+export const description = 'text-[0.75em] mt-2 mb-4'
diff --git a/.storybook/preview.js b/.storybook/preview.js
index f4c00366fd..b365e94f8b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -58,13 +58,7 @@ export const parameters = {
 
 const loadFonts = TEST_ENV !== 'visual'
 const withPicasso = story => (
-  <Picasso
-    loadFonts={loadFonts}
-    fixViewport={false}
-    loadFavicon={false}
-    preventPageWidthChangeOnScrollbar={false}
-    injectFirst
-  >
+  <Picasso loadFonts={loadFonts} fixViewport={false} loadFavicon={false}>
     {story()}
   </Picasso>
 )
diff --git a/.storybook/stories/contribution/story/index.tsx b/.storybook/stories/contribution/story/index.tsx
index 7157ee3faf..aae658a1bf 100644
--- a/.storybook/stories/contribution/story/index.tsx
+++ b/.storybook/stories/contribution/story/index.tsx
@@ -3,14 +3,12 @@
 import { createMarkdownPage } from '../../../components/Markdown'
 import PicassoBook from '../../../components/PicassoBook'
 // @ts-ignore
-import CSS_NAMING from '../../../../docs/contribution/css-naming.md'
+import STYLING from '../../../../docs/contribution/styling.md'
 // @ts-ignore
 import NEW_COMPONENT from '../../../../docs/contribution/new-component-creation.md'
 // @ts-ignore
 import GITHUB_WORKFLOW from '../../../../docs/contribution/github-workflow.md'
 // @ts-ignore
-import JSS_ONBOARDING from '../../../../docs/contribution/jss-onboarding.md'
-// @ts-ignore
 import CREATING_EXAMPLES from '../../../../docs/contribution/creating-examples.md'
 // @ts-ignore
 import VISUAL_SNAPSHOTS from '../../../../docs/contribution/visual-testing.md'
@@ -18,9 +16,9 @@ import VISUAL_SNAPSHOTS from '../../../../docs/contribution/visual-testing.md'
 import COMPONENT_API from '../../../../docs/contribution/component-api.md'
 
 const section = PicassoBook.section('Contribution')
+
 section.createDocPage('GitHub workflow', createMarkdownPage(GITHUB_WORKFLOW))
-section.createDocPage('CSS naming', createMarkdownPage(CSS_NAMING))
-section.createDocPage('JSS onboarding', createMarkdownPage(JSS_ONBOARDING))
+section.createDocPage('Styling', createMarkdownPage(STYLING))
 section.createDocPage('New components', createMarkdownPage(NEW_COMPONENT))
 section.createDocPage(
   'Creating examples',
diff --git a/.storybook/stories/tutorials/server-side-rendering/story/ServerSideUtils.example.tsx b/.storybook/stories/tutorials/server-side-rendering/story/ServerSideUtils.example.tsx
deleted file mode 100644
index 55e9f9a185..0000000000
--- a/.storybook/stories/tutorials/server-side-rendering/story/ServerSideUtils.example.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Table } from '@toptal/picasso'
-import React from 'react'
-
-const data = {
-  getServersideStylesheets: `Creates a ServerStyleSheets object to render necessary styles on server side.`
-}
-
-const Example = () => (
-  <Table>
-    <Table.Head>
-      <Table.Row>
-        <Table.Cell>Name</Table.Cell>
-        <Table.Cell>Description</Table.Cell>
-      </Table.Row>
-    </Table.Head>
-    <Table.Body>
-      {Object.entries(data).map(([name, description]) => (
-        <Table.Row key={name}>
-          <Table.Cell>{name}</Table.Cell>
-          <Table.Cell>{description}</Table.Cell>
-        </Table.Row>
-      ))}
-    </Table.Body>
-  </Table>
-)
-
-export default Example
diff --git a/.storybook/stories/tutorials/server-side-rendering/story/index.jsx b/.storybook/stories/tutorials/server-side-rendering/story/index.jsx
deleted file mode 100644
index 7aeb63a239..0000000000
--- a/.storybook/stories/tutorials/server-side-rendering/story/index.jsx
+++ /dev/null
@@ -1,324 +0,0 @@
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const ssrPage = PicassoBook.section('Tutorials').createPage(
-  'How to use server side rendering'
-)
-
-const generalUsage = ssrPage.createChapter()
-
-generalUsage.addTextSection(
-  `In order to use Picasso with an app rendered on server there are some rules that have to be followed:`
-)
-
-generalUsage.addTextSection(
-  `
-We need to disable client side features for Picasso root:
-
-1. Disable the usage of \`<HelmetProviver>\` component
-2. Remove favicon, font, viewport meta tag
-3. Disable Picasso class name prefix (to avoid generating different className prefix on server and client)
-
-Not doing so will not break the app. However, the performance might degrade and there might be unpredictable results.
-
-Try handling these features in your SSR framework of choice.
-
-Example:
-
-~~~tsx
-import Picasso from '@toptal/picasso-provider'
-...
-<Picasso
-  loadFavicon={false}
-  fixViewport={false}
-  loadFonts={false}
-  disableHelmet
-  disableClassNamePrefix
->
-  ...
-</Picasso>
-~~~
-`,
-  {
-    title: 'Remove PicassoProvider client side features',
-  }
-)
-
-generalUsage
-  .addTextSection(
-    `
-JSS implementation of Picasso styles requires to pre-render styles and classes on server side.
-To make it possible a utility function \`getServersideStylesheets\` was introduced.
-`,
-    {
-      title: 'Render styles on server side',
-    }
-  )
-  .addExample(
-    'tutorials/server-side-rendering/story/ServerSideUtils.example.tsx',
-    {
-      id: 'server-side-utils',
-      showEditCode: false,
-      takeScreenshot: false,
-    }
-  )
-generalUsage.addTextSection(
-  `Example:
-
-  ~~~tsx
-  import Picasso, { getServersideStylesheets } from '@toptal/picasso-provider'
-  import ReactDOMServer from 'react-dom/server'
-  import App from './App'
-
-  function handleRender(req, res) {
-    const sheets = getServersideStylesheets()
-
-    // Render the component to a string
-    const html = ReactDOMServer.renderToString(
-      sheets.collect(
-        <Picasso
-          loadFavicon={false}
-          fixViewport={false}
-          loadFonts={false}
-          disableHelmet
-          disableClassNamePrefix>
-          <App />
-        </Picasso>,
-      ),
-    )
-
-    // Grab the CSS from the sheets.
-    const css = sheets.toString()
-
-    // Send the rendered page back to the client.
-    res.send(renderFullPage(html, css))
-  }
-  ~~~`
-)
-
-generalUsage.addTextSection(
-  `
-RichTextEditor component uses the [Lexical](https://github.com/facebook/lexical) package. This package is not SSR compatible.
-In some SSR dev environments this package might cause your application to crash. A temporary work-around for this might be to stub that package in your Webpack config.
-
-~~~tsx
-// /stub/lexical.js
-module.exports = { import: () => null }
-
-// webpack.js
-const disableLexicalForDevelopment = config => { // config is a Webpack config
-  if (process.env.NODE_ENV !== 'development') {
-    return
-  }
-
-  const LEXICAL_STUB_PATH = path.join(__dirname, '/stub/lexical')
-
-  config.resolve.alias.lexical = LEXICAL_STUB_PATH
-  config.resolve.alias['@lexical/react'] = LEXICAL_STUB_PATH
-  config.resolve.alias['@lexical/html'] = LEXICAL_STUB_PATH
-}
-~~~
-`,
-  {
-    title: 'Avoid using RichTextEditor component',
-  }
-)
-
-/** Next.js tutorial */
-const nextJSChapter = ssrPage.createChapter(
-  'Next.js',
-  `
-  Step by step guide how to start using Picasso in a project with Next.js (with Server Side Rendering and Static Site Generation).
-
-  _In all examples was used Next.js@12._
-  `
-)
-
-nextJSChapter.addTextSection(
-  `
-    yarn create next-app --typescript
-    `,
-  {
-    title: '1: Create an empty Next.js project',
-  }
-)
-
-nextJSChapter.addTextSection(
-  `
-    yarn add @toptal/picasso @toptal/picasso-provider
-    `,
-  {
-    title: '2: Add Picasso and PicassoProvider as a dependency',
-  }
-)
-
-nextJSChapter.addTextSection(
-  `
-~~~tsx
-// pages/_app.tsx
-
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
-
-import Picasso from '@toptal/picasso-provider'
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    <Picasso
-      loadFavicon={false}
-      fixViewport={false}
-      loadFonts={false}
-      disableHelmet
-      disableClassNamePrefix
-    >
-      <Component {...pageProps} />
-    </Picasso>
-  )
-}
-
-export default MyApp
-~~~
-    `,
-  {
-    title: '3: Wrap _app.tsx in PicassoProvider',
-  }
-)
-
-nextJSChapter.addTextSection(
-  `
-~~~tsx
-// pages/_document.tsx
-
-import { Children } from 'react'
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import type { DocumentContext, DocumentInitialProps } from 'next/document'
-import { getServersideStylesheets } from '@toptal/picasso-provider'
-
-
-export default class MyDocument extends Document {
-  static getInitialProps = async (
-    ctx: DocumentContext
-  ): Promise<DocumentInitialProps> => {
-    const sheets = getServersideStylesheets()
-    const originalRenderPage = ctx.renderPage
-
-    ctx.renderPage = () =>
-      originalRenderPage({
-        enhanceApp: App => props => sheets.collect(<App {...props} />),
-        enhanceComponent: Component => props =>
-          sheets.collect(<Component {...props} />)
-      })
-
-    const initialProps = await Document.getInitialProps(ctx)
-
-    return {
-      ...initialProps,
-      styles: [
-        ...Children.toArray(initialProps.styles),
-        sheets.getStyleElement()
-      ]
-    }
-  }
-
-  render(): JSX.Element {
-    return (
-      <Html lang="en">
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
-}
-~~~
-    `,
-  {
-    title: '4: Add server side stylesheet generation to _document.tsx',
-  }
-)
-
-nextJSChapter.addTextSection(
-  `
-First add it as a devDependency
-
-~~~sh
-yarn add next-transpile-modules -D
-~~~
-
-Then update \`next.config.js\`
-
-~~~typescript
-// next.config.js
-
-/** @type {import('next').NextConfig} */
-const withTM = require('next-transpile-modules')(['@toptal/picasso'])
-
-module.exports = withTM({
-  reactStrictMode: true,
-  experimental: { esmExternals: true }
-})
-~~~
-    `,
-  {
-    title: '5: Transpile Picasso modules',
-  }
-)
-
-nextJSChapter.addTextSection(
-  `
-~~~typescript
-// pages/index.tsx
-
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import Container from '@toptal/picasso/Container'
-import Typography from '@toptal/picasso/Typography'
-import Alert from '@toptal/picasso/Alert'
-
-import Button from '@toptal/picasso/Button'
-import { useNotifications } from '@toptal/picasso/utils'
-
-const Home: NextPage = () => {
-  const { showInfo } = useNotifications()
-
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name='description' content='Generated by create next app' />
-        <link rel='icon' href='/favicon.ico' />
-      </Head>
-
-      <main className={styles.main}>
-        <Container bottom={5}>
-          <Container bottom={1}>
-            <Typography variant='heading' size='small'>
-              This is an Alert component imported from @toptal/picasso
-            </Typography>
-          </Container>
-          <Alert variant='red'>Hello from Picasso</Alert>
-        </Container>
-        <Container bottom={5}>
-          <Container bottom={1}>
-            <Typography variant='heading' size='small'>
-              These are Button and Notification components imported from @toptal/picasso
-            </Typography>
-          </Container>
-          <Button data-testid='trigger' variant='secondary' onClick={() => showInfo("That's one small step for a man, one giant leap for mankind.")}>
-            Show general notification
-          </Button>
-        </Container>
-      </main>
-    </div>
-  )
-}
-
-export default Home
-~~~
-    `,
-  {
-    title: '6: Use Picasso components',
-  }
-)
diff --git a/.storybook/styles.css b/.storybook/styles.css
index 11e7ce9e76..20295e0576 100644
--- a/.storybook/styles.css
+++ b/.storybook/styles.css
@@ -1,4 +1,27 @@
 @layer theme, base, components;
 @import 'tailwindcss/theme.css' layer(theme);
+@import '@toptal/picasso-tailwind/base';
 @import 'tailwindcss/utilities.css';
 @config "../tailwind.config.js";
+
+/* Storybook/Happo render Page inside story frames that re-contain the fixed
+   TopBar (transformed ancestor), so the page-width-jump fix's viewport-width
+   geometry — the base entry's ≥768px html/body rules and the TopBar's
+   md:w-screen — overflows the frame by (100vw − frame width). Storybook was
+   an opt-out consumer before PF-2226 (preview.js passed
+   preventPageWidthChangeOnScrollbar={false}); this restores that opt-out via
+   the documented escape hatch. Unlayered on purpose (beats the base layer);
+   header.mui-fixed (0,1,1) out-specifies the md:w-screen utility (0,1,0). */
+@media (min-width: 768px) {
+  html {
+    overflow-x: visible;
+  }
+
+  body {
+    width: 100%;
+  }
+
+  header.mui-fixed {
+    width: 100%;
+  }
+}
diff --git a/@types/material-ui__utils/index.d.ts b/@types/material-ui__utils/index.d.ts
deleted file mode 100644
index 81038b00fb..0000000000
--- a/@types/material-ui__utils/index.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-declare module '@material-ui/utils' {
-  export function deepmerge<T, M>(target: T, source: M): T & M
-}
diff --git a/AGENTS.md b/AGENTS.md
index c556be297f..d3b8631045 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -131,6 +131,7 @@ Adding a new package: update `tsconfig.json` paths, `.storybook/main.js` aliases
 - **Tokens over arbitrary values** — use Picasso token names (`text-graphite-800`, `shadow-2`, `p-4`). An `[arbitrary-value]` plus a `// TODO(tokens): …` comment is a last resort to raise with designers; never invent tokens.
 - **No `!important`.** If a utility won't win, walk the override ladder: don't-override → `data-[…]:` / `className` → `render` prop → (last resort) inline `style`. Reaching for `!important` means you skipped a rung.
 - **No CSS/JSS** — no `.css`/`.scss`/`.module.css`, no `makeStyles`/`createStyles`/`withStyles`/`&$selector`. Inline `style` is only for genuinely runtime-computed values, never static ones.
+- **Global reset & box model** — the page-level reset ships as `@toptal/picasso-tailwind/base` (imported in the consumer's Tailwind entry CSS, emitted in `@layer base`): content-box page box model (the legacy CssBaseline carve-out — Picasso components stay border-box via the PicassoRootNode island), body/root layout, font smoothing. It's a baseline — utilities and unlayered app CSS always win over it. Tailwind's full preflight stays off; opting out of the reset = omitting the import.
 - **Whole-pixel geometry.** Positions/dimensions should resolve to whole pixels — sub-pixel values blur borders, dividers, and text. Avoid the usual culprits: `translate(-50%, …)` on odd-size elements, uneven `%` / `calc(100% / 3)`, fractional `rem`/`line-height`/`border-width`. _Exception:_ Base UI primitives self-center via `translate: -50% -50%` — accept their geometry rather than re-introducing pixel-snapping offsets to fight it (see `docs/migration/references/base-ui-styling.md §7.1` rung -1).
 
 ## Base UI composition
diff --git a/CLAUDE.md b/CLAUDE.md
index c16435d449..615d56a8dd 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -14,6 +14,7 @@ Planning docs: `docs/modernization/`
 - AI leverage spec (orchestrator design): `PI-4318-ai-leverage-tickets.md`
 
 Active migration tooling: `docs/migration/`
+
 - Orchestrator runbook: `docs/migration/ORCHESTRATOR.md`
 - Operational migration plan: `docs/migration/migration-plan.md`
 - Run: `pnpm orchestrate --component=<Name>` (or `--tier=N`, `--dry-run`, `--no-merge`, `--review-sweep`, `--cleanup`)
@@ -34,9 +35,10 @@ When reasoning about Picasso component APIs, code style, or reviewer expectation
 - `docs/contribution/pr_jobs.md` — `@toptal-bot` manual CI re-run commands. Graduated into `references/code-standards.md §"Manual CI override via @toptal-bot"`.
 - `docs/contribution/packages-architecture.md` — 4-layer tsconfig + Storybook webpack alias hierarchy. Graduated into `references/code-standards.md §"Build + Storybook tsconfig hierarchy"`.
 - `docs/contribution/accessibility.md` — Storybook a11y addon workflow (Violations / Passes / Incompletions tabs). Graduated into `references/practices.md §Accessibility validation`.
+- `docs/contribution/styling.md` — contributor-facing Tailwind styling patterns (worked examples of the `styles.ts` `string[]` + `twMerge`/`cx` + `data-[…]:` conventions). `AGENTS.md §Styling` stays canonical; this doc defers to it.
 - `docs/contribution/unit-testing.md` and `docs/contribution/creating-examples.md` — test and story conventions.
 - `docs/contribution/new-component-creation.md` — `pnpm generate:component` scaffolding tool (auto-creates folder, story, styles, test per code-standards.md structure).
-- **LEGACY — do NOT use as canonical**: `docs/contribution/css-naming.md` describes MUI v4 + JSS conventions (`root` + `rootFull`/`rootShrink` for variants, `classes` prop pattern). These predate the Tailwind migration. For migrated components, use `references/code-standards.md §Tailwind class composition` instead. The migration agent's `practices.md §"css-naming.md is LEGACY — do not follow"` enforces this.
+- **REMOVED (post-canary hygiene, 2026-07-13)**: `docs/contribution/css-naming.md` + `docs/contribution/jss-onboarding.md` — MUI v4 + JSS conventions predating the Tailwind migration, deleted with the PF-2221 cutover. Their contributor-facing replacement is `docs/contribution/styling.md`; for the rule set use `AGENTS.md §Styling` / `references/code-standards.md §Tailwind class composition`. If an older doc or memory still links the deleted files, fix the pointer (see `practices.md §"css-naming.md is REMOVED"`).
 
 `docs/migration/references/lessons-learned.md` is now **AUDIT-ONLY** — auto-appended after each successful migration, but NOT in the agent's contextPack. Promoted patterns graduate to `practices.md` (manual pass, ~every 5–10 migrations).
 
@@ -83,12 +85,13 @@ The gate's Happo stage (`bin/lib/happo-verify.ts`) is the authoritative visual c
 
 **Cypress-Happo verification (2026-06-10).** The gate now verifies the `Picasso/Cypress` project too, not just `Picasso/Storybook`. After the Cypress stage uploads (keyed to HEAD via `HAPPO_CURRENT_SHA`), the gate runs `happo-verify.ts` against `HAPPO_CYPRESS_PROJECT_ID` (848) → `happo-verify-cypress.json`; the orchestrator re-fetches Cypress diff PNGs into `happo-diffs/*-cypress/` so the agent can fix them, and folds both suites into stuck-detection (`readHappoFailureKey`) + the small-residual classifier (`classifyResidualHappoDiff`). **Advisory by default** (surfaced, non-blocking); `MIGRATION_GATE_HAPPO_CYPRESS_STRICT=1` makes Cypress diffs gate, `MIGRATION_GATE_HAPPO_CYPRESS=skip` disables. Cypress compares against **master** and runs only the migrated component's own spec, so the local diff set is clean/component-scoped — cross-spec regressions stay a CI-only signal. Detail: `docs/migration/ORCHESTRATOR.md §"Cypress visual verification"`.
 
-**Auto-PR on a small residual diff (instead of dead-ending).** When the migrate loop gets stuck ONLY on Happo (all functional gates — build/tsc/lint/jest/consumers/cypress — green) and every residual diff is *small*, the orchestrator opens a ready PR in `awaiting_review` (label `needs-visual-signoff` + a 🟡 comment) instead of hard-escalating to a dirty worktree. `--review-sweep` + a reviewer then finish it (often just a Happo **accept**). Larger visual breakage still escalates. "Small" = every diff pair is `negligible`, a `dimension_mismatch` ≤ 2px/axis, or ≤ 1% changed area (measured via `bin/lib/happo-pixel-diff.ts`). Knobs: `MIGRATION_HAPPO_AUTOPR=off` (disable), `MIGRATION_HAPPO_AUTOPR_MAX_DIM_DELTA` (default `2`), `MIGRATION_HAPPO_AUTOPR_MAX_AREA_FRACTION` (default `0.01`). Impl: the migrate-loop stuck branch in `bin/lib/orchestrator-core.ts` (`classifyResidualHappoDiff`).
+**Auto-PR on a small residual diff (instead of dead-ending).** When the migrate loop gets stuck ONLY on Happo (all functional gates — build/tsc/lint/jest/consumers/cypress — green) and every residual diff is _small_, the orchestrator opens a ready PR in `awaiting_review` (label `needs-visual-signoff` + a 🟡 comment) instead of hard-escalating to a dirty worktree. `--review-sweep` + a reviewer then finish it (often just a Happo **accept**). Larger visual breakage still escalates. "Small" = every diff pair is `negligible`, a `dimension_mismatch` ≤ 2px/axis, or ≤ 1% changed area (measured via `bin/lib/happo-pixel-diff.ts`). Knobs: `MIGRATION_HAPPO_AUTOPR=off` (disable), `MIGRATION_HAPPO_AUTOPR_MAX_DIM_DELTA` (default `2`), `MIGRATION_HAPPO_AUTOPR_MAX_AREA_FRACTION` (default `0.01`). Impl: the migrate-loop stuck branch in `bin/lib/orchestrator-core.ts` (`classifyResidualHappoDiff`).
+
+**Approved-delta override (operator-gated INTENTIONAL exit).** A _deliberate_, designer-approved visual change can clear the gate: list the exact Happo snapshot IDs under a `## Approved visual deltas` heading in `docs/migration/components/<Component>.md`, and `happo-verify.ts` waives those snapshots from the PASS/FAIL decision (per-snapshot — any _unlisted_ diff still fails). This finally implements the exit the docs + prompts have long promised (`references/happo-iteration.md §"Exit criterion"`) but the verifier didn't honor.
 
-**Approved-delta override (operator-gated INTENTIONAL exit).** A *deliberate*, designer-approved visual change can clear the gate: list the exact Happo snapshot IDs under a `## Approved visual deltas` heading in `docs/migration/components/<Component>.md`, and `happo-verify.ts` waives those snapshots from the PASS/FAIL decision (per-snapshot — any *unlisted* diff still fails). This finally implements the exit the docs + prompts have long promised (`references/happo-iteration.md §"Exit criterion"`) but the verifier didn't honor.
 - **Operator-gated by base-branch provenance:** the file is read from the **base branch** (`git show <base>:docs/migration/components/<C>.md`), NOT the worktree — so a delta the agent adds in its PR worktree is ignored. To approve, land the entry on the integration branch (`feature/picasso-modernization-temp`). Commits carry no `--author` override, so base-branch provenance is the trust anchor (matches the "plan files are orchestrator-owned, don't hand-edit from the worktree" governance in `PROMPT-review-response.md`).
 - **Format:** snapshot IDs are `<Component>/<variant>/<target>` (e.g. `Checkbox/Disabled/chrome-desktop`) — copy them from the gate's `diffSnapshots` in `happo-verify.json`. Put them under the heading in a `happo-approved` fenced code block, or as inline `backtick` IDs; entries are intersected with the actual diff set, so stale/typo'd IDs are silently ignored. Waivers are logged to `happo.log` and surfaced as `approvedDiffs` / `waivedSnapshots` in `happo-verify.json`.
-- This is the *operator* INTENTIONAL channel; **agent self-classification stays forbidden** (`happo-iteration.md §"INTENTIONAL is effectively forbidden"` — the agent has been wrong, e.g. Slider #4955). With the auto-PR path above, the agent no longer needs to self-classify to avoid a dead-end.
+- This is the _operator_ INTENTIONAL channel; **agent self-classification stays forbidden** (`happo-iteration.md §"INTENTIONAL is effectively forbidden"` — the agent has been wrong, e.g. Slider #4955). With the auto-PR path above, the agent no longer needs to self-classify to avoid a dead-end.
 
 ## `classes` prop handling per tier (locked 2026-05-11)
 
@@ -104,6 +107,7 @@ Cross-tier audit (`docs/migration/decisions/classes-audit.md`) measured each of
 - **Tier 3.b** (Dropdown, OutlinedInput): **KEEP locally narrowed `classes?: { ... }`** (Dropdown: `{ popper, content }`; OutlinedInput: `{ input, root }`). Real external consumers depend on these slots — Dropdown 2 callsites, OutlinedInput 4 callsites.
 
 **Agents migrating any component MUST verify per-component** before applying:
+
 1. Read the source — confirm StandardProps extension / local narrowing / body reads of `classes`.
 2. Multiline rg internal callsites.
 3. Cross-reference with audit §3/§4/§5.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 557d39cd3b..d7808fbe6d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -25,8 +25,7 @@ The following is a set of guidelines for contributing to Picasso and its package
 ## Technical guides
 
 - [GitHub workflow](docs/contribution/github-workflow.md)
-- [CSS naming](docs/contribution/css-naming.md)
-- [JSS onboarding](docs/contribution/jss-onboarding.md)
+- [Styling (Tailwind)](docs/contribution/styling.md)
 - [New components](docs/contribution/new-component-creation.md)
 - [Creating examples](docs/contribution/creating-examples.md)
 - [Visual snapshots](docs/contribution/visual-testing.md)
diff --git a/_templates/component/new/component.ejs.t b/_templates/component/new/component.ejs.t
index d52bdb4d3d..687495fdf6 100644
--- a/_templates/component/new/component.ejs.t
+++ b/_templates/component/new/component.ejs.t
@@ -4,22 +4,34 @@ to: packages/<%= package %>/src/<%= h.changeCase.pascalCase(name) %>/<%= h.chang
 <%
   Name = h.changeCase.pascalCase(name)
 -%>
+import type { ReactNode } from 'react'
 import React, { forwardRef } from 'react'
-import { makeStyles, Theme } from '@material-ui/core/styles'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import { BaseProps } from '@toptal/picasso-shared'
-import styles from './styles'
+import { createRootClassNames } from './styles'
 
 export interface Props extends BaseProps {
+  /** Content of the component */
+  children?: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles)
+export const <%= Name %> = forwardRef<HTMLDivElement, Props>(
+  function <%= Name %>(props, ref) {
+    const { className, style, children, ...rest } = props
 
-export const <%= Name %> = forwardRef<HTMLElement, Props>(function <%= Name %>(props, ref) {
-  const classes = useStyles()
-
-  return null
-})
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={twMerge(...createRootClassNames(), className)}
+        style={style}
+      >
+        {children}
+      </div>
+    )
+  }
+)
 
 <%= Name %>.displayName = '<%= Name %>'
 
diff --git a/_templates/component/new/styles.ejs.t b/_templates/component/new/styles.ejs.t
index a73ee866ea..9d1ff9763b 100644
--- a/_templates/component/new/styles.ejs.t
+++ b/_templates/component/new/styles.ejs.t
@@ -1,15 +1,7 @@
 ---
 to: packages/<%= package %>/src/<%= h.changeCase.pascalCase(name) %>/styles.ts
 ---
-<%
-  Name = h.changeCase.pascalCase(name)
--%>
-import { PicassoProvider } from '@toptal/picasso-provider'
-import { Theme, createStyles } from '@material-ui/core/styles'
-
-PicassoProvider.override(({ palette }: Theme) => ({
-
-}))
-
-export default ({ palette }: Theme) => createStyles({
-})
+// Pure class-building helpers: return string[] and compose with
+// twMerge(...classes, className) at the call site — the consumer className is
+// merged last so it wins on conflicts.
+export const createRootClassNames = (): string[] => []
diff --git a/bin/verify-tailwind-base.mjs b/bin/verify-tailwind-base.mjs
new file mode 100644
index 0000000000..28d35a00d8
--- /dev/null
+++ b/bin/verify-tailwind-base.mjs
@@ -0,0 +1,147 @@
+#!/usr/bin/env node
+/**
+ * PF-2221 — verifies the `@toptal/picasso-tailwind/base` reset entry under
+ * both consumer Tailwind entry styles:
+ *
+ *   A) v3-compat — granular theme/utilities imports, utilities UNLAYERED
+ *      (the shape this repo and Staff Portal use)
+ *   B) standard v4 — `@import 'tailwindcss'` with layered utilities
+ *
+ * Asserts in both: the reset resolves through the package subpath export and
+ * lands inside `@layer base`. For (B) additionally asserts the emitted layer
+ * order declares `base` before `utilities`, so utilities always win over the
+ * baseline by cascade-layer rules. (For (A) that guarantee is by spec:
+ * unlayered CSS beats any layer.)
+ *
+ * Run: node bin/verify-tailwind-base.mjs
+ */
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import postcss from 'postcss'
+import tailwindcss from '@tailwindcss/postcss'
+
+const repoRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '..'
+)
+
+// `source(none)` disables content auto-detection — the assertions only need
+// the layer structure and the imported reset, not generated utilities.
+const FIXTURES = [
+  {
+    name: 'A: v3-compat entry (unlayered utilities)',
+    css: [
+      '@layer theme, base, components;',
+      "@import 'tailwindcss/theme.css' layer(theme) source(none);",
+      "@import '@toptal/picasso-tailwind/base';",
+      "@import 'tailwindcss/utilities.css' source(none);",
+    ].join('\n'),
+    assertLayerOrder: false,
+  },
+  {
+    name: 'B: standard v4 entry (layered utilities)',
+    css: [
+      "@import 'tailwindcss' source(none);",
+      "@import '@toptal/picasso-tailwind/base';",
+    ].join('\n'),
+    assertLayerOrder: true,
+  },
+]
+
+// Value-agnostic markers of the Picasso reset (stable across the box-sizing
+// model change), all of which must appear inside the emitted `@layer base`.
+const RESET_MARKERS = ['-webkit-font-smoothing', 'min-height: 100vh', '#root']
+
+const findBlockEnd = (output, openBraceIndex) => {
+  let depth = 0
+
+  for (let i = openBraceIndex; i < output.length; i++) {
+    if (output[i] === '{') {
+      depth += 1
+    } else if (output[i] === '}') {
+      depth -= 1
+
+      if (depth === 0) {
+        return i
+      }
+    }
+  }
+
+  return output.length - 1
+}
+
+// The standard v4 entry emits Tailwind's own preflight as a separate
+// `@layer base { … }` block, so the Picasso reset may live in a SECOND base
+// block — collect them all before asserting.
+const collectBaseLayers = output => {
+  const blocks = []
+  const pattern = /@layer base\s*{/g
+  let match
+
+  while ((match = pattern.exec(output)) !== null) {
+    const end = findBlockEnd(output, output.indexOf('{', match.index))
+
+    blocks.push(output.slice(match.index, end + 1))
+    pattern.lastIndex = end + 1
+  }
+
+  return blocks.join('\n')
+}
+
+const verifyFixture = async ({ name, css, assertLayerOrder }) => {
+  const errors = []
+  const result = await postcss([tailwindcss()]).process(css, {
+    // `from` only anchors import resolution — the file itself never exists.
+    from: path.join(repoRoot, 'verify-tailwind-base.fixture.css'),
+    map: false,
+  })
+  const output = result.css
+  const baseLayer = collectBaseLayers(output)
+
+  if (!baseLayer) {
+    errors.push('no `@layer base { … }` block in the compiled output')
+  } else {
+    for (const marker of RESET_MARKERS) {
+      if (!baseLayer.includes(marker)) {
+        errors.push(`reset marker "${marker}" missing from @layer base`)
+      }
+    }
+  }
+
+  if (assertLayerOrder) {
+    const orderMatch = output.match(/@layer\s+([^;{]+);/)
+    const order = orderMatch
+      ? orderMatch[1].split(',').map(layer => layer.trim())
+      : []
+
+    if (order.indexOf('base') === -1 || order.indexOf('utilities') === -1) {
+      errors.push(
+        `layer order declaration missing base/utilities (${order.join(', ')})`
+      )
+    } else if (order.indexOf('base') > order.indexOf('utilities')) {
+      errors.push(
+        `layer order declares base AFTER utilities (${order.join(', ')})`
+      )
+    }
+  }
+
+  return { name, errors }
+}
+
+const results = await Promise.all(FIXTURES.map(verifyFixture))
+let failed = false
+
+for (const { name, errors } of results) {
+  if (errors.length === 0) {
+    console.log(`PASS  ${name}`)
+  } else {
+    failed = true
+    console.error(`FAIL  ${name}`)
+
+    for (const error of errors) {
+      console.error(`      - ${error}`)
+    }
+  }
+}
+
+process.exit(failed ? 1 : 0)
diff --git a/cypress/assets/tailwind.css b/cypress/assets/tailwind.css
index 7a56098bf1..91f52956b7 100644
--- a/cypress/assets/tailwind.css
+++ b/cypress/assets/tailwind.css
@@ -1,4 +1,5 @@
 @layer theme, base, components;
 @import 'tailwindcss/theme.css' layer(theme);
+@import '@toptal/picasso-tailwind/base';
 @import 'tailwindcss/utilities.css';
 @config "../../tailwind.config.js";
diff --git a/cypress/support/commands.jsx b/cypress/support/commands.jsx
index 7c6c4aedc9..0f1daed643 100644
--- a/cypress/support/commands.jsx
+++ b/cypress/support/commands.jsx
@@ -205,10 +205,5 @@ Cypress.Commands.overwrite(
 Cypress.Commands.add('mount', (component, options, props = {}) => {
   // Wrap any parent components needed
   // ie: return mount(<MyProvider>{component}</MyProvider>, options)
-  return mount(
-    <TestingPicasso injectFirst {...props}>
-      {component}
-    </TestingPicasso>,
-    options
-  )
+  return mount(<TestingPicasso {...props}>{component}</TestingPicasso>, options)
 })
diff --git a/docs/contribution/css-naming.md b/docs/contribution/css-naming.md
deleted file mode 100644
index 459f388b01..0000000000
--- a/docs/contribution/css-naming.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# CSS naming
-To maintain consistency within `Picasso` repository we try to follow some conventions when overriding MUI components with own classes map.
-
-### Main `root` property of stylesheet
-* The main `class` of all components is taken from convention introduced by MUI therefore `root`. You should always use `root` className for the topmost parent element. 
-
-* If you need to have multiple `root` classes based on some property, for example for property `width={full | shrink}` where you need to adjust root wrapper, you should create the following keys in styles:
-
-* `root` - This will be applied every time to component
-* `rootFull` - This will be applied when `width === ‘full'`
-* `rootShrink` - This will be applied when `width === ‘shrink’`
-
-**Container.tsx**
-```jsx
-import React from 'react'
-import cx from 'classnames'
-import capitalize from '@material-ui/core/utils/capitalize'
-import { makeStyles } from '@material-ui/styles'
-
-import styles from './styles'
-
-const useStyles = makeStyles(styles)
-
-const Container = ({ width, children }) => {
-  const classes = useStyles()
-
-  const rootClassname = cx(classes.root, classes[`root${capitalize(width)}`])
-
-  return (
-    <div className={rootClassname}>
-      {children}
-    </div>
-  )
-}
-
-export default Container
-
-```
-
-### Boolean properties
-Common pattern in components is to shorthand useful classes to short syntax such as `active` `focused` `disabled` properties. 
-
-We use same class key as property name without any prefixes/suffixes when only one variant is needed. 
-
-```jsx
-import { createStyles } from '@material-ui/core/styles'
-
-export default createStyles({
-  active: {
-    background: 'blue'
-  },
-  focused: {
-    background: 'red'
-  },
-  disabled: {
-    opacity: 0.2,
-    pointerEvents: 'none'
-  }
-})
-```
-
-To compose component with usage of those classes we will again use `classnames` package. 
-
-**Button.tsx**
-```jsx
-import React from 'react'
-import cx from 'classnames'
-
-import styles from './styles'
-
-const useStyles = makeStyles(styles)
-
-const Button = ({ active, focused, disabled }) => {
-  const classes = useStyles()
-
-  const rootClassName = cx(
-    {
-      [classes.active]: active,
-      [classes.focused]: focused,
-      [classes.disabled]: disabled
-    },
-    classes.root
-  )
-  return (
-    <Button classes={{
-      root: rootClassName
-    }} />
-  )
-}
-
-export default Button
-
-```
diff --git a/docs/contribution/jss-onboarding.md b/docs/contribution/jss-onboarding.md
deleted file mode 100644
index a2cd7624da..0000000000
--- a/docs/contribution/jss-onboarding.md
+++ /dev/null
@@ -1,220 +0,0 @@
-# JSS Onboarding
-
-To not introduce new styling system on the top of what Material-UI provides in the core, we stuck to [JSS](https://cssinjs.org/?v=v10.0.0-alpha.16) which is used internally in all MUI components. More on official documentation can be found at [CSS in JS - Material-UI](https://material-ui.com/customization/css-in-js/)
-
-## How JSS works
-
-JSS under the cover is a very simple `object -> classMap` engine which picks rules specified in output and creates resulting `className` map.
-
-Example of input object:
-
-```jsx
-{
-  root: {
-    color: 'red'
-  }
-}
-```
-
-Output:
-
-```jsx
-{
-  root: 'jss-[randHash]'
-}
-```
-
-JSS will inject those classes to `<head></head>` section of page so they can be referenced later inside components.
-
-## Customizing MUI components with JSS
-
-Every MUI component has specific JSS classes map which could be overridden from the top. Usually, all components have the `root` key which is style applied to the very top parent node.
-
-Every component has those available listed keys in the bottom of the docs [Button API - Material-UI](https://material-ui.com/api/button/#css) where you can see which keys are support and picked from the `classes` property on **EVERY** component. This behavior is global and applied to all core components.
-
-The easiest example for a button could be found at [Overriding styles - Material-UI](https://material-ui.com/styles/advanced/#overriding-styles-classes-prop) which shows how you can override default styles with a React hook.
-
-## Adding additional classes to our components
-
-Often default supported `classes` are not enough and we need to extend for example `root` class conditionally for example in case of `Button` variant. Let's imagine we want to provide a color based on the property `variant` passed to our component. We can do it for example by extending `root` class with default `classes` property passed to every MUI component. To achieve this we have to override default classes property passed to our component. With this approach we will conditionally attach generate classes for either `.root .red` or `.root .green` based on `variant` prop.
-
-We can create 2 new variants to our button `green` and `red` and define it’s CSS inside `styles.ts` file aside to root file of our component.
-
-**styles.ts**
-
-```tsx
-import { createStyles } from '@material-ui/core/styles'
-
-export default createStyles({
-  root: { border: 'none' },
-  green: { color: 'green' },
-  red: { color: 'red' }
-})
-```
-
-**Button.tsx**
-
-```tsx
-import React from 'react'
-import cx from 'classnames'
-import { makeStyles, Theme } from '@material-ui/styles'
-import { BaseProps } from '@toptal/picasso-shared'
-
-import styles from './styles'
-
-interface Props extends BaseProps {}
-
-const useStyles = makeStyles<Theme>(styles)
-
-const Button = (props: Props) => {
-  const classes = useStyles()
-
-  const { variant } = props
-
-  return (
-    <Button
-      classes={{
-        root: cx(classes.root, classes[variant])
-      }}
-    />
-  )
-}
-
-export default Button
-```
-
-With this approach we will conditionally attach generate classes for either `.root .red` or `.root .green` based on `variant` prop.
-
-## Add classes prop to a Picasso component
-
-Occasionally Picasso components need to override styling of other Picasso components, that they use. This can be achieved with the `classes` prop. Here's how:
-
-1. Make sure your component `Props` type extends `StandardProps` instead of `BaseProps`.
-2. Add `Props` generic type to `makeStyles` call.
-3. Pass the whole `props` object to `useStyles` call.
-
-```diff
-import React from 'react'
-import cx from 'classnames'
-import { makeStyles, Theme } from '@material-ui/styles'
--import { BaseProps } from '@toptal/picasso-shared'
-+import { StandardProps } from '@toptal/picasso-shared'
-
-import styles from './styles'
-
--interface Props extends BaseProps {}
-+interface Props extends StandardProps {}
-
--const useStyles = makeStyles<Theme>(styles)
-+const useStyles = makeStyles<Theme, Props>(styles)
-
-const Button = (props: Props) => {
--  const classes = useStyles()
-+  const classes = useStyles(props)
-
-  const { variant } = props
-
-  return (
-    <Button
-      classes={{
-        root: cx(classes.root, classes[variant])
-      }}
-    />
-  )
-}
-
-export default Button
-```
-
-**IMPORTANT**
-
-If you are passing rest props `const { children, ...rest } = props` to your component, you should exclude `classes` from it. Otherwise, you'll overwrite the result of `useStyles`.
-
-
-```tsx
-import React from 'react'
-import cx from 'classnames'
-import { makeStyles, Theme } from '@material-ui/styles'
-import { StandardProps } from '@toptal/picasso-shared'
-
-import styles from './styles'
-
-interface Props extends StandardProps {}
-
-const useStyles = makeStyles<Theme>(styles)
-
-const Button = (props: Props) => {
-  const classes = useStyles(props)
-
-  const {
-    variant,
-    // Avoid passing external classes inside the rest props
-    classes: externalClasses,
-    ...rest
-  } = props
-
-  return (
-    <Button
-      classes={{
-        root: cx(classes.root, classes[variant])
-      }}
-      {...rest}
-    />
-  )
-}
-
-export default Button
-```
-
-## Targeting nested rules within JSS stylesheets
-
-There are cases where you need to target and override some classes within the same stylesheets. For example, if you have some div and text inside it, if you want to apply a different color to text inside with CSS is easy as you can target `.main .text` rule, but as JSS is just hash map you can’t target such cases with the same way. In order to solve this problem, JSS introduced [jss-nested](https://cssinjs.org/jss-plugin-nested) plugin which allows you to target specific class.
-
-**styles.ts**
-
-```jsx
-import { createStyles } from '@material-ui/core/styles'
-
-export default createStyles({
-  root: {
-    fontSize: '12px'
-  },
-  big: {
-    '& $title': {
-      fontSize: '24px'
-    }
-  },
-  title: { color: 'green' }
-})
-```
-
-You can notice `& $title` notation which simply means: “Target this.title rule”. Then as in the previous example, you can just compose `root` rule.
-
-**Hero.tsx**
-
-```jsx
-import React from 'react'
-import cx from 'classnames'
-import { makeStyles } from '@material-ui/styles'
-
-import styles from './styles'
-
-const useStyles = makeStyles(styles)
-
-const Hero = (props) => {
-  const classes = useStyles()
-
-  const { variant } = props
-
-  return (
-    <div className={cx(classes.root, classes[variant])}>
-      <h1 className={classes.title}>Title</h1>
-      <span>Content</span>
-    </div>
-  )
-}
-
-export default Hero
-```
-
-In this way, you will affect only `<h1>` element and its font size, not all children in the tree.
diff --git a/docs/contribution/styling.md b/docs/contribution/styling.md
new file mode 100644
index 0000000000..f36cd24d8f
--- /dev/null
+++ b/docs/contribution/styling.md
@@ -0,0 +1,106 @@
+# Styling (Tailwind)
+
+> **Rule authority lives in `AGENTS.md §Styling`** (repo root) — one principle
+> ("Tailwind is the only styling layer; consumer overrides must always win; let state
+> live in the DOM") plus the enforced rules. This guide is the contributor-facing
+> companion: the same rules shown as working patterns. When the two disagree,
+> AGENTS.md wins — and please fix this file.
+> API-level constraints (style hooks are `className`/`style` only, no `classes`/`sx`)
+> are CI-enforced via `PICASSO_COMPONENT_DESIGN_PATTERNS.md`.
+
+## How a component is styled
+
+Class strings live in `styles.ts` as **pure functions returning `string[]`**; the
+component composes them with `twMerge(...)` and puts the **consumer `className`
+last** so it wins on conflicts:
+
+```ts
+// styles.ts — pure, no imports from React, no side effects
+export const createRootClassNames = (disabled?: boolean): string[] => [
+  'flex items-center gap-2 rounded-sm',
+  'text-md text-graphite-800',
+  disabled ? 'opacity-50 pointer-events-none' : '',
+]
+```
+
+```tsx
+// MyComponent.tsx
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+import { createRootClassNames } from './styles'
+
+<div
+  {...rest}
+  ref={ref}
+  className={twMerge(...createRootClassNames(disabled), className)}
+  style={style}
+>
+```
+
+`pnpm generate:component` scaffolds exactly this shape.
+
+## Conditional and stateful styling
+
+- **Branching classes** use `cx` (from `classnames`) _inside_ `twMerge` — `cx`
+  expresses the branching, `twMerge` resolves Tailwind conflicts
+  (`twMerge` takes no object syntax; that's `cx`'s job):
+
+  ```ts
+  twMerge(cx('flex', { 'm-0': expanded, 'text-red-500': hasError }), className)
+  ```
+
+- **State that exists in the DOM stays in the DOM** — style it with `data-[…]:`
+  variants instead of mirroring it into React state:
+
+  ```
+  data-[checked]:bg-blue-500 data-[disabled]:opacity-50
+  ```
+
+## Tokens
+
+Use Picasso token names from the `@toptal/picasso-tailwind` preset
+(`text-graphite-800`, `shadow-2`, `p-4`, …); sizes in `rem` (the lone exception is
+a `1px` hairline). An `[arbitrary-value]` needs a `// TODO(tokens): …` comment and
+a conversation with designers — never invent token names. If you _extend_ the
+preset's class set (new font sizes, new groups), `@toptal/picasso-tailwind-merge`
+must learn them in the same change, and that package bumps **major** (stale merge
+configs silently mis-merge in consumer apps).
+
+## Global reset & box model
+
+The page-level reset ships as **`@toptal/picasso-tailwind/base`**, imported in the
+Tailwind entry CSS and emitted in `@layer base`: content-box page box model (the
+legacy CssBaseline carve-out — Picasso components stay border-box via their
+island), body/root layout, font smoothing. Being cascade-layered, **all utilities and any
+unlayered app CSS win over it** — it's a baseline, never an override. Opting out =
+omitting the import. Tailwind's full preflight stays off; don't write styles that
+depend on preflight normalizations (heading margins, form resets).
+
+## Overriding — the ladder
+
+No `!important`, ever. If a style won't win, walk the ladder: _don't override_ →
+`data-[…]:` variant / consumer `className` → `render` prop → (last resort) inline
+`style`. Reaching for `!important` means a rung was skipped. No `.css`/`.scss`/
+`.module.css` files, no JSS (`makeStyles`/`createStyles`/`withStyles`) — those
+patterns left with the MUI v4 migration.
+
+## Gotchas
+
+- **Tailwind only generates classes it can _see_.** The `content` globs in
+  `tailwind.config.js` scan `.storybook/**` and `packages/*/src/**` — a class
+  authored anywhere else silently produces nothing. Dynamic string-built class
+  names (`` `text-${color}` ``) are invisible to the scanner; write full literals.
+- **Whole-pixel geometry.** Sub-pixel positions blur borders and text — avoid
+  `translate(-50%, …)` on odd-size elements, uneven `%` widths, fractional
+  `line-height`. (Exception: Base UI primitives that self-center — accept their
+  geometry.)
+- **Visual changes are gated by Happo** — see
+  [Visual snapshots](https://picasso.toptal.net/?path=/story/contribution-visual-snapshots--visual-snapshots).
+  A styling PR with unexplained diffs won't merge.
+
+## Related
+
+- `AGENTS.md §Styling` (repo root) — the canonical rules
+- `PICASSO_COMPONENT_DESIGN_PATTERNS.md` (repo root) — CI-enforced API surface (incl. style hooks)
+- [Merging classes tutorial](https://picasso.toptal.net/?path=/story/tutorials-merging-classes--merging-classes)
+- [New components](https://picasso.toptal.net/?path=/story/contribution-new-components--new-components)
+  · [Visual snapshots](https://picasso.toptal.net/?path=/story/contribution-visual-snapshots--visual-snapshots)
diff --git a/docs/decisions/19-responsive-component-spacing-properties.md b/docs/decisions/19-responsive-component-spacing-properties.md
index fedeea2b20..00e919bfa2 100644
--- a/docs/decisions/19-responsive-component-spacing-properties.md
+++ b/docs/decisions/19-responsive-component-spacing-properties.md
@@ -8,7 +8,7 @@ This document focuses on spacing properties of [Container component](https://pic
 
 ## Context
 
-`Container` and `Dropdown` spacing properties have `SizeType` that can be a spacing constant like `xsmall`, `small`, etc. or a number (which is a spacing in `rem` units). Spacing constants are resolved to `rem` units as well. 
+`Container` and `Dropdown` spacing properties have `SizeType` that can be a spacing constant like `xsmall`, `small`, etc. or a number (which is a spacing in `rem` units). Spacing constants are resolved to `rem` units as well.
 
 The scale of the problem is large enough for measures to be taken. According to the research in [Container properties usages section](#container-properties-usage), 4% of the `Container.top` spacing property usages retrieve the screen size before calculating the value of the property:
 
@@ -31,14 +31,14 @@ The `Container` and `Dropdown` component spacing properties allow setting values
  * Value         |0px     480px    768px    1024px   1440px
  * Screen width  |--------|--------|--------|--------|-------->
  * Range         |   xs   |   sm   |   md   |   lg   |   xl
- * 
+ *
  * For screens in "xs", "sm", and "md" breakpoint ranges top padding is SPACING_1
  * For screens in and bigger than "lg" breakpoint range top padding is SPACING_2
  */
 
 /**
  * Current approach
- * 
+ *
  * Container.top can be "SpacingType" only
  */
 const mobileScreen = useBreakpoint(['xs', 'sm', 'md'])
@@ -46,7 +46,7 @@ const mobileScreen = useBreakpoint(['xs', 'sm', 'md'])
 
 /**
  * Proposed approach
- * 
+ *
  * Container.top can be "SpacingType" or "{ xs?: SpacingType, sm?: SpacingType, md?: SpacingType, lg?: SpacingType, xl?: SpacingType }
  */
 <Container top={{
@@ -110,13 +110,23 @@ Another approach is to make spacing properties accept arrays with spacing values
  * Value         |0px     480px    768px    1024px   1440px
  * Screen width  |--------|--------|--------|--------|-------->
  * Range         |   xs   |   sm   |   md   |   lg   |   xl
- * 
+ *
  * For screens in "xs" and "sm" breakpoint ranges top padding is 0rem / 0px (due to "null" value)
  * For screens in "md" breakpoint range top padding is SPACING_1
  * For screens in and bigger than "lg" breakpoint range top padding is SPACING_2
  */
 
-<Container top={[/* xs */ null, /* sm */ null, /* md */ SPACING_1, /* lg */ SPACING_2]}/>
+<Container
+  top={[/* xs */ null, /* sm */ null, /* md */ SPACING_1, /* lg */ SPACING_2]}
+/>
 ```
 
 Array syntax requires explicit specification of smaller breakpoint ranges even if spacing is not set for them, which makes it less usable compared to object syntax. Array syntax is not consistent with the way Picasso defines APIs of components, it is not used anywhere else. Array syntax requires remembering of breakpoint ranges to match the index of value in array to the breakpoint range. All three factors make it a less preferable approach compared to object syntax mentioned earlier.
+
+## Status update (2026-07-15 — PF-2226)
+
+The API shipped as designed and is unchanged. The implementation has been replaced:
+
+- The original JSS/CSS-variable runtime emitted its media queries largest-first, inverting the mobile-first cascade this ADR specified (on wide viewports the smallest specified breakpoint won). The bug shipped with the feature; org-wide adoption of the responsive object form stayed at zero.
+- PF-2023 ported that runtime off JSS to a client-only `<style>` injection, which silently lost the SSR compatibility this ADR's Problem statement called for (PF-2238).
+- PF-2226 deleted the runtime engine entirely. Responsive spacing now resolves through a static Tailwind class table + pure resolver in `@toptal/picasso-utils` (shared by Container spacing props and Dropdown `offset`). The cascade is now genuinely mobile-first (fixing the inversion) and SSR-correct (the classes ship in build-time CSS). One behavioral note: responsive spacing uses the fixed Tailwind screens and no longer reacts to `disableMobileBreakpoints()`.
diff --git a/docs/migration/references/design-patterns-addendum.md b/docs/migration/references/design-patterns-addendum.md
index c8829f2270..968f30c319 100644
--- a/docs/migration/references/design-patterns-addendum.md
+++ b/docs/migration/references/design-patterns-addendum.md
@@ -54,6 +54,12 @@ These are deliberate, audit-backed exceptions to the canonical rules — **TEMPO
 - **What we do**: preserve their existing `classes?: { ... }` shape. Don't drop the prop in the migration PR even though rule 5 forbids it.
 - **End-state — REMOVED in a future major bump**: a separate API-cleanup sweep removes these `classes` props in the next major version of each affected package.
 
+### Styling doctrine (Tailwind-only) vs global CSS reset · **RESOLVED (PF-2221)**
+
+- The interim CssBaseline runtime-`<style>` exception is retired: the global reset now ships as CSS in `@layer base` via the opt-in **`@toptal/picasso-tailwind/base`** entry (`packages/picasso-tailwind/src/base.css` — the single source of truth). `CssBaseline` and the provider `reset` prop are removed; omitting the import replaces `reset={false}`.
+- **Cascade contract (deliberate)**: Tailwind utilities and unlayered app CSS win over the baseline by cascade-layer rules. `injectFirst`-era consumers regain their pre-migration tie-break semantics; consumers who relied on the JSS reset winning equal-specificity ties by injection order lose them — documented intent, not a regression.
+- The React 19 hoistable `<style>` variant considered earlier is dropped (nothing left to hoist once no runtime injection exists).
+
 ## 3. How the agent applies design patterns during a migration
 
 - **Apply canonical rules to NEW code paths** introduced as part of the swap (adapter helpers, wrappers around `@base-ui/react`, new internal types, new hooks).
diff --git a/docs/migration/references/practices.md b/docs/migration/references/practices.md
index 422e2045bf..ef8059c9c2 100644
--- a/docs/migration/references/practices.md
+++ b/docs/migration/references/practices.md
@@ -16,7 +16,7 @@ Categorized by problem domain. The agent applies the relevant category as each m
 
 The migration target is zero Happo diff vs the @mui/base baseline. But the baseline encodes the OLD design and the OLD primitive's geometry. When Base UI v1 provides a geometrically correct version of what the legacy approximated (Slider thumb centering via `translate: -50% -50%` vs legacy half-element margin offsets, Popup `transform-origin` vs legacy hand-rolled origins, etc.), defending the legacy with override-laden code is a doctrine violation, NOT a parity preservation. The escape valve is the **approved-delta channel**.
 
-- **Default classification for any non-zero pixel diff on a migrated-component story is REGRESSION.** A Happo `dimension_mismatch` (the crop changed size) is *always* REGRESSION — a size change traces to a box-model/line-height property in YOUR diff, never to the environment and never to an approved-delta. Property-diff old-vs-new source before anything else.
+- **Default classification for any non-zero pixel diff on a migrated-component story is REGRESSION.** A Happo `dimension_mismatch` (the crop changed size) is _always_ REGRESSION — a size change traces to a box-model/line-height property in YOUR diff, never to the environment and never to an approved-delta. Property-diff old-vs-new source before anything else.
 - **INTENTIONAL** classifications come in three flavors:
   - **Approved visual delta** (operator pre-authorized): listed in `docs/migration/components/<X>.md` §"Approved visual deltas" before the iter runs. Self-classification is not allowed. (Slider's Figma-driven thumb/rail/mark deltas are the reference example — see `components/Slider.md`.)
   - **Intentional improvement** (agent-proposed, operator-approved in PR): when the diff is sub-pixel and traces to Base UI's geometry being more correct than the legacy. Agent posts a MEDIUM PR comment naming the diff, citing `references/base-ui-styling.md §7.1 rung -1`, and explaining the geometric reasoning. Operator approves via 👍 reaction. Then the diff becomes INTENTIONAL.
@@ -35,7 +35,7 @@ The migration target is zero Happo diff vs the @mui/base baseline. But the basel
   - `onChange(event, checked)` from `@mui/base` → `@base-ui/react` emits `onCheckedChange(checked, eventDetails)`. The `eventDetails.event` IS the native DOM event — bridge to Picasso's `React.ChangeEvent<T>` shape via the `toReactChangeEvent` helper from `@toptal/picasso-shared`: `onCheckedChange={(c, { event }) => onChange?.(toReactChangeEvent(event), c)}`. (Switch iter 2, iter 3 + Slider iter 12 review precedents; PR #4965 r3302165743 superseded the prior `syntheticEvent` fabrication pattern.)
   - `onValueChange(value, activeThumbIndex)` from `@base-ui/react/slider` → wrap to re-expose `(event, value, activeThumbIndex)`. Use the generic `toReactEvent<R>(event)` from `@toptal/picasso-shared` for non-change-event cases.
 - **Preserve portal/behavior props.** Audit the new library's compound API first. Example: `disablePortal` on Drawer has no direct prop equivalent in `@base-ui/react/drawer`, but you can emulate it by conditionally omitting `<Drawer.Portal>`. Do NOT silently remove the prop (Drawer iter 2 precedent).
-- **Audit changed interaction DEFAULTS, not just props.** `@base-ui/react` can change a default *behavior* that `@mui/base` had, with no prop rename to flag it. Example: `@base-ui/react/slider` defaults `thumbCollisionBehavior` to `'push'` (range thumbs shove each other and stay merged as one dot); `@mui/base` swapped/crossed them. Set `thumbCollisionBehavior='swap'` to preserve the prior behavior (Slider PR #4976). When migrating an interactive component, exercise the *interaction* (drag through, keyboard past-the-end, etc.), not just the static render — a silent default change won't show in a snapshot.
+- **Audit changed interaction DEFAULTS, not just props.** `@base-ui/react` can change a default _behavior_ that `@mui/base` had, with no prop rename to flag it. Example: `@base-ui/react/slider` defaults `thumbCollisionBehavior` to `'push'` (range thumbs shove each other and stay merged as one dot); `@mui/base` swapped/crossed them. Set `thumbCollisionBehavior='swap'` to preserve the prior behavior (Slider PR #4976). When migrating an interactive component, exercise the _interaction_ (drag through, keyboard past-the-end, etc.), not just the static render — a silent default change won't show in a snapshot.
 - **Gate new base-ui behaviors absent from the legacy component behind an explicit opt-in prop** (default = legacy behavior), with tests and a changeset note — a like-for-like swap must NOT silently add an interaction surface (Drawer swipe-to-dismiss / `Drawer.Viewport`). (Drawer iters 4/6/8 + PR #4994 iter 3 precedents.)
 - **`toReactEvent`/`toReactChangeEvent` adapters must bind forwarded native methods** (`preventDefault`/`stopPropagation`) to the underlying event — an unbound Proxy `this` throws "Illegal invocation" in real browsers, surfacing only when a consumer handler invokes them (Accordion precedent).
 - **Deprecate-don't-delete**: keep removed-in-new-lib props with `@deprecated` JSDoc + Jira ticket ref, route to `_unused` destructure:
@@ -54,9 +54,9 @@ The migration target is zero Happo diff vs the @mui/base baseline. But the basel
   // unchanged. Public API parity preserved, no allowlist.
   const Switch = (props: Props) => {
     const {
-      onChange,     // signature differs — adapt to onCheckedChange below
-      checked,      // base-ui uses checked: boolean directly, but we want to clamp
-      ...rest       // ← all other ButtonHTMLAttributes flow through
+      onChange, // signature differs — adapt to onCheckedChange below
+      checked, // base-ui uses checked: boolean directly, but we want to clamp
+      ...rest // ← all other ButtonHTMLAttributes flow through
     } = props
     return (
       <BaseUISwitch.Root
@@ -77,7 +77,13 @@ The migration target is zero Happo diff vs the @mui/base baseline. But the basel
   ```ts
   const rootRest = rest as Omit<
     BaseUISwitch.Root.Props,
-    'checked' | 'disabled' | 'id' | 'value' | 'className' | 'style' | 'onCheckedChange'
+    | 'checked'
+    | 'disabled'
+    | 'id'
+    | 'value'
+    | 'className'
+    | 'style'
+    | 'onCheckedChange'
   >
   // …then: <BaseUISwitch.Root {...rootRest} … />
   ```
@@ -85,10 +91,12 @@ The migration target is zero Happo diff vs the @mui/base baseline. But the basel
   Full doctrinal treatment + concrete error shape: `code-standards.md §"TS variance: when tsc --strict rejects ...rest"`.
 
 - **Anti-patterns to avoid** (both forbidden):
+
   - **Blanket cast** `as unknown as BaseUISwitch.Root.Props` — silences the type checker without addressing the mismatch.
   - **Exhaustive allowlist** (manually picking 4–6 props to forward) — drops every other prop at runtime; reviewers call this the "typed but no-op" anti-pattern.
 
   If you find yourself destructuring 6+ props, you're sliding into the exhaustive-allowlist anti-pattern — re-read the library's `.d.ts` and confirm those props are actually incompatible.
+
 - **No `any`** in component source (ESLint `@typescript-eslint/no-explicit-any` is **error** in source, off in tests).
 - **Override pathways for `@base-ui/react`** — pick the lowest-cost mechanism that solves the problem; reviewers block PRs that reach for higher-cost ones prematurely. Two related but separate ladders:
   - **Override-preference ladder** (when to reach for which mechanism in general): `references/base-ui-styling.md §7.1`. Rungs: -1 (don't override) → 1 (`data-[…]:`) → 2 (`className` fn) → 3 (`render` prop, optionally filtering style) → 4 (`useRender`) → 5 (inline `style`). `!important` is forbidden.
@@ -120,14 +128,14 @@ The migration target is zero Happo diff vs the @mui/base baseline. But the basel
 - **Polymorphic components**: use `nativeButton={false} + render={React.createElement(as)}` (Button precedent). The `nativeButton={false}` pair is **mandatory** when swapping a button-default Base UI part (Button, Menu.Trigger, Tabs.Tab, NumberField.Increment/Decrement, Toolbar.Button) to a non-button element — without it Base UI keeps emitting `<button>`-keyboard handling and accessibility silently breaks. Do NOT add runtime `typeof`/`isValidAs` guards for the `as` prop — TypeScript constrains it; reviewers ask for removal.
 - **Custom polymorphic primitives**: when a kit component needs its OWN `render` prop (so consumers can keep composing — `<MyButton render={<a />}>`), use the `useRender` hook from `@base-ui/react/use-render`. See `references/base-ui-styling.md` §4.5 for the recipe + React 18 vs 19 ref handling.
 - **Overriding `@base-ui/react`'s internal inline styles** (e.g., `translate: -50% -50%` on `Slider.Thumb`, `position: relative` on `Slider.Track`): walk the doctrine §7.1 preference ladder first.
-   - **Rung -1 — don't override**: if the override defends a legacy approximation of what Base UI does geometrically exactly (e.g., legacy `-mt-[7px] -ml-[6px]` was approximating half-of-15px-thumb; Base UI's `translate: -50% -50%` does this exactly), remove the legacy offsets entirely and propose the sub-pixel diff as "intentional improvement". Slider commit `4f5951f` did this for v2 #4975 — both rung-0 inline style overrides became unnecessary.
-   - **Rung 3 — `render` prop with `mergeProps` filtering**: strip the offending Base UI inline style via render-prop filter (`const { translate, ...keepStyle } = props.style || {}`). Cleaner than consumer-added inline `style` because the element ends up with only Base UI's positioning, not a consumer override layered on top.
-   - **Rung 5 — inline `style` on the part**: `<Slider.Thumb style={{ translate: 'none' }}>` works because `mergeProps` rightmost-wins on consumer `style`. Use this when rung -1 doesn't apply and rung 3 filtering is impractical. NOT a first reach.
-   - **Never `!important`** (forbidden per `rules/styling.md`). Lesson from Slider v2 PR #4975: agent reached for `'![translate:none]'` + `'!absolute'` thinking "kit's inline style needs a CSS specificity weapon" — wrong; the kit's design contract is "consumer's `style` wins per merge semantics" AND the cleaner path was rung -1 (remove the legacy that was being defended). PR #4976 demonstrated this by removing both overrides and the legacy margins together.
-   - Imperative `ref` callbacks that mutate `.style` are a forbidden anti-pattern. There is no "Switch iter 2 precedent" sanctioning it; that earlier code was a migration defect.
+  - **Rung -1 — don't override**: if the override defends a legacy approximation of what Base UI does geometrically exactly (e.g., legacy `-mt-[7px] -ml-[6px]` was approximating half-of-15px-thumb; Base UI's `translate: -50% -50%` does this exactly), remove the legacy offsets entirely and propose the sub-pixel diff as "intentional improvement". Slider commit `4f5951f` did this for v2 #4975 — both rung-0 inline style overrides became unnecessary.
+  - **Rung 3 — `render` prop with `mergeProps` filtering**: strip the offending Base UI inline style via render-prop filter (`const { translate, ...keepStyle } = props.style || {}`). Cleaner than consumer-added inline `style` because the element ends up with only Base UI's positioning, not a consumer override layered on top.
+  - **Rung 5 — inline `style` on the part**: `<Slider.Thumb style={{ translate: 'none' }}>` works because `mergeProps` rightmost-wins on consumer `style`. Use this when rung -1 doesn't apply and rung 3 filtering is impractical. NOT a first reach.
+  - **Never `!important`** (forbidden per `rules/styling.md`). Lesson from Slider v2 PR #4975: agent reached for `'![translate:none]'` + `'!absolute'` thinking "kit's inline style needs a CSS specificity weapon" — wrong; the kit's design contract is "consumer's `style` wins per merge semantics" AND the cleaner path was rung -1 (remove the legacy that was being defended). PR #4976 demonstrated this by removing both overrides and the legacy margins together.
+  - Imperative `ref` callbacks that mutate `.style` are a forbidden anti-pattern. There is no "Switch iter 2 precedent" sanctioning it; that earlier code was a migration defect.
 - **Assemble per Base UI's documented part anatomy.** Nest parts the way the kit's docs show — for Slider that's `Indicator` + `Thumb` (+ any custom marks) **inside `Slider.Track`**, which sits inside `Slider.Control`. Don't hoist parts to arbitrary wrapper levels. The native hierarchy keeps positioning correct AND preserves the rung -1 containing-block behavior for free: Base UI's `translate: -50% -50%` on the thumb establishes the containing block that sizes the nested `position: fixed` range `<input>` to the thumb — so no `transform-gpu` / `contain-layout` band-aid is needed (Slider PR #4976; v2 PR #4975 added `transform-gpu` only because it had killed the translate).
 - **Derive UI from the kit's LIVE value via function-of-state — never a React mirror or a static prop derivation.** When marks / value labels / etc. need the current value, read it from the part's `render`-of-state (`<Slider.Track render={(props, { values }) => …}>`) and compute from `values`. Do NOT mirror the value into `useState` (doubled source of truth) and do NOT derive it as `value ?? defaultValue` (freezes the derived UI in uncontrolled mode — marks/labels stop tracking as the user drags). See `references/base-ui-styling.md §10` + §11 checklist. Slider PR #4976. (Component-level hooks that genuinely can't reach part state — e.g. Slider's `useLabelOverlap` — necessarily stay on the controlled `value`; that's a known limit, not a license to mirror.)
-- **Translucent containers with nested parts**: prefer `bg-color/alpha` (alpha-blended fill) over `opacity: X`. `opacity` on a parent creates a stacking context that propagates into descendants — fatal when Base UI nests parts. Example: `Slider.Track` with `opacity-[0.24]` would fade the nested `Slider.Indicator` to 24% blue. `bg-gray-500/24` paints only Track's background pixels at alpha, leaves descendants at 100%. Slider PR #4959 used this; v2 PR #4975 burned 2 iters on opacity-cascade debugging before extracting a sibling rail span instead — fully preventable with this rule. **Caveat — design-of-record wins:** the `bg-color/alpha` technique exists to *preserve a translucent legacy fill*. If the current Figma spec defines a **solid** colour for that element (as Slider's rail now does — `bg-gray-500` with no alpha, per `components/Slider.md`), use the solid token directly; do NOT layer the alpha trick to "restore" the old translucency.
+- **Translucent containers with nested parts**: prefer `bg-color/alpha` (alpha-blended fill) over `opacity: X`. `opacity` on a parent creates a stacking context that propagates into descendants — fatal when Base UI nests parts. Example: `Slider.Track` with `opacity-[0.24]` would fade the nested `Slider.Indicator` to 24% blue. `bg-gray-500/24` paints only Track's background pixels at alpha, leaves descendants at 100%. Slider PR #4959 used this; v2 PR #4975 burned 2 iters on opacity-cascade debugging before extracting a sibling rail span instead — fully preventable with this rule. **Caveat — design-of-record wins:** the `bg-color/alpha` technique exists to _preserve a translucent legacy fill_. If the current Figma spec defines a **solid** colour for that element (as Slider's rail now does — `bg-gray-500` with no alpha, per `components/Slider.md`), use the solid token directly; do NOT layer the alpha trick to "restore" the old translucency.
 - **Input-bearing slots** (`Slider.Thumb`, `Switch.Input`): hide visible native `<input>` via:
   ```
   [&_input]:!top-auto [&_input]:!left-auto
@@ -153,7 +161,7 @@ The migration target is zero Happo diff vs the @mui/base baseline. But the basel
   />
   ```
   End-state: Tier 3.b consolidates onto v1 per-part styling once consumers migrate.
-- **Responsive spacing utilities**: components accepting breakpoint-aware spacing (e.g., Dropdown's `offset?.top` / `offset?.bottom`) should use `makeResponsiveSpacingProps()` from `@toptal/picasso-provider` to generate responsive Tailwind classes dynamically. See `Dropdown.tsx:106-109,236-242` for the canonical usage. Do NOT hand-roll responsive class strings for spacing values that should match the breakpoint API.
+- **Responsive spacing = the static class table in `@toptal/picasso-utils`.** Components accepting breakpoint-aware spacing (Container spacing props, Dropdown `offset`) resolve it through `getSpacingClasses`/`getSpacingStyles` — a pure resolver over a literal class table (`packages/base/Utils/src/utils/spacing-classes/`; every class is a literal string so the Tailwind extractor sees it; variants are mobile-first). Deprecated raw numbers stay inline rem styles via `getSpacingStyles`. The runtime engine (`makeResponsiveSpacingProps` + `<style>` injection) was **deleted** in PF-2226 — do NOT reintroduce runtime class generation/injection or hand-roll responsive class strings; extend the shared table instead.
 
 ## Tailwind & class composition
 
@@ -167,7 +175,7 @@ The migration target is zero Happo diff vs the @mui/base baseline. But the basel
 ## Tier 1 peer-dep-only fast path
 
 - **Grep `src/` for `@mui/` / `@material-ui/` imports first.** Zero hits ⇒ the migration collapses to a `package.json` change: drop `@material-ui/core` from peers, widen the `react` peer (drop the `< 19.0.0` cap → `>=16.12.0`), prune now-unused runtime deps (`classnames`) from `package.json` + lockfile, and ship a `patch` changeset framed "Source already MUI-clean; public API unchanged". No source edits. (Note/Form/FormLabel/FormLayout/Menu/Utils precedents.)
-- **Residual type-only MUI imports survive the runtime swap** — replace each (`PropTypes.Alignment`, `SnackbarOrigin`, `PopperPlacementType`) with a local literal union enumerating the *same* members, byte-identical (never narrow during a library swap — see `AGENTS.md §"Preserve existing violations"`). Mirror the file's existing local-alias naming/placement. (Container/Notification/Dropdown/FormLabel precedents.)
+- **Residual type-only MUI imports survive the runtime swap** — replace each (`PropTypes.Alignment`, `SnackbarOrigin`, `PopperPlacementType`) with a local literal union enumerating the _same_ members, byte-identical (never narrow during a library swap — see `AGENTS.md §"Preserve existing violations"`). Mirror the file's existing local-alias naming/placement. (Container/Notification/Dropdown/FormLabel precedents.)
 
 ## tsconfig & build hygiene
 
@@ -209,12 +217,10 @@ Set `screenshotBreakpoints: true` on the example registration in `<Component>/st
 
 ```ts
 const page = PicassoBook.section('Component').createPage('FooComponent')
-page
-  .createChapter()
-  .addExample('Foo/story/Default.example.tsx', {
-    title: 'Default',
-    screenshotBreakpoints: true,
-  })
+page.createChapter().addExample('Foo/story/Default.example.tsx', {
+  title: 'Default',
+  screenshotBreakpoints: true,
+})
 ```
 
 ### Pattern 2: Cypress component test (interaction needed before screenshot)
@@ -260,11 +266,12 @@ Three result categories:
 
 A migration that introduces a Violations entry (or moves a story from Passes → Incompletions without justification) is a regression. Same logic as visual parity: don't self-classify as INTENTIONAL.
 
-## css-naming.md is LEGACY — do not follow
+## css-naming.md is REMOVED — do not resurrect
 
-`docs/contribution/css-naming.md` describes MUI v4 + JSS conventions (`root` + `rootFull`/`rootShrink` for variants, `cx({ [classes.active]: active })`, etc.). **These are PRE-migration patterns.**
+`docs/contribution/css-naming.md` (deleted in the post-canary hygiene sweep, 2026-07-13, along with `jss-onboarding.md`) described MUI v4 + JSS conventions (`root` + `rootFull`/`rootShrink` for variants, `cx({ [classes.active]: active })`, etc.). **These are PRE-migration patterns** — if an older prompt, memory, or doc still points at that file, fix the pointer instead of restoring the file.
 
 For migrated components:
+
 - Use Tailwind class composition via `cx`/`twMerge` (see `code-standards.md §"Tailwind class composition"`).
 - For variant-driven classes, return a `string[]` from a pure function in `styles.ts` (Button precedent) and merge with `twMerge`.
 - Do NOT introduce new JSS `classes` maps. Existing JSS-using components (Tier 2 Radio, Tier 3 Page, sibling-package picasso-charts/RTE) are migration targets, not pattern sources.
diff --git a/docs/modernization/PI-4318-PF-2023-provider-migration-report.md b/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
new file mode 100644
index 0000000000..b680d7450d
--- /dev/null
+++ b/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
@@ -0,0 +1,166 @@
+# PF-2023 — picasso-provider migration report (the PI canary)
+
+**Ticket:** [PF-2023 — Decommission @toptal/picasso-provider MUI v4 runtime + remove root peer-dep](https://toptal-core.atlassian.net/browse/PF-2023) (epic [PF-1988](https://toptal-core.atlassian.net/browse/PF-1988))
+**Branch:** `migrate-picasso-provider` → `feature/picasso-modernization-temp`
+**Status (2026-07-08):** code complete & building; pending DoD validation (Happo / Portal smoke / React 19) + snapshot regen + stack reconcile.
+**Companion docs:** [migration brief](./PI-4318-PF-2023-provider-migration-brief.md) (what was _planned_) · this report (what was _done_).
+
+> **Audience.** Read this as (a) a PR review appendix, (b) an onboarding explainer of _what_ moved and _why_, and (c) input for the next AI/engineer session that writes the **consumer-application migration plan** and the improvement follow-ups. §5 (breaking changes) and §9 (consumer guidance) are the consumer-facing parts; §4 (decisions) and §7 (engineering notes) are the "why" and the reusable lessons.
+
+---
+
+## 1. TL;DR
+
+`@toptal/picasso-provider` no longer runs a MUI v4 theme/JSS runtime, and `@toptal/picasso` no longer declares `@material-ui/core` as a peer dependency. **`@material-ui` is now absent from every `src`, every `package.json`, and the lockfile** — the PI's canary. Both packages now allow React 19 (`react`/`react-dom` peer widened to `>=16.12.0`). The provider is now a _services + context_ layer (fonts, favicon, notifications, RootContext, breakpoints) rather than a theme runtime; styling is Tailwind end-to-end. The global CSS reset moved out of the provider entirely: it ships as `@toptal/picasso-tailwind/base` in `@layer base` (PF-2221, executed in this PR), and the `reset` prop is removed.
+
+The change is **behavior-preserving for the rendered UI** (byte-identical or immaterial CSS) but **API-breaking** for the theme-customization surface (`PicassoProvider`, `.override()`, the `theme`/`injectFirst`/`disableClassNamePrefix` props, `getServersideStylesheets`) — all of which were MUI-coupled and mostly inert after the component migrations. Breaking removals were chosen deliberately (see §4) after an org-wide usage audit.
+
+---
+
+## 2. Context & goal
+
+PF-2023 is the **last step of PI-4318** (Picasso modernization off `@material-ui/core` v4 + JSS onto `@base-ui/react` + Tailwind). All 28 base components + the 3 sibling packages were migrated first; the provider ran last because it underpins them and its final commit removes the root MUI peer-dep. Goals:
+
+- Zero `@material-ui` / JSS in `packages/picasso-provider/src/**`.
+- Remove `@material-ui/core` from the provider deps and the `@toptal/picasso` peer-deps (**the canary line**).
+- Unblock **React 19** (O2) and the **deprecated-deps audit** (O1 = 0).
+- Keep the rendered library visually identical (Happo gate) with no consumer _runtime_ regressions.
+
+---
+
+## 3. What changed (by area)
+
+Delivered as a sequence of logical, individually-green commits on `migrate-picasso-provider` (Tooltip [#5005] and query-builder [#5006] were merged into the branch so the whole tree was MUI-free for the canary; they reconcile out on rebase — see §6).
+
+| Area                                                        | Before (MUI v4 / JSS)                                                                      | After (Tailwind / plain)                                                                                                                                                                                                                                                                                         |
+| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **CssBaseline**                                             | `makeStyles` `@global` reset injected at runtime                                           | **Removed.** The 12 reset rules ship as `@toptal/picasso-tailwind/base` in `@layer base` (PF-2221 executed in-PR); the `reset` prop is gone — opt-out = omit the import.                                                                                                                                         |
+| **NotificationsProvider**                                   | `makeStyles` classes passed to notistack `classes`                                         | Tailwind class strings on notistack's `classes`; `[&>div]`/`[&>div>div]` variants target its container DOM. notistack integration unchanged.                                                                                                                                                                     |
+| **PicassoRootNode** (+ `Picasso/styles.tsx`)                | `makeStyles` `root` (flex, border-box island, `& * { font }`)                              | Tailwind `className` on the root `<div>`: `flex-1 box-border`, `[&_*]:font-sans`, `[&_*]:[box-sizing:inherit]` (+ `::before`/`::after`).                                                                                                                                                                         |
+| **PreventPageWidthChangeOnScrollbar**                       | `makeStyles` `@global` at `screens('md','lg','xl')`                                        | **Removed (PF-2226, executed in-PR).** The fix ships in `@toptal/picasso-tailwind/base` (≥768px); prop + `usePreventPageWidthChangeOnScrollbar` hook deleted; `Page.TopBar` applies `md:w-screen` unconditionally. The provider injects zero runtime CSS.                                                        |
+| **Responsive-styles engine** (`makeResponsiveSpacingProps`) | `makeStyles` media-query classes + inline CSS vars                                         | **Deleted (PF-2226, executed in-PR).** Dropdown `offset` resolves through the shared static spacing-class table in `@toptal/picasso-utils` (moved from Container); inverted mobile-first cascade fixed; responsive offsets SSR-correct (closes PF-2238). **SSR helper `get-serverside-stylesheets.ts` retired.** |
+| **PicassoProvider + Picasso/PicassoLight + config**         | `createTheme`, `MuiThemeProvider`, `StylesProvider`, module augmentations, `useMediaQuery` | `PicassoProvider` deleted; providers dropped; module augmentations removed; `useBreakpoint` uses `window.matchMedia`. Token config exports (colors/spacings/breakpoints/…) unchanged.                                                                                                                            |
+| **package.json (canary)**                                   | `@material-ui/*` deps + peer-dep; `react < 19` cap                                         | MUI removed; `react`/`react-dom` peer `>=16.12.0`. Swept the last transitive MUI pull (`notistack@1.0.10` peer on Utils) and under-declared `@types/react-transition-group` (Collapse/Fade/Slide).                                                                                                               |
+| **PicassoBook docs-UI** (`.storybook/components/*`)         | `makeStyles`/`createStyles`                                                                | Tailwind class strings; `.storybook` added to the Tailwind `content` scan. Dev-only tooling.                                                                                                                                                                                                                     |
+
+A prerequisite commit (**"Decouple Page from PicassoProvider theme via RootContext responsive flag"**) moved Page's one runtime read of the theme (`layout.contentMinWidth`) onto the RootContext `responsive` flag + a static `min-w-[768px]` class, which is what made `PicassoProvider.theme` deletable.
+
+---
+
+## 4. Key decisions & rationale
+
+Each decision below was made against the migration's overriding rule — **library swap, no consumer-visible _runtime_ change, preserve existing violations** — and, where that conflicted with "kill MUI cleanly," resolved with org-wide usage evidence.
+
+### 4.1 Delivery: stacked branch, one PR, logical commits
+
+- Branch `migrate-picasso-provider` off `temp`; **merge Tooltip #5005 + query-builder #5006 in** so the whole tree is MUI-free for the canary + DoD validation, rather than waiting for them to land. One PR, ~8 logical commits. Repo merges are **squash**, so the stacked merges must be **rebased away** before the PR is review-ready (see §6).
+- _Implication:_ PR diff carries #5005/#5006 until they land on `temp`; keep the PR **draft** until reconciled.
+
+### 4.2 CssBaseline → `@toptal/picasso-tailwind/base` (`@layer base`) — full cutover
+
+- **Decision (supersedes the interim runtime-`<style>` plan):** the reset first landed in this branch as an unlayered runtime `<style>` (library-swap parity). Before the PR merged, **PF-2221 was pulled into this major**: the reset now ships as an opt-in CSS entry of `@toptal/picasso-tailwind` inside `@layer base` (`packages/picasso-tailwind/src/base.css`, the single source of truth); `CssBaseline` and the `reset` prop are **deleted**; opt-out = omit the import.
+- **Why now:** this PR is already the provider major and PF-1995 touches every consumer anyway. The original "reach" objection died on evidence — the preset entrypoint is _mandatory_ for the migrated library (all component styles are Tailwind), and Staff Portal's DOM shows the compiled Tailwind bundle (with a declared-but-empty `base` layer slot) already in `<head>`. Meanwhile the in-body runtime `<style>` occupied the _strongest_ cascade position the reset ever had (it won equal-specificity ties against all consumer CSS); `@layer base` is the only placement where "app CSS beats the baseline" is guaranteed by the cascade spec instead of injection order.
+- **Cascade contract (needs design sign-off):** Tailwind utilities + unlayered app CSS beat the reset. `injectFirst` consumers (e.g. Staff Portal) regain their pre-migration tie-break semantics; default-JSS consumers flip ties they previously won by injection accident — documented intent, not a regression.
+- **Not Helmet** (`PicassoLight` / `<Picasso disableHelmet>` have no `HelmetProvider`); **React-19 hoistable `<style>` dropped** — with no runtime injection there is nothing to hoist.
+- The `design-patterns-addendum.md §2` exception entry is **RESOLVED** accordingly; `bin/verify-tailwind-base.mjs` asserts the entry compiles into `@layer base` under both consumer entry styles (v3-compat unlayered utilities and standard v4).
+- **Border-box flip — attempted, then REVERTED (#5046):** the base entry briefly dropped the historical `box-sizing: initial` carve-out, flipping the page to border-box. The flip was reverted; the shipped base entry keeps **content-box** (`box-sizing: initial`), faithful to the legacy CssBaseline. The PicassoRootNode island remains the border-box guard for Picasso components. Content-box is confirmed final for now (operator decision 2026-07-15); any future re-flip is its own change with its own Happo sign-off.
+
+### 4.3 Responsive-styles engine → faithful port, bug-compatible
+
+- **Decision (Option 1):** port `makeResponsiveSpacingProps` off `makeStyles` to a runtime `<style>` injection with a config-sourced CSS builder; keep the generic `{className, style}` hook contract and the inline-var machinery unchanged.
+- **Bug-compatible:** the original emitted breakpoints **largest-first**, which _inverts_ mobile-first cascade (on wide viewports the _smallest_ specified breakpoint wins). Ported **as-is** and documented — fixing it in a library-swap PR would be an untested behavior change.
+- **Evidence:** org-wide search found the responsive-object feature has **zero adoption** — every `Dropdown offset` callsite passes scalars; `makeResponsiveSpacingProps`/`ResponsiveSpacingType`/`isResponsiveSpacing` have zero external hits; the hook isn't in the `@toptal/picasso` aggregate; in-repo it's used **once** (Dropdown). Scalar offsets never touch the class machinery, so real-world usage is byte-identical.
+- _Implication / follow-up:_ **executed in-PR** — the engine is deleted; Dropdown `offset` converged on the shared static spacing-class table (moved from Container to `@toptal/picasso-utils`); the inverted cascade is fixed; the SSR first-paint gap is closed (**[PF-2238]**). Plan + decisions: `docs/modernization/PI-4318-PF-2226-execution-plan.md`.
+
+### 4.4 Core provider → aggressive API removal
+
+- **Decision (Option 3):** delete `PicassoProvider` outright (incl. `.override()`, `.extendTheme()`, `.disableResponsiveStyle()`), drop `StylesProvider`/`MuiThemeProvider`, and remove the `theme`, `injectFirst`, and `disableClassNamePrefix` props — rather than keeping them as deprecated no-ops.
+- **Why:** these only ever configured the MUI theme / JSS injection, which are gone. Org-wide audit: `theme=` / `.extendTheme` / `PicassoProvider.theme` reads / `.disableResponsiveStyle` / `responsive={false}` → **0 external**; `.override()` → **1** external callsite (talent-activation-frontend); `injectFirst` → ~8 repos; `disableClassNamePrefix` → ~9 repos. Compile errors are a better discovery mechanism than silent no-ops, and one major beats a deferred second removal.
+- **`useMediaQuery` → `window.matchMedia`** in `useBreakpoint` (guarded for jsdom/SSR). Note: `screens()` returns an `@media …`-prefixed string; MUI's `useMediaQuery` stripped that prefix and the replacement must too.
+- _Implication:_ consumer cleanup (mostly one-line prop deletions, one real `.override` rework) → **[PF-1995]** + a `@toptal/picasso-codemod` transform.
+
+### 4.5 Canary + transitive sweep
+
+- Removed `@material-ui/*` from the provider deps, the `@material-ui/core` peer-dep from `@toptal/picasso`, and lifted the `react < 19` cap on both.
+- Removing MUI **exposed two under-declared transitive dependencies** that MUI had been silently supplying: `@toptal/picasso-utils` pinned `notistack@1.0.10` (notistack v1 → MUI v4) as a **vestigial, unused** peer (dropped); and `Collapse`/`Fade`/`Slide` import `react-transition-group` but relied on `@types/react-transition-group` coming in via MUI (now declared directly).
+- _Scope boundary:_ the repo-wide `react < 19` cap lift on the remaining ~57 **non-MUI** packages is **O2**, not this canary (PF-2023 _unblocks_ O2).
+
+### 4.6 Docs-UI (PicassoBook) off MUI
+
+- The `.storybook/components/*` docs-UI (PropsTable, CodeExample, Editor, Markdown, TabsSection) styled itself with `makeStyles`. Converted to Tailwind class strings. Required **adding `.storybook` to the Tailwind `content` globs** (previously only `packages/**` was scanned, so docs-UI Tailwind classes wouldn't generate).
+- The code font keeps the original Monaco stack as a **quote-free arbitrary value**; the editor marks it `!important` to beat PicassoRootNode's app-wide `[&_*]:font-sans` (equal specificity — see §7). Dev-only tooling, not Happo-gated.
+
+---
+
+## 5. Breaking changes (consumer action required)
+
+`@toptal/picasso-provider` and `@toptal/picasso` bump **major**.
+
+| Removed / changed                                                                       | Replacement                                                                                                        | Notes                                                                        |
+| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- |
+| `PicassoProvider` export + `.override()`, `.extendTheme()`, `.disableResponsiveStyle()` | Style via Tailwind `className` / `data-*`; no runtime theme override                                               | `.override()` had 1 external callsite (talent-activation)                    |
+| `<Picasso>` / `<PicassoLight>` `theme` prop                                             | For page content width: `<Page className="[--content-width:80em]">`. Other MUI theme fields had no runtime effect. |                                                                              |
+| `injectFirst` prop                                                                      | Delete it (JSS-only; no effect without StylesProvider)                                                             | ~8 repos pass it                                                             |
+| `disableClassNamePrefix` prop                                                           | Delete it (JSS class-name seeding is gone)                                                                         | ~9 repos pass it                                                             |
+| `getServersideStylesheets`                                                              | Drop from SSR setup; Tailwind extracts CSS at build time                                                           | JSS server-side collection obsolete                                          |
+| `@material-ui/core` peer-dep of `@toptal/picasso`                                       | Remove it from the consumer's deps                                                                                 | The canary                                                                   |
+| `Layout.contentMinWidth` type field                                                     | Use the `responsive` prop (unchanged)                                                                              | Was unread after the Page decouple                                           |
+| `react`/`react-dom` peer `< 19` cap                                                     | Widened to `>=16.12.0`                                                                                             | Enables React 19                                                             |
+| `reset` prop + runtime reset `<style>`                                                  | Add `@import '@toptal/picasso-tailwind/base';` to the Tailwind entry CSS (omit it = the old `reset={false}`)       | Reset now lives in `@layer base`: utilities/app CSS win ties (PF-2221, §4.2) |
+
+**Non-breaking but observable:** `PicassoRootNode` and the notistack container class names change from JSS hashes to Tailwind classes (JSS hashes were random-seeded, never a contract). Jest snapshots rendered through `TestingPicasso` no longer contain a reset `<style>` element.
+
+**Consumers running their own MUI v4 under Picasso** (4 repos identified): Picasso's `StylesProvider injectFirst` was _also_ configuring _their_ JSS injection order. After this, they must add their own `<StylesProvider injectFirst>` from `@material-ui/core/styles`.
+
+---
+
+## 6. Follow-ups
+
+| Ticket / item                | What                                                                                                                                                                                                                                                                    | Why deferred here                                                                                                                 |
+| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| **[PF-2221]**                | **Executed in this PR** — reset ships as `@toptal/picasso-tailwind/base` (`@layer base`); `CssBaseline` + `reset` prop removed; hoistable-`<style>` variant dropped (§4.2)                                                                                              | Remaining: consumer Tailwind-entry adoption rides PF-1995; cascade-contract sign-off (Vitor)                                      |
+| **[PF-2226]**                | **Executed in this PR** — engine deleted; Dropdown `offset` on the shared static spacing-class table (`@toptal/picasso-utils`); inverted cascade fixed; SSR first paint correct (closes **[PF-2238]**); `PreventPageWidthChangeOnScrollbar` retired into the base entry | Remaining: Happo verification on CI; regen 4 PageTopBar snapshots (`md:w-screen` now unconditional)                               |
+| **[PF-1995]**                | Consumer migration: strip removed props, rework the 1 `.override` callsite; ship the `@toptal/picasso-codemod` transform                                                                                                                                                | Cross-repo; not part of the library PR                                                                                            |
+| **O2**                       | Repo-wide `react < 19` peer-cap lift on the ~57 remaining non-MUI packages (React 19 org-wide)                                                                                                                                                                          | Separate effort that PF-2023 _unblocks_                                                                                           |
+| **[PF-2210]**                | Staff Portal migrate to the new Page + Provider                                                                                                                                                                                                                         | Was _blocked by_ PF-2023                                                                                                          |
+| Token single-source-of-truth | Dedup the raw tokens between `@toptal/picasso-tailwind` (preset) and `Picasso/config` (runtime JS exports)                                                                                                                                                              | Runtime token exports are still needed (charts, `useBreakpoint`, spacing props); the duplication (drift risk) is the real cleanup |
+| Process (this PR)            | Repo-wide `pnpm test:unit -- -u` snapshot regen (drift from CssBaseline `<style>` + RootNode restyle); rebase off #5005/#5006 once they land on `temp`; DoD validation (Happo / Portal smoke / React 19)                                                                | Snapshots/validation belong in the Node-22/CI env                                                                                 |
+
+---
+
+## 7. Engineering notes & gotchas (reusable lessons)
+
+These bit us during the migration and generalize to future MUI→Tailwind work and to the next AI session:
+
+1. **`build:package` (tsc) green ≠ everything works.** tsc validates types only. Runtime bugs (the `matchMedia` `@media`-prefix regression) and the Storybook **webpack** build (the docs-UI `@material-ui` imports; the missing Tailwind `content` scan) are _separate gates_. Always run Storybook + Happo + a manual eyeball; tsc alone hides these.
+2. **Tailwind `content` scope is `packages/**`only.** Tailwind classes authored anywhere else (e.g.`.storybook/**`) are **not generated\*\* and silently do nothing. Add the path to `content` (or `@source`).
+3. **`screens()` returns an `@media …`-prefixed string.** `window.matchMedia` needs it _stripped_ (`^@media\s?`). MUI's `useMediaQuery` did this for us; a hand-rolled replacement must too. Guard for jsdom/SSR (`typeof window.matchMedia === 'function'`).
+4. **Removing MUI exposes under-declared transitive deps.** Packages that imported `react-transition-group` (or its `@types`) or pinned an old `notistack` had been free-riding on MUI's dependency tree. After MUI is gone, declare them directly. Grep the lockfile (not just `package.json`) for the last `@material-ui` references and trace _what pulls them_.
+5. **Equal-specificity cascade wars — resolved with `:where()`.** PicassoRootNode's app-wide `[&_*]:font-sans` (`.root *`, specificity 0,1,0) tied with component font classes (`[font-family:monospace]`, also 0,1,0) and won by Tailwind's bundle sort — breaking RichText's code blocks (2 Happo diffs on PR #5040; JSS had only won/lost these ties by injection order, and RichText happened to win). **Fix + doctrine: global defaults hammered onto a subtree must be zero-specificity** — the root font is now `[:where(&)_*]:font-sans` (`:where(.root) *` = 0,0,0): still beats user-agent fonts (author origin wins regardless of specificity), loses to every authored font class, and is order-independent instead of sort-luck. Same philosophy as the `@layer base` reset: a baseline, never an override.
+6. **Box model.** The page stays `content-box` (`@toptal/picasso-tailwind/base`: `html { box-sizing: initial }` + universal inherit) — a border-box flip was attempted under PF-2221 and **reverted in #5046**; content-box is confirmed for now. The `PicassoRootNode` border-box island keeps Picasso components on border-box regardless. Tailwind **preflight itself is still not active** — the base entry is the only global box-sizing source.
+7. **"done" in the manifest ≠ MUI-free.** A stale local git ref showed a migrated component still carrying MUI; a fresh fetch cleared it. Verify component state on a **fresh fetch of `temp`**, never a cached ref or the manifest's `done` flag.
+8. **Prefer arbitrary _values_ over arbitrary _properties_, and avoid quotes in arbitrary values.** `[transition:padding_300ms_ease_0ms]` preserves the exact `ease` timing (the `transition-[padding]` _utility_ injects Tailwind's own cubic-bezier). Font stacks work quote-free (`font-[Monaco,Menlo,Ubuntu_Mono,…]`) — quotes+commas through the JIT are fragile.
+
+---
+
+## 8. Verification & DoD status
+
+- ✅ `pnpm build:package` — **90 projects green** with `@material-ui` fully removed (src + every `package.json` + lockfile = 0).
+- ✅ ESLint clean on all touched files.
+- ✅ No jest snapshot captures the provider-internal changes; cross-package snapshot drift (from CssBaseline `<style>` + RootNode restyle) is a **known, deferred repo-wide `-u`**.
+- ✅ **O1 (deprecated-deps audit) = 0** achievable — no MUI anywhere in the tree.
+- ⏳ **Pending DoD:** full Storybook renders without console errors (manual/CI); full **Happo** (Storybook + Cypress) with Vitor sign-off on intentional reset diffs; ≥1 **Portal smoke** in staging; **React 19** validation across the library.
+
+---
+
+## 9. For the next application-migration plan (consumer-facing)
+
+When writing the plan to migrate consuming apps onto this provider major:
+
+1. **Mechanical (codemod-able):** delete the `theme`, `injectFirst`, and `disableClassNamePrefix` props from every `<Picasso>` / `<PicassoLight>` / `TestingPicasso`. Ship this as the `@toptal/picasso-codemod` transform (PF-1995).
+2. **`PicassoProvider.override()`** callsites: rewrite to `className` on the target component. (1 known: talent-activation-frontend `MuiMenu` override → `<Menu className='…'>`.)
+3. **SSR:** remove `getServersideStylesheets` from server render setup — no replacement needed (Tailwind is build-time).
+4. **Theme customization via `theme=`:** only page content width had a runtime effect → `<Page className="[--content-width:…]">`. Token-level theming is not supported at runtime (use Tailwind).
+5. **Apps running their own `@material-ui` v4 under Picasso** must add their own `<StylesProvider injectFirst>` (Picasso no longer configures their JSS injection).
+6. **React 19:** the provider + `@toptal/picasso` now permit React 19; full org-wide readiness is O2 (the remaining packages' cap lift).
+7. **Values you still import from `@toptal/picasso-provider`** (`palette`, `colors`, `breakpoints`, `screens`, `useBreakpoint`, `spacings`, …) are **unchanged** — only the MUI theme _object_ and the customization API are gone.
diff --git a/docs/modernization/PI-4318-PF-2226-execution-plan.md b/docs/modernization/PI-4318-PF-2226-execution-plan.md
new file mode 100644
index 0000000000..29bb83238b
--- /dev/null
+++ b/docs/modernization/PI-4318-PF-2226-execution-plan.md
@@ -0,0 +1,189 @@
+# PF-2226 + PF-2238 — execution plan (v2, expanded scope)
+
+**Scope (expanded per operator decision, 2026-07-15):**
+
+1. Retire the responsive-styles runtime engine; converge Dropdown `offset` on the static Tailwind class-table pattern (**PF-2226**) and close the SSR responsive-spacing bug (**PF-2238**) in the same PR.
+2. **Dedup the spacing class table**: move Container's `SPACING_CLASSES`/`DEPRECATED_CLASSES` + resolver into `@toptal/picasso-utils` as the shared home; Container and Dropdown both consume it.
+3. **Retire `PreventPageWidthChangeOnScrollbar`**: ship its CSS in `@toptal/picasso-tailwind/base` (`@layer base`), delete the component + prop. After this the provider injects **zero runtime CSS**.
+4. **Box model: `box-sizing: initial` (content-box) is confirmed final for now** — fix every stale border-box reference (docs, comments, the pending changeset).
+
+**Branch:** `migrate-picasso-provider-v2` (base `feature/picasso-modernization-temp`) — the open provider major carries all export/prop removals.
+
+**Ticket relationship:** PF-2226 fixes PF-2238 **by construction** — static Tailwind classes are extracted into the consumer's CSS at build time, so the `@media` rules exist on SSR first paint; the client-only injector (and its adjacent defects: stale `injectedNames` cache, render-phase DOM write, inverted mobile-first cascade) is deleted, not hardened. PF-2238 Option A is **off the table**. Items 2–4 are PR-scope additions without their own tickets (they ride PF-2226's PR; spin PF tickets first if per-ticket traceability is wanted).
+
+All file/line facts below re-verified on this branch 2026-07-15.
+
+---
+
+## Decisions locked
+
+- **D1 — Shared resolver home: `@toptal/picasso-utils`** (`packages/base/Utils`). Container already depends on it (`package.json` dependencies), Dropdown already depends on it (imports `ClickAwayListener`, `noop`), and utils already has `@toptal/picasso-provider` as peer+dev dep — so `SpacingType`/`isPicassoSpacing`/`isResponsiveSpacing` imports work and **no dependency cycle exists** (provider does not depend on utils). Trade-off accepted knowingly: `getSpacingClasses`/`getSpacingStyles`/`SPACING_CLASSES` become public exports of `@toptal/picasso-utils` (barrel is `export * from './utils'`) — utils is the established home for cross-component helpers (ClickAwayListener precedent), and this beats the provider (whose API we're shrinking) and beats duplication.
+- **D2 — Scrollbar fix folds into `base.css`** (not a separate CSS entry). The fix is default-ON today (`preventPageWidthChangeOnScrollbar = true`), so parity for the default-path consumer must be zero-action: they already import `@toptal/picasso-tailwind/base` per the PF-2023 migration instructions. A separate entry would force every default-path consumer to add an import. Opt-out consumers get a documented cascade-based escape (unlayered app CSS beats `@layer base` by definition).
+- **D3 — Box model stays `box-sizing: initial`** (content-box, faithful to the legacy CssBaseline). The border-box flip (PF-2221 attempt) was reverted in #5046 and is not coming back for now. All docs/changeset text saying otherwise is stale and gets fixed in Commit 1.
+- **D4 — Grid's `useResponsiveSpacing` stays** — analyzed below (§Grid); it is not engine-coupled and a static convergence requires a Grid/Grid.Item redesign, not a mechanical swap. Follow-up ticket, not this PR.
+
+---
+
+## Commit plan (6 commits, each individually green)
+
+### Commit 1 — `Fix stale border-box references; content-box is the shipped box model`
+
+Docs/comments only; zero runtime change. The #5046 revert restored `box-sizing: initial` but left border-box text everywhere:
+
+- [base.css:16–23](../../packages/picasso-tailwind/src/base.css) — rewrite the comment above `box-sizing: initial`: content-box carve-out is deliberate (faithful to legacy CssBaseline); the border-box flip was attempted under PF-2221 and reverted (#5046); the PicassoRootNode border-box island remains the guard.
+- [.changeset/decommission-mui-provider.md:22](../../.changeset/decommission-mui-provider.md) — **delete the border-box breaking-change bullet** (it announces a flip that no longer ships; publishing it would be false consumer guidance).
+- [AGENTS.md:134](../../AGENTS.md) — "border-box page box model" → content-box wording (reset = body/root layout + font smoothing; box model stays content-box with the component island on border-box).
+- [docs/contribution/styling.md:71](../contribution/styling.md) — same correction.
+- [Report](PI-4318-PF-2023-provider-migration-report.md) lines ~64, ~104, ~135 — rewrite the three border-box passages to record: flip attempted, reverted in #5046, content-box confirmed final for now. (Line ~39, the PicassoRootNode island row, is still true — keep.)
+
+### Commit 2 — `Move spacing class table and resolver to picasso-utils`
+
+Pure move, zero functional change. **Container Happo zero-diff is the gate.**
+
+- Move from `packages/base/Container/src/Container/utils/` → `packages/base/Utils/src/utils/spacing-classes/`:
+  - `constants.ts` (`SPACING_CLASSES`, `DEPRECATED_CLASSES` — keep the `/* eslint-disable max-lines */`),
+  - `get-spacing-classes.ts` (`getMappedClass`, `getResponsiveClasses`, `getSpacingClasses`, `getSpacingStyles`),
+  - `get-spacing-classes.test.ts`.
+    Re-export via a local `index.ts` + the package's `utils/index.ts` barrel. Match the utils package's existing folder conventions.
+- Re-point [Container.tsx:11](../../packages/base/Container/src/Container/Container.tsx): `import { getSpacingClasses, getSpacingStyles } from '@toptal/picasso-utils'` (usages at lines 129, 154 unchanged). Trim Container's `utils/index.ts`; **`filter-out-strings-and-picasso-spacings.ts` (+ test) stays in Container** — it's Container-specific.
+- No package.json changes needed (deps verified both directions). Run `pnpm refresh:tsconfig-references` and verify the Utils tsconfig picks up the provider type imports.
+- **Do not touch** [SidebarItemHeader.tsx:34](../../packages/base/Page/src/SidebarItem/SidebarItemHeader.tsx) — its local `getSpacingStyles` is an unrelated namesake (different signature, Page-internal).
+
+### Commit 3 — `Converge Dropdown offset on the shared spacing resolver`
+
+No new class table anywhere — Dropdown consumes the moved resolver directly (its 4 margin types are a subset of the table's 6).
+
+- [Dropdown.tsx](../../packages/base/Dropdown/src/Dropdown/Dropdown.tsx):
+  - Delete the `makeResponsiveSpacingProps` import (line 9), the module-level `useResponsiveProps` setup (lines 103–106), and the hook call (lines 233–239). **Keep** the `SpacingType`/`DeprecatedSpacingType` type imports (lines 5–8) — the `Props` overloads still use them.
+  - Add `getSpacingClasses, getSpacingStyles` to the existing `@toptal/picasso-utils` import (line 12).
+  - Build once: `const offsetSpacing = { top: offset?.top, bottom: offset?.bottom, left: offset?.left, right: offset?.right }`. Popper (lines 277–281): `className={twJoin('shadow-2', externalClasses?.popper, getSpacingClasses(offsetSpacing))}` (`twJoin` flattens arrays). Style (line 294): `style={getSpacingStyles(offsetSpacing)}`.
+  - Public overloads (`PropsWithBaseSpacing` / `PropsWithDeprecatedSpacing`) unchanged; the resolver accepts the full runtime `SpacingType` union, so no boundary narrowing.
+- **Tests** (explicit assertions, **no new snapshots** — snapshot regen is deferred to Node 22): component-level in `Dropdown/test.tsx` (existing tests already open the dropdown), parity-pinned against today's engine output for all four input kinds:
+  - token `{top: SPACING_8}` → popper classList contains `mt-8` (computed 2rem — identical to today's inline `marginTop:'2rem'`);
+  - responsive `{top: {sm: SPACING_2, lg: SPACING_8}}` → contains `sm:mt-2` and `lg:mt-8` (asserts the **fixed** mobile-first semantics — cascade decided by Tailwind's stylesheet order, not emission order);
+  - number `{top: 11.75}` → inline `marginTop: '11.75rem'`, no margin classes;
+  - deprecated `{top: 'small'}` → `mt-4` (computed 1rem, matching today's `spacingToRem('small')`).
+    If the moved resolver test lacks margin-type coverage for any of these kinds, extend it there too.
+- **Story:** `story/ResponsiveOffset.example.tsx` + chapter wiring in `story/index.jsx` — responsive-object offset (e.g. `{sm: SPACING_2, lg: SPACING_8}`). First Happo coverage of the (now working) responsive path; new snapshot = addition, not a diff.
+
+### Commit 4 — `Retire responsive-styles engine from picasso-provider`
+
+- Delete `packages/picasso-provider/src/Picasso/utils/responsive-styles/` — all 17 files (10 source + 7 tests).
+- [Picasso/utils/index.ts](../../packages/picasso-provider/src/Picasso/utils/index.ts): drop line 3 (`export * from './responsive-styles'`).
+- **Untouched:** `config/spacings.ts` (`PicassoSpacing`, `SpacingType`, `ResponsiveSpacingType`, guards, `SPACING_*`) and `Picasso/utils/spacings.ts` (`spacingToRem`) — Container, the resolver, and the public type surface depend on them.
+
+### Commit 5 — `Ship scrollbar-jump fix in the base entry; drop PreventPageWidthChangeOnScrollbar`
+
+The component ([PreventPageWidthChangeOnScrollbar.tsx](../../packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx)) renders an undeduped, per-render-recomputed `<style>` with (at md/lg/xl, runtime-resolved): `html { width: 100%; overflow-x: hidden }` + `body { width: 100vw }`.
+
+- **Add to [base.css](../../packages/picasso-tailwind/src/base.css)** inside `@layer base`:
+
+  ```css
+  @media (min-width: 768px) {
+    html {
+      width: 100%;
+      overflow-x: hidden;
+    }
+    body {
+      width: 100vw;
+    }
+  }
+  ```
+
+  (Today's md∪lg∪xl ranges are contiguous ≥768px, so one `min-width` query is equivalent for the default `responsive` case.)
+
+- **Delete** `packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/` (component, styles, index) and its render in [Picasso.tsx:70–72](../../packages/picasso-provider/src/Picasso/Picasso.tsx); remove the public export from provider `src/index.ts`.
+- **Remove the prop end-to-end** (provider major covers it): `PicassoProps` ([Picasso.tsx:29,46,65](../../packages/picasso-provider/src/Picasso/Picasso.tsx)), `PicassoGlobalStylesProvider` (lines 19, 40, 86), `RootContext` field + `usePreventPageWidthChangeOnScrollbar` hook ([RootContext.ts:19,102–109](../../packages/picasso-provider/src/Picasso/RootContext.ts) — the hook is a public provider export; removal is a major bullet).
+- **PageTopBar coordination** — the one real flag consumer: [PageTopBar.tsx:74,147](../../packages/base/Page/src/PageTopBar/PageTopBar.tsx) conditionally applies `md:w-screen`. Make it **unconditional** (drop the hook read). For default-path consumers (base entry imported) this is behavior-identical; the top bar's `w-screen` and the body's `100vw` stay coordinated by construction.
+- **Clean up in-repo prop usages** (TS errors once the prop is gone): [TestingPicasso.tsx:15](../../packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx), [Favicon/test.tsx:13](../../packages/picasso-provider/src/Favicon/test.tsx), [Page/test.tsx:36](../../packages/base/Page/src/Page/test.tsx), provider stories `Default.example.tsx:11` + `DisableResponsiveUI.example.tsx:89`. (Tests passed `false`, so no snapshot content ever included the style — deletion is snapshot-neutral.)
+- **Org-wide audit results (done 2026-07-15, separate session — no re-run needed):** 2 production opt-outs + ~8 infra usages; `usePreventPageWidthChangeOnScrollbar` has **zero** external consumers.
+  - **signal** — opted out because `overflow-x: hidden` on `<html>` clips wide tables at intermediate widths (kills horizontal scroll). Remedy: two-line unlayered CSS override (`html { overflow-x: visible } body { width: 100% }`) — beats `@layer base` by cascade, no `!important` needed.
+  - **sourcing-extension** (TACO) — a browser extension injecting into LinkedIn Recruiter pages; the fix would leak `body { width: 100vw }` into the host page. Remedy: don't import the base entry into host-page context at all — an extension shouldn't take any of Picasso's page-level globals.
+  - **top-assessment** — not an opt-out, but has overridden the default with plain CSS + `!important` for years: living proof the CSS escape works. Once the fix is layered they can drop the `!important`.
+  - ~8 infra files (topkit / talent-activation / talent-resume Storybook decorators + test wrappers) — one-line prop deletion at upgrade; they control their own CSS imports, and jsdom doesn't meaningfully apply media-queried global CSS.
+- **Hard removal is deliberate — no deprecated no-op.** A no-op prop would let sourcing-extension upgrade cleanly and silently re-break LinkedIn pages. Removing the prop from the interface produces a TS error on the JSX at exactly the moment a human is upgrading — **the compile break is the safety mechanism.** Same logic covers the infra files (trivial, but consumer-visible on purpose).
+- **Documented behavior deltas** (all changeset-documented):
+  1. Opt-out consumers lose the prop — per-consumer remedies above, plus a `className` override on `Page.TopBar` for anyone needing `md:w-screen` off.
+  2. `responsive={false}` consumers: `disableMobileBreakpoints()` empties the md query, so today their fix starts at **1024px**; static CSS applies from **768px** always.
+  3. `PicassoLight` consumers newly gain the fix via the base entry (PicassoLight never rendered the component).
+
+### Commit 6 — `Update changesets and docs for engine retirement and scrollbar base migration`
+
+**Changesets:**
+
+- Extend [decommission-mui-provider.md](../../.changeset/decommission-mui-provider.md) with two bullets:
+  1. `makeResponsiveSpacingProps` removed (zero external usage). Must do PF-2238's documentation duty: per-breakpoint spacing now compiles to static Tailwind classes present in build-time CSS → **correct on SSR first paint**; the previous port was client-only (SSR HTML carried classes/variables but no `@media` bridge until hydration). This corrects the line-18 claim ("Tailwind extracts CSS at build time … no replacement needed") that was true for everything _except_ this stylesheet.
+  2. `PreventPageWidthChangeOnScrollbar` component, prop, and `usePreventPageWidthChangeOnScrollbar` hook removed (hook: zero external consumers). The fix ships in `@toptal/picasso-tailwind/base`. **Name the known opt-outs with their specific remedies in the body** — signal (unlayered two-line override restores wide-table horizontal scroll), sourcing-extension (keep the base entry out of host-page context entirely), existing `!important` overrides like top-assessment's (can drop the `!important` now that the fix is layered), infra wrappers (delete the prop) — plus deltas 2–3 above. **The provider now injects zero runtime CSS.**
+- New `.changeset/dropdown-offset-static.md` — `'@toptal/picasso-dropdown': patch`: `offset` renders via the shared static class table (tokens/deprecated strings → classes; raw numbers stay inline styles); **fixes the inverted responsive cascade** (largest-breakpoint-first emission made the smallest breakpoint win on wide viewports; present since the feature shipped; zero measured adoption); responsive offsets now correct on SSR first paint (relevant with `keepMounted`+`disablePortal`); margins move inline-style→class for token/deprecated values (consumer CSS can now override; identical computed values); responsive `offset` no longer reacts to `disableMobileBreakpoints()` (fixed screens — same as Container).
+- New `.changeset/utils-spacing-classes.md` — `'@toptal/picasso-utils': minor`: add `getSpacingClasses`/`getSpacingStyles`/`SPACING_CLASSES`/`DEPRECATED_CLASSES` (moved from Container internals; now shared by Container + Dropdown).
+- New Container changeset — `patch`: internal import re-point, no consumer-visible change.
+- New Page changeset — **`major`** (real opt-outs exist, so for them this is a flipped default — name the break per changeset guidelines): `PageTopBar` always applies `md:w-screen`, matching the page-width fix now shipped in the base entry; consumers that opted out and need it off override via `className` on `Page.TopBar`.
+- Extend `.changeset/picasso-tailwind-base-entry.md`: the base entry now includes the scrollbar page-width-jump fix (≥768px).
+
+**Docs:**
+
+- [practices.md:164](../migration/references/practices.md) — rewrite the "Responsive spacing utilities" bullet: responsive spacing = the shared static class table + pure resolver in `@toptal/picasso-utils` (Container/Dropdown precedent); `makeResponsiveSpacingProps` is deleted; never reintroduce runtime class generation/injection.
+- [Report](PI-4318-PF-2023-provider-migration-report.md): §3 row (~69–70) → engine deleted, PF-2226 executed in-PR, cascade + SSR gap fixed; §6 PF-2226 row (~117) → executed; scrollbar row → moved to base entry, provider injects zero runtime CSS, duplicate-`<style>` defect gone.
+- [ADR 19](../decisions/19-responsive-component-spacing-properties.md): status note — API kept as designed; runtime CSS-var/media-query mechanism replaced by the shared static class table; mobile-first cascade now actually correct; SSR compatibility (explicit in this ADR's Problem statement) restored after the PF-2023 port silently lost it; `disableMobileBreakpoints()` no longer affects responsive spacing.
+
+**Jira (via MCP; PF-2238 currently unassigned, no links on either ticket):**
+
+1. At execution start: link PF-2238 "is fixed by" PF-2226.
+2. On PR ready: comment on PF-2238 with the closure mapping below + explicit "Option A must not be built".
+3. On merge: update PF-2226 description to executed state (PF-2221 pattern); transition both.
+4. **Team heads-ups before merge** (operator sends or approves drafts): **TACO** (sourcing-extension — must keep the base entry out of host-page context or LinkedIn pages re-break) and **signal's team** (re-apply their wide-table override as unlayered CSS at upgrade). Without these they rediscover their old bugs from scratch.
+5. Optional: spin PF tickets for the scrollbar retirement + table dedup if per-ticket traceability is wanted; otherwise they're PR-scope items recorded in the PR description.
+
+---
+
+## PF-2238 closure mapping
+
+| PF-2238 acceptance criterion                                               | How satisfied                                                                                                                                                                                                                                                        |
+| -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Bridge CSS present in SSR HTML **or** docs state the limitation            | **Both, structurally.** No bridge stylesheet exists; `@media` rules ship in the consumer's build-time Tailwind CSS. Dropdown component test asserts breakpoint-prefixed classes in rendered markup; the changesets document the old client-only gap and its removal. |
+| No imperative `document.head.appendChild` in `inject-responsive-styles.ts` | Directory deleted. After Commit 5 the provider ships **zero runtime CSS of any kind** (`rg` gate below), which is strictly stronger than the AC.                                                                                                                     |
+| `disableMobileBreakpoints()` behavior covered by a test                    | Moot — the rebuild-after-mutation machinery no longer exists. The new static behavior (fixed screens) is documented in changeset + ADR note.                                                                                                                         |
+
+Option A's adjacent defects (stale `injectedNames` cache; render-phase DOM write) and the un-ticketed duplicate-`<style>` defect (scrollbar component recomputed per render) all die by deletion.
+
+---
+
+## Grid's `useResponsiveSpacing` — what it is and what would need to happen (D4)
+
+**What it is** ([Grid.tsx:43–51,95–96,104,107](../../packages/base/Grid/src/Grid/Grid.tsx)): a _default-value picker_, not a styling engine. When the consumer doesn't pass `spacing`, it reads `useCurrentBreakpointRange()` (RootContext) and picks a default gap in px — `{xs:16, sm:16, md:24, lg:32, xl:32}`, falling back to `md` (24px) when the range is unknown. The resolved **number** then (a) maps to a static gap class via `getGridSpacingClassName`, and (b) feeds `GridContext.Provider value={{ gridSpacing }}` so `Grid.Item` can derive its own geometry from the same number.
+
+**Why it is not part of PF-2226/PF-2238:** it shares nothing with the deleted engine — no generated class names, no CSS variables, no `<style>` injection, no `makeResponsiveSpacingProps`. Its classes are static literals; SSR ships them fine.
+
+**Its own (pre-existing, smaller) gaps:** server-side `currentBreakpointRange` is `undefined`, so default-spaced Grids SSR-render at the md default (24px) and can re-render to 16/32px after hydration — a runtime-JS breakpoint dependency and a minor first-paint shift _for the default value only_ (consumer-set `spacing` is static and unaffected). It also re-renders every Grid on breakpoint change.
+
+**What convergence would require (follow-up ticket, not this PR):** replacing the JS default with static responsive classes (`gap-4 md:gap-6 lg:gap-8`) is trivial for the Grid element itself — but `GridContext` consumers (`Grid.Item`) need the _resolved number_, so the whole Grid/Grid.Item contract would have to become breakpoint-aware classes on both sides instead of a shared number. That's a component redesign with its own Happo surface (plus the same `disableMobileBreakpoints()` semantics question as Commits 3/5), not a mechanical swap. **Action here: none.** File a follow-up ticket ("Converge Grid default spacing on static responsive classes; make Grid.Item breakpoint-aware") when this PR lands.
+
+---
+
+## Verification
+
+Per commit: `pnpm build:package` + `pnpm eslint --ext=.ts,.tsx --no-ignore <touched files>` + `pnpm prettier --check <touched files>`.
+
+Whole-PR:
+
+1. `rg -n --hidden "makeResponsiveSpacingProps|responsive-styles|PicassoDropdown-Responsive|PreventPageWidthChangeOnScrollbar|preventPageWidthChangeOnScrollbar" packages .storybook cypress docs` → zero code hits; doc hits only where this PR rewrote them. Use Read, not shell output, to confirm exact identifiers (known rg output-masking artifact).
+2. `rg -n "dangerouslySetInnerHTML" packages/picasso-provider/src/` → **zero** — the "provider injects zero runtime CSS" claim, mechanically checked.
+3. `rg -n "border-box" AGENTS.md docs/ .changeset/ packages/picasso-tailwind/src/` → remaining hits only where border-box is factually correct (PicassoRootNode island descriptions).
+4. `pnpm test:unit` — moved resolver tests + new Dropdown tests green; engine tests gone with the directory; **no `-u`** (operator regenerates snapshots on Node 22; none expected — Dropdown snapshots contain no offset output, scrollbar style never rendered under `TestingPicasso`).
+5. `pnpm circularity` — clean (utils→provider is peer-typed only; no new cycles).
+6. Optional local: `pnpm build:storybook`; grep bundle — `PicassoDropdown-Responsive` absent, `sm:mt-2`/`lg:mt-8` literals present. Verify `.storybook`'s Tailwind entry imports the base entry (it should since PF-2221) so the scrollbar rules exist in Storybook.
+7. **Happo (CI authoritative; local fonts are Arial-fallback, don't eyeball):**
+   - Commit 2 gate: **all Container stories zero-diff** (pure move).
+   - Commit 3 gate: Dropdown `PositionsAndOffsets` + `CustomTrigger` **zero-diff** (scalar parity: inline `2rem` → class `mt-8`, identical computed margin); `ResponsiveOffset` = new snapshot. Any diff on the two scalar stories = computed margins changed → stop, investigate, don't sign off.
+   - Commit 5 gate: expect **zero diff** everywhere (fixed-viewport screenshots don't exercise scrollbar appearance; `DisableResponsiveUI` story already opted out). Any diff → the base-entry rules are interacting with story chrome → investigate.
+8. Opt-out audit: **done** (results recorded in Commit 5; Page changeset tiers `major`). No re-run needed at execution — optionally re-confirm alongside the existing pre-merge org-wide removed-symbols audit (canary merge gate).
+
+Operational constraints (carried over): git is manual — provide commands, don't execute; SSH fix if fetch/push fails: `ssh-add --apple-use-keychain ~/.ssh/id_ed25519`; branch is stacked with Tooltip #5005 + query-builder #5006 — keep the PR draft and rebase them away before review-ready.
+
+---
+
+## Remaining out of scope
+
+- **Grid convergence** — follow-up ticket per §Grid above (D4).
+- **Design-owned:** deprecating responsive `offset` / Container responsive props from the end-state API (PF-2226's "optional" note) — a deprecation-cycle conversation.
+- **Re-flipping the box model to border-box** — explicitly parked (D3: content-box "for now"); any future flip is its own change with its own Happo sign-off.
diff --git a/docs/modernization/picasso-code-review-rules.md b/docs/modernization/picasso-code-review-rules.md
index 3414a77254..0df45fb495 100644
--- a/docs/modernization/picasso-code-review-rules.md
+++ b/docs/modernization/picasso-code-review-rules.md
@@ -210,8 +210,12 @@ Canonical scale (from `@toptal/picasso-shared`):
 
 ```ts
 export type Sizes =
-  | 'xxsmall' | 'xsmall' | 'small'
-  | 'medium' | 'large' | 'xlarge'
+  | 'xxsmall'
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge'
 
 export type SizeType<T extends Sizes> = T
 ```
@@ -419,7 +423,10 @@ Notification (`Notification.tsx:19-40`) uses an internal/public split: `PrivateP
 
 ```tsx
 // Component.tsx
-export const Button = forwardRef<HTMLButtonElement, Props>(function Button(props, ref) {
+export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
+  props,
+  ref
+) {
   // ...
 })
 Button.displayName = 'Button'
@@ -445,7 +452,9 @@ export type { Props as ButtonProps } from './Button'
 forwardRef<HTMLButtonElement, Props>(function Button(
   { disabled = false, variant = 'primary', size = 'medium', ...rest },
   ref
-) { /* ... */ })
+) {
+  /* ... */
+})
 ```
 
 > Documented variance: `Dropdown.tsx` exposes `defaultProps?: Partial<PropsWithBaseSpacing>` in its Props type for overload support — that's a type-level field name, not the runtime anti-pattern. Single-component carve-out; do NOT model new code on it.
@@ -485,13 +494,13 @@ interface Props extends BaseProps {
 
 #### Where to import what
 
-| Symbol | Source |
-|---|---|
-| `StandardProps`, `BaseProps`, `TextLabelProps`, `SizeType`, `OverridableComponent`, `useIsomorphicLayoutEffect` | `@toptal/picasso-shared` |
-| `render` (test wrapper), `fireEvent`, test types | `@toptal/picasso-test-utils` |
-| `noop`, `usePageScrollLock`, ref utilities | `@toptal/picasso-utils` |
-| `twMerge`, `twJoin` | `@toptal/picasso-tailwind-merge` |
-| `cx` | `classnames` |
+| Symbol                                                                                                          | Source                           |
+| --------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| `StandardProps`, `BaseProps`, `TextLabelProps`, `SizeType`, `OverridableComponent`, `useIsomorphicLayoutEffect` | `@toptal/picasso-shared`         |
+| `render` (test wrapper), `fireEvent`, test types                                                                | `@toptal/picasso-test-utils`     |
+| `noop`, `usePageScrollLock`, ref utilities                                                                      | `@toptal/picasso-utils`          |
+| `twMerge`, `twJoin`                                                                                             | `@toptal/picasso-tailwind-merge` |
+| `cx`                                                                                                            | `classnames`                     |
 
 `withClasses` from `@toptal/picasso-utils` is **deprecated** — do not introduce new usages.
 
@@ -521,8 +530,15 @@ export { default as Modal, type ModalProps } from './Modal'
 
 ```ts
 // packages/picasso/src/index.ts
-export { ButtonCompound as Button, ButtonCircular } from '@toptal/picasso-button'
-export type { ButtonProps, ButtonCheckboxProps, ButtonRadioProps } from '@toptal/picasso-button'
+export {
+  ButtonCompound as Button,
+  ButtonCircular,
+} from '@toptal/picasso-button'
+export type {
+  ButtonProps,
+  ButtonCheckboxProps,
+  ButtonRadioProps,
+} from '@toptal/picasso-button'
 ```
 
 (source: `code-standards.md §"Re-export pattern"`)
@@ -532,6 +548,7 @@ export type { ButtonProps, ButtonCheckboxProps, ButtonRadioProps } from '@toptal
 - Location: `<Component>/story/<Domain>.example.tsx`. NEVER a central `stories.ts` index.
 - One example per file. Filename in PascalCase, matches the story title kebab-cased in URLs.
 - Story registration in `story/index.jsx` via the PicassoBook API. Canonical chain — see `docs/contribution/creating-examples.md` for the full method surface:
+
   ```js
   import PicassoBook from '@toptal/picasso-book'
 
@@ -542,9 +559,10 @@ export type { ButtonProps, ButtonCheckboxProps, ButtonRadioProps } from '@toptal
     .addExample('Button/story/Primary.example.tsx', 'Primary')
     .addExample('Button/story/Ghost.example.tsx', {
       title: 'Ghost',
-      screenshotBreakpoints: true,    // responsive component → all breakpoints
+      screenshotBreakpoints: true, // responsive component → all breakpoints
     })
   ```
+
 - `.example.tsx` files exempt from SSR rules, multi-comp rule, and a number of `@typescript-eslint` rules.
 
 (source: `code-standards.md §"*.example.tsx story files"` + `docs/contribution/creating-examples.md`)
@@ -588,7 +606,9 @@ const Switch = (props: Props) => {
     <BaseUISwitch.Root
       {...rest}
       checked={checked ?? false}
-      onCheckedChange={(c, { event }) => onChange?.(toReactChangeEvent(event), c)}
+      onCheckedChange={(c, { event }) =>
+        onChange?.(toReactChangeEvent(event), c)
+      }
     />
   )
 }
@@ -608,19 +628,19 @@ const Switch = (props: Props) => {
 
 Base UI ships **behavior, accessibility, and composition** — not styles. Every primitive renders with no className, no inline style, no opinion about appearance. The kit author owns every styling decision.
 
-Every primitive is split into named **parts** (`Menu.Root`, `Menu.Trigger`, `Menu.Portal`, `Menu.Positioner`, `Menu.Popup`, `Menu.Item`). Style each part *directly*. There is no top-level `slots`/`slotProps`/`classes` indirection.
+Every primitive is split into named **parts** (`Menu.Root`, `Menu.Trigger`, `Menu.Portal`, `Menu.Positioner`, `Menu.Popup`, `Menu.Item`). Style each part _directly_. There is no top-level `slots`/`slotProps`/`classes` indirection.
 
 ### The five mechanisms · **RULE**
 
 Every styling and override decision reduces to combinations of these five. Internalize them once.
 
-| Mechanism | What it controls | Reach for it when |
-| --- | --- | --- |
-| **1. `className` prop** | Classes on the DOM node | Always — every styling decision starts here |
-| **2. `render` prop** | DOM tag and wrapper component | Replacing the element, integrating with `<Link>`, framer-motion, custom kit components |
-| **3. `data-*` state attributes** | State-driven styling without React subscriptions | Hover, open, checked, disabled, side-positioning, animation phases |
-| **4. CSS variables (`--var`)** | Values Base UI computes (positions, sizes, transform origins) | Position-anchored animation, popup sizing, geometry-driven layout |
-| **5. `style` prop (static or function-of-state)** | Inline styles | Last resort — computed values that cannot be expressed as classes |
+| Mechanism                                         | What it controls                                              | Reach for it when                                                                      |
+| ------------------------------------------------- | ------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| **1. `className` prop**                           | Classes on the DOM node                                       | Always — every styling decision starts here                                            |
+| **2. `render` prop**                              | DOM tag and wrapper component                                 | Replacing the element, integrating with `<Link>`, framer-motion, custom kit components |
+| **3. `data-*` state attributes**                  | State-driven styling without React subscriptions              | Hover, open, checked, disabled, side-positioning, animation phases                     |
+| **4. CSS variables (`--var`)**                    | Values Base UI computes (positions, sizes, transform origins) | Position-anchored animation, popup sizing, geometry-driven layout                      |
+| **5. `style` prop (static or function-of-state)** | Inline styles                                                 | Last resort — computed values that cannot be expressed as classes                      |
 
 Every part exposes the consistent signature:
 
@@ -643,9 +663,9 @@ import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 twMerge(
   'px-4 text-sm',
-  isLarge && 'px-6 text-base',         // conditional via && — works directly
+  isLarge && 'px-6 text-base', // conditional via && — works directly
   variant === 'primary' ? 'bg-blue-500' : 'bg-transparent',
-  className                            // consumer override LAST
+  className // consumer override LAST
 )
 ```
 
@@ -676,10 +696,10 @@ export function CheckboxRoot({ className, ...props }: Checkbox.Root.Props) {
           // state
           'data-[checked]:bg-neutral-900 data-[checked]:text-white',
           // focus
-          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900',
+          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900'
         ),
         // consumer override wins (rightmost in twMerge)
-        className,
+        className
       )}
       {...props}
     />
@@ -701,11 +721,11 @@ Every part exposing state accepts a function form:
 
 ```tsx
 <Switch.Thumb
-  className={(state) =>
+  className={state =>
     twMerge(
       'block size-4 rounded-full transition-transform',
       state.checked ? 'translate-x-4 bg-white' : 'translate-x-0 bg-neutral-300',
-      state.disabled && 'opacity-50',
+      state.disabled && 'opacity-50'
     )
   }
 />
@@ -719,11 +739,16 @@ Prefer the function form **only when data-attribute variants are awkward** — u
 
 ```ts
 // styles.ts
-export function createSizeClassNames(size: 'small' | 'medium' | 'large'): string[] {
+export function createSizeClassNames(
+  size: 'small' | 'medium' | 'large'
+): string[] {
   switch (size) {
-    case 'small':  return ['text-button-small',  'px-3', 'h-8']
-    case 'medium': return ['text-button-medium', 'px-4', 'h-10']
-    case 'large':  return ['text-button-large',  'px-6', 'h-12']
+    case 'small':
+      return ['text-button-small', 'px-3', 'h-8']
+    case 'medium':
+      return ['text-button-medium', 'px-4', 'h-10']
+    case 'large':
+      return ['text-button-large', 'px-6', 'h-12']
   }
 }
 ```
@@ -764,7 +789,7 @@ TypeScript exhaustiveness on the discriminated union catches missed variants at
 ### `render` prop — compose with a custom component · **RULE**
 
 ```tsx
-<Menu.Trigger render={<MyButton size="md" />}>Open menu</Menu.Trigger>
+<Menu.Trigger render={<MyButton size='md' />}>Open menu</Menu.Trigger>
 ```
 
 `MyButton` is a normal component. Base UI calls it with `<MyButton {...injectedProps} size="md">Open menu</MyButton>` and expects `MyButton` to spread `injectedProps` onto its root DOM element. This is how you reuse the kit's `Button` as the trigger for a `Menu`, `Dialog`, or `Popover` without duplicating styling.
@@ -790,11 +815,13 @@ When your props collide with Base UI's injected ones (notably event handlers and
 ```tsx
 import { mergeProps } from '@base-ui/react/merge-props'
 
-<Switch.Thumb
+;<Switch.Thumb
   render={(props, state) => (
     <span
       {...mergeProps<'span'>(props, {
-        className: twMerge(cx('size-4 rounded-full', state.checked && 'bg-white')),
+        className: twMerge(
+          cx('size-4 rounded-full', state.checked && 'bg-white')
+        ),
         onClick: () => console.log('clicked'),
       })}
     />
@@ -826,7 +853,8 @@ interface ButtonProps extends useRender.ComponentProps<'button'> {}
 export function Button({ render, ...props }: ButtonProps) {
   const defaultProps: useRender.ElementProps<'button'> = {
     type: 'button',
-    className: 'inline-flex h-10 items-center rounded-md bg-gray-50 px-3.5 hover:bg-gray-100',
+    className:
+      'inline-flex h-10 items-center rounded-md bg-gray-50 px-3.5 hover:bg-gray-100',
   }
 
   return useRender({
@@ -852,26 +880,26 @@ Base UI exposes every meaningful piece of state as a `data-*` attribute on the D
 
 #### Vocabulary (non-exhaustive)
 
-| Attribute | Components | Meaning |
-| --- | --- | --- |
-| `data-checked` / `data-unchecked` | Checkbox, Switch, Radio, Menu.RadioItem | Toggle / selection state |
-| `data-disabled` | All interactive parts | Disabled state |
-| `data-readonly` | Field, NumberField | Read-only field |
-| `data-required` | Field | Required field |
-| `data-valid` / `data-invalid` | Field children | Validation state (inside `Field.Root`) |
-| `data-dirty` / `data-touched` / `data-filled` / `data-focused` | Field children | Form interaction state |
-| `data-open` / `data-closed` | Dialog, Popover, Menu, Select, Tooltip, Drawer, Accordion, Collapsible | Visibility |
-| `data-popup-open` | Menu.Trigger, Select.Trigger, Popover.Trigger, NavigationMenu.Trigger | Whether the associated popup is open |
-| `data-highlighted` | Menu.Item, Select.Item, Combobox.Item | Keyboard / pointer highlight |
-| `data-selected` | Select.Item, Tabs.Tab | Selection state |
-| `data-side` (`top`/`right`/`bottom`/`left`/`none`) | Popover, Menu, Tooltip popups + arrows | Computed popup side |
-| `data-align` (`start`/`center`/`end`) | Positioner, Arrow | Alignment relative to anchor |
-| `data-orientation` (`horizontal`/`vertical`) | Slider, Tabs, Toolbar, Separator, Accordion | Layout direction |
-| `data-starting-style` | Animatable popups, toasts | Present for one frame on enter |
-| `data-ending-style` | Same | Present during exit |
-| `data-instant` | Animated parts | Animation should skip |
-| `data-activation-direction` | NavigationMenu | Direction of last activation |
-| `data-dragging` | Slider.Thumb | User is dragging |
+| Attribute                                                      | Components                                                             | Meaning                                |
+| -------------------------------------------------------------- | ---------------------------------------------------------------------- | -------------------------------------- |
+| `data-checked` / `data-unchecked`                              | Checkbox, Switch, Radio, Menu.RadioItem                                | Toggle / selection state               |
+| `data-disabled`                                                | All interactive parts                                                  | Disabled state                         |
+| `data-readonly`                                                | Field, NumberField                                                     | Read-only field                        |
+| `data-required`                                                | Field                                                                  | Required field                         |
+| `data-valid` / `data-invalid`                                  | Field children                                                         | Validation state (inside `Field.Root`) |
+| `data-dirty` / `data-touched` / `data-filled` / `data-focused` | Field children                                                         | Form interaction state                 |
+| `data-open` / `data-closed`                                    | Dialog, Popover, Menu, Select, Tooltip, Drawer, Accordion, Collapsible | Visibility                             |
+| `data-popup-open`                                              | Menu.Trigger, Select.Trigger, Popover.Trigger, NavigationMenu.Trigger  | Whether the associated popup is open   |
+| `data-highlighted`                                             | Menu.Item, Select.Item, Combobox.Item                                  | Keyboard / pointer highlight           |
+| `data-selected`                                                | Select.Item, Tabs.Tab                                                  | Selection state                        |
+| `data-side` (`top`/`right`/`bottom`/`left`/`none`)             | Popover, Menu, Tooltip popups + arrows                                 | Computed popup side                    |
+| `data-align` (`start`/`center`/`end`)                          | Positioner, Arrow                                                      | Alignment relative to anchor           |
+| `data-orientation` (`horizontal`/`vertical`)                   | Slider, Tabs, Toolbar, Separator, Accordion                            | Layout direction                       |
+| `data-starting-style`                                          | Animatable popups, toasts                                              | Present for one frame on enter         |
+| `data-ending-style`                                            | Same                                                                   | Present during exit                    |
+| `data-instant`                                                 | Animated parts                                                         | Animation should skip                  |
+| `data-activation-direction`                                    | NavigationMenu                                                         | Direction of last activation           |
+| `data-dragging`                                                | Slider.Thumb                                                           | User is dragging                       |
 
 Each component's reference page (`base-ui.com/react/components/<name>`) lists the complete table — always cross-reference before assuming.
 
@@ -879,11 +907,11 @@ Each component's reference page (`base-ui.com/react/components/<name>`) lists th
 
 ```tsx
 <Menu.Item
-  className="
+  className='
     flex cursor-default items-center gap-2 px-3 py-2 text-sm
     data-[highlighted]:bg-neutral-900 data-[highlighted]:text-white
     data-[disabled]:opacity-50 data-[disabled]:pointer-events-none
-  "
+  '
 >
   Add to library
 </Menu.Item>
@@ -893,20 +921,20 @@ For attributes with values, bracketed variants:
 
 ```tsx
 <Tooltip.Arrow
-  className="
+  className='
     data-[side=top]:bottom-[-6px]    data-[side=top]:rotate-180
     data-[side=bottom]:top-[-6px]
     data-[side=left]:right-[-9px]    data-[side=left]:rotate-90
     data-[side=right]:left-[-9px]    data-[side=right]:-rotate-90
-  "
+  '
 />
 ```
 
 When the state lives on a **parent** part, use `group-data-[…]:`:
 
 ```tsx
-<Select.Popup className="group …">
-  <Select.Item className="… group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)]" />
+<Select.Popup className='group …'>
+  <Select.Item className='… group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)]' />
 </Select.Popup>
 ```
 
@@ -916,15 +944,15 @@ When the state lives on a **parent** part, use `group-data-[…]:`:
 
 ### CSS variables Base UI exposes · **Preferred**
 
-| Variable | On part | Use |
-| --- | --- | --- |
-| `--transform-origin` | Popover/Menu/Select/Tooltip `Popup` | `transform-origin` so scale-in/out anchors to the trigger |
-| `--available-width` / `--available-height` | Positioner / Popup | Maximum size without colliding with viewport edge |
-| `--anchor-width` / `--anchor-height` | Same | Trigger size — useful for `min-width: var(--anchor-width)` |
-| `--positioner-width` / `--positioner-height` | Positioner | Fixed positioner dimensions |
-| `--active-tab-{left,right,top,bottom,width,height}` | Tabs.Indicator | Active-tab geometry for animated indicators |
-| `--scroll-area-overflow-y-{start,end}` | ScrollArea.Viewport | Top/bottom overflow for fade masks |
-| `--drawer-swipe-progress`, `--drawer-swipe-movement-{x,y}` | Drawer | Live swipe state |
+| Variable                                                   | On part                             | Use                                                        |
+| ---------------------------------------------------------- | ----------------------------------- | ---------------------------------------------------------- |
+| `--transform-origin`                                       | Popover/Menu/Select/Tooltip `Popup` | `transform-origin` so scale-in/out anchors to the trigger  |
+| `--available-width` / `--available-height`                 | Positioner / Popup                  | Maximum size without colliding with viewport edge          |
+| `--anchor-width` / `--anchor-height`                       | Same                                | Trigger size — useful for `min-width: var(--anchor-width)` |
+| `--positioner-width` / `--positioner-height`               | Positioner                          | Fixed positioner dimensions                                |
+| `--active-tab-{left,right,top,bottom,width,height}`        | Tabs.Indicator                      | Active-tab geometry for animated indicators                |
+| `--scroll-area-overflow-y-{start,end}`                     | ScrollArea.Viewport                 | Top/bottom overflow for fade masks                         |
+| `--drawer-swipe-progress`, `--drawer-swipe-movement-{x,y}` | Drawer                              | Live swipe state                                           |
 
 Consume from Tailwind arbitrary values:
 
@@ -943,12 +971,12 @@ Base UI sets `data-starting-style` for one frame at the start of an enter transi
 
 ```tsx
 <Popover.Popup
-  className="
+  className='
     origin-[var(--transform-origin)]
     transition-[transform,opacity] duration-150
     data-[starting-style]:scale-90 data-[starting-style]:opacity-0
     data-[ending-style]:scale-90   data-[ending-style]:opacity-0
-  "
+  '
 />
 ```
 
@@ -962,12 +990,14 @@ Picasso's external polymorphic prop is `as` (per R11). Internally, wrappers tran
 
 ```tsx
 // Consumer-facing: as prop (unchanged Picasso API)
-<Button as="a" href="/dashboard">Go</Button>
+;<Button as='a' href='/dashboard'>
+  Go
+</Button>
 
 // Wrapper internally translates to Base UI's render mechanism
 export const Button = forwardRef<HTMLElement, ButtonProps>(function Button(
   { as, ...rest },
-  ref,
+  ref
 ) {
   return (
     <BaseButton.Root
@@ -1062,15 +1092,15 @@ Two ladders, both reviewer-enforced — don't conflate. **Override-preference**
 
 Pick the lowest rung; PRs that skip rungs get blocked.
 
-| Rung | Mechanism | When |
-| --- | --- | --- |
-| **-1** | **Don't override** (check FIRST) | Restructure DOM to Base UI's native parts, OR accept Base UI's geometry as an approved sub-pixel improvement. |
-| 1 | `className` + `data-[…]:` variants | State-driven styling with a documented data attribute. |
-| 2 | `className` function-of-state | Value depends on multiple state combos (rare). |
-| 3 | `render` prop + `mergeProps` filtering | Change element type, compose, or strip/filter Base UI's injected `style`. |
-| 4 | `useRender` + `mergeProps` | Build a primitive exposing its own `render`. |
-| 5 | inline `style` on the part | Last resort: rung 3 impractical AND not class-expressible AND rung -1 doesn't apply. |
-| ⊘ | `!important` | NEVER — you skipped a rung. |
+| Rung   | Mechanism                              | When                                                                                                          |
+| ------ | -------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| **-1** | **Don't override** (check FIRST)       | Restructure DOM to Base UI's native parts, OR accept Base UI's geometry as an approved sub-pixel improvement. |
+| 1      | `className` + `data-[…]:` variants     | State-driven styling with a documented data attribute.                                                        |
+| 2      | `className` function-of-state          | Value depends on multiple state combos (rare).                                                                |
+| 3      | `render` prop + `mergeProps` filtering | Change element type, compose, or strip/filter Base UI's injected `style`.                                     |
+| 4      | `useRender` + `mergeProps`             | Build a primitive exposing its own `render`.                                                                  |
+| 5      | inline `style` on the part             | Last resort: rung 3 impractical AND not class-expressible AND rung -1 doesn't apply.                          |
+| ⊘      | `!important`                           | NEVER — you skipped a rung.                                                                                   |
 
 Rung 3 beats rung 5 (cleaner, removable, composes). Full doctrine + worked Slider example: `base-ui-styling.md §7.1`.
 
@@ -1101,7 +1131,7 @@ Always check `tokens/picasso-tailwind-tokens.md` first. **Only as a last resort*
 
 ### Use Tailwind for all styling · **RULE**
 
-No `.css`/`.scss`/`.module.css`; no JSS (`makeStyles`/`createStyles`/`withStyles`/`&$selector` parent-refs); no inline `style` for static values (inline `style` only for runtime-computed numbers, e.g. `style={{ width: size * 4 }}`). Anything CSS-shaped is Tailwind classes (or `string[]` helpers). Existing JSS components (Tier 2 Radio, Tier 3 Page, charts/RTE) are migration targets, not pattern sources. (`docs/contribution/css-naming.md` is **LEGACY** — see `CLAUDE.md` / `practices.md §"css-naming.md is LEGACY"`.)
+No `.css`/`.scss`/`.module.css`; no JSS (`makeStyles`/`createStyles`/`withStyles`/`&$selector` parent-refs); no inline `style` for static values (inline `style` only for runtime-computed numbers, e.g. `style={{ width: size * 4 }}`). Anything CSS-shaped is Tailwind classes (or `string[]` helpers). Existing JSS components (Tier 2 Radio, Tier 3 Page, charts/RTE) are migration targets, not pattern sources. (The legacy `docs/contribution/css-naming.md` was **REMOVED** in the post-canary hygiene sweep — see `practices.md §"css-naming.md is REMOVED"`.)
 
 (source: `rules/styling.md §"What to avoid"`)
 
@@ -1134,15 +1164,15 @@ Pattern table for translating common JSS shapes into Picasso Tailwind. Use along
 
 MUI's `theme.spacing(N)` returns `N * 8px`. **Always verify the px value** before picking a Picasso token — Picasso tokens are 4px-based.
 
-| JSS                          | px    | Picasso Tailwind |
-|---|---|---|
-| `padding: spacing(1)`        | 8px   | `p-2`  |
-| `padding: spacing(2)`        | 16px  | `p-4`  |
-| `padding: spacing(3)`        | 24px  | `p-6`  |
-| `padding: spacing(4)`        | 32px  | `p-8`  |
-| `marginLeft: spacing(0.5)`   | 4px   | `ml-1` |
-| `marginLeft: '1rem'`         | 16px  | `ml-4` |
-| `marginRight: '0.5rem'`      | 8px   | `mr-2` |
+| JSS                        | px   | Picasso Tailwind |
+| -------------------------- | ---- | ---------------- |
+| `padding: spacing(1)`      | 8px  | `p-2`            |
+| `padding: spacing(2)`      | 16px | `p-4`            |
+| `padding: spacing(3)`      | 24px | `p-6`            |
+| `padding: spacing(4)`      | 32px | `p-8`            |
+| `marginLeft: spacing(0.5)` | 4px  | `ml-1`           |
+| `marginLeft: '1rem'`       | 16px | `ml-4`           |
+| `marginRight: '0.5rem'`    | 8px  | `mr-2`           |
 
 ### Color
 
@@ -1156,14 +1186,14 @@ When translating a JSS color expression:
 
 ### Hover / focus / disabled
 
-| JSS                                       | Picasso Tailwind |
-|---|---|
-| `'&:hover': { backgroundColor: ... }`     | `hover:bg-...` |
-| `'&:focus': { outline: ... }`             | `focus:outline-...` |
-| `'&:focus-visible': { ... }`              | `focus-visible:...` |
-| `'&:disabled': { opacity: 0.5 }`          | `disabled:opacity-50` |
-| `'&[disabled]': { ... }`                  | `disabled:...` |
-| `'&:not(:last-child)': { marginRight }`   | `[&:not(:last-child)]:mr-4` (arbitrary variant) |
+| JSS                                     | Picasso Tailwind                                |
+| --------------------------------------- | ----------------------------------------------- |
+| `'&:hover': { backgroundColor: ... }`   | `hover:bg-...`                                  |
+| `'&:focus': { outline: ... }`           | `focus:outline-...`                             |
+| `'&:focus-visible': { ... }`            | `focus-visible:...`                             |
+| `'&:disabled': { opacity: 0.5 }`        | `disabled:opacity-50`                           |
+| `'&[disabled]': { ... }`                | `disabled:...`                                  |
+| `'&:not(:last-child)': { marginRight }` | `[&:not(:last-child)]:mr-4` (arbitrary variant) |
 
 ### Parent-refs
 
@@ -1174,9 +1204,9 @@ The big one. JSS allows `&$expanded` to mean "this element when the parent has t
 const useStyles = makeStyles(() => ({
   panel: {
     marginTop: 0,
-    '&$expanded': { marginTop: 16 }
+    '&$expanded': { marginTop: 16 },
   },
-  expanded: {}
+  expanded: {},
 }))
 
 // Tailwind (do)
@@ -1189,92 +1219,92 @@ Or, when the state belongs on a parent and the styling on a child, use `data-*`
 
 ```tsx
 <Accordion data-state={expanded ? 'open' : 'closed'}>
-  <Panel className="data-[state=open]:mt-4" />
+  <Panel className='data-[state=open]:mt-4' />
 </Accordion>
 ```
 
 ### Pseudo-elements
 
-| JSS                                     | Picasso Tailwind |
-|---|---|
-| `'&::before': { content: '""' }`        | `before:content-['']` |
-| `'&::after': { ... }`                   | `after:...` |
-| `'&::placeholder': { color: ... }`      | `placeholder:text-...` |
+| JSS                                | Picasso Tailwind       |
+| ---------------------------------- | ---------------------- |
+| `'&::before': { content: '""' }`   | `before:content-['']`  |
+| `'&::after': { ... }`              | `after:...`            |
+| `'&::placeholder': { color: ... }` | `placeholder:text-...` |
 
 ### Responsive
 
-| JSS                                                  | Picasso Tailwind |
-|---|---|
-| `[theme.breakpoints.up('md')]: { display: 'flex' }` | `md:flex` |
+| JSS                                                 | Picasso Tailwind                                    |
+| --------------------------------------------------- | --------------------------------------------------- |
+| `[theme.breakpoints.up('md')]: { display: 'flex' }` | `md:flex`                                           |
 | `[theme.breakpoints.down('sm')]: { ... }`           | `max-sm:...` (or invert: write the default for ≥sm) |
-| `[theme.breakpoints.between('md', 'lg')]: { ... }`  | `md:max-lg:...` |
+| `[theme.breakpoints.between('md', 'lg')]: { ... }`  | `md:max-lg:...`                                     |
 
 ### Transitions
 
-| JSS                                                   | Picasso Tailwind |
-|---|---|
-| `transition: 'all 150ms ease-in-out'`                 | `transition duration-150 ease-in-out` |
+| JSS                                                       | Picasso Tailwind                                                     |
+| --------------------------------------------------------- | -------------------------------------------------------------------- |
+| `transition: 'all 150ms ease-in-out'`                     | `transition duration-150 ease-in-out`                                |
 | `transition: 'transform 200ms cubic-bezier(0.4,0,0.2,1)'` | `transition-transform duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]` |
-| `transitionDuration: '350ms'`                         | `duration-350` (Picasso token) |
+| `transitionDuration: '350ms'`                             | `duration-350` (Picasso token)                                       |
 
 ### Shadows
 
-| JSS                          | Picasso Tailwind |
-|---|---|
-| `boxShadow: shadows[1]`      | `shadow-1` (notification, paper) |
-| `boxShadow: shadows[2]`      | `shadow-2` (modal) |
-| `boxShadow: shadows[4]`      | `shadow-4` (tooltip) |
-| `boxShadow: 'none'`          | `shadow-0` |
-| `boxShadow: shadows[6..24]`  | `shadow-6` … `shadow-24` (legacy MUI parity; do not introduce new uses) |
+| JSS                         | Picasso Tailwind                                                        |
+| --------------------------- | ----------------------------------------------------------------------- |
+| `boxShadow: shadows[1]`     | `shadow-1` (notification, paper)                                        |
+| `boxShadow: shadows[2]`     | `shadow-2` (modal)                                                      |
+| `boxShadow: shadows[4]`     | `shadow-4` (tooltip)                                                    |
+| `boxShadow: 'none'`         | `shadow-0`                                                              |
+| `boxShadow: shadows[6..24]` | `shadow-6` … `shadow-24` (legacy MUI parity; do not introduce new uses) |
 
 ### Z-index
 
-| JSS                              | Picasso Tailwind |
-|---|---|
-| `zIndex: zIndex.drawer`          | `z-drawer` (1200) |
-| `zIndex: zIndex.modal`           | `z-modal` (1300) |
-| `zIndex: zIndex.snackbar`        | `z-snackbar` (1400) |
+| JSS                       | Picasso Tailwind    |
+| ------------------------- | ------------------- |
+| `zIndex: zIndex.drawer`   | `z-drawer` (1200)   |
+| `zIndex: zIndex.modal`    | `z-modal` (1300)    |
+| `zIndex: zIndex.snackbar` | `z-snackbar` (1400) |
 
 ### Border radius
 
-| JSS                          | Picasso Tailwind |
-|---|---|
-| `borderRadius: 0`            | `rounded-none` |
-| `borderRadius: 4`            | `rounded-sm` |
-| `borderRadius: 8`            | `rounded-md` |
-| `borderRadius: '50%'`        | `rounded-full` |
+| JSS                   | Picasso Tailwind |
+| --------------------- | ---------------- |
+| `borderRadius: 0`     | `rounded-none`   |
+| `borderRadius: 4`     | `rounded-sm`     |
+| `borderRadius: 8`     | `rounded-md`     |
+| `borderRadius: '50%'` | `rounded-full`   |
 
 ### Font
 
-| JSS                                             | Picasso Tailwind |
-|---|---|
-| `fontFamily: '"proxima-nova", Arial, sans-serif'` | `font-sans` |
-| `fontWeight: 600`                                | `font-semibold` |
-| `fontWeight: 400`                                | `font-regular` |
-| `fontSize: '0.875rem'` + `lineHeight: '1.375rem'` | `text-md` |
-| `fontSize: '1rem'` + `lineHeight: '1.5rem'`      | `text-lg` |
+| JSS                                               | Picasso Tailwind |
+| ------------------------------------------------- | ---------------- |
+| `fontFamily: '"proxima-nova", Arial, sans-serif'` | `font-sans`      |
+| `fontWeight: 600`                                 | `font-semibold`  |
+| `fontWeight: 400`                                 | `font-regular`   |
+| `fontSize: '0.875rem'` + `lineHeight: '1.375rem'` | `text-md`        |
+| `fontSize: '1rem'` + `lineHeight: '1.5rem'`       | `text-lg`        |
 
 ### Layout
 
-| JSS                                       | Picasso Tailwind |
-|---|---|
-| `display: 'flex'`                         | `flex` |
-| `display: 'inline-flex'`                  | `inline-flex` |
-| `flexDirection: 'column'`                 | `flex-col` |
-| `alignItems: 'center'`                    | `items-center` |
-| `justifyContent: 'space-between'`         | `justify-between` |
-| `position: 'absolute'`                    | `absolute` |
-| `inset: 0`                                | `inset-0` |
-| `width: '100%'`                           | `w-full` |
-| `width: '18.75rem'`                       | `w-input` (Picasso semantic token) |
+| JSS                               | Picasso Tailwind                   |
+| --------------------------------- | ---------------------------------- |
+| `display: 'flex'`                 | `flex`                             |
+| `display: 'inline-flex'`          | `inline-flex`                      |
+| `flexDirection: 'column'`         | `flex-col`                         |
+| `alignItems: 'center'`            | `items-center`                     |
+| `justifyContent: 'space-between'` | `justify-between`                  |
+| `position: 'absolute'`            | `absolute`                         |
+| `inset: 0`                        | `inset-0`                          |
+| `width: '100%'`                   | `w-full`                           |
+| `width: '18.75rem'`               | `w-input` (Picasso semantic token) |
 
 ### Dynamic values
 
-| JSS                                          | Picasso Tailwind |
-|---|---|
-| `width: ${size * 4}px`                       | `style={{ width: size * 4 }}` (numeric runtime) |
-| `width: ${size}px` where size ∈ {120,160,200} | `w-[120px]` / `w-[160px]` / `w-[200px]` (purgeable) |
-| `transform: rotate(${angle}deg)`             | `style={{ transform: \`rotate(${angle}deg)\` }}` |
+| JSS                                             | Picasso Tailwind                                            |
+| ----------------------------------------------- | ----------------------------------------------------------- |
+| `width: ${size * 4}px`                          | `style={{ width: size * 4 }}` (numeric runtime)             |
+| `width: ${size}px` where size ∈ {120,160,200}   | `w-[120px]` / `w-[160px]` / `w-[200px]` (purgeable)         |
+| `transform: rotate(${angle}deg)`                | `style={{ transform: \`rotate(${angle}deg)\` }}`            |
 | `gridTemplateColumns: \`repeat(${cols}, 1fr)\`` | `style={{ gridTemplateColumns: \`repeat(${cols}, 1fr)\` }}` |
 
 ### Worked example 1: JSS parent-ref selector → data-attribute selector
@@ -1322,14 +1352,18 @@ export const createRootClassNames = (expanded: boolean): string[] => [
 **Before (JSS with dynamic selector)**:
 
 ```ts
-const styles = (theme) => createStyles({
-  root: ({ variant, disabled }) => ({
-    backgroundColor: variant === 'primary'
-      ? (disabled ? theme.palette.grey[400] : theme.palette.primary.main)
-      : 'transparent',
-    cursor: disabled ? 'not-allowed' : 'pointer',
-  }),
-})
+const styles = theme =>
+  createStyles({
+    root: ({ variant, disabled }) => ({
+      backgroundColor:
+        variant === 'primary'
+          ? disabled
+            ? theme.palette.grey[400]
+            : theme.palette.primary.main
+          : 'transparent',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    }),
+  })
 ```
 
 **After (Tailwind conditional array)**:
@@ -1363,8 +1397,8 @@ export const createVariantClassNames = (
 ```ts
 const styles = createStyles({
   root: {
-    backgroundColor: '#4269D6',  // some specific Picasso brand variant
-    borderRadius: '6px',         // non-token, picked by designer
+    backgroundColor: '#4269D6', // some specific Picasso brand variant
+    borderRadius: '6px', // non-token, picked by designer
   },
 })
 ```
@@ -1374,8 +1408,8 @@ const styles = createStyles({
 ```tsx
 // styles.ts
 export const createRootClassNames = (): string[] => [
-  'bg-[#4269D6]',     // TODO(tokens): brand-blue-variant — designer can confirm canonical name
-  'rounded-[6px]',    // TODO(tokens): 6px isn't on the 4px scale; verify if intentional or rounded-md (4px) acceptable
+  'bg-[#4269D6]', // TODO(tokens): brand-blue-variant — designer can confirm canonical name
+  'rounded-[6px]', // TODO(tokens): 6px isn't on the 4px scale; verify if intentional or rounded-md (4px) acceptable
 ]
 ```
 
@@ -1386,17 +1420,18 @@ export const createRootClassNames = (): string[] => [
 **Before (JSS pseudo with state guard)**:
 
 ```ts
-const styles = (theme) => createStyles({
-  root: {
-    backgroundColor: theme.palette.primary.main,
-    '&:hover:not(:disabled)': {
-      backgroundColor: theme.palette.primary.dark,
+const styles = theme =>
+  createStyles({
+    root: {
+      backgroundColor: theme.palette.primary.main,
+      '&:hover:not(:disabled)': {
+        backgroundColor: theme.palette.primary.dark,
+      },
+      '&:focus-visible': {
+        outline: `2px solid ${theme.palette.primary.main}`,
+      },
     },
-    '&:focus-visible': {
-      outline: `2px solid ${theme.palette.primary.main}`,
-    },
-  },
-})
+  })
 ```
 
 **After (Tailwind state modifiers)**:
@@ -1404,9 +1439,9 @@ const styles = (theme) => createStyles({
 ```tsx
 // styles.ts
 export const createInteractiveClassNames = (): string[] => [
-  'bg-blue-500',                            // primary.main
-  'hover:enabled:bg-blue-600',              // primary.dark on hover, but only when not disabled
-  'focus-visible:outline-2',                // 2px outline
+  'bg-blue-500', // primary.main
+  'hover:enabled:bg-blue-600', // primary.dark on hover, but only when not disabled
+  'focus-visible:outline-2', // 2px outline
   'focus-visible:outline-blue-500',
 ]
 ```
@@ -1418,19 +1453,20 @@ export const createInteractiveClassNames = (): string[] => [
 **Before (JSS spacing helpers)**:
 
 ```ts
-const styles = (theme) => createStyles({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > * + *': {
-      marginTop: theme.spacing(2),  // 16px between children
+const styles = theme =>
+  createStyles({
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      '& > * + *': {
+        marginTop: theme.spacing(2), // 16px between children
+      },
     },
-  },
-  inline: {
-    display: 'flex',
-    gap: theme.spacing(1),  // 8px between flex items
-  },
-})
+    inline: {
+      display: 'flex',
+      gap: theme.spacing(1), // 8px between flex items
+    },
+  })
 ```
 
 **After (Tailwind space-/gap-)**:
@@ -1440,12 +1476,12 @@ const styles = (theme) => createStyles({
 export const createStackClassNames = (): string[] => [
   'flex',
   'flex-col',
-  'space-y-4',  // theme.spacing(2) = 16px → space-y-4 (4 × 4 = 16)
+  'space-y-4', // theme.spacing(2) = 16px → space-y-4 (4 × 4 = 16)
 ]
 
 export const createInlineClassNames = (): string[] => [
   'flex',
-  'gap-2',      // theme.spacing(1) = 8px → gap-2 (2 × 4 = 8)
+  'gap-2', // theme.spacing(1) = 8px → gap-2 (2 × 4 = 8)
 ]
 ```
 
@@ -1467,15 +1503,15 @@ export const createInlineClassNames = (): string[] => [
 
 All enforced repo-wide via root `.eslintrc.js`:
 
-| Rule | Severity | What it enforces |
-|---|---|---|
-| `local-rules/future-proof-deprecation-warning` | warn | Deprecation comments preceded by warnings. |
-| `todo-plz/ticket-ref` | warn | TODO/FIXME/@deprecated must reference Jira `[ABC-1234]` or URL. |
-| `@toptal/davinci/no-package-self-imports` | **error** | Sub-packages MUST NOT import from aggregate `@toptal/picasso`. |
-| `no-restricted-imports` (useLayoutEffect) | **error** | `useLayoutEffect` from React is forbidden — use `useIsomorphicLayoutEffect` from `@toptal/picasso-shared` (SSR-safe). |
-| `ssr-friendly/no-dom-globals-in-*` | warn (source); off (examples/tests) | No `window`, `document` in module scope, constructor, or render. |
-| `@typescript-eslint/no-explicit-any` | error (source); off (tests) | No `any` in component source. |
-| `react/no-multi-comp` | off in `.example.tsx` only | Multiple components per file are allowed only in stories. |
+| Rule                                           | Severity                            | What it enforces                                                                                                      |
+| ---------------------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `local-rules/future-proof-deprecation-warning` | warn                                | Deprecation comments preceded by warnings.                                                                            |
+| `todo-plz/ticket-ref`                          | warn                                | TODO/FIXME/@deprecated must reference Jira `[ABC-1234]` or URL.                                                       |
+| `@toptal/davinci/no-package-self-imports`      | **error**                           | Sub-packages MUST NOT import from aggregate `@toptal/picasso`.                                                        |
+| `no-restricted-imports` (useLayoutEffect)      | **error**                           | `useLayoutEffect` from React is forbidden — use `useIsomorphicLayoutEffect` from `@toptal/picasso-shared` (SSR-safe). |
+| `ssr-friendly/no-dom-globals-in-*`             | warn (source); off (examples/tests) | No `window`, `document` in module scope, constructor, or render.                                                      |
+| `@typescript-eslint/no-explicit-any`           | error (source); off (tests)         | No `any` in component source.                                                                                         |
+| `react/no-multi-comp`                          | off in `.example.tsx` only          | Multiple components per file are allowed only in stories.                                                             |
 
 When editing **orchestrator code** (`bin/lib/*.ts`), additional ESLint rules trip in CI's "Static checks" — see `CLAUDE.md` §"Code style for orchestrator". That's operator-facing, not Picasso component code.
 
@@ -1494,7 +1530,9 @@ Instead of `useLayoutEffect`. Count of `useLayoutEffect` in source: 0 — fully
 ```ts
 import { useIsomorphicLayoutEffect } from '@toptal/picasso-shared'
 
-useIsomorphicLayoutEffect(() => { /* ... */ }, [deps])
+useIsomorphicLayoutEffect(() => {
+  /* ... */
+}, [deps])
 ```
 
 (source: `code-standards.md §"SSR safety"`)
@@ -1515,8 +1553,12 @@ No `window`, `document` in module scope, constructor, or render — only inside
 
 ```ts
 describe('Button', () => {
-  describe('when loading is true', () => { /* ... */ })
-  describe('when disabled', () => { /* ... */ })
+  describe('when loading is true', () => {
+    /* ... */
+  })
+  describe('when disabled', () => {
+    /* ... */
+  })
 })
 ```
 
@@ -1530,7 +1572,11 @@ A local function that wraps `render()` from `@toptal/picasso-test-utils`, presel
 
 ```tsx
 const renderButton = (props: Partial<OmitInternalProps<Props>> = {}) =>
-  render(<Button {...defaultProps} {...props}>Click</Button>)
+  render(
+    <Button {...defaultProps} {...props}>
+      Click
+    </Button>
+  )
 ```
 
 (source: `code-standards.md §"Test conventions"`)
@@ -1572,12 +1618,10 @@ Set `screenshotBreakpoints: true` on the example registration in `<Component>/st
 
 ```ts
 const page = PicassoBook.section('Component').createPage('FooComponent')
-page
-  .createChapter()
-  .addExample('Foo/story/Default.example.tsx', {
-    title: 'Default',
-    screenshotBreakpoints: true,
-  })
+page.createChapter().addExample('Foo/story/Default.example.tsx', {
+  title: 'Default',
+  screenshotBreakpoints: true,
+})
 ```
 
 #### Pattern 2: Cypress component test (interaction needed before screenshot)
@@ -1686,7 +1730,7 @@ grep '@base-ui/react' pnpm-lock.yaml
 
 ### peer-vs-dev split for build-time deps · **RULE**
 
-If a runtime dep is used at compile time (e.g. `withClasses` consuming `@toptal/picasso-tailwind-merge`), the package needs it as a **`devDependency`** for its own `tsc -b` resolution, not just as a `peerDependency` — peerDeps are only seen by *consumers* of the package, not by the package's own build.
+If a runtime dep is used at compile time (e.g. `withClasses` consuming `@toptal/picasso-tailwind-merge`), the package needs it as a **`devDependency`** for its own `tsc -b` resolution, not just as a `peerDependency` — peerDeps are only seen by _consumers_ of the package, not by the package's own build.
 
 (source: `rules/package-and-build.md §"peer-vs-dev split"`)
 
@@ -1714,12 +1758,12 @@ When dropping a workspace dependency from `package.json` (e.g. removing the Back
 
 Picasso has 4 build-config layers; touching one usually requires updating the others:
 
-| File | Purpose |
-|---|---|
-| `packages/<pkg>/tsconfig.build.json` | Used by `tsc -b` during package build for publishing. `paths` reference other Picasso packages. |
-| `/tsconfig.json` (root) | Dev-time IDE resolution + base config for per-package extends. `paths` are also used by Storybook to resolve cross-package imports in code examples. |
-| `/.storybook/tsconfig.json` | Storybook build inclusion (Storybook-only files). |
-| `/.storybook/webpack.config.js` `alias` | Required for cross-package import resolution at Storybook build time (works in combination with root `tsconfig.json` `paths`). |
+| File                                    | Purpose                                                                                                                                              |
+| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `packages/<pkg>/tsconfig.build.json`    | Used by `tsc -b` during package build for publishing. `paths` reference other Picasso packages.                                                      |
+| `/tsconfig.json` (root)                 | Dev-time IDE resolution + base config for per-package extends. `paths` are also used by Storybook to resolve cross-package imports in code examples. |
+| `/.storybook/tsconfig.json`             | Storybook build inclusion (Storybook-only files).                                                                                                    |
+| `/.storybook/webpack.config.js` `alias` | Required for cross-package import resolution at Storybook build time (works in combination with root `tsconfig.json` `paths`).                       |
 
 **Migration impact**: when you drop a workspace dep from `package.json`, ALSO remove the matching `references` entry from `packages/<pkg>/tsconfig.json` (Drawer iter 2 precedent — `tsc -b` failed Build job despite `pnpm install` succeeding).
 
@@ -1752,6 +1796,7 @@ Apply the taxonomy above to whatever the PR actually changes. No bump tier is re
 - **`patch`** is correct for a pure library swap (`@mui/base` → `@base-ui/react` or `@material-ui/core` → `@base-ui/react`) when the public Props API is identical, types match, and behavioral parity is verified by snapshot + Happo + unit tests. The CI gates (Jest, Lint, Visual Tests) are the contract that "no consumer-visible change" actually holds.
 
   **Rationale for why a library swap alone does NOT force major:**
+
   - `@mui/base`, `@material-ui/core`, `@mui/*` are Picasso `dependencies`, NOT `peerDependencies`. Consumers do not have them in their `package.json`. Swapping them is invisible at the consumer dep tree.
   - The `react: < 19.0.0` peer cap lift is not a major-trigger on its own — widening a peer range is not a breaking change for any existing consumer (they continue to resolve the React version they already use). Tightening a range is breaking; widening is not.
   - Behavioral parity is verified by CI gates; we don't preemptively `major` on the chance of a regression. If a regression slips, that's a `patch` followup fix.
@@ -1782,10 +1827,11 @@ For `@deprecated` props with `_unused` destructure: name them and the planned re
 
 ```markdown
 ---
-'@toptal/picasso-<name>': patch  # or minor / major — pick per the taxonomy above
+'@toptal/picasso-<name>': patch # or minor / major — pick per the taxonomy above
 ---
 
 ### <ComponentName>
+
 - what changed in one sentence (e.g., "Re-implement on `@base-ui/react`; public API unchanged.")
 - IF minor: the new prop / value / behavior added
 - IF major: the specific breaking surface (named prop removed, default flipped, etc.) — required
@@ -1818,13 +1864,13 @@ Authoritative source: `docs/contribution/github-workflow.md:14-20` and `docs/con
 
 Every PR push runs these jobs automatically (~4 min total):
 
-| Job | What it checks |
-|---|---|
-| **Danger** | Commit conventions (capital-letter start, imperative mood, no trailing period, ≤79 chars). Re-runs when PR title changes. |
-| **Jest Test** | Unit-test snapshots (not visual tests). |
-| **Lint** | ESLint repo-wide. |
-| **Visual Tests** | Happo visual regression (see §16). |
-| **Deploy docs** | Live Storybook preview for the PR branch. |
+| Job              | What it checks                                                                                                            |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| **Danger**       | Commit conventions (capital-letter start, imperative mood, no trailing period, ≤79 chars). Re-runs when PR title changes. |
+| **Jest Test**    | Unit-test snapshots (not visual tests).                                                                                   |
+| **Lint**         | ESLint repo-wide.                                                                                                         |
+| **Visual Tests** | Happo visual regression (see §16).                                                                                        |
+| **Deploy docs**  | Live Storybook preview for the PR branch.                                                                                 |
 
 (source: `code-standards.md §"CI job pipeline"`)
 
@@ -1864,10 +1910,10 @@ INTENTIONAL deltas are allowed **only** when an "Approved visual deltas" section
 
 ### Two complementary visual tools · **Convention**
 
-| Tool | Strength | Use it for |
-|---|---|---|
-| **Playwright MCP** | Fast feedback, interactive (hover/click/focus/keyboard), surfaces console errors + accessibility tree + runtime warnings | Live iteration during development. Catch obvious regressions FAST before the slower Happo cycle. |
-| **Happo** | Authoritative pixel-diff against persisted baselines, designer-approval workflow, parallel browser/viewport coverage, CI-gating | Final regression authority. Even if Playwright says "looks fine to me", Happo is the source of truth — must be green (or all diffs marked intentional with operator approval). |
+| Tool               | Strength                                                                                                                        | Use it for                                                                                                                                                                     |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Playwright MCP** | Fast feedback, interactive (hover/click/focus/keyboard), surfaces console errors + accessibility tree + runtime warnings        | Live iteration during development. Catch obvious regressions FAST before the slower Happo cycle.                                                                               |
+| **Happo**          | Authoritative pixel-diff against persisted baselines, designer-approval workflow, parallel browser/viewport coverage, CI-gating | Final regression authority. Even if Playwright says "looks fine to me", Happo is the source of truth — must be green (or all diffs marked intentional with operator approval). |
 
 Playwright is the **fast iteration tool**. Happo is the **authoritative gate**.
 
@@ -1888,11 +1934,11 @@ Verification happens on `http://localhost:9001` (worktree-local Storybook) vs `h
 
 Every Happo diff falls into one of three classes:
 
-| Class | Definition | Action |
-|---|---|---|
-| **REGRESSION** | DEFAULT for any non-zero pixel diff on a story whose `component` field matches the migration target | Fix in source. Iterate Tailwind/CSS until local matches baseline byte-for-byte. |
-| **UNRELATED FLAKE** | The diff's `component` field does NOT match the migration target | Document briefly, do not fix. Happo's flakes resolve on re-run. |
-| **INTENTIONAL** | Pre-approved design-led change with operator authorization | Allowed ONLY if `docs/migration/components/<Component>.md` has an "Approved visual deltas" section enumerating the specific delta. |
+| Class               | Definition                                                                                          | Action                                                                                                                             |
+| ------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| **REGRESSION**      | DEFAULT for any non-zero pixel diff on a story whose `component` field matches the migration target | Fix in source. Iterate Tailwind/CSS until local matches baseline byte-for-byte.                                                    |
+| **UNRELATED FLAKE** | The diff's `component` field does NOT match the migration target                                    | Document briefly, do not fix. Happo's flakes resolve on re-run.                                                                    |
+| **INTENTIONAL**     | Pre-approved design-led change with operator authorization                                          | Allowed ONLY if `docs/migration/components/<Component>.md` has an "Approved visual deltas" section enumerating the specific delta. |
 
 (source: `happo-iteration.md §"Classification matrix"`)
 
@@ -1924,6 +1970,7 @@ For example: `slider/thumb/SliderThumb.js`, `tooltip/popup/TooltipPopup.js`. Loo
 jsdom (jest test env) does NOT serialize the `translate:` / `rotate:` / `scale:` CSS properties into the `style=""` attribute. So a Jest snapshot showing `style="position: absolute; inset-inline-start: X%; top: 50%"` (no translate) does NOT prove the library doesn't center — Chrome (Happo / Playwright) renders it differently.
 
 Use either:
+
 - (a) the library source itself, or
 - (b) the Playwright/picasso.toptal.net screenshot comparison,
 
@@ -1946,6 +1993,7 @@ When Happo shows a positional shift (~2-5 px) on a migrated component, **stop gu
 Reviewers can ask for `computed-styles-baseline.json` + `computed-styles-local.json` as evidence of diagnosis before accepting a fix. Stalemate is forbidden until ≥ 2 fix attempts have targeted properties from the computed-style diff (Slider PR #4955 burned 5 iterations skipping this).
 
 Common `@base-ui/react` compensations:
+
 - New `data-*` attribute on slot → add `[data-attr]:<style>` selector replicating prior visual.
 - Mirror old `:focus-visible` under `data-[focused]:`.
 - Adjust geometry via `gap`/`p-*`/`m-*` when wrapper elements shift.
@@ -1965,7 +2013,7 @@ Common `@base-ui/react` compensations:
 
 ```tsx
 <BaseUIButton
-  className="data-[focused]:outline-2 data-[focused]:outline-offset-2 data-[focused]:outline-blue-500"
+  className='data-[focused]:outline-2 data-[focused]:outline-offset-2 data-[focused]:outline-blue-500'
   // (was: "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500")
 />
 ```
@@ -1987,7 +2035,7 @@ Common `@base-ui/react` compensations:
 **Fix**: adjust `gap`, `p-*`, or `m-*` on the new wrapper so geometry stays identical to the old DOM:
 
 ```tsx
-<Drawer.Popup className="-m-1 p-1">{children}</Drawer.Popup>
+<Drawer.Popup className='-m-1 p-1'>{children}</Drawer.Popup>
 // Negative outer margin compensates the new wrapper's intrinsic border.
 ```
 
@@ -2010,7 +2058,7 @@ Every migration PR (and most large feature PRs) opens with this shape, each sect
 
 - <Decision 1>: <what you chose> because <why>. <cite rule/decision doc if one applies>
 - <Decision 2>: ...
-(2-4 bullets focused on choices a reviewer would otherwise ask about: classes-shim path, behavioral parity shims, patches applied to vendor deps, JSS-to-Tailwind compromises.)
+  (2-4 bullets focused on choices a reviewer would otherwise ask about: classes-shim path, behavioral parity shims, patches applied to vendor deps, JSS-to-Tailwind compromises.)
 
 ## Limitations / Out-of-scope
 
@@ -2131,16 +2179,16 @@ If the audit contradicts the source state → STOP, update the audit doc, don't
 
 #### Decision matrix
 
-| Tier | Component(s) | Action |
-|---|---|---|
-| **Tier 0** | Button, Backdrop, Badge, Drawer, Slider, Switch, Tabs | `extends Omit<StandardProps, 'classes'>` + destructure `classes: _classes` runtime backstop. `classes` was broken since the @mui/base step; 0 internal/external real usage. Reference: PR #4947 Button.tsx + ButtonBase.tsx. |
-| **Tier 0 — Modal** | Modal | Re-verify. External consumers use `<Modal classes={{ closeButton }}>` per audit §6/§9 — may need Tier 3.b treatment (keep narrowed) instead of standard Tier 0 drop. |
-| **Tier 1 vestigial** | Container, Typography, Notification | Drop via `Omit<StandardProps, 'classes'>` + runtime backstop. Audit-verified vestigial (0 internal, 0 external). Bundle into Tier 1 cleanup PR. |
-| **Tier 1 — FormControlLabel** | FormControlLabel | KEEP locally narrowed `classes?: { root?, label? }`. Used internally by Switch/Radio/Checkbox. |
-| **Tier 1 no `classes` API** | FormLabel, Grid, Form, Note, Menu, FormLayout, ModalContext, Utils | No-op. |
-| **Tier 2** | Checkbox, Radio, Tooltip, FileInput, Popper | `Omit` drop public. Internal MUI plumbing rewrites with the `@base-ui/react` migration. Audit-verified 0 external real usage. |
-| **Tier 3.a** | Accordion, Page | `Omit` drop public. Rewrite internal slot-routing on `@base-ui/react` parts. |
-| **Tier 3.b** | Dropdown, OutlinedInput | **KEEP locally narrowed `classes?: { ... }`** (Dropdown: `{ popper, content }`; OutlinedInput: `{ input, root }`). Real external consumers depend on these slots — Dropdown 2 callsites, OutlinedInput 4 callsites. |
+| Tier                          | Component(s)                                                       | Action                                                                                                                                                                                                                       |
+| ----------------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Tier 0**                    | Button, Backdrop, Badge, Drawer, Slider, Switch, Tabs              | `extends Omit<StandardProps, 'classes'>` + destructure `classes: _classes` runtime backstop. `classes` was broken since the @mui/base step; 0 internal/external real usage. Reference: PR #4947 Button.tsx + ButtonBase.tsx. |
+| **Tier 0 — Modal**            | Modal                                                              | Re-verify. External consumers use `<Modal classes={{ closeButton }}>` per audit §6/§9 — may need Tier 3.b treatment (keep narrowed) instead of standard Tier 0 drop.                                                         |
+| **Tier 1 vestigial**          | Container, Typography, Notification                                | Drop via `Omit<StandardProps, 'classes'>` + runtime backstop. Audit-verified vestigial (0 internal, 0 external). Bundle into Tier 1 cleanup PR.                                                                              |
+| **Tier 1 — FormControlLabel** | FormControlLabel                                                   | KEEP locally narrowed `classes?: { root?, label? }`. Used internally by Switch/Radio/Checkbox.                                                                                                                               |
+| **Tier 1 no `classes` API**   | FormLabel, Grid, Form, Note, Menu, FormLayout, ModalContext, Utils | No-op.                                                                                                                                                                                                                       |
+| **Tier 2**                    | Checkbox, Radio, Tooltip, FileInput, Popper                        | `Omit` drop public. Internal MUI plumbing rewrites with the `@base-ui/react` migration. Audit-verified 0 external real usage.                                                                                                |
+| **Tier 3.a**                  | Accordion, Page                                                    | `Omit` drop public. Rewrite internal slot-routing on `@base-ui/react` parts.                                                                                                                                                 |
+| **Tier 3.b**                  | Dropdown, OutlinedInput                                            | **KEEP locally narrowed `classes?: { ... }`** (Dropdown: `{ popper, content }`; OutlinedInput: `{ input, root }`). Real external consumers depend on these slots — Dropdown 2 callsites, OutlinedInput 4 callsites.          |
 
 **End-state target**: once all 28 components migrate, `StandardProps`, `JssProps`, `Classes` removed from `@toptal/picasso-shared`. Dropdown + OutlinedInput permanently retain their locally narrowed `classes?: { ... }`.
 
@@ -2150,24 +2198,24 @@ If the audit contradicts the source state → STOP, update the audit doc, don't
 
 From `_survey-findings.md §H` (current per-rule compliance across 28 components):
 
-| Rule | Current compliance | Migration action |
-|---|---|---|
-| R1 Optimize defaults for common case | 28/28 ✓ | Maintain — apply to new props. |
-| R2 Reuse prop names across components | 28/28 ✓ | Maintain. |
-| R3 Keep prop names short and simple | 28/28 ✓ | Maintain. |
-| R4 Mirror native HTML prop names | 28/28 ✓ | Maintain. |
-| R5 Style overrides only via `className`/`style` | 26/28 (Modal, Typography legacy) | Preserve legacy. Apply to NEW slots. |
-| R6 Prefer `children` over content props | 28/28 ✓ | Maintain. |
-| R7 Use `rem` for sizes | 100% (Tailwind tokens enforce) | Maintain — token system handles it. |
-| R8 Align tokens with BASE design system | 100% (via `picasso-tailwind`) | Maintain — `tokens/picasso-tailwind-tokens.md`. |
-| R9 `variant` as string-literal union | 28/28 ✓ | Maintain. |
-| R10 Extends `BaseProps` | 20/28 (3 use StandardProps, 5 mixed) | Preserve existing. Apply to NEW components only. |
-| R11 `as` to change rendered element | Where applicable, ✓ | Maintain. |
-| R12 Shared `SizeType` scale | 100% where size prop exists | Maintain. |
-| R13 Shared `Palette` + `ColorSample` | 100% where color prop exists | Maintain. |
-| R14 No `is`/`has`/`should` prefix | 28/28 ✓ | Maintain. NEW boolean props use bare adjectives. |
-| R15 Compound components for multi-part | 4/28 (Modal, Accordion, Drawer, Button-family) | Optional — only for 3+ distinct sub-parts. |
-| R16 `testIds` object | 6/28 (Modal, Accordion, Slider, Tooltip, FileInput, RTE) | Optional — only for multi-part addressable test selectors. |
+| Rule                                            | Current compliance                                       | Migration action                                           |
+| ----------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------------------- |
+| R1 Optimize defaults for common case            | 28/28 ✓                                                  | Maintain — apply to new props.                             |
+| R2 Reuse prop names across components           | 28/28 ✓                                                  | Maintain.                                                  |
+| R3 Keep prop names short and simple             | 28/28 ✓                                                  | Maintain.                                                  |
+| R4 Mirror native HTML prop names                | 28/28 ✓                                                  | Maintain.                                                  |
+| R5 Style overrides only via `className`/`style` | 26/28 (Modal, Typography legacy)                         | Preserve legacy. Apply to NEW slots.                       |
+| R6 Prefer `children` over content props         | 28/28 ✓                                                  | Maintain.                                                  |
+| R7 Use `rem` for sizes                          | 100% (Tailwind tokens enforce)                           | Maintain — token system handles it.                        |
+| R8 Align tokens with BASE design system         | 100% (via `picasso-tailwind`)                            | Maintain — `tokens/picasso-tailwind-tokens.md`.            |
+| R9 `variant` as string-literal union            | 28/28 ✓                                                  | Maintain.                                                  |
+| R10 Extends `BaseProps`                         | 20/28 (3 use StandardProps, 5 mixed)                     | Preserve existing. Apply to NEW components only.           |
+| R11 `as` to change rendered element             | Where applicable, ✓                                      | Maintain.                                                  |
+| R12 Shared `SizeType` scale                     | 100% where size prop exists                              | Maintain.                                                  |
+| R13 Shared `Palette` + `ColorSample`            | 100% where color prop exists                             | Maintain.                                                  |
+| R14 No `is`/`has`/`should` prefix               | 28/28 ✓                                                  | Maintain. NEW boolean props use bare adjectives.           |
+| R15 Compound components for multi-part          | 4/28 (Modal, Accordion, Drawer, Button-family)           | Optional — only for 3+ distinct sub-parts.                 |
+| R16 `testIds` object                            | 6/28 (Modal, Accordion, Slider, Tooltip, FileInput, RTE) | Optional — only for multi-part addressable test selectors. |
 
 For form components (F1–F3): verify on a per-component basis. Survey did not deep-audit form-field compliance.
 
@@ -2287,18 +2335,21 @@ One-line bullets reviewers can scan a diff against, grouped by section. Cross-re
 This doc is a synthesis. For deeper dives, the authoritative sources are:
 
 ### Picasso API & code standards
+
 - [`PICASSO_COMPONENT_DESIGN_PATTERNS.md`](../../PICASSO_COMPONENT_DESIGN_PATTERNS.md) (repo root) — 16 + 3 canonical rules
 - [`docs/migration/references/code-standards.md`](../migration/references/code-standards.md) — file structure, types, JSDoc, Tailwind composition, ESLint, tests, changesets, CI
 - [`docs/migration/references/practices.md`](../migration/references/practices.md) — graduated migration patterns
 - [`docs/migration/references/design-patterns-addendum.md`](../migration/references/design-patterns-addendum.md) — migration carve-outs + architectural exceptions
 
 ### Base UI styling
+
 - [`docs/migration/references/base-ui-styling.md`](../migration/references/base-ui-styling.md) — full Base UI v1 styling doctrine
 - [`docs/modernization/base-ui-styling-strategy.md`](base-ui-styling-strategy.md) — framework-agnostic kit-author strategy (sibling)
 - [`docs/migration/rules/styling.md`](../migration/rules/styling.md) — non-negotiable Tailwind/Base UI rules
 - [`docs/migration/rules/base-ui-react-api-crib.md`](../migration/rules/base-ui-react-api-crib.md) — `@base-ui/react` component patterns
 
 ### Migration-specific
+
 - [`docs/migration/rules/package-and-build.md`](../migration/rules/package-and-build.md) — pnpm / lockfile / build policy
 - [`docs/migration/rules/jss-to-tailwind-crib.md`](../migration/rules/jss-to-tailwind-crib.md) — JSS → Tailwind pattern table + worked examples
 - [`docs/migration/rules/api-preservation.md`](../migration/rules/api-preservation.md) — prop surface rules
@@ -2308,6 +2359,7 @@ This doc is a synthesis. For deeper dives, the authoritative sources are:
 - [`docs/migration/references/_survey-findings.md`](../migration/references/_survey-findings.md) — 28-component evidence base
 
 ### Contribution baseline (predate the migration, but still authoritative on shared concepts)
+
 - [`docs/contribution/component-api.md`](../contribution/component-api.md) — compound vs facade patterns, prop-naming Q&A
 - [`docs/contribution/unit-testing.md`](../contribution/unit-testing.md) — test wiring + debugging
 - [`docs/contribution/changeset-guidelines.md`](../contribution/changeset-guidelines.md) — full version-bump rules
@@ -2319,10 +2371,12 @@ This doc is a synthesis. For deeper dives, the authoritative sources are:
 - [`docs/contribution/new-component-creation.md`](../contribution/new-component-creation.md) — `pnpm generate:component` scaffolding tool
 
 ### Operator-facing (NOT review-relevant — listed for completeness)
+
 - [`docs/migration/ORCHESTRATOR.md`](../migration/ORCHESTRATOR.md) — orchestrator runbook (CLI flags, kill switch, output paths)
 - [`docs/migration/PROMPT-light.md`](../migration/PROMPT-light.md), [`PROMPT-heavy.md`](../migration/PROMPT-heavy.md) — agent migration prompts
 - [`docs/migration/PROMPT-review-response.md`](../migration/PROMPT-review-response.md) — agent review-response protocol
 - [`CLAUDE.md`](../../CLAUDE.md) — operator working notes
 
-### Legacy (DO NOT use as canonical)
-- `docs/contribution/css-naming.md` — describes MUI v4 + JSS conventions (`root` + `rootFull`/`rootShrink` for variants, `classes` prop pattern). These predate the Tailwind migration. For migrated components, use §6 / §7 / §8 of this doc instead.
+### Legacy (removed from the repo)
+
+- `docs/contribution/css-naming.md` + `docs/contribution/jss-onboarding.md` — described MUI v4 + JSS conventions (`root` + `rootFull`/`rootShrink` for variants, `classes` prop pattern) predating the Tailwind migration. **Deleted in the post-canary hygiene sweep (2026-07-13)**; for migrated components, use §6 / §7 / §8 of this doc instead.
diff --git a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
index 78362bf5f4..54f9a72131 100644
--- a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
+++ b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Accordion renders collapsed by default 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative bg-transparent text-[1rem] text-graphite before:content-[""] before:absolute before:left-0 before:right-0 before:h-[1px] before:bg-gray before:-top after:content-[""] after:absolute after:left-0 after:right-0 after:-bottom after:h-[1px] after:bg-gray [[data-component"
@@ -103,7 +103,7 @@ exports[`Accordion renders collapsed by default 1`] = `
 exports[`Accordion renders custom icon when passed 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative bg-transparent text-[1rem] text-graphite before:content-[""] before:absolute before:left-0 before:right-0 before:h-[1px] before:bg-gray before:-top after:content-[""] after:absolute after:left-0 after:right-0 after:-bottom after:h-[1px] after:bg-gray [[data-component"
@@ -197,7 +197,7 @@ exports[`Accordion renders custom icon when passed 1`] = `
 exports[`Accordion renders disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative bg-transparent text-[1rem] text-graphite before:content-[""] before:absolute before:left-0 before:right-0 before:h-[1px] before:bg-gray before:-top after:content-[""] after:absolute after:left-0 after:right-0 after:-bottom after:h-[1px] after:bg-gray [[data-component"
diff --git a/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap b/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap
index d92fee5dae..08aaab465c 100644
--- a/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap
+++ b/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AccordionDetails renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex p-0"
diff --git a/packages/base/Accordion/src/AccordionSummary/__snapshots__/test.tsx.snap b/packages/base/Accordion/src/AccordionSummary/__snapshots__/test.tsx.snap
index b6d29c6c57..7fdbdb9469 100644
--- a/packages/base/Accordion/src/AccordionSummary/__snapshots__/test.tsx.snap
+++ b/packages/base/Accordion/src/AccordionSummary/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AccordionSummary renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative flex items-center select-none cursor-pointer focus-visible:bg-black/12 outline-none py-[0.5625em] px-0 font-semibold text-black data-disabled:pointer-events"
diff --git a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
index f5b752538b..22f0323a98 100644
--- a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AccountSelect renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ul
       class="relative list-none outline-hidden shadow-1 m-0 rounded-sm p-0"
diff --git a/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap b/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
index 29ef72b626..eda2a44afe 100644
--- a/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
+++ b/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Alert renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="bg-yellow border border-solid border-yellow gap-4 p-4 justify-between rounded-md flex"
diff --git a/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap b/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap
index 42873542fa..9191b9442a 100644
--- a/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap
+++ b/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Alert renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="inline-flex text-lg/[1.375em]"
diff --git a/packages/base/Amount/src/Amount/__snapshots__/test.tsx.snap b/packages/base/Amount/src/Amount/__snapshots__/test.tsx.snap
index b520096cce..e446b155a6 100644
--- a/packages/base/Amount/src/Amount/__snapshots__/test.tsx.snap
+++ b/packages/base/Amount/src/Amount/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Amount renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="m-0 font-inherit leading-[1.5em] text-green font-regular inline"
diff --git a/packages/base/ApplicationUpdateNotification/src/ApplicationUpdateNotification/__snapshots__/test.tsx.snap b/packages/base/ApplicationUpdateNotification/src/ApplicationUpdateNotification/__snapshots__/test.tsx.snap
index 8b24daf81a..152ed78223 100644
--- a/packages/base/ApplicationUpdateNotification/src/ApplicationUpdateNotification/__snapshots__/test.tsx.snap
+++ b/packages/base/ApplicationUpdateNotification/src/ApplicationUpdateNotification/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ApplicationUpdateNotification renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative flex flex-wrap text-lg/[1.43] items-center rounded-md bg-blue shadow-3 w-[27.5em] text-white p-[1.5em] overflow-hidden"
diff --git a/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap b/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
index 618e85b4fb..747d8ff2f3 100644
--- a/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
+++ b/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
@@ -227,7 +227,7 @@ exports[`Autocomplete dynamic behavior renders other option with default text 1`
 exports[`Autocomplete static behavior renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       aria-expanded="false"
diff --git a/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap b/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
index 0d596b99c8..9b15b03e6b 100644
--- a/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
+++ b/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AvatarUpload renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative flex justify-center items-center text-blue outline-hidden cursor-pointer w-[5rem] h-[5rem]"
diff --git a/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap b/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
index ac01dbfb27..e27ff8a63a 100644
--- a/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
+++ b/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Badge renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="inline-flex shrink-0 content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite static"
@@ -21,7 +21,7 @@ exports[`Badge renders 1`] = `
 exports[`Badge renders in red variant 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="inline-flex shrink-0 content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite static"
diff --git a/packages/base/Button/src/Button/__snapshots__/test.tsx.snap b/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
index 046d8608c6..766e42607b 100644
--- a/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Button disabled button as link renders disabled version 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <a
       aria-disabled="true"
@@ -28,7 +28,7 @@ exports[`Button disabled button as link renders disabled version 1`] = `
 exports[`Button disabled button renders disabled version 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="true"
diff --git a/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
index 711d86a681..7a24a5ed4b 100644
--- a/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "button" when "href" prop is passed renders Button as a link 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       aria-disabled="false"
@@ -27,7 +27,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
 exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "button" when "to" prop is passed renders Button as a link 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       aria-disabled="false"
@@ -51,7 +51,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
 exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" component renders Button as a 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <a
       aria-disabled="false"
@@ -75,7 +75,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
 exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" component when "disabled" prop is true renders Button as a and does not trigger onClick handler 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <a
       aria-disabled="true"
@@ -100,7 +100,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
 exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" component when "href" prop is empty renders Button as a 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <a
       aria-disabled="false"
@@ -124,7 +124,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
 exports[`ButtonBase when "as" prop is passed when "as" prop equals "a" renders Button as a 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <a
       aria-disabled="false"
@@ -148,7 +148,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "a" renders B
 exports[`ButtonBase when "disabled" prop is false renders Button and does not trigger onClick handler 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="false"
@@ -171,7 +171,7 @@ exports[`ButtonBase when "disabled" prop is false renders Button and does not tr
 exports[`ButtonBase when "disabled" prop is true renders Button and does not trigger onClick handler 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="true"
@@ -196,7 +196,7 @@ exports[`ButtonBase when "disabled" prop is true renders Button and does not tri
 exports[`ButtonBase when "loading" prop is true renders Button with loading state and does not trigger onClick handler 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="false"
@@ -246,7 +246,7 @@ exports[`ButtonBase when "loading" prop is true renders Button with loading stat
 exports[`ButtonBase when "role" prop is passed renders Button with a custom role 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="false"
@@ -269,7 +269,7 @@ exports[`ButtonBase when "role" prop is passed renders Button with a custom role
 exports[`ButtonBase when "titleCase" prop is true renders Button with transformed text to title case 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="false"
diff --git a/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
index 13e65bf4e4..4798cdedc7 100644
--- a/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`ButtonCheckbox renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <label
       aria-disabled="false"
       class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
       data-component-type="button"
-      id="base-ui-:r2:"
+      id="base-ui-:r3:"
       role="button"
       tabindex="0"
       type="button"
@@ -22,10 +22,10 @@ exports[`ButtonCheckbox renders 1`] = `
         >
           <span
             aria-checked="false"
-            aria-labelledby="base-ui-:r2:"
+            aria-labelledby="base-ui-:r3:"
             class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
             data-unchecked=""
-            id="base-ui-:r0:"
+            id="base-ui-:r1:"
             role="checkbox"
             tabindex="0"
           />
diff --git a/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
index ef599dcdf8..5f1ea6ffa3 100644
--- a/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ButtonGroup render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex justify-start items-start [[data-component-type="button"]+&]:ml [&>[data-component-type="button"]:hover]:z [&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r [&>[data-component-type="button"]:first-child:not(:last-child)]:ml [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[ [&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l [&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[ [&_:first-child:not(:last-child)_[data-component-type="button"]]:rounded-r [&_:first-child:not(:last-child)_[data-component-type="button"]]:ml [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:rounded [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:ml-[ [&_:last-child:not(:first-child)_[data-component-type="button"]]:rounded-l [&_:last-child:not(:first-child)_[data-component-type="button"]]:ml-["
diff --git a/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
index b0c9b9fed0..adb62acdd2 100644
--- a/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ButtonRadio renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <label
       aria-disabled="false"
diff --git a/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
index b081a9f8f9..6c5a21bf79 100644
--- a/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
@@ -15,7 +15,7 @@ exports[`ButtonSplit closes menu on click to the item 1`] = `
 exports[`ButtonSplit default render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex justify-start items-start [[data-component-type="button"]+&]:ml [&>[data-component-type="button"]:hover]:z [&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r [&>[data-component-type="button"]:first-child:not(:last-child)]:ml [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[ [&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l [&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[ [&_:first-child:not(:last-child)_[data-component-type="button"]]:rounded-r [&_:first-child:not(:last-child)_[data-component-type="button"]]:ml [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:rounded [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:ml-[ [&_:last-child:not(:first-child)_[data-component-type="button"]]:rounded-l [&_:last-child:not(:first-child)_[data-component-type="button"]]:ml-["
diff --git a/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap b/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
index 9385c264e9..299b20904c 100644
--- a/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
+++ b/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Calendar renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       tabindex="0"
diff --git a/packages/base/Checkbox/src/Checkbox/Checkbox.tsx b/packages/base/Checkbox/src/Checkbox/Checkbox.tsx
index 8126d996ac..f4958f917a 100644
--- a/packages/base/Checkbox/src/Checkbox/Checkbox.tsx
+++ b/packages/base/Checkbox/src/Checkbox/Checkbox.tsx
@@ -1,4 +1,5 @@
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox'
+import { useBaseUiId } from '@base-ui/react/internals/useBaseUiId'
 import type {
   ButtonOrAnchorProps,
   BaseProps,
@@ -52,91 +53,101 @@ export interface Props
   value?: string
 }
 
-export const Checkbox = forwardRef<HTMLButtonElement | HTMLLabelElement, Props>(
-  function Checkbox(
-    { disabled = false, indeterminate = false, onChange = () => {}, ...props },
-    ref
-  ) {
-    const {
-      label,
-      id,
-      className,
-      style,
-      labelStyle,
-      requiredDecoration,
-      value,
-      checked,
-      titleCase,
-      ...rest
-    } = props
+export const Checkbox = forwardRef<
+  HTMLButtonElement | HTMLLabelElement | HTMLDivElement,
+  Props
+>(function Checkbox(
+  { disabled = false, indeterminate = false, onChange = () => {}, ...props },
+  ref
+) {
+  const {
+    label,
+    id,
+    className,
+    style,
+    labelStyle,
+    requiredDecoration,
+    value,
+    checked,
+    titleCase,
+    ...rest
+  } = props
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { color, 'data-private': dataPrivate, ...checkboxAttributes } = rest
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { color, 'data-private': dataPrivate, ...checkboxAttributes } = rest
 
-    // Element-variance boundary: `Props` extends button/anchor HTML attributes,
-    // but BaseCheckbox.Root renders a <span>. The event-handler element types
-    // are runtime-compatible, so we resolve the variance once here instead of
-    // narrowing the public API.
-    const rootRest = checkboxAttributes as CheckboxRootProps
+  // Element-variance boundary: `Props` extends button/anchor HTML attributes,
+  // but BaseCheckbox.Root renders a <span>. The event-handler element types
+  // are runtime-compatible, so we resolve the variance once here instead of
+  // narrowing the public API.
+  const rootRest = checkboxAttributes as CheckboxRootProps
 
-    const checkboxElement = (
-      // Tame Base UI's visually-hidden <input>, which ships
-      // `position:absolute; top:0; left:0; margin:-1px` (inline). `relative` +
-      // the `translate-px` pair anchor it inside the 16px box so its bounds
-      // don't grow the rendered box past the legacy size (fixes the Happo
-      // dimension_mismatch). `appearance-none` keeps the native control from
-      // ever painting now that the input sits over the box.
-      <span className='relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x-px [&_input]:translate-y-px'>
-        <BaseCheckbox.Root
-          {...rootRest}
-          ref={label ? undefined : (ref as React.Ref<HTMLElement>)}
-          checked={checked}
-          disabled={disabled}
-          id={id}
-          value={value}
-          indeterminate={indeterminate}
-          onCheckedChange={(nextChecked, { event }) =>
-            onChange(toReactChangeEvent(event), nextChecked)
-          }
-          className={twMerge(checkboxClassNames, className)}
-          style={style}
-        />
-      </span>
-    )
+  // Name the control via `aria-labelledby` so it is the single
+  // label-associated node (see FormControlLabel `labelId`). Only relevant
+  // when there is a label to point at. `useBaseUiId` wraps `React.useId`
+  // with a React < 18 fallback, matching base-ui's own peer support.
+  const generatedLabelId = useBaseUiId()
+  const labelId = label ? generatedLabelId : undefined
 
-    if (!label) {
-      return checkboxElement
-    }
-
-    const externalEventListeners = {
-      onMouseLeave: rest.onMouseLeave,
-      onMouseOver: rest.onMouseOver,
-    } as ComponentProps<typeof FormControlLabel>
-
-    return (
-      <FormControlLabel
-        {...externalEventListeners}
-        style={labelStyle}
-        ref={ref as React.ForwardedRef<HTMLLabelElement>}
-        classes={{
-          root: 'text-[1rem]',
-          label: twJoin(
-            'max-w-[calc(100%_-_1.5em_+_1px)]',
-            'ml-[0.5em]',
-            disabled && 'text-gray-500'
-          ),
-        }}
-        control={checkboxElement}
-        requiredDecoration={requiredDecoration}
+  const checkboxElement = (
+    // Tame Base UI's visually-hidden <input>, which ships
+    // `position:absolute; top:0; left:0; margin:-1px` (inline). `relative` +
+    // the `translate-px` pair anchor it inside the 16px box so its bounds
+    // don't grow the rendered box past the legacy size (fixes the Happo
+    // dimension_mismatch). `appearance-none` keeps the native control from
+    // ever painting now that the input sits over the box.
+    <span className='relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x-px [&_input]:translate-y-px'>
+      <BaseCheckbox.Root
+        {...rootRest}
+        ref={label ? undefined : (ref as React.Ref<HTMLElement>)}
+        aria-labelledby={rootRest['aria-labelledby'] ?? labelId}
+        checked={checked}
         disabled={disabled}
-        label={label}
-        titleCase={titleCase}
-        className='picasso-checkbox'
-        data-private={dataPrivate}
+        id={id}
+        value={value}
+        indeterminate={indeterminate}
+        onCheckedChange={(nextChecked, { event }) =>
+          onChange(toReactChangeEvent(event), nextChecked)
+        }
+        className={twMerge(checkboxClassNames, className)}
+        style={style}
       />
-    )
+    </span>
+  )
+
+  if (!label) {
+    return checkboxElement
   }
-)
+
+  const externalEventListeners = {
+    onMouseLeave: rest.onMouseLeave,
+    onMouseOver: rest.onMouseOver,
+  } as ComponentProps<typeof FormControlLabel>
+
+  return (
+    <FormControlLabel
+      {...externalEventListeners}
+      style={labelStyle}
+      ref={ref as React.ForwardedRef<HTMLLabelElement | HTMLDivElement>}
+      classes={{
+        root: 'text-[1rem]',
+        label: twJoin(
+          'max-w-[calc(100%_-_1.5em_+_1px)]',
+          'ml-[0.5em]',
+          disabled && 'text-gray-500'
+        ),
+      }}
+      control={checkboxElement}
+      labelId={labelId}
+      requiredDecoration={requiredDecoration}
+      disabled={disabled}
+      label={label}
+      titleCase={titleCase}
+      className='picasso-checkbox'
+      data-private={dataPrivate}
+    />
+  )
+})
 
 Checkbox.displayName = 'Checkbox'
 
diff --git a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
index efa024824e..fa48436fc9 100644
--- a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-wrap -mr -mb flex-row"
@@ -14,19 +14,18 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
         <div
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
-          <label
+          <div
             class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-            id="base-ui-:r10:"
           >
             <span
               class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
             >
               <span
                 aria-checked="false"
-                aria-labelledby="base-ui-:r10:"
+                aria-labelledby="base-ui-:r18:"
                 class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
                 data-unchecked=""
-                id="base-ui-:ru:"
+                id="base-ui-:r19:"
                 role="checkbox"
                 tabindex="0"
               />
@@ -40,6 +39,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
             </span>
             <span
               class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+              id="base-ui-:r18:"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -47,24 +47,23 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
                 Checkbox 1
               </span>
             </span>
-          </label>
+          </div>
         </div>
         <div
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
-          <label
+          <div
             class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-            id="base-ui-:r13:"
           >
             <span
               class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
             >
               <span
                 aria-checked="false"
-                aria-labelledby="base-ui-:r13:"
+                aria-labelledby="base-ui-:r1c:"
                 class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
                 data-unchecked=""
-                id="base-ui-:r11:"
+                id="base-ui-:r1d:"
                 role="checkbox"
                 tabindex="0"
               />
@@ -78,6 +77,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
             </span>
             <span
               class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+              id="base-ui-:r1c:"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -85,24 +85,23 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
                 Checkbox 2
               </span>
             </span>
-          </label>
+          </div>
         </div>
         <div
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
-          <label
+          <div
             class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-            id="base-ui-:r16:"
           >
             <span
               class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
             >
               <span
                 aria-checked="false"
-                aria-labelledby="base-ui-:r16:"
+                aria-labelledby="base-ui-:r1g:"
                 class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
                 data-unchecked=""
-                id="base-ui-:r14:"
+                id="base-ui-:r1h:"
                 role="checkbox"
                 tabindex="0"
               />
@@ -116,6 +115,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
             </span>
             <span
               class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+              id="base-ui-:r1g:"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -123,24 +123,23 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
                 Checkbox 3
               </span>
             </span>
-          </label>
+          </div>
         </div>
         <div
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
-          <label
+          <div
             class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-            id="base-ui-:r19:"
           >
             <span
               class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
             >
               <span
                 aria-checked="false"
-                aria-labelledby="base-ui-:r19:"
+                aria-labelledby="base-ui-:r1k:"
                 class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
                 data-unchecked=""
-                id="base-ui-:r17:"
+                id="base-ui-:r1l:"
                 role="checkbox"
                 tabindex="0"
               />
@@ -154,6 +153,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
             </span>
             <span
               class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+              id="base-ui-:r1k:"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -161,24 +161,23 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
                 Checkbox 4
               </span>
             </span>
-          </label>
+          </div>
         </div>
         <div
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
-          <label
+          <div
             class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-            id="base-ui-:r1c:"
           >
             <span
               class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
             >
               <span
                 aria-checked="false"
-                aria-labelledby="base-ui-:r1c:"
+                aria-labelledby="base-ui-:r1o:"
                 class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
                 data-unchecked=""
-                id="base-ui-:r1a:"
+                id="base-ui-:r1p:"
                 role="checkbox"
                 tabindex="0"
               />
@@ -192,6 +191,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
             </span>
             <span
               class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+              id="base-ui-:r1o:"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -199,24 +199,23 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
                 Checkbox 5
               </span>
             </span>
-          </label>
+          </div>
         </div>
         <div
           class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
         >
-          <label
+          <div
             class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-            id="base-ui-:r1f:"
           >
             <span
               class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
             >
               <span
                 aria-checked="false"
-                aria-labelledby="base-ui-:r1f:"
+                aria-labelledby="base-ui-:r1s:"
                 class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
                 data-unchecked=""
-                id="base-ui-:r1d:"
+                id="base-ui-:r1t:"
                 role="checkbox"
                 tabindex="0"
               />
@@ -230,6 +229,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
             </span>
             <span
               class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+              id="base-ui-:r1s:"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -237,7 +237,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
                 Checkbox 6
               </span>
             </span>
-          </label>
+          </div>
         </div>
       </div>
     </div>
@@ -248,21 +248,20 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
 exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <label
+    <div
       class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-      id="base-ui-:rq:"
     >
       <span
         class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
       >
         <span
           aria-checked="true"
-          aria-labelledby="base-ui-:rq:"
+          aria-labelledby="base-ui-:r10:"
           class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
           data-checked=""
-          id="base-ui-:ro:"
+          id="base-ui-:r11:"
           role="checkbox"
           tabindex="0"
         />
@@ -275,6 +274,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
       </span>
       <span
         class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+        id="base-ui-:r10:"
       >
         <span
           class="align-top text-[0.8125rem]"
@@ -282,7 +282,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
           Select item
         </span>
       </span>
-    </label>
+    </div>
   </div>
 </div>
 `;
@@ -290,7 +290,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
 exports[`Checkbox renders default checkbox without label 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
@@ -299,7 +299,7 @@ exports[`Checkbox renders default checkbox without label 1`] = `
         aria-checked="false"
         class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
         data-unchecked=""
-        id="base-ui-:r0:"
+        id="base-ui-:r1:"
         role="checkbox"
         tabindex="0"
       />
@@ -317,7 +317,7 @@ exports[`Checkbox renders default checkbox without label 1`] = `
 exports[`Checkbox renders disabled state 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
@@ -328,7 +328,7 @@ exports[`Checkbox renders disabled state 1`] = `
         class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
         data-disabled=""
         data-unchecked=""
-        id="base-ui-:r6:"
+        id="base-ui-:r9:"
         role="checkbox"
         tabindex="-1"
       />
@@ -347,7 +347,7 @@ exports[`Checkbox renders disabled state 1`] = `
 exports[`Checkbox renders indeterminate state 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
@@ -356,7 +356,7 @@ exports[`Checkbox renders indeterminate state 1`] = `
         aria-checked="mixed"
         class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
         data-indeterminate=""
-        id="base-ui-:r9:"
+        id="base-ui-:rd:"
         role="checkbox"
         tabindex="0"
       />
@@ -374,7 +374,7 @@ exports[`Checkbox renders indeterminate state 1`] = `
 exports[`Checkbox renders with (optional) 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
@@ -383,7 +383,7 @@ exports[`Checkbox renders with (optional) 1`] = `
         aria-checked="false"
         class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
         data-unchecked=""
-        id="base-ui-:rf:"
+        id="base-ui-:rl:"
         role="checkbox"
         tabindex="0"
       />
@@ -401,7 +401,7 @@ exports[`Checkbox renders with (optional) 1`] = `
 exports[`Checkbox renders with asterisk 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
@@ -410,7 +410,7 @@ exports[`Checkbox renders with asterisk 1`] = `
         aria-checked="false"
         class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
         data-unchecked=""
-        id="base-ui-:rc:"
+        id="base-ui-:rh:"
         role="checkbox"
         tabindex="0"
       />
@@ -428,21 +428,20 @@ exports[`Checkbox renders with asterisk 1`] = `
 exports[`Checkbox should render default checkbox with label 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <label
+    <div
       class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-      id="base-ui-:r5:"
     >
       <span
         class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
       >
         <span
           aria-checked="false"
-          aria-labelledby="base-ui-:r5:"
+          aria-labelledby="base-ui-:r4:"
           class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
           data-unchecked=""
-          id="base-ui-:r3:"
+          id="base-ui-:r5:"
           role="checkbox"
           tabindex="0"
         />
@@ -455,6 +454,7 @@ exports[`Checkbox should render default checkbox with label 1`] = `
       </span>
       <span
         class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+        id="base-ui-:r4:"
       >
         <span
           class="align-top text-[0.8125rem]"
@@ -462,7 +462,7 @@ exports[`Checkbox should render default checkbox with label 1`] = `
           Select item
         </span>
       </span>
-    </label>
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/base/Checkbox/src/Checkbox/test.tsx b/packages/base/Checkbox/src/Checkbox/test.tsx
index ba1526cf75..9206a96de4 100644
--- a/packages/base/Checkbox/src/Checkbox/test.tsx
+++ b/packages/base/Checkbox/src/Checkbox/test.tsx
@@ -140,4 +140,74 @@ describe('Checkbox', () => {
       expect(container).toMatchSnapshot()
     })
   })
+
+  describe('single label-associated node (PF-2244)', () => {
+    it('matches getByLabelText once and resolves to the accessible control', () => {
+      const { getByLabelText, getByRole } = renderCheckbox({
+        label: 'No Rate Limit',
+      })
+
+      // Regression: the base-ui control renders a role="checkbox" span plus a
+      // hidden native <input>. Both used to be label-associated (the span via
+      // aria-labelledby, the input via the wrapping <label>), so getByLabelText
+      // threw "Found multiple elements". It must now match exactly the
+      // accessible control.
+      expect(getByLabelText('No Rate Limit')).toBe(
+        getByRole('checkbox', { name: 'No Rate Limit' })
+      )
+    })
+
+    it('toggles once when the label text is clicked', () => {
+      const onChange = jest.fn()
+      const { getByText } = renderCheckbox({
+        label: 'No Rate Limit',
+        onChange,
+      })
+
+      fireEvent.click(getByText('No Rate Limit'))
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not toggle when disabled and the label is clicked', () => {
+      const onChange = jest.fn()
+      const { getByText } = renderCheckbox({
+        label: 'No Rate Limit',
+        disabled: true,
+        onChange,
+      })
+
+      fireEvent.click(getByText('No Rate Limit'))
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it('moves focus to the control when the label text is clicked', () => {
+      const { getByText, getByRole } = renderCheckbox({
+        label: 'No Rate Limit',
+      })
+
+      fireEvent.click(getByText('No Rate Limit'))
+
+      expect(getByRole('checkbox')).toHaveFocus()
+    })
+
+    it('does not toggle when an interactive element inside the label is clicked', () => {
+      const onChange = jest.fn()
+      const { getByRole } = render(
+        <Checkbox
+          onChange={onChange}
+          label={
+            <>
+              I agree to the <a href='/terms'>Terms</a>
+            </>
+          }
+        />
+      )
+
+      fireEvent.click(getByRole('link', { name: 'Terms' }))
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
 })
diff --git a/packages/base/Collapse/package.json b/packages/base/Collapse/package.json
index 3aa0305fc6..c4a25adf07 100644
--- a/packages/base/Collapse/package.json
+++ b/packages/base/Collapse/package.json
@@ -36,7 +36,8 @@
   },
   "devDependencies": {
     "@toptal/picasso-tailwind-merge": "workspace:*",
-    "@toptal/picasso-test-utils": "workspace:*"
+    "@toptal/picasso-test-utils": "workspace:*",
+    "@types/react-transition-group": "^4.4.5"
   },
   "files": [
     "dist-package/**",
diff --git a/packages/base/Container/src/Container/Container.tsx b/packages/base/Container/src/Container/Container.tsx
index a0757f1274..99dbab851f 100644
--- a/packages/base/Container/src/Container/Container.tsx
+++ b/packages/base/Container/src/Container/Container.tsx
@@ -3,12 +3,16 @@ import type { SpacingType } from '@toptal/picasso-provider'
 import type { BaseProps } from '@toptal/picasso-shared'
 import type { HTMLAttributes, ReactElement, ReactNode, Ref } from 'react'
 import React from 'react'
-import { documentable, forwardRef } from '@toptal/picasso-utils'
+import {
+  documentable,
+  forwardRef,
+  getSpacingClasses,
+  getSpacingStyles,
+} from '@toptal/picasso-utils'
 import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import type { AlignItemsType, JustifyContentType, VariantType } from './styles'
 import { alignmentClasses, variantClassesByColor } from './styles'
-import { getSpacingClasses, getSpacingStyles } from './utils'
 
 type ContainerType = 'div' | 'span'
 
diff --git a/packages/base/Container/src/Container/__snapshots__/test.tsx.snap b/packages/base/Container/src/Container/__snapshots__/test.tsx.snap
index 78688a5a93..9e796f0f5c 100644
--- a/packages/base/Container/src/Container/__snapshots__/test.tsx.snap
+++ b/packages/base/Container/src/Container/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Container renders default container 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
diff --git a/packages/base/Container/src/Container/utils/index.ts b/packages/base/Container/src/Container/utils/index.ts
index f7bbcf5ba3..e3ed746123 100644
--- a/packages/base/Container/src/Container/utils/index.ts
+++ b/packages/base/Container/src/Container/utils/index.ts
@@ -1,3 +1 @@
 export { default as filterOutStringAndPicassoSpacing } from './filter-out-strings-and-picasso-spacings'
-
-export * from './get-spacing-classes'
diff --git a/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
index 81fcc00ebb..710f6ec2e6 100644
--- a/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
+++ b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`DatePicker renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="inline-block"
diff --git a/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap b/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
index cfbe96677e..23e6a4f4e2 100644
--- a/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`MonthSelect renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
diff --git a/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap b/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
index 871f1a851b..c020d3bc38 100644
--- a/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
@@ -170,7 +170,7 @@ exports[`YearSelect render in descending order 1`] = `
 exports[`YearSelect renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
diff --git a/packages/base/Dropdown/src/Dropdown/Dropdown.tsx b/packages/base/Dropdown/src/Dropdown/Dropdown.tsx
index 1d1db20a6e..432130eec3 100644
--- a/packages/base/Dropdown/src/Dropdown/Dropdown.tsx
+++ b/packages/base/Dropdown/src/Dropdown/Dropdown.tsx
@@ -6,10 +6,14 @@ import type {
   DeprecatedSpacingType,
   SpacingType,
 } from '@toptal/picasso-provider'
-import { makeResponsiveSpacingProps } from '@toptal/picasso-provider'
 import { Popper } from '@toptal/picasso-popper'
 import { Paper } from '@toptal/picasso-paper'
-import { ClickAwayListener, noop } from '@toptal/picasso-utils'
+import {
+  ClickAwayListener,
+  getSpacingClasses,
+  getSpacingStyles,
+  noop,
+} from '@toptal/picasso-utils'
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { contentClass } from './styles'
@@ -100,11 +104,6 @@ export const useDropdownContext = () => {
   return context
 }
 
-const useResponsiveProps = makeResponsiveSpacingProps(
-  ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'] as const,
-  'PicassoDropdown-Responsive'
-)
-
 export type DropdownProps = {
   (
     props: PropsWithBaseSpacing & { ref?: Ref<HTMLDivElement> | null }
@@ -230,13 +229,12 @@ export const Dropdown: DropdownProps = forwardRef<
     }
   }
 
-  const { className: responsiveClasses, style: responsiveStyle } =
-    useResponsiveProps({
-      'margin-top': offset?.top,
-      'margin-right': offset?.right,
-      'margin-bottom': offset?.bottom,
-      'margin-left': offset?.left,
-    })
+  const offsetSpacing = {
+    top: offset?.top,
+    right: offset?.right,
+    bottom: offset?.bottom,
+    left: offset?.left,
+  }
 
   const context = {
     close: () => forceClose(),
@@ -278,7 +276,7 @@ export const Dropdown: DropdownProps = forwardRef<
           className={twJoin(
             'shadow-2',
             externalClasses?.popper,
-            responsiveClasses
+            getSpacingClasses(offsetSpacing)
           )}
           anchorEl={anchorEl ?? null}
           popperOptions={{
@@ -292,7 +290,7 @@ export const Dropdown: DropdownProps = forwardRef<
             ...popperOptions,
           }}
           placement={placement}
-          style={{ ...responsiveStyle }}
+          style={{ ...getSpacingStyles(offsetSpacing) }}
           disablePortal={disablePortal}
           keepMounted={keepMounted}
           autoWidth={false}
diff --git a/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap b/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
index 82160c55ac..85bcfee4ce 100644
--- a/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
+++ b/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Dropdown renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex items-center"
@@ -34,7 +34,7 @@ exports[`Dropdown should render menu 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <div
         class="flex items-center"
@@ -163,7 +163,7 @@ exports[`Dropdown should render menu with focus 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <div
         class=""
diff --git a/packages/base/Dropdown/src/Dropdown/story/ResponsiveOffset.example.tsx b/packages/base/Dropdown/src/Dropdown/story/ResponsiveOffset.example.tsx
new file mode 100644
index 0000000000..c721980758
--- /dev/null
+++ b/packages/base/Dropdown/src/Dropdown/story/ResponsiveOffset.example.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Dropdown, Menu, Container, Typography } from '@toptal/picasso'
+import { SPACING_2, SPACING_8 } from '@toptal/picasso-utils'
+
+const Example = () => (
+  <div>
+    <Container bottom={SPACING_2}>
+      <Typography>
+        Offset can vary per breakpoint — small offset from the `sm` screen,
+        large from `lg` (mobile-first, like Container spacing props)
+      </Typography>
+    </Container>
+    <Container flex inline>
+      <Dropdown
+        content={
+          <Menu>
+            <Menu.Item>First item</Menu.Item>
+            <Menu.Item>Second item</Menu.Item>
+            <Menu.Item>Third item</Menu.Item>
+          </Menu>
+        }
+        offset={{ top: { sm: SPACING_2, lg: SPACING_8 } }}
+      >
+        Responsive offset Dropdown
+        <Dropdown.Arrow />
+      </Dropdown>
+    </Container>
+  </div>
+)
+
+export default Example
diff --git a/packages/base/Dropdown/src/Dropdown/story/index.jsx b/packages/base/Dropdown/src/Dropdown/story/index.jsx
index 32b8a52124..8d14e7d6f8 100644
--- a/packages/base/Dropdown/src/Dropdown/story/index.jsx
+++ b/packages/base/Dropdown/src/Dropdown/story/index.jsx
@@ -59,6 +59,11 @@ page
     'Positions & Offsets',
     'base/Dropdown'
   )
+  .addExample(
+    'Dropdown/story/ResponsiveOffset.example.tsx',
+    'Responsive Offset',
+    'base/Dropdown'
+  )
   .addExample(
     'Dropdown/story/CustomTrigger.example.tsx',
     'Custom Anchor',
diff --git a/packages/base/Dropdown/src/Dropdown/test.tsx b/packages/base/Dropdown/src/Dropdown/test.tsx
index f120292ced..1ba97effb3 100644
--- a/packages/base/Dropdown/src/Dropdown/test.tsx
+++ b/packages/base/Dropdown/src/Dropdown/test.tsx
@@ -2,6 +2,7 @@ import { fireEvent, render, waitFor, act } from '@toptal/picasso-test-utils'
 import React from 'react'
 import { Container } from '@toptal/picasso-container'
 import { Menu, MenuItem } from '@toptal/picasso-menu'
+import { SPACING_2, SPACING_8 } from '@toptal/picasso-utils'
 
 import { DropdownCompound as Dropdown } from '../DropdownCompound'
 
@@ -118,4 +119,71 @@ describe('Dropdown', () => {
 
     expect(getByRole('presentation')).toHaveStyle({ position: 'fixed' })
   })
+
+  describe('offset', () => {
+    it('applies a spacing token as a static margin class', async () => {
+      const { getByText, getByRole } = render(
+        <Dropdown content={<div>Content</div>} offset={{ top: SPACING_8 }}>
+          Open Dropdown <Dropdown.Arrow />
+        </Dropdown>
+      )
+
+      await act(async () => {
+        fireEvent.click(getByText('Open Dropdown'))
+      })
+
+      expect(getByRole('tooltip')).toHaveClass('mt-8')
+    })
+
+    it('applies a responsive offset as mobile-first breakpoint classes', async () => {
+      const { getByText, getByRole } = render(
+        <Dropdown
+          content={<div>Content</div>}
+          offset={{ top: { sm: SPACING_2, lg: SPACING_8 } }}
+        >
+          Open Dropdown <Dropdown.Arrow />
+        </Dropdown>
+      )
+
+      await act(async () => {
+        fireEvent.click(getByText('Open Dropdown'))
+      })
+
+      const popper = getByRole('tooltip')
+
+      expect(popper).toHaveClass('sm:mt-2')
+      expect(popper).toHaveClass('lg:mt-8')
+    })
+
+    it('applies a deprecated numeric offset as an inline rem style, not a class', async () => {
+      const { getByText, getByRole } = render(
+        <Dropdown content={<div>Content</div>} offset={{ top: 11.75 }}>
+          Open Dropdown <Dropdown.Arrow />
+        </Dropdown>
+      )
+
+      await act(async () => {
+        fireEvent.click(getByText('Open Dropdown'))
+      })
+
+      const popper = getByRole('tooltip')
+
+      expect(popper).toHaveStyle({ marginTop: '11.75rem' })
+      expect(popper.className).not.toMatch(/\bmt-/)
+    })
+
+    it('applies a deprecated string offset as its token margin class', async () => {
+      const { getByText, getByRole } = render(
+        <Dropdown content={<div>Content</div>} offset={{ top: 'small' }}>
+          Open Dropdown <Dropdown.Arrow />
+        </Dropdown>
+      )
+
+      await act(async () => {
+        fireEvent.click(getByText('Open Dropdown'))
+      })
+
+      expect(getByRole('tooltip')).toHaveClass('mt-4')
+    })
+  })
 })
diff --git a/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap b/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
index 400863464a..9e4ffb0993 100644
--- a/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
+++ b/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Dropzone renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
diff --git a/packages/base/EnvironmentBanner/src/EnvironmentBanner/__snapshots__/test.tsx.snap b/packages/base/EnvironmentBanner/src/EnvironmentBanner/__snapshots__/test.tsx.snap
index dddd5c8a1f..e8fd3494d4 100644
--- a/packages/base/EnvironmentBanner/src/EnvironmentBanner/__snapshots__/test.tsx.snap
+++ b/packages/base/EnvironmentBanner/src/EnvironmentBanner/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EnvironmentBanner development render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="border-0 border-t border-solid border-t-green fixed text-center top-0 w-[100vw] z-snackbar text-xxs pointer-events leading-6"
diff --git a/packages/base/Fade/package.json b/packages/base/Fade/package.json
index 9d8f2e44b9..5e83da9a8f 100644
--- a/packages/base/Fade/package.json
+++ b/packages/base/Fade/package.json
@@ -34,7 +34,8 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-test-utils": "workspace:*"
+    "@toptal/picasso-test-utils": "workspace:*",
+    "@types/react-transition-group": "^4.4.5"
   },
   "files": [
     "dist-package/**",
diff --git a/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
index 559e3e3f12..b5c4415df8 100644
--- a/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FileInput can change label 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="max-w"
@@ -34,7 +34,7 @@ exports[`FileInput can change label 1`] = `
 exports[`FileInput renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="max-w"
diff --git a/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
index 6b6aac8390..a1d0a8684b 100644
--- a/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FileList renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-col border-t border-gray"
diff --git a/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
index 4cc6f2fd85..1c222ffe6b 100644
--- a/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FileListItem renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-center justify-between flex border-b border-gray py-[0.3125rem]"
diff --git a/packages/base/FileInput/src/ProgressBar/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/ProgressBar/__snapshots__/test.tsx.snap
index 0be4e9c4e1..006d23b2c6 100644
--- a/packages/base/FileInput/src/ProgressBar/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/ProgressBar/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ProgressBar renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-center flex"
@@ -24,7 +24,7 @@ exports[`ProgressBar renders 1`] = `
 exports[`ProgressBar renders with percentage 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-center flex"
diff --git a/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap b/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
index 00ca7eabeb..3cd6167632 100644
--- a/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FormError renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <form
       class=""
diff --git a/packages/base/Form/src/FormField/__snapshots__/test.tsx.snap b/packages/base/Form/src/FormField/__snapshots__/test.tsx.snap
index 12f0442ef6..be79688cb4 100644
--- a/packages/base/Form/src/FormField/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormField/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FormField when layout is horizontal renders FormField with appropriate for horizontal layout styles and classNames 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="text-[1rem] [&+&]:mt-4 grid w-full gap-x gap-y grid-rows grid-cols-[calc(4.25rem*var(--form-label [grid-template xs:[--form-label-width:var(--form-label-width- sm:[--form-label-width:var(--form-label-width- md:[--form-label-width:var(--form-label-width- lg:[--form-label-width:var(--form-label-width- xl:[--form-label-width:var(--form-label-width-"
@@ -19,7 +19,7 @@ exports[`FormField when layout is horizontal renders FormField with appropriate
 exports[`FormField when layout is horizontal when labelWidth is 4 renders FormField with appropriate for horizontal layout styles and classNames 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="text-[1rem] [&+&]:mt-4 grid w-full gap-x gap-y grid-rows grid-cols-[calc(4.25rem*var(--form-label [grid-template xs:[--form-label-width:var(--form-label-width- sm:[--form-label-width:var(--form-label-width- md:[--form-label-width:var(--form-label-width- lg:[--form-label-width:var(--form-label-width- xl:[--form-label-width:var(--form-label-width-"
@@ -35,7 +35,7 @@ exports[`FormField when layout is horizontal when labelWidth is 4 renders FormFi
 exports[`FormField when layout is vertical renders FormField with appropriate for vertical layout styles and classNames 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="text-[1rem] [&+&]:mt-4"
diff --git a/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap b/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap
index fdb68445fd..d3af2461b1 100644
--- a/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FormHint renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="mt-1"
diff --git a/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap b/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap
index f9c0c94d7a..724d25de25 100644
--- a/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FormWarning renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <form
       class=""
diff --git a/packages/base/FormLabel/src/FormControlLabel/FormControlLabel.tsx b/packages/base/FormLabel/src/FormControlLabel/FormControlLabel.tsx
index c0e9537aad..eace639abd 100644
--- a/packages/base/FormLabel/src/FormControlLabel/FormControlLabel.tsx
+++ b/packages/base/FormLabel/src/FormControlLabel/FormControlLabel.tsx
@@ -29,13 +29,22 @@ export interface Props
   disabled?: boolean
   /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
   requiredDecoration?: RequiredDecoration
+  /**
+   * Id of the label text node, for controls that name themselves via
+   * `aria-labelledby` (base-ui Checkbox/Switch). When provided, the wrapper is
+   * rendered as a non-`<label>` element so the control's hidden native input
+   * is not a second label-associated node — this keeps `getByLabelText` /
+   * `getByRole` matching a single accessible control. Label clicks are
+   * forwarded to the control to preserve click-to-toggle.
+   */
+  labelId?: string
   classes?: {
     root?: string
     label?: string
   }
 }
 
-const FormControlLabel = forwardRef<HTMLLabelElement, Props>(
+const FormControlLabel = forwardRef<HTMLLabelElement | HTMLDivElement, Props>(
   function FormControlLabel(props, ref) {
     const {
       control,
@@ -46,39 +55,110 @@ const FormControlLabel = forwardRef<HTMLLabelElement, Props>(
       requiredDecoration,
       titleCase,
       classes,
+      labelId,
+      onClick,
       ...rest
     } = props
 
     const { layout } = useFieldsLayoutContext()
     const isHorizontalLayout = layout === 'horizontal'
 
-    return (
-      <label
-        {...rest}
-        ref={ref}
-        className={twMerge(
-          'inline-flex items-center',
-          'max-w-full',
-          'align-middle',
-          '-webkit-tap-highlight-color-transparent',
-          'mx-0',
-          disabled ? 'cursor-default' : 'cursor-pointer',
-          isHorizontalLayout && 'col-start-1 col-span-2',
-          classes?.root,
-          className
-        )}
-        style={style}
-      >
+    const rootClassName = twMerge(
+      'inline-flex items-center',
+      'max-w-full',
+      'align-middle',
+      '-webkit-tap-highlight-color-transparent',
+      'mx-0',
+      disabled ? 'cursor-default' : 'cursor-pointer',
+      isHorizontalLayout && 'col-start-1 col-span-2',
+      classes?.root,
+      className
+    )
+
+    const content = (
+      <>
         {React.cloneElement(control, { disabled })}
         <FormLabel
           className={twMerge(disabled && 'pointer-events-auto', classes?.label)}
           as='span'
+          id={labelId}
           requiredDecoration={requiredDecoration}
           disabled={disabled}
           titleCase={titleCase}
         >
           {label}
         </FormLabel>
+      </>
+    )
+
+    // Opt-in path: control names itself via `aria-labelledby`, so we avoid a
+    // native `<label>` (which would make the control's hidden native input a
+    // second label-associated node) and re-create label click-to-toggle by
+    // forwarding clicks to that hidden input.
+    if (labelId !== undefined) {
+      const handleClick: React.MouseEventHandler<HTMLDivElement> = event => {
+        onClick?.(
+          event as unknown as React.MouseEvent<HTMLLabelElement, MouseEvent>
+        )
+
+        if (disabled || event.defaultPrevented) {
+          return
+        }
+
+        const target = event.target as HTMLElement
+
+        // Only forward clicks that land on the label text. Clicks on the
+        // control itself, its hidden input, or any interactive content inside
+        // the label are handled by those elements — this mirrors a native
+        // `<label>`, whose activation behavior excludes interactive descendants.
+        if (
+          target.closest(
+            'a[href],button,input,select,textarea,[role="checkbox"],[role="switch"],[role="radio"],[role="button"],[role="link"],[role="menuitem"],[role="tab"],[role="option"]'
+          )
+        ) {
+          return
+        }
+
+        const wrapper = event.currentTarget
+
+        wrapper
+          .querySelector<HTMLInputElement>('input[aria-hidden="true"]')
+          ?.click()
+
+        // A native `<label>` moves focus to its control on activation; restore
+        // that so keyboard interaction keeps working after a label-text click.
+        wrapper
+          .querySelector<HTMLElement>(
+            '[role="checkbox"],[role="switch"],[role="radio"]'
+          )
+          ?.focus()
+      }
+
+      return (
+        // Element-variance boundary: `rest` carries label-typed HTML
+        // attributes, but this wrapper renders a <div>. The attributes are
+        // runtime-compatible, so we resolve the variance once here.
+        <div
+          {...(rest as unknown as React.HTMLAttributes<HTMLDivElement>)}
+          ref={ref as React.ForwardedRef<HTMLDivElement>}
+          className={rootClassName}
+          style={style}
+          onClick={handleClick}
+        >
+          {content}
+        </div>
+      )
+    }
+
+    return (
+      <label
+        {...rest}
+        onClick={onClick}
+        ref={ref as React.ForwardedRef<HTMLLabelElement>}
+        className={rootClassName}
+        style={style}
+      >
+        {content}
       </label>
     )
   }
diff --git a/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap b/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap
index 716000739d..1ba3dcab45 100644
--- a/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap
+++ b/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FormLabel disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <form
       class=""
@@ -30,7 +30,7 @@ exports[`FormLabel disabled 1`] = `
 exports[`FormLabel renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <form
       class=""
@@ -57,7 +57,7 @@ exports[`FormLabel renders 1`] = `
 exports[`FormLabel required with (optional) 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <form
       class=""
@@ -85,7 +85,7 @@ exports[`FormLabel required with (optional) 1`] = `
 exports[`FormLabel required with (optional) and with \`labelEndAdornment\` 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <form
       class=""
@@ -116,7 +116,7 @@ exports[`FormLabel required with (optional) and with \`labelEndAdornment\` 1`] =
 exports[`FormLabel required with asterisk 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <form
       class=""
diff --git a/packages/base/Grid/src/Grid/__snapshots__/test.tsx.snap b/packages/base/Grid/src/Grid/__snapshots__/test.tsx.snap
index c2a3adde2a..26b6b39c17 100644
--- a/packages/base/Grid/src/Grid/__snapshots__/test.tsx.snap
+++ b/packages/base/Grid/src/Grid/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Grid renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="box-border flex flex-row flex-wrap items-start justify-start w-[calc(100%+32px)] -m"
diff --git a/packages/base/Grid/src/GridItem/__snapshots__/test.tsx.snap b/packages/base/Grid/src/GridItem/__snapshots__/test.tsx.snap
index 020bffdad7..b19583b4e1 100644
--- a/packages/base/Grid/src/GridItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Grid/src/GridItem/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`GridItem renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="box-border m-0"
diff --git a/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap b/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap
index 5d6a93823e..04120a9f87 100644
--- a/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Helpbox renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="p-6 border border-solid border-gray rounded-md relative"
diff --git a/packages/base/Input/src/Input/__snapshots__/test.tsx.snap b/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
index db74050e3f..4047065ec6 100644
--- a/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
+++ b/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Input renders icon in the beginning 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
@@ -36,7 +36,7 @@ exports[`Input renders icon in the beginning 1`] = `
 exports[`Input renders icon in the end 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
@@ -69,7 +69,7 @@ exports[`Input renders icon in the end 1`] = `
 exports[`Input should show manual resize handler 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-auto w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
@@ -90,7 +90,7 @@ exports[`Input should show manual resize handler 1`] = `
 exports[`Input should show reset button 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
@@ -137,7 +137,7 @@ exports[`Input should show reset button 1`] = `
 exports[`Input shows counter for multiline input 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-auto w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
@@ -159,7 +159,7 @@ exports[`Input shows counter for multiline input 1`] = `
 exports[`Input shows counter for regular input 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
diff --git a/packages/base/Link/src/Link/__snapshots__/test.tsx.snap b/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
index 68720a948e..2296e87fd2 100644
--- a/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
+++ b/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Link renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <a
       class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
@@ -17,7 +17,7 @@ exports[`Link renders 1`] = `
 exports[`Link when disabled renders disabled link 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <a
       aria-disabled="true"
@@ -34,7 +34,7 @@ exports[`Link when disabled renders disabled link 1`] = `
 exports[`Link when native attributes are provided renders native attributes 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <a
       class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline cursor-pointer"
@@ -52,7 +52,7 @@ exports[`Link when native attributes are provided renders native attributes 1`]
 exports[`Link when using react-router Link renders a Link from react-router 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div>
       <a
diff --git a/packages/base/List/src/List/__snapshots__/test.tsx.snap b/packages/base/List/src/List/__snapshots__/test.tsx.snap
index 425bfc921c..3a7751a4a0 100644
--- a/packages/base/List/src/List/__snapshots__/test.tsx.snap
+++ b/packages/base/List/src/List/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`List renders ordered list 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ol
       class="text-[0.875rem] text-black mt-1 list-decimal pl-4"
@@ -82,7 +82,7 @@ exports[`List renders ordered list 1`] = `
 exports[`List renders unordered list 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ul
       class="text-[0.875rem] text-black mt-1 list-disc pl-4"
diff --git a/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap b/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
index a1967b4f44..d1b092548c 100644
--- a/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
+++ b/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Menu renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ul
       class="relative list-none outline-hidden shadow-1 py-2 px-0 m-0 rounded-sm"
diff --git a/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap b/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
index ccb144a479..0cb1c471b5 100644
--- a/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`MenuItem renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
@@ -36,7 +36,7 @@ exports[`MenuItem renders 1`] = `
 exports[`MenuItem renders checkmarked 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
@@ -82,10 +82,10 @@ exports[`MenuItem renders checkmarked 1`] = `
 exports[`MenuItem renders in title case with global prop 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <li
         aria-disabled="false"
@@ -119,7 +119,7 @@ exports[`MenuItem renders in title case with global prop 1`] = `
 exports[`MenuItem renders in title case with local prop 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
@@ -152,7 +152,7 @@ exports[`MenuItem renders in title case with local prop 1`] = `
 exports[`MenuItem renders with a sub menu arrow 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
@@ -198,7 +198,7 @@ exports[`MenuItem renders with a sub menu arrow 1`] = `
 exports[`MenuItem renders with description 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
diff --git a/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap b/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
index a56bc781ad..a1cc2727d4 100644
--- a/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
+++ b/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Modal renders 1`] = `
   id="modal-root"
 >
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     data-base-ui-inert=""
   >
     <span
@@ -159,7 +159,7 @@ exports[`Modal useModal opens and closes modal 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <button
         aria-disabled="false"
@@ -268,7 +268,7 @@ exports[`Modal useModal opens and closes modal 2`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <button
         aria-disabled="false"
@@ -293,7 +293,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <button
         aria-disabled="false"
diff --git a/packages/base/Note/src/Note/__snapshots__/test.tsx.snap b/packages/base/Note/src/Note/__snapshots__/test.tsx.snap
index 18d994a639..3b8dcd52be 100644
--- a/packages/base/Note/src/Note/__snapshots__/test.tsx.snap
+++ b/packages/base/Note/src/Note/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Note renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="rounded-md border border-solid border-gray py-6 pr-6 pl-[28px] relative overflow-hidden bg-white before:content-[''] before:bg-yellow before:block before:h-full before:absolute before:top-0 before:left-0 before:w-[4px]"
diff --git a/packages/base/Notification/src/Notification/__snapshots__/test.tsx.snap b/packages/base/Notification/src/Notification/__snapshots__/test.tsx.snap
index d72e4efa8a..ad07d82fbf 100644
--- a/packages/base/Notification/src/Notification/__snapshots__/test.tsx.snap
+++ b/packages/base/Notification/src/Notification/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Notification renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative w-full flex flex-nowrap items-start shadow-[none] rounded-[none] transition-shadow duration-300 bg-yellow px-[1em] py-[1.5em] sm:p-[1.5em] lg:px-[130px] lg:py-[1.5em]"
diff --git a/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap b/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap
index 5c1428fc58..ae7503dbe8 100644
--- a/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap
+++ b/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NotificationActions renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative w-full flex flex-nowrap items-start shadow-[none] rounded-[none] transition-shadow duration-300 bg-yellow px-[1em] py-[1.5em] sm:p-[1.5em] lg:px-[130px] lg:py-[1.5em]"
diff --git a/packages/base/Notification/src/use-notification/__snapshots__/test.tsx.snap b/packages/base/Notification/src/use-notification/__snapshots__/test.tsx.snap
index e8440cbfad..79beab8450 100644
--- a/packages/base/Notification/src/use-notification/__snapshots__/test.tsx.snap
+++ b/packages/base/Notification/src/use-notification/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`useNotifications error notification render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="false"
@@ -48,7 +48,7 @@ exports[`useNotifications error notification render 1`] = `
       </span>
     </button>
     <div
-      class="notistack-SnackbarContainer go3118922589 go2989568495 go1141946668 PicassoNotificationsProvider-root"
+      class="notistack-SnackbarContainer go3118922589 go2989568495 go1141946668 [&>div]:pointer-events [&>div>div]:px-0 [&>div>div]:py-[6px] [&>div>div]:[transition:padding_300ms_ease_0ms]"
     >
       <div
         class="go1475592160 go1671063245"
@@ -122,7 +122,7 @@ exports[`useNotifications error notification render 1`] = `
 exports[`useNotifications info notification render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="false"
@@ -167,7 +167,7 @@ exports[`useNotifications info notification render 1`] = `
       </span>
     </button>
     <div
-      class="notistack-SnackbarContainer go3118922589 go2989568495 go1141946668 PicassoNotificationsProvider-root"
+      class="notistack-SnackbarContainer go3118922589 go2989568495 go1141946668 [&>div]:pointer-events [&>div>div]:px-0 [&>div>div]:py-[6px] [&>div>div]:[transition:padding_300ms_ease_0ms]"
     >
       <div
         class="go1475592160 go1671063245"
@@ -244,7 +244,7 @@ exports[`useNotifications info notification render 1`] = `
 exports[`useNotifications success notification render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="false"
@@ -289,7 +289,7 @@ exports[`useNotifications success notification render 1`] = `
       </span>
     </button>
     <div
-      class="notistack-SnackbarContainer go3118922589 go2989568495 go1141946668 PicassoNotificationsProvider-root"
+      class="notistack-SnackbarContainer go3118922589 go2989568495 go1141946668 [&>div]:pointer-events [&>div>div]:px-0 [&>div>div]:py-[6px] [&>div>div]:[transition:padding_300ms_ease_0ms]"
     >
       <div
         class="go1475592160 go1671063245"
diff --git a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
index fdb74c7740..9a98ba4849 100644
--- a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
+++ b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`NumberInput renders 1`] = `
 <div
-  class="Picasso-root"
+  class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
 >
   <div
     class="relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black pr-0 cursor-text"
diff --git a/packages/base/Page/src/Page/Page.tsx b/packages/base/Page/src/Page/Page.tsx
index 471d4e0ac0..89c907e350 100644
--- a/packages/base/Page/src/Page/Page.tsx
+++ b/packages/base/Page/src/Page/Page.tsx
@@ -1,12 +1,16 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
-import { PicassoProvider } from '@toptal/picasso-provider'
+import { useAppConfig } from '@toptal/picasso-provider'
 import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { PageHamburgerContextProvider } from '../PageHamburger'
 import type { PageContextProps, ViewportWidthType } from './types'
-import { createRootClassNames, createRootVariableClassNames } from './styles'
+import {
+  createRootClassNames,
+  createRootMinWidthClassNames,
+  createRootVariableClassNames,
+} from './styles'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** DEPRECATED! Component becomes responsive with width 100% and overrides width prop */
@@ -36,10 +40,7 @@ export const Page = forwardRef<HTMLDivElement, Props>(function Page(
     ...rest
   } = props
 
-  // Set only at runtime via PicassoProvider.disableResponsiveStyle()
-  // (<Picasso responsive={false} />) or extendTheme — not expressible as a
-  // static Tailwind class
-  const { contentMinWidth } = PicassoProvider.theme.layout
+  const { responsive } = useAppConfig()
 
   return (
     <div
@@ -48,12 +49,10 @@ export const Page = forwardRef<HTMLDivElement, Props>(function Page(
       className={twMerge(
         ...createRootClassNames(),
         ...createRootVariableClassNames(),
+        ...createRootMinWidthClassNames(responsive),
         className
       )}
-      style={{
-        ...(contentMinWidth && { minWidth: contentMinWidth }),
-        ...style,
-      }}
+      style={style}
     >
       <PageContext.Provider value={{ width, fullWidth }}>
         <PageHamburgerContextProvider hamburgerId={hamburgerId}>
diff --git a/packages/base/Page/src/Page/__snapshots__/test.tsx.snap b/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
index 35fa4072c3..1fc92c7e19 100644
--- a/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Page renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-col h-full bg-gray [&>footer]:flex-[0] [&>header]:flex-[0] [&>header+*]:mt-[var(--header [--content-padding md:[--content-padding [--header [--content-width [--content"
diff --git a/packages/base/Page/src/Page/styles.ts b/packages/base/Page/src/Page/styles.ts
index 731575a0ae..29a3d32938 100644
--- a/packages/base/Page/src/Page/styles.ts
+++ b/packages/base/Page/src/Page/styles.ts
@@ -8,3 +8,8 @@ export const createRootVariableClassNames = (): string[] => [
   '[--content-padding-horizontal:1em] md:[--content-padding-horizontal:2em]',
   '[--header-height:3.5rem] [--content-width-wide:90em] [--content-width:75em]',
 ]
+
+// 768px = the `md` breakpoint: <Picasso responsive={false} /> pins the layout
+// to tablet width instead of letting it shrink further
+export const createRootMinWidthClassNames = (responsive?: boolean): string[] =>
+  responsive === false ? ['min-w-[768px]'] : []
diff --git a/packages/base/Page/src/Page/test.tsx b/packages/base/Page/src/Page/test.tsx
index dc54e87194..0e3e3d94fe 100644
--- a/packages/base/Page/src/Page/test.tsx
+++ b/packages/base/Page/src/Page/test.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import type { RenderResult } from '@toptal/picasso-test-utils'
 import { render } from '@toptal/picasso-test-utils'
+import Picasso from '@toptal/picasso-provider'
 
 import { Page } from './Page'
 
@@ -19,4 +20,26 @@ describe('Page', () => {
 
     expect(container).toMatchSnapshot()
   })
+
+  it('does not constrain min-width by default', () => {
+    const { getByTestId } = render(<Page data-testid='page'>Test</Page>)
+
+    expect(getByTestId('page')).not.toHaveClass('min-w-[768px]')
+  })
+
+  it('constrains min-width when the provider disables responsive layout', () => {
+    const { getByTestId } = render(
+      <Picasso
+        loadFavicon={false}
+        loadFonts={false}
+        fixViewport={false}
+        disableHelmet
+        responsive={false}
+      >
+        <Page data-testid='page'>Test</Page>
+      </Picasso>
+    )
+
+    expect(getByTestId('page')).toHaveClass('min-w-[768px]')
+  })
 })
diff --git a/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
index 7003e12a45..e96415742a 100644
--- a/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PageAutocomplete renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       aria-expanded="false"
diff --git a/packages/base/Page/src/PageContent/styles.ts b/packages/base/Page/src/PageContent/styles.ts
index 7ba572616b..b4df781629 100644
--- a/packages/base/Page/src/PageContent/styles.ts
+++ b/packages/base/Page/src/PageContent/styles.ts
@@ -6,8 +6,8 @@ export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => {
   }
 
   if (width === 'wide') {
-    return 'max-w-[90em]'
+    return 'max-w-[var(--content-width-wide,90em)]'
   }
 
-  return 'max-w-[75em]'
+  return 'max-w-[var(--content-width,75em)]'
 }
diff --git a/packages/base/Page/src/PageFooter/styles.ts b/packages/base/Page/src/PageFooter/styles.ts
index f07510dab6..b4df781629 100644
--- a/packages/base/Page/src/PageFooter/styles.ts
+++ b/packages/base/Page/src/PageFooter/styles.ts
@@ -6,8 +6,8 @@ export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => {
   }
 
   if (width === 'wide') {
-    return 'max-w-[var(--content-width-wide)]'
+    return 'max-w-[var(--content-width-wide,90em)]'
   }
 
-  return 'max-w-[var(--content-width)]'
+  return 'max-w-[var(--content-width,75em)]'
 }
diff --git a/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
index 3cf9f7b9c1..b02ab7f36d 100644
--- a/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PageSidebar renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
@@ -27,7 +27,7 @@ exports[`PageSidebar renders 1`] = `
 exports[`PageSidebar with menu 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
@@ -56,7 +56,7 @@ exports[`PageSidebar with menu 1`] = `
 exports[`PageSidebar with one normal and one bottom menu 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
diff --git a/packages/base/Page/src/PageTopBar/PageTopBar.tsx b/packages/base/Page/src/PageTopBar/PageTopBar.tsx
index 5f82644aa5..9a87ca37b8 100644
--- a/packages/base/Page/src/PageTopBar/PageTopBar.tsx
+++ b/packages/base/Page/src/PageTopBar/PageTopBar.tsx
@@ -5,7 +5,6 @@ import type { BaseProps } from '@toptal/picasso-shared'
 import {
   usePageTopBar,
   useSidebar,
-  usePreventPageWidthChangeOnScrollbar,
   useScreenSize,
 } from '@toptal/picasso-provider'
 import { Logo } from '@toptal/picasso-logo'
@@ -71,8 +70,6 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
   } = props
 
   const { setHasTopBar } = usePageTopBar()
-  const { preventPageWidthChangeOnScrollbar } =
-    usePreventPageWidthChangeOnScrollbar()
 
   useIsomorphicLayoutEffect(() => {
     setHasTopBar(true)
@@ -138,13 +135,12 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
           {...rest}
           ref={ref}
           className={twMerge(
-            'mui-fixed fixed top-0 left-0 right-0 w-full text-lg z-[1100]',
+            'mui-fixed fixed top-0 left-0 right-0 w-full text-lg z-[1100] md:w-screen',
             variant === 'light' ? 'bg-white' : '',
             variant === 'dark' ? 'bg-blue-700' : '',
             variant === 'grey' ? 'bg-graphite-800' : '',
             variant === 'black' ? 'bg-black' : '',
-            className,
-            preventPageWidthChangeOnScrollbar ? 'md:w-screen' : ''
+            className
           )}
           style={{
             boxShadow:
diff --git a/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
index 77e3d08bd3..8eaf262725 100644
--- a/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`PageTopBar renders hamburger on small screen 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
       <header
-        class="mui-fixed fixed top-0 left-0 right-0 w-full text-lg z-[1100] bg-blue"
+        class="mui-fixed fixed top-0 left-0 right-0 w-full text-lg z-[1100] md:w-screen bg-blue"
       >
         <div
           class="box-border flex items-center justify-between mx-auto my-0 h-[var(--header max-w-[var(--content py-0 px-[var(--content-padding md:px-[var(--content-padding"
@@ -75,13 +75,13 @@ exports[`PageTopBar renders hamburger on small screen 1`] = `
 exports[`PageTopBar renders normally on default screen size 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
       <header
-        class="mui-fixed fixed top-0 left-0 right-0 w-full text-lg z-[1100] bg-blue"
+        class="mui-fixed fixed top-0 left-0 right-0 w-full text-lg z-[1100] md:w-screen bg-blue"
       >
         <div
           class="box-border flex items-center justify-between mx-auto my-0 h-[var(--header max-w-[var(--content py-0 px-[var(--content-padding md:px-[var(--content-padding"
@@ -147,13 +147,13 @@ exports[`PageTopBar renders normally on default screen size 1`] = `
 exports[`PageTopBar renders with custom logo 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
       <header
-        class="mui-fixed fixed top-0 left-0 right-0 w-full text-lg z-[1100] bg-blue"
+        class="mui-fixed fixed top-0 left-0 right-0 w-full text-lg z-[1100] md:w-screen bg-blue"
       >
         <div
           class="box-border flex items-center justify-between mx-auto my-0 h-[var(--header max-w-[var(--content py-0 px-[var(--content-padding md:px-[var(--content-padding"
@@ -198,13 +198,13 @@ exports[`PageTopBar renders with custom logo 1`] = `
 exports[`PageTopBar renders with link 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
       <header
-        class="mui-fixed fixed top-0 left-0 right-0 w-full text-lg z-[1100] bg-blue"
+        class="mui-fixed fixed top-0 left-0 right-0 w-full text-lg z-[1100] md:w-screen bg-blue"
       >
         <div
           class="box-border flex items-center justify-between mx-auto my-0 h-[var(--header max-w-[var(--content py-0 px-[var(--content-padding md:px-[var(--content-padding"
diff --git a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
index 090086396e..9a00d64fb8 100644
--- a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PageTopBarMenu renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex items-center"
diff --git a/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap b/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
index 62dcaf2a1a..c4d920fe05 100644
--- a/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SidebarItem collapsible menu is expanded when one of the children is selected 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
@@ -183,7 +183,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
 exports[`SidebarItem collapsible menu is expanded when one of the children is selected and subMenu has a wrapper component 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
@@ -363,7 +363,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
 exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
@@ -453,7 +453,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
 exports[`SidebarItem is selected 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
@@ -503,7 +503,7 @@ exports[`SidebarItem is selected 1`] = `
 exports[`SidebarItem renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
@@ -544,7 +544,7 @@ exports[`SidebarItem renders 1`] = `
 exports[`SidebarItem use accordion for collapsible with menu 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative bg-transparent text-[1rem] text-graphite [&_[data-component-type="accordion-summary"]]:p [&_[data-component-type="accordion-summary"]]:pl [&_[data-component-type="accordion-summary"]]:mx [&_[data-component-type="accordion-summary-content"]]:max-w"
@@ -710,7 +710,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
 exports[`SidebarItem with icon 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
diff --git a/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap b/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
index 9970acd6b5..bed90ce1c5 100644
--- a/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SidebarLogo renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="mb-2 ml-8 shrink-0 block overflow-hidden"
diff --git a/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap b/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap
index d33ae878b4..a10a9bdf21 100644
--- a/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SidebarMenu renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 grow-0 shrink-1 max-w"
@@ -17,7 +17,7 @@ exports[`SidebarMenu renders 1`] = `
 exports[`SidebarMenu with bottom 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm shadow-0 [&_&]:flex-1 grow-0 shrink-1 max-w order-[99]"
diff --git a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
index 9fb236fc4f..6dd7e35514 100644
--- a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
+++ b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Pagination renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="items-center inline-flex"
@@ -167,7 +167,7 @@ exports[`Pagination renders 1`] = `
 exports[`Pagination renders compact without totalPages 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="items-center inline-flex"
@@ -208,7 +208,7 @@ exports[`Pagination renders compact without totalPages 1`] = `
 exports[`Pagination renders disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="items-center inline-flex"
@@ -390,7 +390,7 @@ exports[`Pagination renders disabled 1`] = `
 exports[`Pagination renders nothing for 0 pages 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   />
 </div>
 `;
@@ -398,7 +398,7 @@ exports[`Pagination renders nothing for 0 pages 1`] = `
 exports[`Pagination renders nothing for 1 page 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   />
 </div>
 `;
@@ -406,7 +406,7 @@ exports[`Pagination renders nothing for 1 page 1`] = `
 exports[`Pagination renders with next disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="items-center inline-flex"
diff --git a/packages/base/Paper/src/Paper/__snapshots__/test.tsx.snap b/packages/base/Paper/src/Paper/__snapshots__/test.tsx.snap
index f558f6d1ad..b7ca691766 100644
--- a/packages/base/Paper/src/Paper/__snapshots__/test.tsx.snap
+++ b/packages/base/Paper/src/Paper/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Paper renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="bg-white shadow-1 transition-shadow duration-300 delay-0"
diff --git a/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap b/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap
index 1cb7409ea6..b6093f122d 100644
--- a/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap
+++ b/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap
@@ -4,7 +4,7 @@ exports[`PromptModal renders 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <div
         data-base-ui-portal=""
@@ -141,7 +141,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <button
         aria-disabled="false"
@@ -166,7 +166,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 2`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <button
         aria-disabled="false"
@@ -320,7 +320,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 3`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <button
         aria-disabled="false"
@@ -345,7 +345,7 @@ exports[`PromptModal showPrompt with input returns result on Submit action 1`] =
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <button
         aria-disabled="false"
diff --git a/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap b/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap
index 043630e194..e734866566 100644
--- a/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap
+++ b/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Quote renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex"
diff --git a/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap b/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap
index 7d43adb9df..b4b3281686 100644
--- a/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap
+++ b/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Radio Radio.Group renders radio in a grid group 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-col flex-wrap"
@@ -219,7 +219,7 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
 exports[`Radio Radio.Group renders radio in group 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-col flex-wrap"
@@ -303,7 +303,7 @@ exports[`Radio Radio.Group renders radio in group 1`] = `
 exports[`Radio disabled radio button renders disabled version 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="group relative inline-flex shrink-0 items-start justify-center box-border h-[1rem] w-[1rem] p-0 text-[1rem] mx-0 my-[0.25rem] select-none align-middle transition-all duration-350 ease-in pointer-events cursor-default opacity-[0.48]"
@@ -328,7 +328,7 @@ exports[`Radio disabled radio button renders disabled version 1`] = `
 exports[`Radio radio button renders default radio button 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="group relative inline-flex shrink-0 items-start justify-center box-border h-[1rem] w-[1rem] p-0 text-[1rem] mx-0 my-[0.25rem] select-none align-middle transition-all duration-350 ease-in cursor-pointer"
diff --git a/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap b/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
index c7a935cd85..0b30bef774 100644
--- a/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
+++ b/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`RatingIcon renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span>
       <svg
diff --git a/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap b/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
index ccca13b3dc..1392ec04f3 100644
--- a/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
+++ b/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Rating.Stars renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
diff --git a/packages/base/Section/src/Section/__snapshots__/test.tsx.snap b/packages/base/Section/src/Section/__snapshots__/test.tsx.snap
index fc0250f4db..345c0f07bb 100644
--- a/packages/base/Section/src/Section/__snapshots__/test.tsx.snap
+++ b/packages/base/Section/src/Section/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Section renders collapsible initially collapsed 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="pt-8"
@@ -49,7 +49,7 @@ exports[`Section renders collapsible initially collapsed 1`] = `
 exports[`Section renders collapsible initially expanded 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="pt-8"
@@ -115,7 +115,7 @@ exports[`Section renders collapsible initially expanded 1`] = `
 exports[`Section renders with title, subtitle, actions and content 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="pt-8 [&>:last-child:not(:first-child)]:mt-6"
@@ -171,7 +171,7 @@ exports[`Section renders with title, subtitle, actions and content 1`] = `
 exports[`Section renders without header 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="pt-8 [&>:last-child:not(:first-child)]:mt-6"
diff --git a/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap b/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
index 921b1a3f74..a117dda665 100644
--- a/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NativeSelect renders native select 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
@@ -59,7 +59,7 @@ exports[`NativeSelect renders native select 1`] = `
 exports[`NativeSelect renders native select with the empty option enabled when enableReset is \`true\` 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
diff --git a/packages/base/Select/src/NativeSelectOptions/__snapshots__/test.tsx.snap b/packages/base/Select/src/NativeSelectOptions/__snapshots__/test.tsx.snap
index 15783937e0..d5279d87d9 100644
--- a/packages/base/Select/src/NativeSelectOptions/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelectOptions/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NativeSelectOptions renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <option
       value="1"
diff --git a/packages/base/Select/src/NativeSelectPlaceholder/__snapshots__/test.tsx.snap b/packages/base/Select/src/NativeSelectPlaceholder/__snapshots__/test.tsx.snap
index 553db9be82..560fbf1b7c 100644
--- a/packages/base/Select/src/NativeSelectPlaceholder/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelectPlaceholder/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NativeSelectPlaceholder renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <option
       value=""
@@ -17,7 +17,7 @@ exports[`NativeSelectPlaceholder renders 1`] = `
 exports[`NativeSelectPlaceholder renders disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <option
       disabled=""
@@ -32,7 +32,7 @@ exports[`NativeSelectPlaceholder renders disabled 1`] = `
 exports[`NativeSelectPlaceholder renders with emptySelectValue 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <option
       value="foo"
diff --git a/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
index 3d436d24c2..b6f477c911 100644
--- a/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NonNativeSelect renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
diff --git a/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap
index 264ade7466..a4c31fd2a4 100644
--- a/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NonNativeSelectLimitFooter renders footer when overflow 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="true"
@@ -36,7 +36,7 @@ exports[`NonNativeSelectLimitFooter renders footer when overflow 1`] = `
 exports[`NonNativeSelectLimitFooter renders null when no overflow 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   />
 </div>
 `;
diff --git a/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
index 5fee50379d..8fa9c6de41 100644
--- a/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NonNativeSelectLoader renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
diff --git a/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
index de9271be28..a7f81099d1 100644
--- a/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NonNativeSelectOption renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
@@ -47,7 +47,7 @@ exports[`NonNativeSelectOption renders 1`] = `
 exports[`NonNativeSelectOption sets attributes correctly 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <li
       aria-disabled="false"
diff --git a/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
index 8e0239c3e6..2da7cbfc05 100644
--- a/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NonNativeSelectOptions renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
@@ -86,7 +86,7 @@ exports[`NonNativeSelectOptions renders 1`] = `
 exports[`NonNativeSelectOptions renders no option 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
@@ -128,7 +128,7 @@ exports[`NonNativeSelectOptions renders no option 1`] = `
 exports[`NonNativeSelectOptions renders option groups 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
diff --git a/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap b/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
index ed68f6b5ab..61a2dc0878 100644
--- a/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ScrollMenu renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <ul
       class="relative list-none outline-hidden shadow-1 py-2 px-0 m-0 rounded-sm bg-white"
diff --git a/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap b/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap
index bd244f5192..b2619bc47d 100644
--- a/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SelectCaret renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <svg
       class="fill-current inline-block h-[1em] align-[-.125em] absolute top-[calc(50%-0.5rem)] right-[0.3125rem] text-graphite text-[1rem] cursor-inherit pointer-events"
@@ -21,7 +21,7 @@ exports[`SelectCaret renders 1`] = `
 exports[`SelectCaret renders disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <svg
       class="fill-current inline-block h-[1em] align-[-.125em] absolute top-[calc(50%-0.5rem)] right-[0.3125rem] text-[1rem] cursor-inherit pointer-events text-graphite z-[1]"
diff --git a/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap b/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
index 9ab98f160c..c3ba2a2f93 100644
--- a/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
+++ b/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ShowMore renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <p
       class="m-0 text-md text-graphite font-regular"
@@ -56,7 +56,7 @@ exports[`ShowMore renders 1`] = `
 exports[`ShowMore when custom lessText text is specified should render with custom action link 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <p
       class="m-0 text-md text-graphite font-regular"
@@ -109,7 +109,7 @@ exports[`ShowMore when custom lessText text is specified should render with cust
 exports[`ShowMore when custom showMore text is specified should render with custom action link 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <p
       class="m-0 text-md text-graphite font-regular"
@@ -162,7 +162,7 @@ exports[`ShowMore when custom showMore text is specified should render with cust
 exports[`ShowMore when disableToggle prop is true should render version without action link 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <p
       class="m-0 text-md text-graphite font-regular"
@@ -188,7 +188,7 @@ exports[`ShowMore when disableToggle prop is true should render version without
 exports[`ShowMore when initialExpanded prop is true should render expanded version 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <p
       class="m-0 text-md text-graphite font-regular"
@@ -229,7 +229,7 @@ exports[`ShowMore when initialExpanded prop is true should render expanded versi
 exports[`ShowMore when initialExpanded prop is true when show less link is clicked should render collapsed version 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <p
       class="m-0 text-md text-graphite font-regular"
@@ -282,7 +282,7 @@ exports[`ShowMore when initialExpanded prop is true when show less link is click
 exports[`ShowMore when show more link is clicked should render expanded version 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <p
       class="m-0 text-md text-graphite font-regular"
diff --git a/packages/base/Slide/package.json b/packages/base/Slide/package.json
index 633f20816b..a6d0603325 100644
--- a/packages/base/Slide/package.json
+++ b/packages/base/Slide/package.json
@@ -34,7 +34,8 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-test-utils": "workspace:*"
+    "@toptal/picasso-test-utils": "workspace:*",
+    "@types/react-transition-group": "^4.4.5"
   },
   "files": [
     "dist-package/**",
diff --git a/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap b/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap
index 353b0a0154..6cc27aa61c 100644
--- a/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap
+++ b/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Stepper render with all steps completed 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-row items-center gap-1"
@@ -131,7 +131,7 @@ exports[`Stepper render with all steps completed 1`] = `
 exports[`Stepper render with hidden labels 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-row items-center gap-1"
@@ -239,7 +239,7 @@ exports[`Stepper render with hidden labels 1`] = `
 exports[`Stepper renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-row items-center gap-1"
@@ -347,7 +347,7 @@ exports[`Stepper renders 1`] = `
 exports[`Stepper when steps are custom nodes renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-row items-center gap-1"
diff --git a/packages/base/Step/src/StepperVertical/__snapshots__/test.tsx.snap b/packages/base/Step/src/StepperVertical/__snapshots__/test.tsx.snap
index c1cbda3681..0584cbfed1 100644
--- a/packages/base/Step/src/StepperVertical/__snapshots__/test.tsx.snap
+++ b/packages/base/Step/src/StepperVertical/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`StepperVertical render with all steps completed 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-col"
@@ -113,7 +113,7 @@ exports[`StepperVertical render with all steps completed 1`] = `
 exports[`StepperVertical renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="flex flex-col"
diff --git a/packages/base/Switch/src/Switch/Switch.tsx b/packages/base/Switch/src/Switch/Switch.tsx
index e115b9b261..f1ce0c1cd9 100644
--- a/packages/base/Switch/src/Switch/Switch.tsx
+++ b/packages/base/Switch/src/Switch/Switch.tsx
@@ -1,4 +1,5 @@
 import { Switch as BaseUISwitch } from '@base-ui/react/switch'
+import { useBaseUiId } from '@base-ui/react/internals/useBaseUiId'
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
 import { toReactChangeEvent } from '@toptal/picasso-shared'
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
@@ -49,14 +50,28 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
 
   const rootRest = rest as Omit<
     BaseUISwitch.Root.Props,
-    'checked' | 'disabled' | 'id' | 'value' | 'className' | 'style' | 'onCheckedChange'
+    | 'checked'
+    | 'disabled'
+    | 'id'
+    | 'value'
+    | 'className'
+    | 'style'
+    | 'onCheckedChange'
   >
 
+  // Name the control via `aria-labelledby` so it is the single
+  // label-associated node (see FormControlLabel `labelId`). Only relevant when
+  // there is a label to point at. `useBaseUiId` wraps `React.useId` with a
+  // React < 18 fallback, matching base-ui's own peer support.
+  const generatedLabelId = useBaseUiId()
+  const labelId = label ? generatedLabelId : undefined
+
   const switchElement = (
     <span className='relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip-margin:6px]'>
       <BaseUISwitch.Root
         {...rootRest}
         ref={ref}
+        aria-labelledby={rootRest['aria-labelledby'] ?? labelId}
         checked={checked}
         className={twMerge(
           'w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group',
@@ -103,6 +118,7 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
         label: 'ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em-0.5em+1px)]',
       }}
       control={switchElement}
+      labelId={labelId}
       disabled={disabled}
       label={label}
       titleCase={titleCase}
diff --git a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
index 4c2ace4f1a..7338a60d4a 100644
--- a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
+++ b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
@@ -1,20 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Switch behaves correctly when interacting 1`] = `
-<label
+<div
   class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer items-start text-lg"
   data-testid="switch"
-  id="base-ui-:rg:-label"
 >
   <span
     class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
   >
     <span
       aria-checked="true"
-      aria-labelledby="base-ui-:rg:-label"
+      aria-labelledby="base-ui-:rk:"
       class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer outline-none data-[disabled]:cursor-default"
       data-checked=""
-      id="base-ui-:rf:"
+      id="base-ui-:rl:"
       role="switch"
       tabindex="0"
     >
@@ -28,7 +27,7 @@ exports[`Switch behaves correctly when interacting 1`] = `
     </span>
     <input
       aria-hidden="true"
-      id="base-ui-:rg:"
+      id="base-ui-:rm:"
       style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
       tabindex="-1"
       type="checkbox"
@@ -36,6 +35,7 @@ exports[`Switch behaves correctly when interacting 1`] = `
   </span>
   <span
     class="inline-block leading-[1em] mb-0 text-graphite ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
+    id="base-ui-:rk:"
   >
     <span
       class="align-top text-[0.8125rem]"
@@ -43,13 +43,13 @@ exports[`Switch behaves correctly when interacting 1`] = `
       Switch
     </span>
   </span>
-</label>
+</div>
 `;
 
 exports[`Switch renders default Switch without label 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <span
       class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
@@ -59,7 +59,7 @@ exports[`Switch renders default Switch without label 1`] = `
         class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer outline-none data-[disabled]:cursor-default"
         data-testid="switch"
         data-unchecked=""
-        id="base-ui-:r0:"
+        id="base-ui-:r1:"
         role="switch"
         tabindex="0"
       >
@@ -73,7 +73,7 @@ exports[`Switch renders default Switch without label 1`] = `
       </span>
       <input
         aria-hidden="true"
-        id="base-ui-:r1:"
+        id="base-ui-:r2:"
         style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
         tabindex="-1"
         type="checkbox"
@@ -84,10 +84,9 @@ exports[`Switch renders default Switch without label 1`] = `
 `;
 
 exports[`Switch renders disabled state 1`] = `
-<label
+<div
   class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-default items-start text-lg"
   data-testid="switch"
-  id="base-ui-:r7:-label"
 >
   <span
     class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
@@ -96,11 +95,11 @@ exports[`Switch renders disabled state 1`] = `
     <span
       aria-checked="false"
       aria-disabled="true"
-      aria-labelledby="base-ui-:r7:-label"
+      aria-labelledby="base-ui-:r8:"
       class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer outline-none data-[disabled]:cursor-default"
       data-disabled=""
       data-unchecked=""
-      id="base-ui-:r6:"
+      id="base-ui-:r9:"
       role="switch"
       tabindex="-1"
     >
@@ -116,7 +115,7 @@ exports[`Switch renders disabled state 1`] = `
     <input
       aria-hidden="true"
       disabled=""
-      id="base-ui-:r7:"
+      id="base-ui-:ra:"
       style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
       tabindex="-1"
       type="checkbox"
@@ -124,6 +123,7 @@ exports[`Switch renders disabled state 1`] = `
   </span>
   <span
     class="inline-block leading-[1em] mb-0 text-graphite pointer-events ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
+    id="base-ui-:r8:"
   >
     <span
       class="align-top text-[0.8125rem]"
@@ -131,5 +131,5 @@ exports[`Switch renders disabled state 1`] = `
       Disabled
     </span>
   </span>
-</label>
+</div>
 `;
diff --git a/packages/base/Switch/src/Switch/test.tsx b/packages/base/Switch/src/Switch/test.tsx
index 6b8de6d380..59b0e1f175 100644
--- a/packages/base/Switch/src/Switch/test.tsx
+++ b/packages/base/Switch/src/Switch/test.tsx
@@ -76,4 +76,40 @@ describe('Switch', () => {
     expect(onChange).toHaveBeenCalled()
     expect(getByTestId('switch')).toMatchSnapshot()
   })
+
+  describe('single label-associated node (PF-2244)', () => {
+    it('matches getByLabelText once and resolves to the accessible control', () => {
+      const { getByLabelText, getByRole } = renderSwitch({ label: 'A Switch' })
+
+      // Regression: the base-ui control renders a role="switch" span plus a
+      // hidden native <input>. Both used to be label-associated, so
+      // getByLabelText threw "Found multiple elements". It must now match
+      // exactly the accessible control.
+      expect(getByLabelText('A Switch')).toBe(
+        getByRole('switch', { name: 'A Switch' })
+      )
+    })
+
+    it('toggles when the label text is clicked', () => {
+      const onChange = jest.fn()
+      const { getByText } = renderSwitch({ label: 'A Switch', onChange })
+
+      fireEvent.click(getByText('A Switch'))
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not toggle when disabled and the label text is clicked', () => {
+      const onChange = jest.fn()
+      const { getByText } = renderSwitch({
+        label: 'A Switch',
+        disabled: true,
+        onChange,
+      })
+
+      fireEvent.click(getByText('A Switch'))
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
 })
diff --git a/packages/base/Table/src/Table/__snapshots__/test.tsx.snap b/packages/base/Table/src/Table/__snapshots__/test.tsx.snap
index f33e1b4986..23f721c8f1 100644
--- a/packages/base/Table/src/Table/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/Table/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Table renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table
       class="w-full border-collapse border-spacing"
diff --git a/packages/base/Table/src/TableBody/__snapshots__/test.tsx.snap b/packages/base/Table/src/TableBody/__snapshots__/test.tsx.snap
index dfe99fd2e6..ffb4f22556 100644
--- a/packages/base/Table/src/TableBody/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableBody/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TableCell renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table
       class="w-full border-collapse border-spacing"
diff --git a/packages/base/Table/src/TableCell/__snapshots__/test.tsx.snap b/packages/base/Table/src/TableCell/__snapshots__/test.tsx.snap
index 5281b00da9..5a1e4984c4 100644
--- a/packages/base/Table/src/TableCell/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableCell/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TableCell renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table
       class="w-full border-collapse border-spacing"
@@ -31,7 +31,7 @@ exports[`TableCell renders 1`] = `
 exports[`TableCell renders compact 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table
       class="w-full border-collapse border-spacing"
@@ -59,7 +59,7 @@ exports[`TableCell renders compact 1`] = `
 exports[`TableCell renders narrow 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table
       class="w-full border-collapse border-spacing"
diff --git a/packages/base/Table/src/TableFooter/__snapshots__/test.tsx.snap b/packages/base/Table/src/TableFooter/__snapshots__/test.tsx.snap
index 2125130a1b..d3a425ae9d 100644
--- a/packages/base/Table/src/TableFooter/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableFooter/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TableFooter renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table
       class="w-full border-collapse border-spacing"
diff --git a/packages/base/Table/src/TableHead/__snapshots__/test.tsx.snap b/packages/base/Table/src/TableHead/__snapshots__/test.tsx.snap
index 1c4f767a06..2950462d6f 100644
--- a/packages/base/Table/src/TableHead/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableHead/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TableHead renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table
       class="w-full border-collapse border-spacing"
diff --git a/packages/base/Table/src/TableRow/__snapshots__/test.tsx.snap b/packages/base/Table/src/TableRow/__snapshots__/test.tsx.snap
index d29b0e3894..f76bf7632b 100644
--- a/packages/base/Table/src/TableRow/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableRow/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TableRow renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table
       class="w-full border-collapse border-spacing"
diff --git a/packages/base/Table/src/TableSectionHead/__snapshots__/test.tsx.snap b/packages/base/Table/src/TableSectionHead/__snapshots__/test.tsx.snap
index 6bb5a41ec9..6b2656f140 100644
--- a/packages/base/Table/src/TableSectionHead/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableSectionHead/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TableSectionHead renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table
       class="w-full border-collapse border-spacing"
diff --git a/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap b/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap
index 61743eea72..a799572c92 100644
--- a/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TableCell sort direction is asc renders with a sort button in the right direction 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table>
       <tbody>
@@ -53,7 +53,7 @@ exports[`TableCell sort direction is asc renders with a sort button in the right
 exports[`TableCell sort direction is desc renders with a sort button in the right direction 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <table>
       <tbody>
diff --git a/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap b/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
index b6c6013f8e..484e9680d0 100644
--- a/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
+++ b/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Tab Tab disabled tab 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative min-h flex overflow-hidden overflow-x"
@@ -50,7 +50,7 @@ exports[`Tab Tab disabled tab 1`] = `
 exports[`Tab Tab renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative min-h flex overflow-hidden overflow-x"
@@ -96,7 +96,7 @@ exports[`Tab Tab renders 1`] = `
 exports[`Tab Tab tab with icon 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative min-h flex overflow-hidden overflow-x"
diff --git a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
index 712754a571..fb21345e23 100644
--- a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
+++ b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Tabs renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative min-h flex overflow-hidden overflow-x"
@@ -71,7 +71,7 @@ exports[`Tabs renders 1`] = `
 exports[`Tabs renders in full width 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative min-h flex overflow-hidden"
@@ -139,7 +139,7 @@ exports[`Tabs renders in full width 1`] = `
 exports[`Tabs renders in vertical orientation 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative min-h flex overflow-hidden w-[200px] m-0 flex-col overflow-x"
@@ -208,7 +208,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
 exports[`Tabs renders with a pre-selected option 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative min-h flex overflow-hidden overflow-x"
@@ -293,7 +293,7 @@ exports[`Tabs renders with a pre-selected option 1`] = `
 exports[`Tabs renders with a pre-selected option using custom value 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative min-h flex overflow-hidden overflow-x"
diff --git a/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap b/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap
index fb85d08c21..fe1089dd6d 100644
--- a/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Indicator renders in red color 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="w-2 h-2 rounded-[50%] bg-red"
diff --git a/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap b/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
index 1076c2d886..2683fc0923 100644
--- a/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Tag dismissable label should render dismissable label 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="text-lg transition-none border border-solid rounded-[6.25rem] h-6 max-w inline-flex justify-center items-center cursor-default bg-white group align-middle leading-[inherit] text-graphite border-gray"
@@ -43,7 +43,7 @@ exports[`Tag dismissable label should render dismissable label 1`] = `
 exports[`Tag renders \`blue\` variant 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="text-lg transition-none border border-solid rounded-[6.25rem] h-6 max-w inline-flex justify-center items-center cursor-default bg-white group align-middle leading-[inherit] text-blue border-blue"
@@ -66,7 +66,7 @@ exports[`Tag renders \`blue\` variant 1`] = `
 exports[`Tag renders \`light-grey\` variant 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="text-lg transition-none border border-solid rounded-[6.25rem] h-6 max-w inline-flex justify-center items-center cursor-default bg-white group align-middle leading-[inherit] text-graphite border-gray"
@@ -89,7 +89,7 @@ exports[`Tag renders \`light-grey\` variant 1`] = `
 exports[`Tag renders with adornment 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="text-lg transition-none border border-solid rounded-[6.25rem] h-6 max-w inline-flex justify-center items-center cursor-default bg-white group align-middle leading-[inherit] text-graphite border-gray"
@@ -126,7 +126,7 @@ exports[`Tag renders with adornment 1`] = `
 exports[`Tag renders with connection and icon 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="text-lg transition-none border border-solid rounded-[6.25rem] h-6 max-w inline-flex justify-center items-center cursor-default bg-white group align-middle leading-[inherit] text-graphite border-gray"
diff --git a/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap b/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
index f1c80cd22c..67621c5356 100644
--- a/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TagGroup should render label group with 4 labels 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="-mr -mb [&>*]:mr-[0.5em] [&>*]:mb-[0.5em]"
diff --git a/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap b/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
index 027f7db415..504fe946e0 100644
--- a/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TagRectangular renders rectangular Tag 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="text-lg transition-none rounded-sm font-semibold h-4 inline-flex content-center justify-center align-middle bg-gray"
diff --git a/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap b/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
index 24cf3d69dd..be66b7648d 100644
--- a/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
+++ b/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TagSelector disabled render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       aria-expanded="false"
@@ -71,7 +71,7 @@ exports[`TagSelector preselected value 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <div
         aria-expanded="false"
@@ -137,7 +137,7 @@ exports[`TagSelector preselected value 1`] = `
 exports[`TagSelector renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       aria-expanded="false"
diff --git a/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap b/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
index cbd78dc3fe..427eb76215 100644
--- a/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
+++ b/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TagSelectorInput renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black flex flex-wrap h-auto cursor-pointer [&>input]:min-w [&>input]:grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0 py-1 pl-1"
diff --git a/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx b/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx
index b78b08a0a8..1ea5d5ec0c 100644
--- a/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx
+++ b/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx
@@ -4,23 +4,16 @@ import type { TextLabelProps } from '@toptal/picasso-shared'
 
 export type Props = TextLabelProps & {
   children: React.ReactNode
-  injectFirst?: boolean
 }
 
-export const TestingPicasso = ({
-  children,
-  titleCase,
-  injectFirst = false,
-}: Props) => {
+export const TestingPicasso = ({ children, titleCase }: Props) => {
   return (
     <Picasso
       loadFavicon={false}
       loadFonts={false}
       fixViewport={false}
-      preventPageWidthChangeOnScrollbar={false}
       titleCase={titleCase}
       disableTransitions
-      injectFirst={injectFirst}
     >
       {children}
     </Picasso>
diff --git a/packages/base/Test-Utils/src/test-utils/styles.css b/packages/base/Test-Utils/src/test-utils/styles.css
index e0a1e73afa..60eec95615 100644
--- a/packages/base/Test-Utils/src/test-utils/styles.css
+++ b/packages/base/Test-Utils/src/test-utils/styles.css
@@ -1,6 +1,8 @@
-/* we can't apply reset.css here as it would override current styles */
+/* The Picasso global reset ships in @layer base, so it can never override
+   unlayered app/test styles (layered CSS loses to unlayered by spec). */
 
 @layer theme, base, components;
 @import 'tailwindcss/theme.css' layer(theme);
+@import '@toptal/picasso-tailwind/base';
 @import 'tailwindcss/utilities.css';
 @config "../../../../../tailwind.config.js";
diff --git a/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap b/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap
index 2c1a37d554..0cf166e670 100644
--- a/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap
+++ b/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Timeline renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <div
         class="table h-fit w-fit"
@@ -104,10 +104,10 @@ exports[`Timeline renders 1`] = `
 exports[`Timeline renders with dates 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <div
         class="table h-fit w-fit"
@@ -244,10 +244,10 @@ exports[`Timeline renders with dates 1`] = `
 exports[`Timeline renders with icons 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <div
         class="table h-fit w-fit"
@@ -345,10 +345,10 @@ exports[`Timeline renders with icons 1`] = `
 exports[`Timeline renders without a connector 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <div
         class="table h-fit w-fit"
diff --git a/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap b/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
index dc6691bbff..2d7c931159 100644
--- a/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
+++ b/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TimePicker renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(:focus)]:after:border-blue after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-default"
diff --git a/packages/base/Tooltip/src/Tooltip/__snapshots__/test.tsx.snap b/packages/base/Tooltip/src/Tooltip/__snapshots__/test.tsx.snap
index 619aa5e3d5..1f75469e30 100644
--- a/packages/base/Tooltip/src/Tooltip/__snapshots__/test.tsx.snap
+++ b/packages/base/Tooltip/src/Tooltip/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Tooltip when closed does not render the content 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       data-testid="tooltip-trigger"
@@ -19,7 +19,7 @@ exports[`Tooltip when closed does not render the content 1`] = `
 exports[`Tooltip when portals are disabled renders the content within the parent 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-describedby="tooltip-id"
diff --git a/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap b/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap
index c6f61d0739..b164dbe9f9 100644
--- a/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap
+++ b/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Typography inherit size render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <p
       class="m-0 font-inherit leading-[1.5em] text-graphite font-regular"
@@ -17,7 +17,7 @@ exports[`Typography inherit size render 1`] = `
 exports[`Typography renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <p
       class="m-0 font-inherit leading-[1.5em] text-graphite font-regular"
@@ -31,7 +31,7 @@ exports[`Typography renders 1`] = `
 exports[`Typography variant heading small render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <h4
       class="m-0 text-md text-black font-semibold"
diff --git a/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap b/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap
index 82fb30fb38..b3bebfe739 100644
--- a/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap
+++ b/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`UserBadge auto center alignment 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-center flex text-[1rem]"
@@ -48,7 +48,7 @@ exports[`UserBadge auto center alignment 1`] = `
 exports[`UserBadge custom name 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-start flex text-[1rem]"
@@ -96,7 +96,7 @@ exports[`UserBadge custom name 1`] = `
 exports[`UserBadge custom title 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-start flex text-[1rem]"
@@ -149,7 +149,7 @@ exports[`UserBadge custom title 1`] = `
 exports[`UserBadge invert render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-start flex text-[1rem]"
@@ -199,7 +199,7 @@ exports[`UserBadge invert render 1`] = `
 exports[`UserBadge manual center alignment 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-center flex text-[1rem]"
@@ -249,7 +249,7 @@ exports[`UserBadge manual center alignment 1`] = `
 exports[`UserBadge override auto center alignment 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-start flex text-[1rem]"
@@ -294,7 +294,7 @@ exports[`UserBadge override auto center alignment 1`] = `
 exports[`UserBadge renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-start flex text-[1rem]"
@@ -344,7 +344,7 @@ exports[`UserBadge renders 1`] = `
 exports[`UserBadge small size 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="items-start flex text-[1rem]"
diff --git a/packages/base/Utils/package.json b/packages/base/Utils/package.json
index a828b8fd74..9912f46d2c 100644
--- a/packages/base/Utils/package.json
+++ b/packages/base/Utils/package.json
@@ -38,7 +38,6 @@
   },
   "peerDependencies": {
     "@toptal/picasso-provider": "*",
-    "notistack": "1.0.10",
     "react": ">=16.12.0"
   },
   "publishConfig": {
diff --git a/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap b/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap
index fbb023d233..082549abd5 100644
--- a/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap
+++ b/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Modal useModal opens and closes modal 1`] = `
   />
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <button
         aria-disabled="false"
@@ -120,7 +120,7 @@ exports[`Modal useModal opens and closes modal 2`] = `
   />
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <button
         aria-disabled="false"
@@ -149,7 +149,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
   />
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
       <button
         aria-disabled="false"
diff --git a/packages/base/Utils/src/utils/Transitions/Rotate180/__snapshots__/test.tsx.snap b/packages/base/Utils/src/utils/Transitions/Rotate180/__snapshots__/test.tsx.snap
index f12c20f8cf..d4b883e5d7 100644
--- a/packages/base/Utils/src/utils/Transitions/Rotate180/__snapshots__/test.tsx.snap
+++ b/packages/base/Utils/src/utils/Transitions/Rotate180/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Rotate180 render with transformation 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="transition-transform duration-150 ease-in rotate-180"
@@ -17,7 +17,7 @@ exports[`Rotate180 render with transformation 1`] = `
 exports[`Rotate180 render without transformation 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class="transition-transform duration-150 ease-in"
diff --git a/packages/base/Utils/src/utils/index.ts b/packages/base/Utils/src/utils/index.ts
index be6889e383..28021d3048 100644
--- a/packages/base/Utils/src/utils/index.ts
+++ b/packages/base/Utils/src/utils/index.ts
@@ -89,6 +89,7 @@ export { SPACING_8 } from '@toptal/picasso-provider'
 export { SPACING_10 } from '@toptal/picasso-provider'
 export { SPACING_12 } from '@toptal/picasso-provider'
 export { spacingToRem, spacingToPx } from '@toptal/picasso-provider'
+export * from './spacing-classes'
 
 export {
   useDeprecationWarning,
diff --git a/packages/base/Container/src/Container/utils/constants.ts b/packages/base/Utils/src/utils/spacing-classes/constants.ts
similarity index 100%
rename from packages/base/Container/src/Container/utils/constants.ts
rename to packages/base/Utils/src/utils/spacing-classes/constants.ts
diff --git a/packages/base/Container/src/Container/utils/get-spacing-classes.test.ts b/packages/base/Utils/src/utils/spacing-classes/get-spacing-classes.test.ts
similarity index 100%
rename from packages/base/Container/src/Container/utils/get-spacing-classes.test.ts
rename to packages/base/Utils/src/utils/spacing-classes/get-spacing-classes.test.ts
diff --git a/packages/base/Container/src/Container/utils/get-spacing-classes.ts b/packages/base/Utils/src/utils/spacing-classes/get-spacing-classes.ts
similarity index 100%
rename from packages/base/Container/src/Container/utils/get-spacing-classes.ts
rename to packages/base/Utils/src/utils/spacing-classes/get-spacing-classes.ts
diff --git a/packages/base/Utils/src/utils/spacing-classes/index.ts b/packages/base/Utils/src/utils/spacing-classes/index.ts
new file mode 100644
index 0000000000..9c4fdfb3fc
--- /dev/null
+++ b/packages/base/Utils/src/utils/spacing-classes/index.ts
@@ -0,0 +1 @@
+export * from './get-spacing-classes'
diff --git a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
index 00572ddbd6..269247012a 100644
--- a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
@@ -36,9 +36,8 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
               <div
                 class="box-border m-0 leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
               >
-                <label
+                <div
                   class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-                  id="base-ui-:r8:"
                 >
                   <span
                     class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
@@ -48,7 +47,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                       aria-labelledby="base-ui-:r8:"
                       class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
                       data-unchecked=""
-                      id="base-ui-:r6:"
+                      id="base-ui-:r9:"
                       role="checkbox"
                       tabindex="0"
                     />
@@ -62,6 +61,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                   </span>
                   <span
                     class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+                    id="base-ui-:r8:"
                   >
                     <span
                       class="align-top text-[0.8125rem]"
@@ -69,24 +69,23 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                       checkbox-label-0
                     </span>
                   </span>
-                </label>
+                </div>
               </div>
               <div
                 class="box-border m-0 leading-none pt-0 pb-0 [&_.picasso-checkbox]:mb-[0.5em]"
               >
-                <label
+                <div
                   class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-                  id="base-ui-:rb:"
                 >
                   <span
                     class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
                   >
                     <span
                       aria-checked="false"
-                      aria-labelledby="base-ui-:rb:"
+                      aria-labelledby="base-ui-:rc:"
                       class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
                       data-unchecked=""
-                      id="base-ui-:r9:"
+                      id="base-ui-:rd:"
                       role="checkbox"
                       tabindex="0"
                     />
@@ -100,6 +99,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                   </span>
                   <span
                     class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+                    id="base-ui-:rc:"
                   >
                     <span
                       class="align-top text-[0.8125rem]"
@@ -107,7 +107,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
                       checkbox-label-1
                     </span>
                   </span>
-                </label>
+                </div>
               </div>
             </div>
           </div>
@@ -121,7 +121,7 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
 exports[`Form.Checkbox default render for single checkbox 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
@@ -134,19 +134,18 @@ exports[`Form.Checkbox default render for single checkbox 1`] = `
           data-field-has-error="false"
           data-testid="single-checkbox"
         >
-          <label
+          <div
             class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-            id="single-checkbox-label"
           >
             <span
               class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
             >
               <span
                 aria-checked="false"
-                aria-labelledby="single-checkbox-label"
+                aria-labelledby="base-ui-:r0:"
                 class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
                 data-unchecked=""
-                id="base-ui-:r0:"
+                id="base-ui-:r1:"
                 role="checkbox"
                 tabindex="0"
                 type="checkbox"
@@ -162,6 +161,7 @@ exports[`Form.Checkbox default render for single checkbox 1`] = `
             </span>
             <span
               class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+              id="base-ui-:r0:"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -169,7 +169,7 @@ exports[`Form.Checkbox default render for single checkbox 1`] = `
                 The checkbox label
               </span>
             </span>
-          </label>
+          </div>
         </div>
       </form>
     </div>
@@ -180,7 +180,7 @@ exports[`Form.Checkbox default render for single checkbox 1`] = `
 exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
@@ -193,19 +193,18 @@ exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
           data-field-has-error="false"
           data-testid="single-checkbox"
         >
-          <label
+          <div
             class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
-            id="single-checkbox-label"
           >
             <span
               class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
             >
               <span
                 aria-checked="false"
-                aria-labelledby="single-checkbox-label"
+                aria-labelledby="base-ui-:rg:"
                 class="relative box-border inline-block h-4 w-4 rounded-sm border border-solid text-[1rem] leading-4 cursor-pointer transition-all duration-350 ease-in data-unchecked:bg-white data-unchecked:border-gray data-checked:bg-blue data-checked:border-blue data-checked:text-white data-indeterminate:bg-blue data-indeterminate:border-blue data-indeterminate:text-white [&[data-unchecked]:not([data-disabled]):hover]:border-gray [&[data-checked]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-checked]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:bg-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] [&[data-indeterminate]:not([data-disabled]):hover]:border-[color-mix(in_srgb,theme(colors.blue.500)_84%,white)] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-focused:shadow-[0_0_0_3px_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] data-disabled:opacity-[0.48] data-disabled:cursor-default data-checked:before:absolute data-checked:before:content-[''] data-checked:before:top-[calc(0.5rem_-_1px)] data-checked:before:left-[calc(0.1875rem_-_1px)] data-checked:before:h-[0.125rem] data-checked:before:w-[0.1875rem] data-checked:before:bg-white data-checked:before:[transform:rotate(45deg)] data-checked:after:absolute data-checked:after:content-[''] data-checked:after:top-[calc(0.4375rem_-_1px)] data-checked:after:left-[calc(0.25rem_-_1px)] data-checked:after:h-[0.125rem] data-checked:after:w-[0.5625rem] data-checked:after:bg-white data-checked:after:[transform:rotate(-45deg)] data-indeterminate:before:absolute data-indeterminate:before:content-[''] data-indeterminate:before:top-1/2 data-indeterminate:before:left-1/2 data-indeterminate:before:h-[0.125rem] data-indeterminate:before:w-[0.625rem] data-indeterminate:before:bg-white data-indeterminate:before:[transform:translate(-50%,-50%)]"
                 data-unchecked=""
-                id="base-ui-:rc:"
+                id="base-ui-:rh:"
                 role="checkbox"
                 tabindex="0"
                 type="checkbox"
@@ -221,6 +220,7 @@ exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
             </span>
             <span
               class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
+              id="base-ui-:rg:"
             >
               <span
                 class="align-top text-[0.8125rem]"
@@ -233,7 +233,7 @@ exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
                 The checkbox label
               </span>
             </span>
-          </label>
+          </div>
         </div>
       </form>
     </div>
diff --git a/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap
index c2a2e60230..0d5a9bbc5a 100644
--- a/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FieldLabel renders default field label 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <label
       class="block leading-[1em] mb-[0.5em] text-graphite"
diff --git a/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
index 38fa1973ab..472b1d656f 100644
--- a/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Form renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
@@ -54,7 +54,7 @@ exports[`Form renders 1`] = `
 exports[`Form renders with an error 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
diff --git a/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap
index 3971a7a318..32120f6532 100644
--- a/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FormRadio renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
@@ -114,7 +114,7 @@ exports[`FormRadio renders 1`] = `
 exports[`FormRadio required with asterisk 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
diff --git a/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap
index 8426eb3f81..e078bd743b 100644
--- a/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Rating Thumbs renders default Stars 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
@@ -158,7 +158,7 @@ exports[`Rating Thumbs renders default Stars 1`] = `
 exports[`Rating Thumbs renders default Thumbs 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
diff --git a/packages/picasso-provider/package.json b/packages/picasso-provider/package.json
index c6f32bdd4a..77d8bbd840 100644
--- a/packages/picasso-provider/package.json
+++ b/packages/picasso-provider/package.json
@@ -24,12 +24,10 @@
     "url": "https://github.com/toptal/picasso/issues"
   },
   "peerDependencies": {
-    "react": ">=16.12.0 < 19.0.0",
+    "react": ">=16.12.0",
     "typescript": "^5.5.0"
   },
   "dependencies": {
-    "@material-ui/core": "4.12.4",
-    "@material-ui/utils": "4.11.3",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "notistack": "3.0.1",
diff --git a/packages/picasso-provider/src/CssBaseline/CssBaseline.tsx b/packages/picasso-provider/src/CssBaseline/CssBaseline.tsx
deleted file mode 100644
index 1f86755119..0000000000
--- a/packages/picasso-provider/src/CssBaseline/CssBaseline.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import type { CssBaselineProps } from '@material-ui/core/CssBaseline'
-
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoCssBaseline',
-})
-
-const CssBaseline = ({ children }: CssBaselineProps) => {
-  useStyles()
-
-  return <>{children}</>
-}
-
-export default CssBaseline
diff --git a/packages/picasso-provider/src/CssBaseline/index.ts b/packages/picasso-provider/src/CssBaseline/index.ts
deleted file mode 100644
index 3fa60bb941..0000000000
--- a/packages/picasso-provider/src/CssBaseline/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CssBaseline'
diff --git a/packages/picasso-provider/src/CssBaseline/styles.ts b/packages/picasso-provider/src/CssBaseline/styles.ts
deleted file mode 100644
index 9f1528fc0f..0000000000
--- a/packages/picasso-provider/src/CssBaseline/styles.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    '@global': {
-      html: {
-        boxSizing: 'initial',
-        '-webkit-font-smoothing': 'antialiased',
-        '-moz-osx-font-smoothing': 'grayscale',
-      },
-      '*, *::before, *::after': {
-        boxSizing: 'inherit',
-      },
-      body: {
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: '100vh',
-        margin: 0,
-        backgroundColor: palette.common.white,
-      },
-      '@media print': {
-        body: {
-          backgroundColor: palette.common.white,
-        },
-      },
-      '#root': {
-        display: 'flex',
-        flex: 1,
-      },
-    },
-  })
diff --git a/packages/picasso-provider/src/Favicon/test.tsx b/packages/picasso-provider/src/Favicon/test.tsx
index 5d89bcccb9..e550844e8b 100644
--- a/packages/picasso-provider/src/Favicon/test.tsx
+++ b/packages/picasso-provider/src/Favicon/test.tsx
@@ -10,7 +10,6 @@ const render: typeof baseRender = ui =>
       loadFavicon={false}
       loadFonts={false}
       fixViewport={false}
-      preventPageWidthChangeOnScrollbar={false}
       disableTransitions
     >
       {ui}
diff --git a/packages/picasso-provider/src/Picasso/NotificationsProvider/NotificationsProvider.tsx b/packages/picasso-provider/src/Picasso/NotificationsProvider/NotificationsProvider.tsx
index 5b5ea860e1..feb3572147 100644
--- a/packages/picasso-provider/src/Picasso/NotificationsProvider/NotificationsProvider.tsx
+++ b/packages/picasso-provider/src/Picasso/NotificationsProvider/NotificationsProvider.tsx
@@ -1,21 +1,15 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
 import React from 'react'
 
 import { useDrawer, usePageTopBar } from '../RootContext'
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoNotificationsProvider',
-})
+import { containerRoot, containerTopWithMargin } from './styles'
 
 export interface NotificationsProviderProps {
   /** Notification DOMNode for createPortal */
   children: React.ReactNode
   /** Valid HTML Node element, used to target `ReactDOM.createPortal`.*/
   container?: HTMLElement
-  /** Maximum notifications that can be stacked on top of one another.   */
+  /** Maximum notifications that can be stacked on top of one another. */
   maxNotifications?: 1 | 2 | 3 | 4 | 5
 }
 
@@ -26,17 +20,16 @@ const NotificationsProvider = ({
 }: NotificationsProviderProps) => {
   const { hasTopBar } = usePageTopBar()
   const { hasDrawer } = useDrawer()
-  const classes = useStyles()
 
   const containerAnchorOriginTop =
-    hasTopBar && !hasDrawer ? classes.rootWithMargin : undefined
+    hasTopBar && !hasDrawer ? containerTopWithMargin : undefined
 
   return (
     <SnackbarProvider
       maxSnack={maxNotifications}
       domRoot={container}
       classes={{
-        containerRoot: classes.root,
+        containerRoot,
         containerAnchorOriginTopRight: containerAnchorOriginTop,
         containerAnchorOriginTopLeft: containerAnchorOriginTop,
         containerAnchorOriginTopCenter: containerAnchorOriginTop,
diff --git a/packages/picasso-provider/src/Picasso/NotificationsProvider/styles.ts b/packages/picasso-provider/src/Picasso/NotificationsProvider/styles.ts
index a5eee8b449..de68367cd5 100644
--- a/packages/picasso-provider/src/Picasso/NotificationsProvider/styles.ts
+++ b/packages/picasso-provider/src/Picasso/NotificationsProvider/styles.ts
@@ -1,24 +1,23 @@
-import { createStyles } from '@material-ui/core'
+/**
+ * Tailwind class strings for the notistack `SnackbarProvider` container slots,
+ * passed into its `classes` prop. The `[&>div]` / `[&>div>div]` variants target
+ * notistack's internal container DOM: the per-anchor wrapper and, inside it,
+ * each per-notification item wrapper.
+ */
 
-// --- need to move to shared config
+// Header heights. `containerTopWithMargin` mirrors `headerHeight.default`;
+// Tailwind can't read the value at runtime, so keep the class literal in sync.
 export const headerHeight = { default: '4.5rem', smallAndMedium: '3rem' }
 
-const collapse = {
-  container: '& > div',
-  wrapper: '& > div > div',
-}
+export const containerRoot = [
+  '[&>div]:pointer-events-auto',
+  '[&>div>div]:px-0',
+  '[&>div>div]:py-[6px]',
+  // Arbitrary property preserves the original `ease` timing: the
+  // `transition-[padding]` utility would inject Tailwind's own easing curve.
+  '[&>div>div]:[transition:padding_300ms_ease_0ms]',
+].join(' ')
 
-export default createStyles({
-  root: {
-    [collapse.container]: {
-      pointerEvents: 'all',
-    },
-    [collapse.wrapper]: {
-      padding: `6px 0px`,
-      transition: 'padding 300ms ease 0ms',
-    },
-  },
-  rootWithMargin: {
-    marginTop: headerHeight.default,
-  },
-})
+// Shown when a top bar is present without a drawer: offset notifications below
+// the header (mirrors headerHeight.default = 4.5rem).
+export const containerTopWithMargin = 'mt-[4.5rem]'
diff --git a/packages/picasso-provider/src/Picasso/Picasso.tsx b/packages/picasso-provider/src/Picasso/Picasso.tsx
index 194cedad92..694f67ac88 100644
--- a/packages/picasso-provider/src/Picasso/Picasso.tsx
+++ b/packages/picasso-provider/src/Picasso/Picasso.tsx
@@ -1,26 +1,16 @@
-import type { ThemeOptions } from '@material-ui/core/styles'
-import {
-  MuiThemeProvider,
-  StylesProvider,
-  createGenerateClassName,
-} from '@material-ui/core/styles'
 import type { ReactNode } from 'react'
-import React, { useMemo } from 'react'
+import React from 'react'
 
-import CssBaseline from '../CssBaseline'
 import FontsLoader from './FontsLoader'
 import HelmetProvider from './HelmetProvider'
 import NotificationsProvider from './NotificationsProvider'
 import Favicon from '../Favicon'
 import type { EnvironmentType, TextLabelProps } from '../types'
-import { generateRandomStringOrGetEmptyInTest } from './utils'
 import { PicassoBreakpoints } from './config'
-import PicassoProvider from './PicassoProvider'
 import FixViewport from './FixViewport'
 import type { PicassoGlobalStylesProviderProps } from './PicassoGlobalStylesProvider'
 import PicassoGlobalStylesProvider from './PicassoGlobalStylesProvider'
 import PicassoRootNode from './PicassoRootNode'
-import PreventPageWidthChangeOnScrollbar from '../PreventPageWidthChangeOnScrollbar'
 
 export interface PicassoProps extends TextLabelProps {
   children?: ReactNode
@@ -30,100 +20,54 @@ export interface PicassoProps extends TextLabelProps {
   loadFavicon?: boolean
   /** current environment */
   environment?: EnvironmentType<'test' | 'temploy'>
-  /** Whether to apply Picasso CSS reset */
-  reset?: boolean
   /** Sets a minimum width of the page */
   responsive?: boolean
   /** Whether to load viewport fix or not */
   fixViewport?: boolean
-  /** Whether to load scrollbar page jump fix or not */
-  preventPageWidthChangeOnScrollbar?: boolean
   /** Notification DOMNode for createPortal */
   notificationContainer?: HTMLElement
   /** Component that is used to render root node  */
   RootComponent?: PicassoGlobalStylesProviderProps['RootComponent']
-  theme?: ThemeOptions
   /** Disables usage of `<HelmetProvider>` component from `react-helmet-async` package */
   disableHelmet?: boolean
   /** Disables transitions for components like Loader, to make testing easier */
   disableTransitions?: boolean
-  /** Disables unique prefix for styles class names */
-  disableClassNamePrefix?: boolean
-  /**
-   * By default, the styles are injected last in the <head> element of the page.
-   * As a result, they gain more specificity than any other style sheet.
-   * If you want to override Picasso's styles, set this prop.
-   */
-  injectFirst?: boolean
 }
 
 const Picasso = ({
   loadFonts = true,
   loadFavicon = true,
-  reset = true,
   responsive = true,
   environment = 'development',
   children,
-  preventPageWidthChangeOnScrollbar = true,
   fixViewport = true,
   notificationContainer,
   RootComponent = PicassoRootNode,
   titleCase,
-  theme,
   disableHelmet,
   disableTransitions,
-  disableClassNamePrefix,
-  injectFirst,
 }: PicassoProps) => {
-  if (theme) {
-    PicassoProvider.extendTheme(theme)
-  }
-
   if (!responsive) {
-    PicassoProvider.disableResponsiveStyle()
     PicassoBreakpoints.disableMobileBreakpoints()
   }
 
-  const generateClassName = useMemo(
-    () =>
-      createGenerateClassName({
-        // if there are multiples instances of Picasso
-        // on the page we want each set of styles to be unique
-        seed: disableClassNamePrefix
-          ? ''
-          : generateRandomStringOrGetEmptyInTest(),
-      }),
-    [disableClassNamePrefix]
-  )
-
   return (
-    <StylesProvider
-      generateClassName={generateClassName}
-      injectFirst={injectFirst}
+    <PicassoGlobalStylesProvider
+      RootComponent={RootComponent}
+      environment={environment}
+      titleCase={titleCase}
+      disableTransitions={disableTransitions}
+      responsive={responsive}
     >
-      <MuiThemeProvider theme={PicassoProvider.theme}>
-        <PicassoGlobalStylesProvider
-          RootComponent={RootComponent}
-          environment={environment}
-          titleCase={titleCase}
-          disableTransitions={disableTransitions}
-          preventPageWidthChangeOnScrollbar={preventPageWidthChangeOnScrollbar}
-        >
-          <HelmetProvider disabled={disableHelmet}>
-            {fixViewport && <FixViewport />}
-            {loadFonts && <FontsLoader />}
-            {reset && <CssBaseline />}
-            {preventPageWidthChangeOnScrollbar && (
-              <PreventPageWidthChangeOnScrollbar />
-            )}
-            {loadFavicon && <Favicon environment={environment} />}
-            <NotificationsProvider container={notificationContainer}>
-              {children}
-            </NotificationsProvider>
-          </HelmetProvider>
-        </PicassoGlobalStylesProvider>
-      </MuiThemeProvider>
-    </StylesProvider>
+      <HelmetProvider disabled={disableHelmet}>
+        {fixViewport && <FixViewport />}
+        {loadFonts && <FontsLoader />}
+        {loadFavicon && <Favicon environment={environment} />}
+        <NotificationsProvider container={notificationContainer}>
+          {children}
+        </NotificationsProvider>
+      </HelmetProvider>
+    </PicassoGlobalStylesProvider>
   )
 }
 
diff --git a/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx b/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx
index 45b1779578..dd1d13d71f 100644
--- a/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx
+++ b/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx
@@ -15,7 +15,7 @@ export interface PicassoGlobalStylesProviderProps extends TextLabelProps {
   >
   environment: EnvironmentType<'test' | 'temploy'>
   disableTransitions?: boolean
-  preventPageWidthChangeOnScrollbar?: boolean
+  responsive?: boolean
 }
 
 const breakpointKeyByRange: Record<BreakpointKeys, BreakpointKeys> = {
@@ -35,7 +35,7 @@ const PicassoGlobalStylesProvider = (
     environment,
     titleCase,
     disableTransitions,
-    preventPageWidthChangeOnScrollbar,
+    responsive,
   } = props
 
   const rootRef = useRef<HTMLDivElement | null>(null)
@@ -80,7 +80,7 @@ const PicassoGlobalStylesProvider = (
       }))
     },
     disableTransitions,
-    preventPageWidthChangeOnScrollbar,
+    responsive,
   })
 
   useEffect(() => {
diff --git a/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx b/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
index 4dc5497ecb..f0fe218581 100644
--- a/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
+++ b/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
@@ -1,73 +1,37 @@
-import {
-  MuiThemeProvider,
-  StylesProvider,
-  createGenerateClassName,
-} from '@material-ui/core/styles'
-import React, { useMemo } from 'react'
+import React from 'react'
 
-import CssBaseline from '../../CssBaseline'
-import { generateRandomStringOrGetEmptyInTest } from '../utils'
 import { PicassoBreakpoints } from '../config'
-import PicassoProvider from '../PicassoProvider'
 import type { PicassoProps } from '../Picasso'
 import PicassoRootNode from '../PicassoRootNode'
 import PicassoGlobalStylesProvider from '../PicassoGlobalStylesProvider'
 
 type PicassoLightProps = Omit<
   PicassoProps,
-  'loadFavicon' | 'loadFonts' | 'fixViewport' | 'notificationsContainer'
+  'loadFavicon' | 'loadFonts' | 'fixViewport' | 'notificationContainer'
 >
 
 const PicassoLight = ({
-  reset = true,
   responsive = true,
   environment = 'development',
   children,
   RootComponent = PicassoRootNode,
   titleCase,
-  theme,
   disableTransitions,
-  disableClassNamePrefix,
-  injectFirst = true,
 }: PicassoLightProps) => {
-  if (theme) {
-    PicassoProvider.extendTheme(theme)
-  }
-
   if (!responsive) {
-    PicassoProvider.disableResponsiveStyle()
     PicassoBreakpoints.disableMobileBreakpoints()
   }
 
-  const generateClassName = useMemo(
-    () =>
-      createGenerateClassName({
-        // if there are multiples instances of Picasso
-        // on the page we want each set of styles to be unique
-        seed: disableClassNamePrefix
-          ? ''
-          : generateRandomStringOrGetEmptyInTest(),
-      }),
-    [disableClassNamePrefix]
-  )
-
   return (
-    <StylesProvider
-      generateClassName={generateClassName}
-      injectFirst={injectFirst}
+    <PicassoGlobalStylesProvider
+      RootComponent={RootComponent}
+      environment={environment}
+      titleCase={titleCase}
+      disableTransitions={disableTransitions}
+      responsive={responsive}
     >
-      <MuiThemeProvider theme={PicassoProvider.theme}>
-        <PicassoGlobalStylesProvider
-          RootComponent={RootComponent}
-          environment={environment}
-          titleCase={titleCase}
-          disableTransitions={disableTransitions}
-        >
-          {reset && <CssBaseline />}
-          {children}
-        </PicassoGlobalStylesProvider>
-      </MuiThemeProvider>
-    </StylesProvider>
+      {children}
+    </PicassoGlobalStylesProvider>
   )
 }
 
diff --git a/packages/picasso-provider/src/Picasso/PicassoProvider.tsx b/packages/picasso-provider/src/Picasso/PicassoProvider.tsx
deleted file mode 100644
index 5c3f0c1c9f..0000000000
--- a/packages/picasso-provider/src/Picasso/PicassoProvider.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { Theme, ThemeOptions } from '@material-ui/core/styles'
-import { createTheme } from '@material-ui/core/styles'
-import type { Overrides } from '@material-ui/core/styles/overrides'
-import merge from 'lodash/merge'
-import './config/theme'
-
-import {
-  palette,
-  layout,
-  breakpoints,
-  screens,
-  transitions,
-  typography,
-  sizes,
-  shadows,
-  spacings,
-} from './config'
-
-const picasso: ThemeOptions = {
-  palette,
-  layout,
-  transitions,
-  sizes,
-  breakpoints,
-  screens,
-  shadows,
-  typography,
-  zIndex: {
-    tooltip: 1300,
-  },
-  props: {
-    MuiButtonBase: {
-      disableRipple: true,
-    },
-    MuiList: {
-      disablePadding: true,
-    },
-    MuiPaper: {
-      square: true,
-    },
-    MuiOutlinedInput: {
-      notched: false,
-    },
-  },
-  spacings,
-}
-
-class Provider {
-  theme: Theme
-
-  constructor(theme: Theme) {
-    this.theme = theme
-  }
-
-  disableResponsiveStyle() {
-    this.theme.layout.contentMinWidth = '768px'
-  }
-
-  override(getOverride: (theme: Theme) => Partial<Overrides>) {
-    const newOverride = getOverride(this.theme)
-
-    this.extendThemeOverrides(newOverride)
-  }
-
-  extendThemeOverrides(newOverride: Partial<Overrides>) {
-    const overrides = this.theme.overrides || {}
-
-    Object.assign(overrides, newOverride)
-
-    this.theme.overrides = overrides
-  }
-
-  extendTheme(theme: ThemeOptions) {
-    this.theme = merge(this.theme, theme)
-  }
-}
-
-const PicassoProvider = new Provider(createTheme(picasso))
-
-export default PicassoProvider
diff --git a/packages/picasso-provider/src/Picasso/PicassoRootNode.tsx b/packages/picasso-provider/src/Picasso/PicassoRootNode.tsx
index 3edbab5edb..bc7aca79c5 100644
--- a/packages/picasso-provider/src/Picasso/PicassoRootNode.tsx
+++ b/packages/picasso-provider/src/Picasso/PicassoRootNode.tsx
@@ -1,29 +1,18 @@
 import type { ReactNode } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 
-import globalStyles from './styles'
+import { root } from './styles'
 
 export interface PicassoRootNodeProps {
   children?: ReactNode
 }
 
-const useGlobalStyles = makeStyles<Theme>(globalStyles, {
-  name: 'Picasso',
-})
-
 const PicassoRootNode = forwardRef<HTMLDivElement, PicassoRootNodeProps>(
-  (props, ref) => {
-    const { children } = props
-    const classes = useGlobalStyles()
-
-    return (
-      <div ref={ref} className={classes.root}>
-        {children}
-      </div>
-    )
-  }
+  ({ children }, ref) => (
+    <div ref={ref} className={root}>
+      {children}
+    </div>
+  )
 )
 
 PicassoRootNode.displayName = 'PicassoRootNode'
diff --git a/packages/picasso-provider/src/Picasso/RootContext.ts b/packages/picasso-provider/src/Picasso/RootContext.ts
index 15394fa765..884bc66f42 100644
--- a/packages/picasso-provider/src/Picasso/RootContext.ts
+++ b/packages/picasso-provider/src/Picasso/RootContext.ts
@@ -14,8 +14,8 @@ export interface RootContextProps extends TextLabelProps {
   hasDrawer: boolean
   setHasDrawer: (value: boolean) => void
   disableTransitions?: boolean
+  responsive?: boolean
   currentBreakpointRange?: BreakpointKeys
-  preventPageWidthChangeOnScrollbar?: boolean
 }
 
 export const RootContext = React.createContext<RootContextProps>({
@@ -28,6 +28,7 @@ export const RootContext = React.createContext<RootContextProps>({
   hasDrawer: false,
   setHasDrawer: () => {},
   disableTransitions: false,
+  responsive: true,
   currentBreakpointRange: undefined,
 })
 
@@ -85,6 +86,7 @@ export const useAppConfig = () => {
     environment: context.environment,
     titleCase: context.titleCase,
     disableTransitions: context.disableTransitions,
+    responsive: context.responsive,
   }
 }
 
@@ -95,12 +97,3 @@ export const useCurrentBreakpointRange = () => {
     currentBreakpointRange: context.currentBreakpointRange,
   }
 }
-
-export const usePreventPageWidthChangeOnScrollbar = () => {
-  const context = useContext(RootContext)
-
-  return {
-    preventPageWidthChangeOnScrollbar:
-      context.preventPageWidthChangeOnScrollbar,
-  }
-}
diff --git a/packages/picasso-provider/src/Picasso/config/breakpoints.ts b/packages/picasso-provider/src/Picasso/config/breakpoints.ts
index 1d8160e842..2d1f6595fd 100644
--- a/packages/picasso-provider/src/Picasso/config/breakpoints.ts
+++ b/packages/picasso-provider/src/Picasso/config/breakpoints.ts
@@ -1,12 +1,12 @@
 /* eslint-disable complexity */
 import { useState, useEffect, useCallback } from 'react'
-import type { BreakpointValues } from '@material-ui/core/styles/createBreakpoints'
-import useMediaQuery from '@material-ui/core/useMediaQuery'
 
 import { isBrowser } from '../../utils'
 
 export type BreakpointKeys = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
+type BreakpointValues = Record<BreakpointKeys, number>
+
 type BreakpointsList = {
   [key: string]: number
 }
@@ -118,17 +118,57 @@ export const useScreenSize = () => {
   return size
 }
 
+const useMediaQueryMatch = (query: string): boolean => {
+  // `screens()` produces an `@media …` string, but matchMedia expects the bare
+  // query. MUI's useMediaQuery stripped this prefix for us pre-migration.
+  const mediaQuery = query.replace(/^@media\s?/, '')
+
+  const getMatches = () =>
+    isBrowser() && typeof window.matchMedia === 'function' && mediaQuery
+      ? window.matchMedia(mediaQuery).matches
+      : false
+
+  const [matches, setMatches] = useState(getMatches)
+
+  useEffect(() => {
+    if (
+      !isBrowser() ||
+      typeof window.matchMedia !== 'function' ||
+      !mediaQuery
+    ) {
+      return undefined
+    }
+
+    const mediaQueryList = window.matchMedia(mediaQuery)
+    const onChange = () => setMatches(mediaQueryList.matches)
+
+    onChange()
+
+    // Safari < 14 and the jsdom test polyfill only implement the legacy
+    // MediaQueryList.addListener API; prefer the modern event API when present.
+    if (typeof mediaQueryList.addEventListener === 'function') {
+      mediaQueryList.addEventListener('change', onChange)
+
+      return () => mediaQueryList.removeEventListener('change', onChange)
+    }
+
+    mediaQueryList.addListener(onChange)
+
+    return () => mediaQueryList.removeListener(onChange)
+  }, [mediaQuery])
+
+  return matches
+}
+
 export const useBreakpoint = (sizes: BreakpointKeys[] | BreakpointKeys) => {
   const mediaQueryString = screens(...([] as BreakpointKeys[]).concat(sizes))
-  const mediaQuery = useMediaQuery(mediaQueryString, {
-    noSsr: true,
-  })
+  const matches = useMediaQueryMatch(mediaQueryString)
 
   if (!mediaQueryString) {
     return false
   }
 
-  return mediaQuery
+  return matches
 }
 
 /**
diff --git a/packages/picasso-provider/src/Picasso/config/index.ts b/packages/picasso-provider/src/Picasso/config/index.ts
index c3d593d503..7422391ca1 100644
--- a/packages/picasso-provider/src/Picasso/config/index.ts
+++ b/packages/picasso-provider/src/Picasso/config/index.ts
@@ -1,4 +1,3 @@
-import './theme'
 export { default as palette, colors, gradients } from './palette'
 export { default as transitions } from './transitions'
 export { default as typography } from './typography'
diff --git a/packages/picasso-provider/src/Picasso/config/layout.ts b/packages/picasso-provider/src/Picasso/config/layout.ts
index bc7791a0ce..02a1085b20 100644
--- a/packages/picasso-provider/src/Picasso/config/layout.ts
+++ b/packages/picasso-provider/src/Picasso/config/layout.ts
@@ -1,7 +1,6 @@
 export interface Layout {
   contentWidthWide: string
   contentWidth: string
-  contentMinWidth?: string
   contentPaddingHorizontal: string
   contentMobilePaddingHorizontal: string
 }
diff --git a/packages/picasso-provider/src/Picasso/config/palette.ts b/packages/picasso-provider/src/Picasso/config/palette.ts
index 9fe85d449b..f75b390e76 100644
--- a/packages/picasso-provider/src/Picasso/config/palette.ts
+++ b/packages/picasso-provider/src/Picasso/config/palette.ts
@@ -1,38 +1,3 @@
-interface ColorSample {
-  lightest?: string
-  lighter?: string
-  lighter2?: string
-  light?: string
-  light2?: string
-  main?: string
-  main2?: string
-  dark?: string
-  darker?: string
-}
-
-declare module '@material-ui/core/styles/createPalette' {
-  export interface SimplePaletteColorOptions extends ColorSample {}
-
-  interface Palette {
-    blue: SimplePaletteColorOptions
-    green: SimplePaletteColorOptions
-    yellow: SimplePaletteColorOptions
-    red: SimplePaletteColorOptions
-    purple: SimplePaletteColorOptions
-    gradients: {
-      blue: string
-      darkerBlue: string
-      lightGrey: string
-      grey: string
-      darkerGrey: string
-    }
-  }
-}
-
-declare module '@material-ui/core' {
-  export interface Color extends ColorSample {}
-}
-
 export const colors = {
   grey: {
     lightest: '#fcfcfc',
diff --git a/packages/picasso-provider/src/Picasso/config/theme.ts b/packages/picasso-provider/src/Picasso/config/theme.ts
deleted file mode 100644
index b4ce1466eb..0000000000
--- a/packages/picasso-provider/src/Picasso/config/theme.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { BreakpointKeys } from './breakpoints'
-import type { Layout } from './layout'
-import type { Sizes } from './sizes'
-import type spacings from './spacings'
-import type { PicassoSpacing } from './spacings'
-
-declare module '@material-ui/core/styles' {
-  interface Theme {
-    layout: Layout
-    /**
-     * @deprecated Please use Tailwind classes based on "@toptal/picasso-tailwind"
-     */
-    sizes: Sizes
-    screens: (...sizes: BreakpointKeys[]) => string
-    spacings: Record<keyof typeof spacings, PicassoSpacing>
-  }
-
-  interface ThemeOptions {
-    layout?: Layout
-    /**
-     * @deprecated Please use Tailwind classes based on "@toptal/picasso-tailwind"
-     */
-    sizes?: Sizes
-    screens?: (...sizes: BreakpointKeys[]) => string
-    spacings?: Record<keyof typeof spacings, PicassoSpacing>
-  }
-}
diff --git a/packages/picasso-provider/src/Picasso/config/typography.ts b/packages/picasso-provider/src/Picasso/config/typography.ts
index 38c9e58420..2be394f309 100644
--- a/packages/picasso-provider/src/Picasso/config/typography.ts
+++ b/packages/picasso-provider/src/Picasso/config/typography.ts
@@ -1,5 +1,3 @@
-import type { Typography } from '@material-ui/core/styles/createTypography'
-
 export interface AdditionalTypography {
   buttons: {
     fontSizeSmall: string
@@ -24,15 +22,11 @@ export interface AdditionalTypography {
   }
 }
 
-declare module '@material-ui/core/styles/createTypography' {
-  export interface Typography extends AdditionalTypography {}
-
-  export interface FontStyle {
-    inputSize: string
-  }
-}
-
-const typography: AdditionalTypography & Partial<Typography> = {
+const typography: AdditionalTypography & {
+  fontFamily: string
+  fontSize: number
+  inputSize: string
+} = {
   fontFamily: ['proxima-nova', 'Arial', 'sans-serif'].join(','),
   fontSize: 16,
   fontWeights: {
diff --git a/packages/picasso-provider/src/Picasso/story/Default.example.tsx b/packages/picasso-provider/src/Picasso/story/Default.example.tsx
index f6bb8414d4..559d407da5 100644
--- a/packages/picasso-provider/src/Picasso/story/Default.example.tsx
+++ b/packages/picasso-provider/src/Picasso/story/Default.example.tsx
@@ -5,11 +5,7 @@ import { default as Picasso, SPACING_12 } from '@toptal/picasso-provider'
 import { Page, Container } from '@toptal/picasso'
 
 const App = () => (
-  <Picasso
-    loadFavicon={false}
-    fixViewport={false}
-    preventPageWidthChangeOnScrollbar={false}
-  >
+  <Picasso loadFavicon={false} fixViewport={false}>
     <Page>
       <Page.TopBar title='App Page' />
       <Page.Content>
diff --git a/packages/picasso-provider/src/Picasso/story/DisableClassNamePrefix.example.tsx b/packages/picasso-provider/src/Picasso/story/DisableClassNamePrefix.example.tsx
deleted file mode 100644
index 92ac8e1fde..0000000000
--- a/packages/picasso-provider/src/Picasso/story/DisableClassNamePrefix.example.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-// In actual application you can simply do
-// import Picasso from '@toptal/picasso-provider'
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { default as Picasso, SPACING_12 } from '@toptal/picasso-provider'
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { Page, Container } from '@toptal/picasso'
-
-const App = () => (
-  <Picasso disableClassNamePrefix preventPageWidthChangeOnScrollbar={false}>
-    <Page>
-      <Page.TopBar title='App Page' />
-      <Page.Content>
-        <Page.Article>
-          <Container
-            flex
-            justifyContent='center'
-            top={SPACING_12}
-            style={{ height: '14rem' }}
-          >
-            Your application goes here
-          </Container>
-        </Page.Article>
-      </Page.Content>
-      <Page.Footer />
-    </Page>
-  </Picasso>
-)
-
-const Index = () => (
-  <div id='root'>
-    <App />
-  </div>
-)
-
-export default Index
diff --git a/packages/picasso-provider/src/Picasso/story/DisableResponsiveUI.example.tsx b/packages/picasso-provider/src/Picasso/story/DisableResponsiveUI.example.tsx
index ac834f2857..4a4abc0246 100644
--- a/packages/picasso-provider/src/Picasso/story/DisableResponsiveUI.example.tsx
+++ b/packages/picasso-provider/src/Picasso/story/DisableResponsiveUI.example.tsx
@@ -82,12 +82,7 @@ const Content = () => (
 
 const Index = () => (
   <div id='root'>
-    <Picasso
-      responsive={false}
-      loadFavicon={false}
-      fixViewport={false}
-      preventPageWidthChangeOnScrollbar={false}
-    >
+    <Picasso responsive={false} loadFavicon={false} fixViewport={false}>
       <Example />
     </Picasso>
   </div>
diff --git a/packages/picasso-provider/src/Picasso/story/index.jsx b/packages/picasso-provider/src/Picasso/story/index.jsx
index 19bd83d285..1f2791dedd 100644
--- a/packages/picasso-provider/src/Picasso/story/index.jsx
+++ b/packages/picasso-provider/src/Picasso/story/index.jsx
@@ -66,10 +66,6 @@ page
     title: 'Responsive Disabled',
     takeScreenshot: false,
   })
-  .addExample('Picasso/story/DisableClassNamePrefix.example.tsx', {
-    title: 'ClassNames Prefix Disabled',
-    takeScreenshot: false,
-  })
   .addExample('Picasso/story/BarePicassoLight.example.tsx', {
     title: 'PicassoLight without any utilities',
     takeScreenshot: false,
diff --git a/packages/picasso-provider/src/Picasso/styles.tsx b/packages/picasso-provider/src/Picasso/styles.tsx
index 6288bf914d..7d873c5b29 100644
--- a/packages/picasso-provider/src/Picasso/styles.tsx
+++ b/packages/picasso-provider/src/Picasso/styles.tsx
@@ -1,19 +1,20 @@
-import type { Theme } from '@material-ui/core'
-import { createStyles } from '@material-ui/core'
-
-export default ({ typography }: Theme) =>
-  createStyles({
-    root: {
-      flex: 1,
-      boxSizing: 'border-box',
-
-      '& *': {
-        fontFamily: typography.fontFamily,
-      },
-
-      // https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
-      '& *, & *::before, & *::after': {
-        boxSizing: 'inherit',
-      },
-    },
-  })
+// Root-node classes for PicassoRootNode. Establishes a border-box island: the
+// root is border-box and every descendant (plus their ::before/::after) inherits
+// box-sizing from it — kept as the last line of defense for pages that don't
+// import the `@toptal/picasso-tailwind/base` reset (the former `reset` opt-out).
+// The Picasso font is applied to the whole subtree as a ZERO-SPECIFICITY default
+// (`:where(&) *` = 0,0,0): it still beats user-agent fonts (author origin wins),
+// but ANY authored font class beats it. The JSS-era `& * { fontFamily }` only
+// won by injection order; a plain `[&_*]` font-sans utility (0,1,0) out-sorts
+// component font classes in the Tailwind bundle and broke e.g. RichText's
+// `[font-family:monospace]` code blocks. (Written un-joined here on purpose —
+// Tailwind's extractor scans comments, and the exact class literal would emit
+// a dead rule.)
+export const root = [
+  'flex-1',
+  'box-border',
+  '[:where(&)_*]:font-sans',
+  '[&_*]:[box-sizing:inherit]',
+  '[&_*::before]:[box-sizing:inherit]',
+  '[&_*::after]:[box-sizing:inherit]',
+].join(' ')
diff --git a/packages/picasso-provider/src/Picasso/utils/get-serverside-stylesheets.ts b/packages/picasso-provider/src/Picasso/utils/get-serverside-stylesheets.ts
deleted file mode 100644
index 48ba758d8d..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/get-serverside-stylesheets.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createGenerateClassName, ServerStyleSheets } from '@material-ui/core'
-
-const getServersideStylesheets = (
-  generateClassNameSeed = ''
-): ServerStyleSheets => {
-  const generateClassName = createGenerateClassName({
-    seed: generateClassNameSeed,
-  })
-
-  const sheets = new ServerStyleSheets({
-    serverGenerateClassName: generateClassName,
-  })
-
-  return sheets
-}
-
-export { getServersideStylesheets }
diff --git a/packages/picasso-provider/src/Picasso/utils/index.ts b/packages/picasso-provider/src/Picasso/utils/index.ts
index aab64b1ef8..588696ee92 100644
--- a/packages/picasso-provider/src/Picasso/utils/index.ts
+++ b/packages/picasso-provider/src/Picasso/utils/index.ts
@@ -1,4 +1,2 @@
 export * from './generate-random-string'
-export * from './get-serverside-stylesheets'
 export * from './spacings'
-export * from './responsive-styles'
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-jss-variable-class-names.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-jss-variable-class-names.test.ts
deleted file mode 100644
index 6bb3045368..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-jss-variable-class-names.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createJssVariableClassNames } from './create-jss-variable-class-names'
-
-describe('createJssVariableClassNames', () => {
-  it('returns an object with the correct class name and CSS property', () => {
-    const breakpoint = 'md'
-    const cssProp = 'padding'
-
-    const expectedClassName = 'md--padding'
-    const expectedVariable = 'var(--picasso-responsive--md--padding)'
-
-    const result = createJssVariableClassNames(breakpoint, cssProp)
-
-    expect(Object.keys(result)).toHaveLength(1)
-    expect(result[expectedClassName]).toBeDefined()
-    expect(result[expectedClassName][cssProp]).toEqual(expectedVariable)
-  })
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-jss-variable-class-names.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-jss-variable-class-names.ts
deleted file mode 100644
index 96688e546c..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-jss-variable-class-names.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { BreakpointKeys } from '../../config'
-import { toClassName } from './to-class-name'
-import { toCssVariableName } from './to-css-variable-name'
-import type { ResponsiveCssProp } from './types'
-
-/**
- * Creates a CSS class for a given breakpoint and CSS property
- * that sets the value of the CSS property to the value of the CSS variable
- * for that breakpoint and CSS property.
- *
- * Simplified example, for `margin-top` CSS property and `xs` breakpoint:
- * ```css
- * .xs--margin-top {
- *    margin-top: var(--picasso-responsive--xs--margin-top);
- * }
- * ```
- */
-export const createJssVariableClassNames = (
-  breakpoint: BreakpointKeys,
-  cssProp: ResponsiveCssProp
-) => {
-  const className = toClassName(breakpoint, cssProp)
-  const variable = `var(${toCssVariableName(breakpoint, cssProp)})`
-
-  return {
-    [className]: {
-      [cssProp]: variable,
-    },
-  }
-}
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-media-queries.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-media-queries.test.ts
deleted file mode 100644
index 971dcfe893..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-media-queries.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Theme } from '@material-ui/core'
-
-import { createMediaQueries } from './create-media-queries'
-
-describe('createMediaQueries', () => {
-  it('returns media queries with the correct class names and CSS properties', () => {
-    const cssProp = 'padding'
-    const theme = {
-      breakpoints: {
-        keys: ['sm', 'md'],
-        up: (breakpoint: number) => `@media (min-width: ${breakpoint})`,
-      },
-    }
-
-    const expectedMediaQueries = {
-      '@media (min-width: md)': {
-        'md--padding': {
-          padding: 'var(--picasso-responsive--md--padding)',
-        },
-      },
-      '@media (min-width: sm)': {
-        'sm--padding': {
-          padding: 'var(--picasso-responsive--sm--padding)',
-        },
-      },
-    }
-
-    const result = createMediaQueries(cssProp, theme as Theme)
-
-    expect(result).toEqual(expectedMediaQueries)
-  })
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-media-queries.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-media-queries.ts
deleted file mode 100644
index e4494eda27..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-media-queries.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-
-import { createJssVariableClassNames } from './create-jss-variable-class-names'
-import type { ResponsiveCssProp } from './types'
-
-/**
- * Creates a CSS class for *every* breakpoint and a given CSS property
- * containing a media query for that breakpoint and sets the value of the CSS property
- * to the value of the CSS variable for that breakpoint and CSS property.
- *
- * Simplified example, for `margin-top` CSS property and `xs` breakpoint:
- * ```css
- * @media (min-width: 0px) {
- *   .xs--margin-top {
- *     margin-top: var(--picasso-responsive--xs--margin-top);
- *   }
- * }
- * ```
- */
-export const createMediaQueries = (
-  cssProp: ResponsiveCssProp,
-  theme: Theme
-) => {
-  const mediaQueries: Record<string, {}> = {}
-
-  for (const breakpoint of [...theme.breakpoints.keys].reverse()) {
-    mediaQueries[theme.breakpoints.up(breakpoint)] =
-      createJssVariableClassNames(breakpoint, cssProp)
-  }
-
-  return mediaQueries
-}
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-variable-values-jss.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-variable-values-jss.test.ts
deleted file mode 100644
index 7338238499..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-variable-values-jss.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SPACING_2, SPACING_4, SPACING_6 } from '../../config/spacings'
-import { createVariableValuesJss } from './create-variable-values-jss'
-
-describe('createVariableValuesJss', () => {
-  it('returns an object with the correct variable names and values', () => {
-    const spacing = {
-      sm: SPACING_2,
-      md: SPACING_4,
-      lg: SPACING_6,
-    }
-
-    const prop = 'margin'
-
-    const expectedStyles = {
-      '--picasso-responsive--lg--margin': '1.5rem',
-      '--picasso-responsive--md--margin': '1rem',
-      '--picasso-responsive--sm--margin': '0.5rem',
-    }
-
-    const result = createVariableValuesJss(spacing, prop)
-
-    expect(result).toEqual(expectedStyles)
-  })
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-variable-values-jss.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-variable-values-jss.ts
deleted file mode 100644
index 359858fd00..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/create-variable-values-jss.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { BreakpointKeys, ResponsiveSpacingType } from '../../config'
-import { spacingToRem } from '../spacings'
-import { toCssVariableName } from './to-css-variable-name'
-import type { ResponsiveCssProp } from './types'
-
-/**
- * Creates a CSS class setting the picasso responsive CSS variable of the given CSS property
- * for all breakpoints on the responsive spacing value
- */
-export const createVariableValuesJss = (
-  spacing: ResponsiveSpacingType,
-  prop: ResponsiveCssProp
-) => {
-  const styles: Record<string, string> = {}
-
-  for (const [brk, value] of Object.entries(spacing)) {
-    styles[toCssVariableName(brk as BreakpointKeys, prop)] = spacingToRem(value)
-  }
-
-  return styles
-}
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/default-css-prop.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/default-css-prop.test.ts
deleted file mode 100644
index ff795c510f..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/default-css-prop.test.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defaultCssProp } from './default-css-prop'
-
-describe('defaultCssProp', () => {
-  it('returns an object with the kebab-case CSS property converted to camelCase and the value converted to rem format', () => {
-    const value = 8
-    const prop = 'margin'
-    const expectedStyles = {
-      margin: '8rem',
-    }
-
-    const result = defaultCssProp(value, prop)
-
-    expect(result).toEqual(expectedStyles)
-  })
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/default-css-prop.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/default-css-prop.ts
deleted file mode 100644
index 9f401c389a..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/default-css-prop.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { kebabToCamelCase } from '../../../utils'
-import type { ResponsiveSpacingType, SpacingType } from '../../config'
-import type { ResponsiveCssProp } from './types'
-import { spacingToRem } from '../spacings'
-
-/**
- * Just the default for a value that is not responsive
- * Just set the prop directly on all media queries
- */
-export const defaultCssProp = (
-  value: Exclude<SpacingType, ResponsiveSpacingType>,
-  prop: ResponsiveCssProp
-) => ({
-  [kebabToCamelCase(prop)]: spacingToRem(value),
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/generate-variable-inline-styles.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/generate-variable-inline-styles.test.ts
deleted file mode 100644
index 6e3ef6a510..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/generate-variable-inline-styles.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SPACING_4, SPACING_8 } from '../../config/spacings'
-import { generateVariableInlineStyles } from './generate-variable-inline-styles'
-
-describe('generateVariableInlineStyles', () => {
-  it('returns an object with inline styles based on the provided props and values', () => {
-    const props = ['margin', 'padding']
-    const values = {
-      margin: SPACING_8,
-      padding: SPACING_4,
-    }
-    const expectedInlineStyles = {
-      margin: '2rem',
-      padding: '1rem',
-    }
-
-    const result = generateVariableInlineStyles(props, values)
-
-    expect(result).toEqual(expectedInlineStyles)
-  })
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/generate-variable-inline-styles.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/generate-variable-inline-styles.ts
deleted file mode 100644
index 6140b6900e..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/generate-variable-inline-styles.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { isResponsiveSpacing } from '../../config'
-import { createVariableValuesJss } from './create-variable-values-jss'
-import { defaultCssProp } from './default-css-prop'
-import type { ResponsiveCssSpacings } from './types'
-
-export const generateVariableInlineStyles = <K extends string>(
-  props: readonly K[],
-  values: ResponsiveCssSpacings<K>
-) => {
-  const styles: Record<string, string> = {}
-
-  for (const prop of props) {
-    const value = values[prop]
-
-    if (value) {
-      Object.assign(
-        styles,
-        isResponsiveSpacing(value)
-          ? createVariableValuesJss(value, prop)
-          : defaultCssProp(value, prop)
-      )
-    }
-  }
-
-  return styles
-}
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.test.ts
deleted file mode 100644
index 05b21e87f5..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SPACING_1, SPACING_2, SPACING_4 } from '../../config/spacings'
-import { getBreakpointClassNamesToUse } from './get-breakpoint-class-names-to-use'
-
-describe('getBreakpointClassNamesToUse', () => {
-  it('returns an array of unique classNames based on the provided props and propSizes', () => {
-    const props = ['margin', 'padding']
-    const propSizes = {
-      margin: SPACING_1,
-      padding: {
-        sm: SPACING_2,
-        md: SPACING_4,
-      },
-    }
-    const expectedClassNames = ['sm--padding', 'md--padding']
-
-    const result = getBreakpointClassNamesToUse(props, propSizes)
-
-    expect(result).toEqual(expectedClassNames)
-  })
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.ts
deleted file mode 100644
index c467eaadfc..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { BreakpointKeys } from '../../config'
-import { isResponsiveSpacing } from '../../config'
-import { toClassName } from './to-class-name'
-import type { ResponsiveCssSpacings } from './types'
-
-/**
- * Filter which media queries CSS classes should be applied,
- * we want to the element to fallback to the previous layer, so we only apply
- * the media queries that are explicitly set on spacing value
- */
-export const getBreakpointClassNamesToUse = <K extends string>(
-  props: readonly K[],
-  propSizes: ResponsiveCssSpacings<K>
-) => {
-  const classNames = new Set<string>()
-
-  for (const prop of props) {
-    const spacing = propSizes[prop]
-
-    if (spacing && isResponsiveSpacing(spacing)) {
-      Object.keys(spacing)
-        .map(brk => toClassName(brk as BreakpointKeys, prop))
-        .forEach(classNames.add, classNames)
-    }
-  }
-
-  return [...classNames]
-}
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/index.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/index.ts
deleted file mode 100644
index c2b0a88699..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as makeResponsiveSpacingProps } from './make-responsive-spacing-props'
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/make-responsive-spacing-props.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/make-responsive-spacing-props.ts
deleted file mode 100644
index 6cf6870d2c..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/make-responsive-spacing-props.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core'
-
-import { mediaQueriesClasses } from './media-queries-classes'
-import type { ResponsiveCssProp, ResponsiveCssSpacings } from './types'
-import { getBreakpointClassNamesToUse } from './get-breakpoint-class-names-to-use'
-import { generateVariableInlineStyles } from './generate-variable-inline-styles'
-
-const makeResponsiveSpacingProps = <K extends ResponsiveCssProp>(
-  props: readonly K[],
-  name: string
-) => {
-  const useStyles = makeStyles<Theme>(
-    (theme: Theme) => mediaQueriesClasses(props, theme),
-    {
-      name: name,
-    }
-  )
-
-  const useResponsiveClassNames = (propValues: ResponsiveCssSpacings<K>) => {
-    const classes = useStyles()
-    const mediaQueries = getBreakpointClassNamesToUse(props, propValues)
-
-    return {
-      className: cx(...mediaQueries.map(brkClassName => classes[brkClassName])),
-      style: generateVariableInlineStyles(props, propValues),
-    }
-  }
-
-  return useResponsiveClassNames
-}
-
-export default makeResponsiveSpacingProps
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/media-queries-classes.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/media-queries-classes.test.ts
deleted file mode 100644
index 98fbd83118..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/media-queries-classes.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Theme } from '@material-ui/core'
-
-import { mediaQueriesClasses } from './media-queries-classes'
-
-describe('mediaQueriesClasses', () => {
-  it('returns an object with media queries classes based on the responsive props and theme', () => {
-    const responsiveProps = ['margin']
-    const theme = {
-      breakpoints: {
-        keys: ['sm', 'md'],
-        up: (breakpoint: number) => `@media (min-width: ${breakpoint})`,
-      },
-    }
-
-    const expectedMediaQueries = {
-      '@media (min-width: md)': {
-        'md--margin': {
-          margin: 'var(--picasso-responsive--md--margin)',
-        },
-      },
-      '@media (min-width: sm)': {
-        'sm--margin': {
-          margin: 'var(--picasso-responsive--sm--margin)',
-        },
-      },
-    }
-
-    const result = mediaQueriesClasses(responsiveProps, theme as Theme)
-
-    expect(result).toEqual(expectedMediaQueries)
-  })
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/media-queries-classes.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/media-queries-classes.ts
deleted file mode 100644
index 838c6b751f..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/media-queries-classes.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { Theme } from '@material-ui/core'
-
-import type { ResponsiveCssProp } from './types'
-import { createMediaQueries } from './create-media-queries'
-
-/**
- * Just aggregate all the media queries classes
- * for all responsive props passed
- */
-export const mediaQueriesClasses = <K extends ResponsiveCssProp>(
-  responsiveProps: readonly K[],
-  theme: Theme
-) => {
-  const mediaQueries: Record<string, Record<string, string>> = {}
-
-  for (const prop of responsiveProps) {
-    const newMediaQueries = createMediaQueries(prop, theme)
-
-    for (const [brk, value] of Object.entries(newMediaQueries)) {
-      mediaQueries[brk] = {
-        ...mediaQueries[brk],
-        ...value,
-      }
-    }
-  }
-
-  return mediaQueries
-}
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-class-name.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-class-name.test.ts
deleted file mode 100644
index 62a300e6e2..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-class-name.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { toClassName } from './to-class-name'
-
-describe('toClassName', () => {
-  it('returns a string with the breakpoint and prop separated by a double dash', () => {
-    const breakpoint = 'md'
-    const prop = 'color'
-    const expectedClassName = 'md--color'
-
-    const result = toClassName(breakpoint, prop)
-
-    expect(result).toBe(expectedClassName)
-  })
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-class-name.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-class-name.ts
deleted file mode 100644
index 6fd267dceb..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-class-name.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { BreakpointKeys } from '../../config'
-import type { ResponsiveCssProp } from './types'
-
-export const toClassName = (
-  breakpoint: BreakpointKeys,
-  prop: ResponsiveCssProp
-) => {
-  return `${breakpoint}--${prop}`
-}
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-css-variable-name.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-css-variable-name.test.ts
deleted file mode 100644
index c06b45e07e..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-css-variable-name.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { toCssVariableName } from './to-css-variable-name'
-
-describe('toCssVariableName', () => {
-  it('returns a string in the correct format with the breakpoint and prop', () => {
-    const breakpoint = 'md'
-    const prop = 'color'
-    const expectedCssVariableName = '--picasso-responsive--md--color'
-
-    const result = toCssVariableName(breakpoint, prop)
-
-    expect(result).toBe(expectedCssVariableName)
-  })
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-css-variable-name.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-css-variable-name.ts
deleted file mode 100644
index 8d4c5d1f13..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/to-css-variable-name.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { BreakpointKeys } from '../../config'
-import type { ResponsiveCssProp } from './types'
-
-export const toCssVariableName = (
-  breakpoint: BreakpointKeys,
-  prop: ResponsiveCssProp
-) => {
-  return `--picasso-responsive--${breakpoint}--${prop}`
-}
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/types.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/types.ts
deleted file mode 100644
index 6763a5aefe..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { SpacingType } from '../../config'
-
-export type ResponsiveCssProp = string // String for now, we can narrow it to CSS props eventually
-
-export type ResponsiveCssSpacings<K extends ResponsiveCssProp> = {
-  [k in K]: SpacingType | undefined
-}
diff --git a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx b/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx
deleted file mode 100644
index 84b8e5db4a..0000000000
--- a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPreventPageWidthChangeOnScrollbar',
-})
-
-/**
- * This component applies global styles that fix the problem with jumping page width.
- * The problem comes from disappearing vertical page scrollbar due to varying page height.
- */
-const PreventPageWidthChangeOnScrollbar = () => {
-  useStyles()
-
-  return null
-}
-
-export default PreventPageWidthChangeOnScrollbar
diff --git a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/index.ts b/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/index.ts
deleted file mode 100644
index 426eeecae3..0000000000
--- a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './PreventPageWidthChangeOnScrollbar'
diff --git a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/styles.ts b/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/styles.ts
deleted file mode 100644
index 465ddda55b..0000000000
--- a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/styles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ screens }: Theme) =>
-  createStyles({
-    '@global': {
-      [screens('md', 'lg', 'xl')]: {
-        html: {
-          width: '100%',
-          overflowX: 'hidden',
-        },
-        body: {
-          width: '100vw',
-        },
-      },
-    },
-  })
diff --git a/packages/picasso-provider/src/index.ts b/packages/picasso-provider/src/index.ts
index 491e7c40d6..1464032d43 100644
--- a/packages/picasso-provider/src/index.ts
+++ b/packages/picasso-provider/src/index.ts
@@ -40,8 +40,6 @@ export type {
   BreakpointKeys,
 } from './Picasso/config'
 
-export { default as PicassoProvider } from './Picasso/PicassoProvider'
-
 export {
   usePicassoRoot,
   usePageTopBar,
@@ -49,7 +47,6 @@ export {
   useDrawer,
   useSidebar,
   useCurrentBreakpointRange,
-  usePreventPageWidthChangeOnScrollbar,
   RootContext,
   PicassoRootNodeContext,
 } from './Picasso/RootContext'
diff --git a/packages/picasso-tailwind/README.md b/packages/picasso-tailwind/README.md
index 4152a9a567..a01b915448 100644
--- a/packages/picasso-tailwind/README.md
+++ b/packages/picasso-tailwind/README.md
@@ -14,3 +14,25 @@ module.exports = {
   // ...
 }
 ```
+
+## Global reset — `@toptal/picasso-tailwind/base`
+
+The package also ships Picasso's global CSS reset as an opt-in entry, emitted
+inside `@layer base`. Import it in your Tailwind entry CSS, after the theme
+import:
+
+```css
+@layer theme, base, components;
+@import 'tailwindcss/theme.css' layer(theme);
+@import '@toptal/picasso-tailwind/base';
+@import 'tailwindcss/utilities.css';
+@config "./tailwind.config.js";
+```
+
+Cascade contract: because the reset is cascade-layered, all Tailwind
+utilities and any unlayered application CSS win over it — the reset is a
+baseline, never an override. The reset establishes a **border-box** page box
+model (`html { box-sizing: border-box }` with universal inheritance).
+
+Opting out: omit the import. This replaces the former
+`<Picasso reset={false} />` provider prop, which no longer exists.
diff --git a/packages/picasso-tailwind/package.json b/packages/picasso-tailwind/package.json
index a64074ad81..2fa0f17290 100644
--- a/packages/picasso-tailwind/package.json
+++ b/packages/picasso-tailwind/package.json
@@ -7,7 +7,9 @@
   "license": "MIT",
   "main": "./src/index.js",
   "exports": {
-    ".": "./src/index.js"
+    ".": "./src/index.js",
+    "./base": "./src/base.css",
+    "./base.css": "./src/base.css"
   },
   "publishConfig": {
     "access": "public"
@@ -29,7 +31,9 @@
   "peerDependencies": {
     "tailwindcss": "^4.2.1"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
diff --git a/packages/picasso-tailwind/src/base.css b/packages/picasso-tailwind/src/base.css
new file mode 100644
index 0000000000..0184b690a9
--- /dev/null
+++ b/packages/picasso-tailwind/src/base.css
@@ -0,0 +1,70 @@
+/*
+ * Picasso global reset — the single source of truth. [PF-2221]
+ *
+ * Ships in `@layer base`, so all Tailwind utilities and any unlayered app CSS
+ * win over it by cascade-layer rules — "app CSS beats the baseline" is the
+ * documented contract, not an accident of injection order.
+ *
+ * Usage (consumer Tailwind entry, after the theme import):
+ *   @import '@toptal/picasso-tailwind/base';
+ * Opt out (the former `<Picasso reset={false}>`): don't import this file.
+ *
+ * Consumer migration notes live in the @toptal/picasso-provider major
+ * changeset (PF-2023) and the @toptal/picasso README.
+ */
+@layer base {
+  html {
+    /* content-box page model — the deliberate carve-out inherited from the
+       legacy CssBaseline reset. A border-box flip was attempted (PF-2221)
+       and reverted (#5046); any future re-flip is its own change with its
+       own Happo sign-off. Descendants inherit through the universal
+       selector below; Picasso components stay border-box regardless via
+       the PicassoRootNode island. */
+    box-sizing: initial;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
+    background-color: #fff;
+  }
+
+  @media print {
+    body {
+      background-color: #fff;
+    }
+  }
+
+  #root {
+    display: flex;
+    flex: 1;
+  }
+
+  /* Prevent the page-width jump when the vertical scrollbar appears or
+     disappears (the former <PreventPageWidthChangeOnScrollbar>, retired
+     with PF-2226): html hides horizontal overflow while body spans the
+     full viewport width, so content width is independent of scrollbar
+     presence. Desktop-only (≥768px). Opt out (the former
+     preventPageWidthChangeOnScrollbar={false}) with unlayered app CSS:
+     html { overflow-x: visible; } body { width: 100%; } */
+  @media (min-width: 768px) {
+    html {
+      width: 100%;
+      overflow-x: hidden;
+    }
+
+    body {
+      width: 100vw;
+    }
+  }
+}
diff --git a/packages/picasso/README.md b/packages/picasso/README.md
index 58a8549009..adcc70c1c5 100644
--- a/packages/picasso/README.md
+++ b/packages/picasso/README.md
@@ -47,10 +47,24 @@ module.exports = {
 /* index.css */
 @layer theme, base, components;
 @import 'tailwindcss/theme.css' layer(theme);
+@import '@toptal/picasso-tailwind/base';
 @import 'tailwindcss/utilities.css';
 @config "./tailwind.config.js";
 ```
 
+### Global reset (`@toptal/picasso-tailwind/base`)
+
+The `@toptal/picasso-tailwind/base` import ships Picasso's global reset (page
+box model, body/root layout, font smoothing) inside `@layer base`. Because it
+is cascade-layered, all Tailwind utilities and any unlayered application CSS
+win over it — the reset is a baseline, never an override.
+
+The reset establishes a **border-box** page box model
+(`html { box-sizing: border-box }` with universal inheritance).
+
+To opt out of the reset, omit the import (this replaces the former
+`<Picasso reset={false} />` prop, which no longer exists).
+
 ## Setup webpack to use PostCSS loader with tailwindcss plugin
 
 > If you are reusing webpack configuration from `@toptal/davinci-engine` you can skip this step as it is setup automatically if `tailwind.config.js` is in the repository.
@@ -100,14 +114,14 @@ import { Button } from '@toptal/picasso'
 
 render () {
   return (
-    <Picasso injectFirst>
+    <Picasso>
       <Button>Hello world!</Button>
     </Picasso>
   )
 }
 ```
 
-**_A [`Picasso`](/?path=/story/components-picasso--picasso) component rendered at root level is required for the library theme configuration and theme to work properly._**
+**_A [`Picasso`](/?path=/story/components-picasso--picasso) component rendered at root level is required for the library's global services — fonts, favicon, notifications, and the responsive breakpoint context — to work properly._**
 
 ## Merging classes
 
diff --git a/packages/picasso/package.json b/packages/picasso/package.json
index c3e8de95ac..90864b217f 100644
--- a/packages/picasso/package.json
+++ b/packages/picasso/package.json
@@ -27,12 +27,11 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
     "@toptal/picasso-tailwind": ">=3",
     "notistack": "3.0.1",
-    "react": ">=16.12.0 < 19.0.0",
-    "react-dom": ">=16.12.0 < 19.0.0",
+    "react": ">=16.12.0",
+    "react-dom": ">=16.12.0",
     "typescript": "^5.5.0"
   },
   "dependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aabad921a4..5d4803e1b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1165,6 +1165,9 @@ importers:
       '@toptal/picasso-test-utils':
         specifier: workspace:*
         version: link:../Test-Utils
+      '@types/react-transition-group':
+        specifier: ^4.4.5
+        version: 4.4.12(@types/react@17.0.39)
 
   packages/base/Container:
     dependencies:
@@ -1409,6 +1412,9 @@ importers:
       '@toptal/picasso-test-utils':
         specifier: workspace:*
         version: link:../Test-Utils
+      '@types/react-transition-group':
+        specifier: ^4.4.5
+        version: 4.4.12(@types/react@17.0.39)
 
   packages/base/FileInput:
     dependencies:
@@ -2569,6 +2575,9 @@ importers:
       '@toptal/picasso-test-utils':
         specifier: workspace:*
         version: link:../Test-Utils
+      '@types/react-transition-group':
+        specifier: ^4.4.5
+        version: 4.4.12(@types/react@17.0.39)
 
   packages/base/Slider:
     dependencies:
@@ -3055,9 +3064,6 @@ importers:
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
-      notistack:
-        specifier: 1.0.10
-        version: 1.0.10(@material-ui/core@4.12.4(@types/react@17.0.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -3074,9 +3080,6 @@ importers:
 
   packages/picasso:
     dependencies:
-      '@material-ui/core':
-        specifier: 4.12.4
-        version: 4.12.4(@types/react@17.0.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@toptal/picasso-accordion':
         specifier: workspace:*
         version: link:../base/Accordion
@@ -3604,12 +3607,6 @@ importers:
 
   packages/picasso-provider:
     dependencies:
-      '@material-ui/core':
-        specifier: 4.12.4
-        version: 4.12.4(@types/react@17.0.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@material-ui/utils':
-        specifier: 4.11.3
-        version: 4.11.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
@@ -5938,56 +5935,6 @@ packages:
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@material-ui/core@4.12.4':
-    resolution: {integrity: sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==}
-    engines: {node: '>=8.0.0'}
-    deprecated: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.
-    peerDependencies:
-      '@types/react': '17'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@material-ui/styles@4.11.5':
-    resolution: {integrity: sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==}
-    engines: {node: '>=8.0.0'}
-    deprecated: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.
-    peerDependencies:
-      '@types/react': '17'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@material-ui/system@4.12.2':
-    resolution: {integrity: sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==}
-    engines: {node: '>=8.0.0'}
-    peerDependencies:
-      '@types/react': '17'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@material-ui/types@5.1.0':
-    resolution: {integrity: sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==}
-    peerDependencies:
-      '@types/react': '17'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@material-ui/utils@4.11.3':
-    resolution: {integrity: sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==}
-    engines: {node: '>=8.0.0'}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
   '@mdx-js/mdx@1.6.22':
     resolution: {integrity: sha512-AMxuLxPz2j5/6TpF/XSdKpQP1NlG0z11dFOlq+2IP/lSgl11GY8ji6S/rgsViN/L0BDvHvUMruRb7ub+24LUYA==}
 
@@ -7840,8 +7787,10 @@ packages:
   '@types/react-textarea-autosize@4.3.6':
     resolution: {integrity: sha512-cTf8tCem0c8A7CERYbTuF+bRFaqYu7N7HLCa6ZhUhDx8XnUsTpGx5udMWljt87JpciUKuUkImKPEsy6kcKhrcQ==}
 
-  '@types/react-transition-group@4.2.3':
-    resolution: {integrity: sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==}
+  '@types/react-transition-group@4.4.12':
+    resolution: {integrity: sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==}
+    peerDependencies:
+      '@types/react': '17'
 
   '@types/react-truncate@2.3.4':
     resolution: {integrity: sha512-+ugDlho66dRn7Sw/lPkE/wlOi0KUIRwY2KOiUiehWjFf7EmiMDjMpHqrBhiLJfH2Z9EC+qRBHC9o7iZoEmmWQw==}
@@ -9633,9 +9582,6 @@ packages:
     resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
-  css-vendor@2.0.8:
-    resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==}
-
   css-what@5.1.0:
     resolution: {integrity: sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==}
     engines: {node: '>= 6'}
@@ -11947,9 +11893,6 @@ packages:
     resolution: {integrity: sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ==}
     engines: {node: '>=4'}
 
-  hyphenate-style-name@1.0.3:
-    resolution: {integrity: sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==}
-
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -12277,9 +12220,6 @@ packages:
   is-hexadecimal@1.0.4:
     resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
 
-  is-in-browser@1.1.3:
-    resolution: {integrity: sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==}
-
   is-installed-globally@0.4.0:
     resolution: {integrity: sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==}
     engines: {node: '>=10'}
@@ -12941,30 +12881,6 @@ packages:
     resolution: {integrity: sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==}
     engines: {'0': node >=0.6.0}
 
-  jss-plugin-camel-case@10.9.1:
-    resolution: {integrity: sha512-irEr3Z2ENUz71OIq6PWN0N6g3uIA6LyGEwiIfL1JBzy+HVZS17xq/vwnHda3KyvPls18cKiwNNuuVwY6TrWwWg==}
-
-  jss-plugin-default-unit@10.9.1:
-    resolution: {integrity: sha512-sqQ1nRSy07z1brABTXK8EamDDjYVp/u9b/gKL51ZB+NNzbqvQF0CR33fGKPt0IOai98mzk0aHHIpf5il7mRN7A==}
-
-  jss-plugin-global@10.9.1:
-    resolution: {integrity: sha512-wc8EQMUe9NGInmnZErA1xQsX9jfk+7MrgN0sOB7l1IqfFQyuN0ntgo93bKhIj4I5RUtzjCskcvReBEZVwAHK8w==}
-
-  jss-plugin-nested@10.9.1:
-    resolution: {integrity: sha512-5kSHhhZra1+xwitBVyKN4da00860X7DDeuzf+sF8C6L6C0DuV2VAy6MKIoWKuIrx3pknYUgS/eo/VfsRmFP5Mw==}
-
-  jss-plugin-props-sort@10.9.1:
-    resolution: {integrity: sha512-Z+KkIty+MEq8+7SDGYdpb9A0IV6NTlk5s4NGGPvgHxyB/6gr46XWvaHuPE8BagrC+k1Aq5E63nPN6uL0pKsnjw==}
-
-  jss-plugin-rule-value-function@10.9.1:
-    resolution: {integrity: sha512-4GbLHDqq+Ps6BZMRYZwjiAtxuqnscGLxwG4YnrgfuDM/yqGNJFZwK4Zfabs3XMe0cM+IbadsgJVUQgJwuNB4IA==}
-
-  jss-plugin-vendor-prefixer@10.9.1:
-    resolution: {integrity: sha512-tlaN/UdAkim7vji7EcAw5MbOUq5/Vh1hhrWMzmdlcDATwHhDp2bYiq9G21NEa5D0AzcW631VjJq7WulpE1APHQ==}
-
-  jss@10.9.1:
-    resolution: {integrity: sha512-omDBQTYyIdYuHee1mkpqDyHw2NguCrURBU1izPPHmdtDK6SkP7P3buZt4ybHWOahTZ3+xd0C+zLPBBw7Hn3eYg==}
-
   jsx-ast-utils@3.1.0:
     resolution: {integrity: sha512-d4/UOjg+mxAWxCiF0c5UTSwyqbchkbqCvK87aBovhnh8GtysTjWmgC63tY0cJx/HzGgm9qnA147jVBdpOiQ2RA==}
     engines: {node: '>=4.0'}
@@ -14134,13 +14050,6 @@ packages:
     resolution: {integrity: sha512-uVFpKhj5MheNBJRTiMZ9pE/7hD1QTeEvugSJW/OmLzAp78PB5O6adfMNTvmfKhXBkvCzC+rqifWcVYpGFwTjnw==}
     engines: {node: '>=14.16'}
 
-  notistack@1.0.10:
-    resolution: {integrity: sha512-z0y4jJaVtOoH3kc3GtNUlhNTY+5LE04QDeLVujX3VPhhzg67zw055mZjrBF+nzpv3V9aiPNph1EgRU4+t8kQTQ==}
-    peerDependencies:
-      '@material-ui/core': ^4.0.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
   notistack@3.0.1:
     resolution: {integrity: sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==}
     engines: {node: '>=12.0.0', npm: '>=6.0.0'}
@@ -14936,9 +14845,6 @@ packages:
     resolution: {integrity: sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==}
     deprecated: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
 
-  popper.js@1.16.1-lts:
-    resolution: {integrity: sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==}
-
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -20815,71 +20721,6 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@material-ui/core@4.12.4(@types/react@17.0.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@material-ui/styles': 4.11.5(@types/react@17.0.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@material-ui/system': 4.12.2(@types/react@17.0.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@material-ui/types': 5.1.0(@types/react@17.0.39)
-      '@material-ui/utils': 4.11.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@types/react-transition-group': 4.2.3
-      clsx: 1.2.1
-      hoist-non-react-statics: 3.3.2
-      popper.js: 1.16.1-lts
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-is: 17.0.2
-      react-transition-group: 4.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 17.0.39
-
-  '@material-ui/styles@4.11.5(@types/react@17.0.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@emotion/hash': 0.8.0
-      '@material-ui/types': 5.1.0(@types/react@17.0.39)
-      '@material-ui/utils': 4.11.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      clsx: 1.2.1
-      csstype: 2.6.19
-      hoist-non-react-statics: 3.3.2
-      jss: 10.9.1
-      jss-plugin-camel-case: 10.9.1
-      jss-plugin-default-unit: 10.9.1
-      jss-plugin-global: 10.9.1
-      jss-plugin-nested: 10.9.1
-      jss-plugin-props-sort: 10.9.1
-      jss-plugin-rule-value-function: 10.9.1
-      jss-plugin-vendor-prefixer: 10.9.1
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 17.0.39
-
-  '@material-ui/system@4.12.2(@types/react@17.0.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@material-ui/utils': 4.11.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      csstype: 2.6.19
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 17.0.39
-
-  '@material-ui/types@5.1.0(@types/react@17.0.39)':
-    optionalDependencies:
-      '@types/react': 17.0.39
-
-  '@material-ui/utils@4.11.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.28.4
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-is: 17.0.2
-
   '@mdx-js/mdx@1.6.22':
     dependencies:
       '@babel/core': 7.12.9
@@ -24085,7 +23926,7 @@ snapshots:
     dependencies:
       '@types/react': 17.0.39
 
-  '@types/react-transition-group@4.2.3':
+  '@types/react-transition-group@4.4.12(@types/react@17.0.39)':
     dependencies:
       '@types/react': 17.0.39
 
@@ -26222,11 +26063,6 @@ snapshots:
       mdn-data: 2.0.30
       source-map-js: 1.2.1
 
-  css-vendor@2.0.8:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      is-in-browser: 1.1.3
-
   css-what@5.1.0: {}
 
   css-what@6.1.0: {}
@@ -29085,8 +28921,6 @@ snapshots:
 
   hyperlinker@1.0.0: {}
 
-  hyphenate-style-name@1.0.3: {}
-
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -29379,8 +29213,6 @@ snapshots:
 
   is-hexadecimal@1.0.4: {}
 
-  is-in-browser@1.1.3: {}
-
   is-installed-globally@0.4.0:
     dependencies:
       global-dirs: 3.0.0
@@ -30356,52 +30188,6 @@ snapshots:
       json-schema: 0.4.0
       verror: 1.10.0
 
-  jss-plugin-camel-case@10.9.1:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      hyphenate-style-name: 1.0.3
-      jss: 10.9.1
-
-  jss-plugin-default-unit@10.9.1:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      jss: 10.9.1
-
-  jss-plugin-global@10.9.1:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      jss: 10.9.1
-
-  jss-plugin-nested@10.9.1:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      jss: 10.9.1
-      tiny-warning: 1.0.3
-
-  jss-plugin-props-sort@10.9.1:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      jss: 10.9.1
-
-  jss-plugin-rule-value-function@10.9.1:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      jss: 10.9.1
-      tiny-warning: 1.0.3
-
-  jss-plugin-vendor-prefixer@10.9.1:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      css-vendor: 2.0.8
-      jss: 10.9.1
-
-  jss@10.9.1:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      csstype: 3.1.2
-      is-in-browser: 1.1.3
-      tiny-warning: 1.0.3
-
   jsx-ast-utils@3.1.0:
     dependencies:
       array-includes: 3.1.7
@@ -31994,14 +31780,6 @@ snapshots:
 
   normalize-url@8.0.0: {}
 
-  notistack@1.0.10(@material-ui/core@4.12.4(@types/react@17.0.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
-    dependencies:
-      '@material-ui/core': 4.12.4(@types/react@17.0.39)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      clsx: 1.2.1
-      hoist-non-react-statics: 3.3.2
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
   notistack@3.0.1(csstype@3.1.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       clsx: 1.2.1
@@ -33030,8 +32808,6 @@ snapshots:
 
   popper.js@1.16.1: {}
 
-  popper.js@1.16.1-lts: {}
-
   possible-typed-array-names@1.1.0: {}
 
   postcss-flexbugs-fixes@4.2.1:
diff --git a/tailwind.config.js b/tailwind.config.js
index 17e89285b0..cf1b91d9c3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
+    // PicassoBook docs-UI (Storybook infra) is styled with Tailwind too.
+    '.storybook/**/*.{ts,tsx,jsx}',
     'packages/base/*/src/**/*.{ts,tsx}',
     'packages/*/src/**/*.{ts,tsx}',
   ],