From 069343010ebf47f60540335fc98b9abf57db2cde Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Mon, 6 Jul 2026 15:02:26 +0200
Subject: [PATCH 01/17] Migrate CssBaseline off MUI v4 JSS to a runtime <style>

---
 .../references/design-patterns-addendum.md    |  7 ++
 .../src/CssBaseline/CssBaseline.tsx           | 34 ++++++---
 .../src/CssBaseline/styles.ts                 | 76 +++++++++++--------
 3 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/docs/migration/references/design-patterns-addendum.md b/docs/migration/references/design-patterns-addendum.md
index c8829f2270..423f4b8999 100644
--- a/docs/migration/references/design-patterns-addendum.md
+++ b/docs/migration/references/design-patterns-addendum.md
@@ -54,6 +54,13 @@ 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 CssBaseline runtime `<style>` · **TEMPORARY**
+
+- **Tension scope**: 1 file (`packages/picasso-provider/src/CssBaseline/`). The styling doctrine is Tailwind-only (`AGENTS.md §Styling` "No CSS/JSS"; rule 5 "style hooks are `className`/`style` only"). A global CSS reset is the one place raw global CSS legitimately lives.
+- **What we do**: `CssBaseline` injects the pre-migration global reset (the former JSS `@global` block, verbatim — including the `box-sizing: initial` content-box cascade) as a **runtime `<style>` element** instead of MUI v4 JSS. Kept **unlayered** (deliberately NOT wrapped in `@layer base`) to preserve the pre-migration cascade precedence, and still gated by the provider's `reset` prop so `reset={false}` fully opts out. Output is byte-identical (0 Happo diff) and consumers need no CSS-entrypoint changes. Removes all MUI/JSS from the file.
+- **Why not `@layer base` now**: Picasso ships no CSS bundle (consumers run Tailwind via the `@toptal/picasso-tailwind` preset), so a build-time `@layer base` reset would only reach consumers who update their Tailwind entry, would demote the reset below unlayered consumer CSS, and would lose the `reset` opt-out. The React 19 hoistable `<style href precedence>` form is also not typeable yet (`@types/react` is v17 in the workspace).
+- **End-state — promoted post-migration**: move to a true Tailwind `@layer base` preflight (and the React 19 hoistable `<style>` form) once consumer Tailwind entrypoints are coordinated. Tracked in **PF-2221**; consumer coordination via PF-2210. Do NOT "correct" the runtime `<style>` to `@layer base` in a review sweep before that coordination lands.
+
 ## 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/packages/picasso-provider/src/CssBaseline/CssBaseline.tsx b/packages/picasso-provider/src/CssBaseline/CssBaseline.tsx
index 1f86755119..cb586b6602 100644
--- a/packages/picasso-provider/src/CssBaseline/CssBaseline.tsx
+++ b/packages/picasso-provider/src/CssBaseline/CssBaseline.tsx
@@ -1,18 +1,28 @@
+import type { ReactNode } from 'react'
 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'
+import { CSS_BASELINE } from './styles'
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoCssBaseline',
-})
-
-const CssBaseline = ({ children }: CssBaselineProps) => {
-  useStyles()
-
-  return <>{children}</>
+interface Props {
+  children?: ReactNode
 }
 
+/**
+ * Injects Picasso's global CSS reset. Rendered by the provider only when its
+ * `reset` prop is set (the default), so `reset={false}` still fully opts out.
+ * The reset ships as a runtime `<style>` (no MUI/JSS), so it applies in the SSR
+ * shell and requires no CSS-entrypoint changes from consumers.
+ *
+ * TODO: [PF-2221] once the `react < 19` peer cap is lifted and React 19 types
+ * land, switch to a hoistable `<style href="picasso-css-baseline"
+ * precedence="low">` for automatic <head> hoisting + de-duplication across
+ * nested providers. Not possible yet (@types/react is v17 in this workspace).
+ */
+const CssBaseline = ({ children }: Props) => (
+  <>
+    <style dangerouslySetInnerHTML={{ __html: CSS_BASELINE }} />
+    {children}
+  </>
+)
+
 export default CssBaseline
diff --git a/packages/picasso-provider/src/CssBaseline/styles.ts b/packages/picasso-provider/src/CssBaseline/styles.ts
index 9f1528fc0f..ea3d9be540 100644
--- a/packages/picasso-provider/src/CssBaseline/styles.ts
+++ b/packages/picasso-provider/src/CssBaseline/styles.ts
@@ -1,32 +1,44 @@
-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,
-      },
-    },
-  })
+/**
+ * Global CSS reset, migrated verbatim from the former MUI v4 JSS `@global`
+ * stylesheet. CssBaseline injects this at runtime as an intentionally
+ * UNLAYERED `<style>` element, which preserves the pre-migration cascade
+ * precedence (an `@layer base` block would demote it below unlayered consumer
+ * CSS) and keeps the reset gated by the provider's `reset` prop with zero
+ * consumer CSS-entrypoint changes.
+ *
+ * Deliberate parity choices:
+ * - `box-sizing: initial` is kept as-is (existing-violations carve-out — see
+ *   docs/migration/references/design-patterns-addendum.md); un-migrated
+ *   components still depend on the content-box cascade this establishes.
+ * - `palette.common.white` is inlined as its computed value `#fff`.
+ *
+ * TODO: [PF-2221] promote to a true Tailwind `@layer base` preflight once
+ * consumer Tailwind entrypoints are coordinated (provider migration brief).
+ */
+export const CSS_BASELINE = `html {
+  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;
+}
+`

From 303adb0ecba61b6084e3ef986b45dd3dd68abe3e Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Mon, 6 Jul 2026 15:54:30 +0200
Subject: [PATCH 02/17] Migrate Nofitication Provider

---
 .../NotificationsProvider.tsx                 | 15 ++-----
 .../Picasso/NotificationsProvider/styles.ts   | 39 +++++++++----------
 2 files changed, 23 insertions(+), 31 deletions(-)

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]'

From 475069a1ab48d147d8dad484287f3f4571e9d23e Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Mon, 6 Jul 2026 16:25:05 +0200
Subject: [PATCH 03/17] Restyle PicassoRootNode + scrollbar fix off MUI v4 JSS

---
 .../src/Picasso/PicassoRootNode.tsx           | 23 +++--------
 .../picasso-provider/src/Picasso/styles.tsx   | 32 ++++++---------
 .../PreventPageWidthChangeOnScrollbar.tsx     | 17 ++++----
 .../styles.ts                                 | 40 +++++++++++--------
 4 files changed, 51 insertions(+), 61 deletions(-)

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/styles.tsx b/packages/picasso-provider/src/Picasso/styles.tsx
index 6288bf914d..08268685b9 100644
--- a/packages/picasso-provider/src/Picasso/styles.tsx
+++ b/packages/picasso-provider/src/Picasso/styles.tsx
@@ -1,19 +1,13 @@
-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 — preserved even when the global reset is off (reset={false}).
+// The Picasso font is forced onto the whole subtree (was `& * { fontFamily }`;
+// `font-sans` resolves to the former `typography.fontFamily` proxima-nova stack).
+export const root = [
+  'flex-1',
+  'box-border',
+  '[&_*]:font-sans',
+  '[&_*]:[box-sizing:inherit]',
+  '[&_*::before]:[box-sizing:inherit]',
+  '[&_*::after]:[box-sizing:inherit]',
+].join(' ')
diff --git a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx b/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx
index 84b8e5db4a..ea72bce877 100644
--- a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx
+++ b/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx
@@ -1,20 +1,19 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import React from 'react'
 
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPreventPageWidthChangeOnScrollbar',
-})
+import { preventPageWidthChangeCss } from './styles'
 
 /**
  * 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()
+  const css = preventPageWidthChangeCss()
+
+  if (!css) {
+    return null
+  }
 
-  return null
+  return <style dangerouslySetInnerHTML={{ __html: css }} />
 }
 
 export default PreventPageWidthChangeOnScrollbar
diff --git a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/styles.ts b/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/styles.ts
index 465ddda55b..977fb62067 100644
--- a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/styles.ts
+++ b/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/styles.ts
@@ -1,17 +1,25 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
+import { screens } from '../Picasso/config'
 
-export default ({ screens }: Theme) =>
-  createStyles({
-    '@global': {
-      [screens('md', 'lg', 'xl')]: {
-        html: {
-          width: '100%',
-          overflowX: 'hidden',
-        },
-        body: {
-          width: '100vw',
-        },
-      },
-    },
-  })
+/**
+ * Global CSS that fixes the page-width jump when the vertical scrollbar
+ * appears/disappears. Applied only at md/lg/xl via the runtime-resolved
+ * `screens()` media query (which honors `disableMobileBreakpoints()`); returns
+ * an empty string when no matching breakpoint is active.
+ */
+export const preventPageWidthChangeCss = (): string => {
+  const media = screens('md', 'lg', 'xl')
+
+  if (!media) {
+    return ''
+  }
+
+  return `${media} {
+  html {
+    width: 100%;
+    overflow-x: hidden;
+  }
+  body {
+    width: 100vw;
+  }
+}`
+}

From 6ab9ac1879179a2222f99c17b4b59623f446da39 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Tue, 7 Jul 2026 16:29:53 +0200
Subject: [PATCH 04/17] Port responsive-spacing engine off JSS; retire SSR
 helper

---
 .../utils/get-serverside-stylesheets.ts       | 17 -----
 .../src/Picasso/utils/index.ts                |  1 -
 .../create-jss-variable-class-names.test.ts   | 17 -----
 .../create-jss-variable-class-names.ts        | 30 --------
 .../create-media-queries.test.ts              | 32 ---------
 .../responsive-styles/create-media-queries.ts | 32 ---------
 .../inject-responsive-styles.test.ts          | 24 +++++++
 .../inject-responsive-styles.ts               | 72 +++++++++++++++++++
 .../make-responsive-spacing-props.ts          | 24 +++----
 .../media-queries-classes.test.ts             | 32 ---------
 .../media-queries-classes.ts                  | 28 --------
 11 files changed, 105 insertions(+), 204 deletions(-)
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/get-serverside-stylesheets.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/create-jss-variable-class-names.test.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/create-jss-variable-class-names.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/create-media-queries.test.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/create-media-queries.ts
 create mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.test.ts
 create mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/media-queries-classes.test.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/media-queries-classes.ts

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..3344b81f11 100644
--- a/packages/picasso-provider/src/Picasso/utils/index.ts
+++ b/packages/picasso-provider/src/Picasso/utils/index.ts
@@ -1,4 +1,3 @@
 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/inject-responsive-styles.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.test.ts
new file mode 100644
index 0000000000..f1dc5f766f
--- /dev/null
+++ b/packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.test.ts
@@ -0,0 +1,24 @@
+import { buildResponsiveCss } from './inject-responsive-styles'
+
+describe('buildResponsiveCss', () => {
+  it('emits one media-query rule per breakpoint and prop', () => {
+    const css = buildResponsiveCss(['margin-top'], 'Test')
+
+    expect(css).toContain(
+      '@media (min-width:768px){.Test-md--margin-top{margin-top:var(--picasso-responsive--md--margin-top)}}'
+    )
+    expect(css).toContain(
+      '@media (min-width:0px){.Test-xs--margin-top{margin-top:var(--picasso-responsive--xs--margin-top)}}'
+    )
+  })
+
+  it('emits breakpoints largest-first (preserving the legacy cascade order)', () => {
+    const css = buildResponsiveCss(['margin-top'], 'Test')
+
+    const xlIndex = css.indexOf('xl--margin-top')
+    const xsIndex = css.indexOf('xs--margin-top')
+
+    expect(xlIndex).toBeGreaterThanOrEqual(0)
+    expect(xlIndex).toBeLessThan(xsIndex)
+  })
+})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.ts
new file mode 100644
index 0000000000..32dd327bbd
--- /dev/null
+++ b/packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.ts
@@ -0,0 +1,72 @@
+import type { BreakpointKeys } from '../../config'
+import { breakpointsList } from '../../config'
+import { toClassName } from './to-class-name'
+import { toCssVariableName } from './to-css-variable-name'
+import type { ResponsiveCssProp } from './types'
+
+/**
+ * Builds the media-query CSS backing the responsive spacing classes: one rule
+ * per breakpoint × prop, mapping `.<name>-<breakpoint>--<prop>` to its CSS
+ * variable.
+ *
+ * Breakpoints are read lazily from the live config so the rules honour
+ * `disableMobileBreakpoints()`, which mutates the breakpoint values in place.
+ *
+ * NOTE: rules are emitted largest-breakpoint-first, preserving the original
+ * inverted cascade — on wide viewports the *smallest* specified breakpoint wins
+ * (mobile-first semantics reversed). This defect predates the migration and is
+ * kept byte-for-byte on purpose; the correct cascade lands with the Tailwind
+ * convergence in PF-2226.
+ */
+export const buildResponsiveCss = (
+  props: readonly ResponsiveCssProp[],
+  name: string
+): string => {
+  const breakpoints = Object.keys(breakpointsList) as BreakpointKeys[]
+  const rules: string[] = []
+
+  for (const breakpoint of [...breakpoints].reverse()) {
+    const minWidth = breakpointsList[breakpoint]
+
+    for (const prop of props) {
+      const className = `${name}-${toClassName(breakpoint, prop)}`
+      const variable = toCssVariableName(breakpoint, prop)
+
+      rules.push(
+        `@media (min-width:${minWidth}px){.${className}{${prop}:var(${variable})}}`
+      )
+    }
+  }
+
+  return rules.join('')
+}
+
+const injectedNames = new Set<string>()
+
+/**
+ * Injects the responsive spacing stylesheet for a given hook `name` exactly once
+ * (client-side only; a no-op during SSR).
+ */
+export const injectResponsiveStyles = (
+  props: readonly ResponsiveCssProp[],
+  name: string
+): void => {
+  if (typeof document === 'undefined' || injectedNames.has(name)) {
+    return
+  }
+
+  injectedNames.add(name)
+
+  const id = `picasso-responsive-${name}`
+
+  if (document.getElementById(id)) {
+    return
+  }
+
+  const style = document.createElement('style')
+
+  style.id = id
+  style.textContent = buildResponsiveCss(props, name)
+
+  document.head.appendChild(style)
+}
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
index 6cf6870d2c..588bbb8e45 100644
--- 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
@@ -1,29 +1,23 @@
 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'
+import { getBreakpointClassNamesToUse } from './get-breakpoint-class-names-to-use'
+import { injectResponsiveStyles } from './inject-responsive-styles'
+import type { ResponsiveCssProp, ResponsiveCssSpacings } from './types'
 
 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)
+    // Inject the media-query stylesheet on first use (client-only, idempotent),
+    // during render so the classes' CSS is present synchronously.
+    injectResponsiveStyles(props, name)
+
+    const classNames = getBreakpointClassNamesToUse(props, propValues)
 
     return {
-      className: cx(...mediaQueries.map(brkClassName => classes[brkClassName])),
+      className: cx(...classNames.map(className => `${name}-${className}`)),
       style: generateVariableInlineStyles(props, propValues),
     }
   }
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
-}

From 974e0b26fdf637b2c04660074a28ea8a6b9aeca8 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Wed, 8 Jul 2026 15:08:40 +0200
Subject: [PATCH 05/17] Decouple Page from PicassoProvider theme via
 RootContext responsive flag

---
 .changeset/page-responsive-root-context.md    | 14 +++++++++++
 packages/base/Page/src/Page/Page.tsx          | 19 +++++++--------
 packages/base/Page/src/Page/styles.ts         |  5 ++++
 packages/base/Page/src/Page/test.tsx          | 24 +++++++++++++++++++
 packages/base/Page/src/PageContent/styles.ts  |  4 ++--
 packages/base/Page/src/PageFooter/styles.ts   |  4 ++--
 .../picasso-provider/src/Picasso/Picasso.tsx  |  1 +
 .../Picasso/PicassoGlobalStylesProvider.tsx   |  3 +++
 .../src/Picasso/PicassoLight/PicassoLight.tsx |  1 +
 .../src/Picasso/RootContext.ts                |  3 +++
 10 files changed, 64 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/page-responsive-root-context.md

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/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/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..38b9878852 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,27 @@ 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}
+        preventPageWidthChangeOnScrollbar={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/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/picasso-provider/src/Picasso/Picasso.tsx b/packages/picasso-provider/src/Picasso/Picasso.tsx
index 194cedad92..747efd1bbd 100644
--- a/packages/picasso-provider/src/Picasso/Picasso.tsx
+++ b/packages/picasso-provider/src/Picasso/Picasso.tsx
@@ -107,6 +107,7 @@ const Picasso = ({
           environment={environment}
           titleCase={titleCase}
           disableTransitions={disableTransitions}
+          responsive={responsive}
           preventPageWidthChangeOnScrollbar={preventPageWidthChangeOnScrollbar}
         >
           <HelmetProvider disabled={disableHelmet}>
diff --git a/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx b/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx
index 45b1779578..9ada93ebbd 100644
--- a/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx
+++ b/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx
@@ -15,6 +15,7 @@ export interface PicassoGlobalStylesProviderProps extends TextLabelProps {
   >
   environment: EnvironmentType<'test' | 'temploy'>
   disableTransitions?: boolean
+  responsive?: boolean
   preventPageWidthChangeOnScrollbar?: boolean
 }
 
@@ -35,6 +36,7 @@ const PicassoGlobalStylesProvider = (
     environment,
     titleCase,
     disableTransitions,
+    responsive,
     preventPageWidthChangeOnScrollbar,
   } = props
 
@@ -80,6 +82,7 @@ const PicassoGlobalStylesProvider = (
       }))
     },
     disableTransitions,
+    responsive,
     preventPageWidthChangeOnScrollbar,
   })
 
diff --git a/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx b/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
index 4dc5497ecb..0ff0e3a22e 100644
--- a/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
+++ b/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
@@ -62,6 +62,7 @@ const PicassoLight = ({
           environment={environment}
           titleCase={titleCase}
           disableTransitions={disableTransitions}
+          responsive={responsive}
         >
           {reset && <CssBaseline />}
           {children}
diff --git a/packages/picasso-provider/src/Picasso/RootContext.ts b/packages/picasso-provider/src/Picasso/RootContext.ts
index 15394fa765..eca35e6b44 100644
--- a/packages/picasso-provider/src/Picasso/RootContext.ts
+++ b/packages/picasso-provider/src/Picasso/RootContext.ts
@@ -14,6 +14,7 @@ export interface RootContextProps extends TextLabelProps {
   hasDrawer: boolean
   setHasDrawer: (value: boolean) => void
   disableTransitions?: boolean
+  responsive?: boolean
   currentBreakpointRange?: BreakpointKeys
   preventPageWidthChangeOnScrollbar?: boolean
 }
@@ -28,6 +29,7 @@ export const RootContext = React.createContext<RootContextProps>({
   hasDrawer: false,
   setHasDrawer: () => {},
   disableTransitions: false,
+  responsive: true,
   currentBreakpointRange: undefined,
 })
 
@@ -85,6 +87,7 @@ export const useAppConfig = () => {
     environment: context.environment,
     titleCase: context.titleCase,
     disableTransitions: context.disableTransitions,
+    responsive: context.responsive,
   }
 }
 

From 5c971653f23d7b75be20f4320eb687939a03f142 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Wed, 8 Jul 2026 17:02:17 +0200
Subject: [PATCH 06/17] Drop MUI theme runtime + StylesProvider from the
 provider

---
 .storybook/preview.js                         |   1 -
 .../story/ServerSideUtils.example.tsx         |  27 --
 .../server-side-rendering/story/index.jsx     | 324 ------------------
 cypress/support/commands.jsx                  |   7 +-
 .../src/test-utils/TestingPicasso.tsx         |   8 +-
 .../picasso-provider/src/Picasso/Picasso.tsx  |  86 ++---
 .../src/Picasso/PicassoLight/PicassoLight.tsx |  54 +--
 .../src/Picasso/PicassoProvider.tsx           |  80 -----
 .../src/Picasso/config/breakpoints.ts         |  43 ++-
 .../src/Picasso/config/index.ts               |   1 -
 .../src/Picasso/config/layout.ts              |   1 -
 .../src/Picasso/config/palette.ts             |  35 --
 .../src/Picasso/config/theme.ts               |  27 --
 .../src/Picasso/config/typography.ts          |  16 +-
 .../story/DisableClassNamePrefix.example.tsx  |  36 --
 .../src/Picasso/story/index.jsx               |   4 -
 packages/picasso-provider/src/index.ts        |   2 -
 packages/picasso/README.md                    |   2 +-
 18 files changed, 76 insertions(+), 678 deletions(-)
 delete mode 100644 .storybook/stories/tutorials/server-side-rendering/story/ServerSideUtils.example.tsx
 delete mode 100644 .storybook/stories/tutorials/server-side-rendering/story/index.jsx
 delete mode 100644 packages/picasso-provider/src/Picasso/PicassoProvider.tsx
 delete mode 100644 packages/picasso-provider/src/Picasso/config/theme.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/story/DisableClassNamePrefix.example.tsx

diff --git a/.storybook/preview.js b/.storybook/preview.js
index f4c00366fd..4c610dbd81 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -63,7 +63,6 @@ const withPicasso = story => (
     fixViewport={false}
     loadFavicon={false}
     preventPageWidthChangeOnScrollbar={false}
-    injectFirst
   >
     {story()}
   </Picasso>
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/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/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx b/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx
index b78b08a0a8..dfb6f04112 100644
--- a/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx
+++ b/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx
@@ -4,14 +4,9 @@ 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}
@@ -20,7 +15,6 @@ export const TestingPicasso = ({
       preventPageWidthChangeOnScrollbar={false}
       titleCase={titleCase}
       disableTransitions
-      injectFirst={injectFirst}
     >
       {children}
     </Picasso>
diff --git a/packages/picasso-provider/src/Picasso/Picasso.tsx b/packages/picasso-provider/src/Picasso/Picasso.tsx
index 747efd1bbd..0fcb189f6a 100644
--- a/packages/picasso-provider/src/Picasso/Picasso.tsx
+++ b/packages/picasso-provider/src/Picasso/Picasso.tsx
@@ -1,11 +1,5 @@
-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'
@@ -13,9 +7,7 @@ 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'
@@ -42,19 +34,10 @@ export interface PicassoProps extends TextLabelProps {
   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 = ({
@@ -69,62 +52,35 @@ const Picasso = ({
   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}
+      preventPageWidthChangeOnScrollbar={preventPageWidthChangeOnScrollbar}
     >
-      <MuiThemeProvider theme={PicassoProvider.theme}>
-        <PicassoGlobalStylesProvider
-          RootComponent={RootComponent}
-          environment={environment}
-          titleCase={titleCase}
-          disableTransitions={disableTransitions}
-          responsive={responsive}
-          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 />}
+        {reset && <CssBaseline />}
+        {preventPageWidthChangeOnScrollbar && (
+          <PreventPageWidthChangeOnScrollbar />
+        )}
+        {loadFavicon && <Favicon environment={environment} />}
+        <NotificationsProvider container={notificationContainer}>
+          {children}
+        </NotificationsProvider>
+      </HelmetProvider>
+    </PicassoGlobalStylesProvider>
   )
 }
 
diff --git a/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx b/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
index 0ff0e3a22e..0fb955ec56 100644
--- a/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
+++ b/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
@@ -1,14 +1,7 @@
-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'
@@ -25,50 +18,23 @@ const PicassoLight = ({
   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}
-          responsive={responsive}
-        >
-          {reset && <CssBaseline />}
-          {children}
-        </PicassoGlobalStylesProvider>
-      </MuiThemeProvider>
-    </StylesProvider>
+      {reset && <CssBaseline />}
+      {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/config/breakpoints.ts b/packages/picasso-provider/src/Picasso/config/breakpoints.ts
index 1d8160e842..4c96217393 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,48 @@ 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()
+    mediaQueryList.addEventListener('change', onChange)
+
+    return () => mediaQueryList.removeEventListener('change', 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/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/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/index.ts b/packages/picasso-provider/src/index.ts
index 491e7c40d6..9d76cceb4c 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,
diff --git a/packages/picasso/README.md b/packages/picasso/README.md
index 58a8549009..20c7b9b8c6 100644
--- a/packages/picasso/README.md
+++ b/packages/picasso/README.md
@@ -100,7 +100,7 @@ import { Button } from '@toptal/picasso'
 
 render () {
   return (
-    <Picasso injectFirst>
+    <Picasso>
       <Button>Hello world!</Button>
     </Picasso>
   )

From 06b5276c5b1ca9b133ad70a4f62ba707592446d4 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Wed, 8 Jul 2026 22:57:56 +0200
Subject: [PATCH 07/17] Migrate PicassoBook docs-UI off MUI to Tailwind

---
 .../components/CodeExample/CodeExample.tsx    |   8 +-
 .storybook/components/CodeExample/styles.ts   |  35 ++----
 .storybook/components/Editor/Editor.tsx       |   7 +-
 .storybook/components/Editor/styles.ts        |  15 +--
 .storybook/components/Markdown/Markdown.tsx   |   7 +-
 .storybook/components/Markdown/styles.ts      |  29 +----
 .../components/PropsTable/EnumsList.tsx       |   7 +-
 .../PropsTable/PropTypeTableCell.tsx          |  10 +-
 .../components/PropsTable/PropsTable.tsx      |  14 +--
 .../components/PropsTable/styles.ts           | 104 ++++--------------
 .../TabsSection/TabsSectionHeader.tsx         |  12 +-
 .../components/TabsSection/styles.ts          |  14 +--
 tailwind.config.js                            |   2 +
 13 files changed, 48 insertions(+), 216 deletions(-)

diff --git a/.storybook/components/CodeExample/CodeExample.tsx b/.storybook/components/CodeExample/CodeExample.tsx
index 18cccb03c7..23d2f93484 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
@@ -240,7 +235,6 @@ const CodeExample = ({
   permanentLink,
   src,
 }: Props) => {
-  const classes = useStyles()
   const [sourceCode, setSourceCode] = useState(
     getOriginalSourceCode({
       src,
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..51ff34b359 100644
--- a/.storybook/components/Editor/styles.ts
+++ b/.storybook/components/Editor/styles.ts
@@ -1,10 +1,5 @@
-export default {
-  root: {
-    width: '100%',
-
-    '& *': {
-      fontFamily:
-        "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace"
-    }
-  }
-}
+// The trailing `!` beats PicassoRootNode's app-wide `[&_*]:font-sans` (which has
+// equal specificity), so the code editor keeps its monospace font — matching the
+// pre-migration cascade where JSS injection order let this win.
+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/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}',
   ],

From 10f7bec5a6aeb359da98de7f83a6efa1fd5fe1a9 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Wed, 8 Jul 2026 23:04:08 +0200
Subject: [PATCH 08/17] Remove @material-ui dep/peer-dep; lift React 19 cap
 (canary)

---
 .changeset/decommission-mui-provider.md |  23 +++
 packages/base/Collapse/package.json     |   3 +-
 packages/base/Fade/package.json         |   3 +-
 packages/base/Slide/package.json        |   3 +-
 packages/base/Utils/package.json        |   1 -
 packages/picasso-provider/package.json  |   4 +-
 packages/picasso/package.json           |   5 +-
 pnpm-lock.yaml                          | 252 ++----------------------
 8 files changed, 46 insertions(+), 248 deletions(-)
 create mode 100644 .changeset/decommission-mui-provider.md

diff --git a/.changeset/decommission-mui-provider.md b/.changeset/decommission-mui-provider.md
new file mode 100644
index 0000000000..6aeee9c146
--- /dev/null
+++ b/.changeset/decommission-mui-provider.md
@@ -0,0 +1,23 @@
+---
+'@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`.
+
+`@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/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/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/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/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/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/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:

From a7fe8b909f6c203b3fdbf8325e2b2884f4af3b75 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Wed, 8 Jul 2026 23:21:40 +0200
Subject: [PATCH 09/17] Add picasso-provider migration docs

---
 ...-4318-PF-2023-provider-migration-report.md | 158 ++++++++++++++++++
 1 file changed, 158 insertions(+)
 create mode 100644 docs/modernization/PI-4318-PF-2023-provider-migration-report.md

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..4c97bc5c59
--- /dev/null
+++ b/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
@@ -0,0 +1,158 @@
+# 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 (CSS reset, fonts, favicon, notifications, RootContext, breakpoints) rather than a theme runtime; styling is Tailwind end-to-end.
+
+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 | Same 12 reset rules injected via a runtime `<style>` (unlayered, `reset`-prop-gated). No MUI/JSS. |
+| **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')` | Runtime `<style>` built from `screens()` at render (keeps the `disableMobileBreakpoints()` dynamic). |
+| **Responsive-styles engine** (`makeResponsiveSpacingProps`) | `makeStyles` media-query classes + inline CSS vars | Media-query CSS built from config + injected once via runtime `<style>`; inline-var machinery unchanged; `{className, style}` contract preserved. **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 → runtime `<style>` (not `@layer base`)
+- **Decision:** keep the reset as a runtime `<style>`, **unlayered**, still gated by the `reset` prop; do **not** move it to a Tailwind `@layer base` preflight yet.
+- **Why:** Picasso ships **no CSS bundle** — consumers run Tailwind via the `@toptal/picasso-tailwind` **preset**. A build-time `@layer base` reset would (a) only reach consumers who update their Tailwind entrypoint, (b) demote the reset *below* unlayered consumer CSS (cascade regression), and (c) lose the `reset={false}` opt-out. Unlayered runtime injection is byte-identical and needs zero consumer change.
+- **Not Helmet** (the house head-injection tool) because `PicassoLight` and `<Picasso disableHelmet>` have **no `HelmetProvider`** — a Helmet-based reset would break there. The reset must not be Helmet-gated.
+- **Not the React-19 hoistable `<style href precedence>`** yet — `@types/react` is v17 in the workspace, so it wouldn't typecheck.
+- *Implication / follow-up:* true `@layer base` preflight + hoistable `<style>` end-state tracked in **[PF-2221]**. Recorded as a migration-period exception in `docs/migration/references/design-patterns-addendum.md §2` so a review sweep won't "correct" it.
+
+### 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:* retire the engine + converge Dropdown on Container's static-Tailwind pattern + fix the cascade → **[PF-2226]**.
+
+### 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 |
+
+**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). The `reset` prop now injects an unlayered runtime `<style>` (byte-identical output).
+
+**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]** | Promote the CssBaseline reset to a true Tailwind `@layer base` preflight + React-19 hoistable `<style>` | Needs consumer Tailwind-entry coordination + React 19 types; behavior/cascade-sensitive |
+| **[PF-2226]** | Retire the responsive-styles engine; converge Dropdown `offset` on Container's static-Tailwind pattern; **fix the inverted mobile-first cascade** | Zero adoption; convergence is a reviewable design change, not a library swap |
+| **[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.** PicassoRootNode's app-wide `[&_*]:font-sans` (`.root *`, specificity 0,1,0) fights a child's `[&_*]:font-[…]` (same 0,1,0) — order decides, fragile. A **type-selector** variant (`[&_code]:` = 0,1,1) wins naturally; a **universal** one (`[&_*]:`) needs `!important` or a specificity bump. JSS resolved this by injection order; Tailwind's layer order doesn't preserve component nesting.
+6. **The box-sizing "island."** Picasso sets the page to `content-box` (CssBaseline) and a `border-box` island on the Picasso root (descendants + `::before`/`::after` inherit). Tailwind **preflight is not active**, so this reset is the *only* box-sizing source — don't assume border-box. Preserved verbatim (existing-violations carve-out).
+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.

From eb450702fd90f42937cfc01edaa4ff0a59a1c914 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Thu, 9 Jul 2026 00:19:30 +0200
Subject: [PATCH 10/17] Fix unit tests

---
 .../src/Accordion/__snapshots__/test.tsx.snap |  93 ++++-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../AccountSelect/__snapshots__/test.tsx.snap |  31 +-
 .../src/Alert/__snapshots__/test.tsx.snap     |  31 +-
 .../AlertInline/__snapshots__/test.tsx.snap   |  31 +-
 .../src/Amount/__snapshots__/test.tsx.snap    |  31 +-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../Autocomplete/__snapshots__/test.tsx.snap  |  31 +-
 .../AvatarUpload/__snapshots__/test.tsx.snap  |  31 +-
 .../src/Badge/__snapshots__/test.tsx.snap     |  62 +++-
 .../src/Button/__snapshots__/test.tsx.snap    |  62 +++-
 .../ButtonBase/__snapshots__/test.tsx.snap    | 341 +++++++++++++++++-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../ButtonGroup/__snapshots__/test.tsx.snap   |  31 +-
 .../ButtonRadio/__snapshots__/test.tsx.snap   |  31 +-
 .../ButtonSplit/__snapshots__/test.tsx.snap   |  31 +-
 .../src/Calendar/__snapshots__/test.tsx.snap  |  31 +-
 .../src/Checkbox/__snapshots__/test.tsx.snap  | 248 ++++++++++++-
 .../src/Container/__snapshots__/test.tsx.snap |  31 +-
 .../DatePicker/__snapshots__/test.tsx.snap    |  31 +-
 .../MonthSelect/__snapshots__/test.tsx.snap   |  31 +-
 .../YearSelect/__snapshots__/test.tsx.snap    |  31 +-
 .../src/Dropdown/__snapshots__/test.tsx.snap  |  93 ++++-
 .../src/Dropzone/__snapshots__/test.tsx.snap  |  31 +-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../src/FileInput/__snapshots__/test.tsx.snap |  62 +++-
 .../src/FileList/__snapshots__/test.tsx.snap  |  31 +-
 .../FileListItem/__snapshots__/test.tsx.snap  |  31 +-
 .../ProgressBar/__snapshots__/test.tsx.snap   |  62 +++-
 .../src/FormError/__snapshots__/test.tsx.snap |  31 +-
 .../src/FormField/__snapshots__/test.tsx.snap |  93 ++++-
 .../src/FormHint/__snapshots__/test.tsx.snap  |  31 +-
 .../FormWarning/__snapshots__/test.tsx.snap   |  31 +-
 .../src/FormLabel/__snapshots__/test.tsx.snap | 155 +++++++-
 .../Grid/src/Grid/__snapshots__/test.tsx.snap |  31 +-
 .../src/GridItem/__snapshots__/test.tsx.snap  |  31 +-
 .../src/Helpbox/__snapshots__/test.tsx.snap   |  31 +-
 .../src/Input/__snapshots__/test.tsx.snap     | 186 +++++++++-
 .../Link/src/Link/__snapshots__/test.tsx.snap | 124 ++++++-
 .../List/src/List/__snapshots__/test.tsx.snap |  62 +++-
 .../Menu/src/Menu/__snapshots__/test.tsx.snap |  31 +-
 .../src/MenuItem/__snapshots__/test.tsx.snap  | 217 ++++++++++-
 .../src/Modal/__snapshots__/test.tsx.snap     | 128 ++++++-
 .../Note/src/Note/__snapshots__/test.tsx.snap |  31 +-
 .../Notification/__snapshots__/test.tsx.snap  |  31 +-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../__snapshots__/test.tsx.snap               |  99 ++++-
 .../NumberInput/__snapshots__/test.tsx.snap   |  31 +-
 .../Page/src/Page/__snapshots__/test.tsx.snap |  31 +-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../PageSidebar/__snapshots__/test.tsx.snap   |  93 ++++-
 .../PageTopBar/__snapshots__/test.tsx.snap    | 124 ++++++-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../SidebarItem/__snapshots__/test.tsx.snap   | 217 ++++++++++-
 .../SidebarLogo/__snapshots__/test.tsx.snap   |  31 +-
 .../SidebarMenu/__snapshots__/test.tsx.snap   |  62 +++-
 .../Pagination/__snapshots__/test.tsx.snap    | 192 +++++++++-
 .../src/Paper/__snapshots__/test.tsx.snap     |  31 +-
 .../PromptModal/__snapshots__/test.tsx.snap   | 159 +++++++-
 .../src/Quote/__snapshots__/test.tsx.snap     |  31 +-
 .../src/Radio/__snapshots__/test.tsx.snap     | 124 ++++++-
 .../RatingIcon/__snapshots__/test.tsx.snap    |  31 +-
 .../RatingStars/__snapshots__/test.tsx.snap   |  31 +-
 .../src/Section/__snapshots__/test.tsx.snap   | 124 ++++++-
 .../NativeSelect/__snapshots__/test.tsx.snap  |  62 +++-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../__snapshots__/test.tsx.snap               |  93 ++++-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../__snapshots__/test.tsx.snap               |  65 +++-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../__snapshots__/test.tsx.snap               |  62 +++-
 .../__snapshots__/test.tsx.snap               |  93 ++++-
 .../ScrollMenu/__snapshots__/test.tsx.snap    |  31 +-
 .../SelectCaret/__snapshots__/test.tsx.snap   |  62 +++-
 .../src/ShowMore/__snapshots__/test.tsx.snap  | 217 ++++++++++-
 .../src/Stepper/__snapshots__/test.tsx.snap   | 124 ++++++-
 .../__snapshots__/test.tsx.snap               |  62 +++-
 .../src/Switch/__snapshots__/test.tsx.snap    |  31 +-
 .../src/Table/__snapshots__/test.tsx.snap     |  31 +-
 .../src/TableBody/__snapshots__/test.tsx.snap |  31 +-
 .../src/TableCell/__snapshots__/test.tsx.snap |  93 ++++-
 .../TableFooter/__snapshots__/test.tsx.snap   |  31 +-
 .../src/TableHead/__snapshots__/test.tsx.snap |  31 +-
 .../src/TableRow/__snapshots__/test.tsx.snap  |  31 +-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../__snapshots__/test.tsx.snap               |  62 +++-
 .../Tabs/src/Tab/__snapshots__/test.tsx.snap  |  93 ++++-
 .../Tabs/src/Tabs/__snapshots__/test.tsx.snap | 155 +++++++-
 .../src/Indicator/__snapshots__/test.tsx.snap |  31 +-
 .../Tag/src/Tag/__snapshots__/test.tsx.snap   | 155 +++++++-
 .../src/TagGroup/__snapshots__/test.tsx.snap  |  31 +-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../TagSelector/__snapshots__/test.tsx.snap   |  93 ++++-
 .../__snapshots__/test.tsx.snap               |  31 +-
 .../src/Timeline/__snapshots__/test.tsx.snap  | 248 ++++++++++++-
 .../TimePicker/__snapshots__/test.tsx.snap    |  31 +-
 .../src/Tooltip/__snapshots__/test.tsx.snap   |  62 +++-
 .../Typography/__snapshots__/test.tsx.snap    |  93 ++++-
 .../src/UserBadge/__snapshots__/test.tsx.snap | 248 ++++++++++++-
 .../utils/Modal/__snapshots__/test.tsx.snap   |  97 ++++-
 .../Rotate180/__snapshots__/test.tsx.snap     |  62 +++-
 .../src/Checkbox/__snapshots__/test.tsx.snap  |  93 ++++-
 .../FieldLabel/__snapshots__/test.tsx.snap    |  31 +-
 .../src/Form/__snapshots__/test.tsx.snap      |  62 +++-
 .../src/Radio/__snapshots__/test.tsx.snap     |  62 +++-
 .../src/Rating/__snapshots__/test.tsx.snap    |  62 +++-
 .../picasso-provider/src/Favicon/test.tsx     |   6 +-
 .../src/Picasso/config/breakpoints.ts         |  13 +-
 109 files changed, 7327 insertions(+), 252 deletions(-)

diff --git a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
index 78362bf5f4..a66c69000a 100644
--- a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
+++ b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Accordion renders collapsed by default 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       data-component-type="accordion"
@@ -103,8 +132,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       data-component-type="accordion"
@@ -197,8 +255,37 @@ exports[`Accordion renders custom icon when passed 1`] = `
 exports[`Accordion renders disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       data-component-type="accordion"
diff --git a/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap b/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap
index d92fee5dae..0cbbf0638e 100644
--- a/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap
+++ b/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`AccordionDetails renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..25a322109d 100644
--- a/packages/base/Accordion/src/AccordionSummary/__snapshots__/test.tsx.snap
+++ b/packages/base/Accordion/src/AccordionSummary/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`AccordionSummary renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       data-component-type="accordion-summary"
diff --git a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
index f5b752538b..9a745570bc 100644
--- a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`AccountSelect renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <ul
       class="relative list-none outline-hidden shadow-1 m-0 rounded-sm p-0"
       role="menu"
diff --git a/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap b/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
index 29ef72b626..1b11b53ee9 100644
--- a/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
+++ b/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Alert renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="bg-yellow border border-solid border-yellow gap-4 p-4 justify-between rounded-md flex"
       role="alert"
diff --git a/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap b/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap
index 42873542fa..e36b972cae 100644
--- a/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap
+++ b/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Alert renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..830a1fec96 100644
--- a/packages/base/Amount/src/Amount/__snapshots__/test.tsx.snap
+++ b/packages/base/Amount/src/Amount/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Amount renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..c57bf2327b 100644
--- a/packages/base/ApplicationUpdateNotification/src/ApplicationUpdateNotification/__snapshots__/test.tsx.snap
+++ b/packages/base/ApplicationUpdateNotification/src/ApplicationUpdateNotification/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`ApplicationUpdateNotification renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       role="alert"
diff --git a/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap b/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
index 618e85b4fb..61c5969b66 100644
--- a/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
+++ b/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
@@ -227,8 +227,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
diff --git a/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap b/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
index 0d596b99c8..16bde0f4f1 100644
--- a/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
+++ b/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`AvatarUpload renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative flex justify-center items-center text-blue outline-hidden cursor-pointer w-[5rem] h-[5rem]"
       role="presentation"
diff --git a/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap b/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
index ac01dbfb27..906f36597e 100644
--- a/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
+++ b/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Badge renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       class="inline-flex shrink-0 content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite static"
     >
@@ -21,8 +50,37 @@ exports[`Badge renders 1`] = `
 exports[`Badge renders in red variant 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..c0568427a4 100644
--- a/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Button disabled button as link renders disabled version 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <a
       aria-disabled="true"
       class="font-inherit focus:outline-hidden 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-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
@@ -28,8 +57,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       aria-disabled="true"
       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-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
diff --git a/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
index 711d86a681..e790eab45f 100644
--- a/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       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"
@@ -27,8 +56,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       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"
@@ -51,8 +109,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <a
       aria-disabled="false"
       class="font-inherit focus:outline-hidden hover:underline text-blue visited:text-purple no-underline 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"
@@ -75,8 +162,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <a
       aria-disabled="true"
       class="font-inherit focus:outline-hidden hover:underline text-blue visited:text-purple no-underline 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-default pointer-events"
@@ -100,8 +216,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <a
       aria-disabled="false"
       class="font-inherit focus:outline-hidden hover:underline text-blue visited:text-purple no-underline 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"
@@ -124,8 +269,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <a
       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"
@@ -148,8 +322,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       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"
@@ -171,8 +374,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       aria-disabled="true"
       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-default pointer-events"
@@ -196,8 +428,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       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"
@@ -246,8 +507,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       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"
@@ -269,8 +559,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       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"
diff --git a/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
index 13e65bf4e4..215cd37266 100644
--- a/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`ButtonCheckbox renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
diff --git a/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
index ef599dcdf8..51fa0998c0 100644
--- a/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`ButtonGroup render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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-["
       data-component-type="button"
diff --git a/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
index b0c9b9fed0..019f09cbeb 100644
--- a/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`ButtonRadio renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
diff --git a/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
index b081a9f8f9..c1f3aa4ab9 100644
--- a/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
@@ -15,8 +15,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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-["
       data-component-type="button"
diff --git a/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap b/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
index 9385c264e9..ffc68d57d9 100644
--- a/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
+++ b/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Calendar renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       tabindex="0"
     >
diff --git a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
index efa024824e..0d68104daf 100644
--- a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="flex flex-wrap -mr -mb flex-row"
     >
@@ -248,8 +277,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <label
       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:"
@@ -290,8 +348,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
     >
@@ -317,8 +404,37 @@ exports[`Checkbox renders default checkbox without label 1`] = `
 exports[`Checkbox renders disabled state 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
     >
@@ -347,8 +463,37 @@ exports[`Checkbox renders disabled state 1`] = `
 exports[`Checkbox renders indeterminate state 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
     >
@@ -374,8 +519,37 @@ exports[`Checkbox renders indeterminate state 1`] = `
 exports[`Checkbox renders with (optional) 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
     >
@@ -401,8 +575,37 @@ exports[`Checkbox renders with (optional) 1`] = `
 exports[`Checkbox renders with asterisk 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
     >
@@ -428,8 +631,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <label
       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:"
diff --git a/packages/base/Container/src/Container/__snapshots__/test.tsx.snap b/packages/base/Container/src/Container/__snapshots__/test.tsx.snap
index 78688a5a93..da319e0410 100644
--- a/packages/base/Container/src/Container/__snapshots__/test.tsx.snap
+++ b/packages/base/Container/src/Container/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Container renders default container 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class=""
     >
diff --git a/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
index 81fcc00ebb..926ddc74e6 100644
--- a/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
+++ b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`DatePicker renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..dbbeaa690d 100644
--- a/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`MonthSelect renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..850eaf63d8 100644
--- a/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
@@ -170,8 +170,37 @@ exports[`YearSelect render in descending order 1`] = `
 exports[`YearSelect renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
     >
diff --git a/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap b/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
index 82160c55ac..9da8a95935 100644
--- a/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
+++ b/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Dropdown renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="flex items-center"
     >
@@ -34,8 +63,37 @@ exports[`Dropdown should render menu 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <div
         class="flex items-center"
       >
@@ -163,8 +221,37 @@ exports[`Dropdown should render menu with focus 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <div
         class=""
       >
diff --git a/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap b/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
index 400863464a..b58ec11b7e 100644
--- a/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
+++ b/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Dropzone renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..3f4b55eeca 100644
--- a/packages/base/EnvironmentBanner/src/EnvironmentBanner/__snapshots__/test.tsx.snap
+++ b/packages/base/EnvironmentBanner/src/EnvironmentBanner/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`EnvironmentBanner development render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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/FileInput/src/FileInput/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
index 559e3e3f12..2b1facd00a 100644
--- a/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`FileInput can change label 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="max-w"
     >
@@ -34,8 +63,37 @@ exports[`FileInput can change label 1`] = `
 exports[`FileInput renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..47bb385a7d 100644
--- a/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`FileList renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..2759a0aac0 100644
--- a/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`FileListItem renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..c00cc2bd24 100644
--- a/packages/base/FileInput/src/ProgressBar/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/ProgressBar/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`ProgressBar renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="items-center flex"
     >
@@ -24,8 +53,37 @@ exports[`ProgressBar renders 1`] = `
 exports[`ProgressBar renders with percentage 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..970cd62a12 100644
--- a/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`FormError renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..fa8822ff90 100644
--- a/packages/base/Form/src/FormField/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormField/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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-"
       data-field-has-error="false"
@@ -19,8 +48,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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-"
       data-field-has-error="false"
@@ -35,8 +93,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="text-[1rem] [&+&]:mt-4"
       data-field-has-error="false"
diff --git a/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap b/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap
index fdb68445fd..a2da8170bc 100644
--- a/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`FormHint renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..ab04633706 100644
--- a/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`FormWarning renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <form
       class=""
     >
diff --git a/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap b/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap
index 716000739d..ae664229b2 100644
--- a/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap
+++ b/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`FormLabel disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <form
       class=""
     >
@@ -30,8 +59,37 @@ exports[`FormLabel disabled 1`] = `
 exports[`FormLabel renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <form
       class=""
     >
@@ -57,8 +115,37 @@ exports[`FormLabel renders 1`] = `
 exports[`FormLabel required with (optional) 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <form
       class=""
     >
@@ -85,8 +172,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <form
       class=""
     >
@@ -116,8 +232,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..e0ba3510a3 100644
--- a/packages/base/Grid/src/Grid/__snapshots__/test.tsx.snap
+++ b/packages/base/Grid/src/Grid/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Grid renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..d692f977e6 100644
--- a/packages/base/Grid/src/GridItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Grid/src/GridItem/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`GridItem renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..d175a183c3 100644
--- a/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Helpbox renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..6a83658cb6 100644
--- a/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
+++ b/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Input renders icon in the beginning 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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,8 +65,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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,8 +127,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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,8 +177,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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,8 +253,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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,8 +304,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..0e64a8142e 100644
--- a/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
+++ b/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Link renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <a
       class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
     >
@@ -17,8 +46,37 @@ exports[`Link renders 1`] = `
 exports[`Link when disabled renders disabled link 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <a
       aria-disabled="true"
       class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-gray underline cursor-pointer"
@@ -34,8 +92,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <a
       class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline cursor-pointer"
       download="filename"
@@ -52,8 +139,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div>
       <a
         class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
diff --git a/packages/base/List/src/List/__snapshots__/test.tsx.snap b/packages/base/List/src/List/__snapshots__/test.tsx.snap
index 425bfc921c..406b1aec5e 100644
--- a/packages/base/List/src/List/__snapshots__/test.tsx.snap
+++ b/packages/base/List/src/List/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`List renders ordered list 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <ol
       class="text-[0.875rem] text-black mt-1 list-decimal pl-4"
       data-testid="ordered-list"
@@ -82,8 +111,37 @@ exports[`List renders ordered list 1`] = `
 exports[`List renders unordered list 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <ul
       class="text-[0.875rem] text-black mt-1 list-disc pl-4"
       data-testid="unordered-list"
diff --git a/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap b/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
index a1967b4f44..be44d8c64a 100644
--- a/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
+++ b/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Menu renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <ul
       class="relative list-none outline-hidden shadow-1 py-2 px-0 m-0 rounded-sm"
       role="menu"
diff --git a/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap b/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
index ccb144a479..386eb08bf6 100644
--- a/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`MenuItem renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
@@ -36,8 +65,37 @@ exports[`MenuItem renders 1`] = `
 exports[`MenuItem renders checkmarked 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
@@ -82,11 +140,69 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <li
         aria-disabled="false"
         class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
@@ -119,8 +235,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
@@ -152,8 +297,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
@@ -198,8 +372,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
diff --git a/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap b/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
index a56bc781ad..da0429bc69 100644
--- a/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
+++ b/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
@@ -5,9 +5,38 @@ exports[`Modal renders 1`] = `
   id="modal-root"
 >
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     data-base-ui-inert=""
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       data-base-ui-focus-guard=""
       data-type="outside"
@@ -159,8 +188,39 @@ exports[`Modal useModal opens and closes modal 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style
+        data-base-ui-inert=""
+      >
+        html {
+  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;
+}
+
+      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -268,8 +328,37 @@ exports[`Modal useModal opens and closes modal 2`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -293,8 +382,39 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style
+        data-base-ui-inert=""
+      >
+        html {
+  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;
+}
+
+      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
diff --git a/packages/base/Note/src/Note/__snapshots__/test.tsx.snap b/packages/base/Note/src/Note/__snapshots__/test.tsx.snap
index 18d994a639..2d6fcf9027 100644
--- a/packages/base/Note/src/Note/__snapshots__/test.tsx.snap
+++ b/packages/base/Note/src/Note/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Note renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..22ae7452fe 100644
--- a/packages/base/Notification/src/Notification/__snapshots__/test.tsx.snap
+++ b/packages/base/Notification/src/Notification/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Notification renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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]"
       role="alert"
diff --git a/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap b/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap
index 5c1428fc58..42e8cd93d8 100644
--- a/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap
+++ b/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`NotificationActions renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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]"
       role="alert"
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..a5849a3aac 100644
--- a/packages/base/Notification/src/use-notification/__snapshots__/test.tsx.snap
+++ b/packages/base/Notification/src/use-notification/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`useNotifications error notification render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -48,7 +77,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,8 +151,37 @@ exports[`useNotifications error notification render 1`] = `
 exports[`useNotifications info notification render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -167,7 +225,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,8 +302,37 @@ exports[`useNotifications info notification render 1`] = `
 exports[`useNotifications success notification render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -289,7 +376,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..c73c215cb4 100644
--- a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
+++ b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
@@ -2,8 +2,37 @@
 
 exports[`NumberInput renders 1`] = `
 <div
-  class="Picasso-root"
+  class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
 >
+  <style>
+    html {
+  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;
+}
+
+  </style>
   <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/__snapshots__/test.tsx.snap b/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
index 35fa4072c3..83561121ff 100644
--- a/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Page renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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/PageAutocomplete/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
index 7003e12a45..a8969e4ed4 100644
--- a/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`PageAutocomplete renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
diff --git a/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
index 3cf9f7b9c1..fb683e7379 100644
--- a/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`PageSidebar renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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,8 +56,37 @@ exports[`PageSidebar renders 1`] = `
 exports[`PageSidebar with menu 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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,8 +114,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
index 77e3d08bd3..3c4105093e 100644
--- a/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`PageTopBar renders hamburger on small screen 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
@@ -75,8 +104,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
@@ -147,8 +205,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
@@ -198,8 +285,37 @@ exports[`PageTopBar renders with custom logo 1`] = `
 exports[`PageTopBar renders with link 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
diff --git a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
index 090086396e..9830652955 100644
--- a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`PageTopBarMenu renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..703ba76b89 100644
--- a/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`SidebarItem collapsible menu is expanded when one of the children is selected 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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,8 +212,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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,8 +421,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
@@ -453,8 +540,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
@@ -503,8 +619,37 @@ exports[`SidebarItem is selected 1`] = `
 exports[`SidebarItem renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
@@ -544,8 +689,37 @@ exports[`SidebarItem renders 1`] = `
 exports[`SidebarItem use accordion for collapsible with menu 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       data-component-type="accordion"
@@ -710,8 +884,37 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
 exports[`SidebarItem with icon 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
diff --git a/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap b/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
index 9970acd6b5..e2f964b508 100644
--- a/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`SidebarLogo renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..c92b9b3468 100644
--- a/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`SidebarMenu renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       role="menu"
@@ -17,8 +46,37 @@ exports[`SidebarMenu renders 1`] = `
 exports[`SidebarMenu with bottom 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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]"
       role="menu"
diff --git a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
index 9fb236fc4f..857a2a10b3 100644
--- a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
+++ b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Pagination renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       class="items-center inline-flex"
     >
@@ -167,8 +196,37 @@ exports[`Pagination renders 1`] = `
 exports[`Pagination renders compact without totalPages 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       class="items-center inline-flex"
     >
@@ -208,8 +266,37 @@ exports[`Pagination renders compact without totalPages 1`] = `
 exports[`Pagination renders disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       class="items-center inline-flex"
     >
@@ -390,24 +477,113 @@ exports[`Pagination renders disabled 1`] = `
 exports[`Pagination renders nothing for 0 pages 1`] = `
 <div>
   <div
-    class="Picasso-root"
-  />
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+  >
+    <style>
+      html {
+  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;
+}
+
+    </style>
+  </div>
 </div>
 `;
 
 exports[`Pagination renders nothing for 1 page 1`] = `
 <div>
   <div
-    class="Picasso-root"
-  />
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+  >
+    <style>
+      html {
+  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;
+}
+
+    </style>
+  </div>
 </div>
 `;
 
 exports[`Pagination renders with next disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..84490ed8fa 100644
--- a/packages/base/Paper/src/Paper/__snapshots__/test.tsx.snap
+++ b/packages/base/Paper/src/Paper/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Paper renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..8e94a00bf4 100644
--- a/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap
+++ b/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap
@@ -4,8 +4,39 @@ exports[`PromptModal renders 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style
+        data-base-ui-inert=""
+      >
+        html {
+  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;
+}
+
+      </style>
       <div
         data-base-ui-portal=""
         id=":r2:"
@@ -141,8 +172,37 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -166,8 +226,39 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 2`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style
+        data-base-ui-inert=""
+      >
+        html {
+  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;
+}
+
+      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -320,8 +411,37 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 3`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -345,8 +465,37 @@ exports[`PromptModal showPrompt with input returns result on Submit action 1`] =
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
diff --git a/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap b/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap
index 043630e194..75686f1e66 100644
--- a/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap
+++ b/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Quote renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..256987709c 100644
--- a/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap
+++ b/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Radio Radio.Group renders radio in a grid group 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="flex flex-col flex-wrap"
       role="radiogroup"
@@ -219,8 +248,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="flex flex-col flex-wrap"
       role="radiogroup"
@@ -303,8 +361,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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,8 +415,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..0dbf50b02b 100644
--- a/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
+++ b/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`RatingIcon renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span>
       <svg
         class="fill-current inline-block h-[1em] align-[-.125em] transition-all duration-350 ease-out hover:scale-150 text-yellow"
diff --git a/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap b/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
index ccca13b3dc..43993e10f0 100644
--- a/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
+++ b/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Rating.Stars renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..303190aa61 100644
--- a/packages/base/Section/src/Section/__snapshots__/test.tsx.snap
+++ b/packages/base/Section/src/Section/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Section renders collapsible initially collapsed 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="pt-8"
     >
@@ -49,8 +78,37 @@ exports[`Section renders collapsible initially collapsed 1`] = `
 exports[`Section renders collapsible initially expanded 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="pt-8"
     >
@@ -115,8 +173,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="pt-8 [&>:last-child:not(:first-child)]:mt-6"
     >
@@ -171,8 +258,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..2de1ed43bf 100644
--- a/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`NativeSelect renders native select 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
     >
@@ -59,8 +88,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..942da2dd75 100644
--- a/packages/base/Select/src/NativeSelectOptions/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelectOptions/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`NativeSelectOptions renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..3a0eacdddc 100644
--- a/packages/base/Select/src/NativeSelectPlaceholder/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelectPlaceholder/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`NativeSelectPlaceholder renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <option
       value=""
     >
@@ -17,8 +46,37 @@ exports[`NativeSelectPlaceholder renders 1`] = `
 exports[`NativeSelectPlaceholder renders disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <option
       disabled=""
       value=""
@@ -32,8 +90,37 @@ exports[`NativeSelectPlaceholder renders disabled 1`] = `
 exports[`NativeSelectPlaceholder renders with emptySelectValue 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..a4e7a9ae65 100644
--- a/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`NonNativeSelect renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..9dd2e6b28a 100644
--- a/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`NonNativeSelectLimitFooter renders footer when overflow 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="true"
       class="bg-transparent hover:bg-blue focus:bg-blue min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none py-3 px-4 border border-solid border-gray text-[0.6875rem] text-gray opacity-100 pointer-events"
@@ -36,7 +65,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+  >
+    <style>
+      html {
+  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;
+}
+
+    </style>
+  </div>
 </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..93905802fd 100644
--- a/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`NonNativeSelectLoader renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="menu"
diff --git a/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
index de9271be28..8b5b980120 100644
--- a/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`NonNativeSelectOption renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       aria-selected="false"
@@ -47,8 +76,37 @@ exports[`NonNativeSelectOption renders 1`] = `
 exports[`NonNativeSelectOption sets attributes correctly 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <li
       aria-disabled="false"
       aria-selected="true"
diff --git a/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
index 8e0239c3e6..fb9b7809df 100644
--- a/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`NonNativeSelectOptions renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="listbox"
@@ -86,8 +115,37 @@ exports[`NonNativeSelectOptions renders 1`] = `
 exports[`NonNativeSelectOptions renders no option 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       data-testid="no-options"
@@ -128,8 +186,37 @@ exports[`NonNativeSelectOptions renders no option 1`] = `
 exports[`NonNativeSelectOptions renders option groups 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="listbox"
diff --git a/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap b/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
index ed68f6b5ab..4352e9bbe8 100644
--- a/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`ScrollMenu renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <ul
       class="relative list-none outline-hidden shadow-1 py-2 px-0 m-0 rounded-sm bg-white"
       role="menu"
diff --git a/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap b/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap
index bd244f5192..9f22e631e0 100644
--- a/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`SelectCaret renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       style="min-width: 16px; min-height: 16px;"
@@ -21,8 +50,37 @@ exports[`SelectCaret renders 1`] = `
 exports[`SelectCaret renders disabled 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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]"
       style="min-width: 16px; min-height: 16px;"
diff --git a/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap b/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
index 9ab98f160c..d16f5af317 100644
--- a/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
+++ b/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`ShowMore renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -56,8 +85,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -109,8 +167,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -162,8 +249,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -188,8 +304,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -229,8 +374,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -282,8 +456,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
diff --git a/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap b/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap
index 353b0a0154..655415cab8 100644
--- a/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap
+++ b/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Stepper render with all steps completed 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="flex flex-row items-center gap-1"
     >
@@ -131,8 +160,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="flex flex-row items-center gap-1"
     >
@@ -239,8 +297,37 @@ exports[`Stepper render with hidden labels 1`] = `
 exports[`Stepper renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="flex flex-row items-center gap-1"
     >
@@ -347,8 +434,37 @@ exports[`Stepper renders 1`] = `
 exports[`Stepper when steps are custom nodes renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..e1c8c02664 100644
--- a/packages/base/Step/src/StepperVertical/__snapshots__/test.tsx.snap
+++ b/packages/base/Step/src/StepperVertical/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`StepperVertical render with all steps completed 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="flex flex-col"
     >
@@ -113,8 +142,37 @@ exports[`StepperVertical render with all steps completed 1`] = `
 exports[`StepperVertical renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="flex flex-col"
     >
diff --git a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
index 4c2ace4f1a..e923de58ca 100644
--- a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
+++ b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
@@ -49,8 +49,37 @@ exports[`Switch behaves correctly when interacting 1`] = `
 exports[`Switch renders default Switch without label 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <span
       class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
     >
diff --git a/packages/base/Table/src/Table/__snapshots__/test.tsx.snap b/packages/base/Table/src/Table/__snapshots__/test.tsx.snap
index f33e1b4986..969b663790 100644
--- a/packages/base/Table/src/Table/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/Table/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Table renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..1dbc538daa 100644
--- a/packages/base/Table/src/TableBody/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableBody/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TableCell renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..d5c39dbca9 100644
--- a/packages/base/Table/src/TableCell/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableCell/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TableCell renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <table
       class="w-full border-collapse border-spacing"
     >
@@ -31,8 +60,37 @@ exports[`TableCell renders 1`] = `
 exports[`TableCell renders compact 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <table
       class="w-full border-collapse border-spacing"
     >
@@ -59,8 +117,37 @@ exports[`TableCell renders compact 1`] = `
 exports[`TableCell renders narrow 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..5d56b8247e 100644
--- a/packages/base/Table/src/TableFooter/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableFooter/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TableFooter renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..e1d9e96377 100644
--- a/packages/base/Table/src/TableHead/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableHead/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TableHead renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..90d626cfb2 100644
--- a/packages/base/Table/src/TableRow/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableRow/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TableRow renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..700654fabc 100644
--- a/packages/base/Table/src/TableSectionHead/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableSectionHead/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TableSectionHead renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..6bf40c9dfe 100644
--- a/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <table>
       <tbody>
         <tr>
@@ -53,8 +82,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <table>
       <tbody>
         <tr>
diff --git a/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap b/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
index b6c6013f8e..787dd325cf 100644
--- a/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
+++ b/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Tab Tab disabled tab 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
@@ -50,8 +79,37 @@ exports[`Tab Tab disabled tab 1`] = `
 exports[`Tab Tab renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
@@ -96,8 +154,37 @@ exports[`Tab Tab renders 1`] = `
 exports[`Tab Tab tab with icon 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
diff --git a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
index 712754a571..c9247137b4 100644
--- a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
+++ b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Tabs renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
@@ -71,8 +100,37 @@ exports[`Tabs renders 1`] = `
 exports[`Tabs renders in full width 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative min-h flex overflow-hidden"
       data-activation-direction="none"
@@ -139,8 +197,37 @@ exports[`Tabs renders in full width 1`] = `
 exports[`Tabs renders in vertical orientation 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative min-h flex overflow-hidden w-[200px] m-0 flex-col overflow-x"
       data-activation-direction="none"
@@ -208,8 +295,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
@@ -293,8 +409,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
diff --git a/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap b/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap
index fb85d08c21..839d36da60 100644
--- a/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Indicator renders in red color 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="w-2 h-2 rounded-[50%] bg-red"
       role="img"
diff --git a/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap b/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
index 1076c2d886..16d79b52b4 100644
--- a/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Tag dismissable label should render dismissable label 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       data-testid="tag"
@@ -43,8 +72,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       data-testid="tag"
@@ -66,8 +124,37 @@ exports[`Tag renders \`blue\` variant 1`] = `
 exports[`Tag renders \`light-grey\` variant 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       data-testid="tag"
@@ -89,8 +176,37 @@ exports[`Tag renders \`light-grey\` variant 1`] = `
 exports[`Tag renders with adornment 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       data-testid="tag"
@@ -126,8 +242,37 @@ exports[`Tag renders with adornment 1`] = `
 exports[`Tag renders with connection and icon 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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"
       data-testid="tag"
diff --git a/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap b/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
index f1c80cd22c..ddd24fc980 100644
--- a/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TagGroup should render label group with 4 labels 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..0e98fcce1f 100644
--- a/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TagRectangular renders rectangular Tag 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..a5b1769cf6 100644
--- a/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
+++ b/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TagSelector disabled render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -71,8 +100,37 @@ exports[`TagSelector preselected value 1`] = `
 <body>
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -137,8 +195,37 @@ exports[`TagSelector preselected value 1`] = `
 exports[`TagSelector renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
diff --git a/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap b/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
index cbd78dc3fe..cdf85f481d 100644
--- a/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
+++ b/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TagSelectorInput renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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/Timeline/src/Timeline/__snapshots__/test.tsx.snap b/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap
index 2c1a37d554..41b4f8816a 100644
--- a/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap
+++ b/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap
@@ -3,11 +3,69 @@
 exports[`Timeline renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <div
         class="table h-fit w-fit"
       >
@@ -104,11 +162,69 @@ exports[`Timeline renders 1`] = `
 exports[`Timeline renders with dates 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <div
         class="table h-fit w-fit"
       >
@@ -244,11 +360,69 @@ exports[`Timeline renders with dates 1`] = `
 exports[`Timeline renders with icons 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <div
         class="table h-fit w-fit"
       >
@@ -345,11 +519,69 @@ exports[`Timeline renders with icons 1`] = `
 exports[`Timeline renders without a connector 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <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..c067a937c1 100644
--- a/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
+++ b/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`TimePicker renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..66e8142f95 100644
--- a/packages/base/Tooltip/src/Tooltip/__snapshots__/test.tsx.snap
+++ b/packages/base/Tooltip/src/Tooltip/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Tooltip when closed does not render the content 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       data-testid="tooltip-trigger"
       id="base-ui-:r1:"
@@ -19,8 +48,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <button
       aria-describedby="tooltip-id"
       data-testid="tooltip-trigger"
diff --git a/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap b/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap
index c6f61d0739..81252f74bc 100644
--- a/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap
+++ b/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Typography inherit size render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <p
       class="m-0 font-inherit leading-[1.5em] text-graphite font-regular"
     >
@@ -17,8 +46,37 @@ exports[`Typography inherit size render 1`] = `
 exports[`Typography renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <p
       class="m-0 font-inherit leading-[1.5em] text-graphite font-regular"
     >
@@ -31,8 +89,37 @@ exports[`Typography renders 1`] = `
 exports[`Typography variant heading small render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..3c39378678 100644
--- a/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap
+++ b/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`UserBadge auto center alignment 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="items-center flex text-[1rem]"
     >
@@ -48,8 +77,37 @@ exports[`UserBadge auto center alignment 1`] = `
 exports[`UserBadge custom name 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="items-start flex text-[1rem]"
     >
@@ -96,8 +154,37 @@ exports[`UserBadge custom name 1`] = `
 exports[`UserBadge custom title 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="items-start flex text-[1rem]"
     >
@@ -149,8 +236,37 @@ exports[`UserBadge custom title 1`] = `
 exports[`UserBadge invert render 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="items-start flex text-[1rem]"
     >
@@ -199,8 +315,37 @@ exports[`UserBadge invert render 1`] = `
 exports[`UserBadge manual center alignment 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="items-center flex text-[1rem]"
     >
@@ -249,8 +394,37 @@ exports[`UserBadge manual center alignment 1`] = `
 exports[`UserBadge override auto center alignment 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="items-start flex text-[1rem]"
     >
@@ -294,8 +468,37 @@ exports[`UserBadge override auto center alignment 1`] = `
 exports[`UserBadge renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="items-start flex text-[1rem]"
     >
@@ -344,8 +547,37 @@ exports[`UserBadge renders 1`] = `
 exports[`UserBadge small size 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="items-start flex text-[1rem]"
     >
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..6baba2d34a 100644
--- a/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap
+++ b/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap
@@ -8,8 +8,39 @@ exports[`Modal useModal opens and closes modal 1`] = `
   />
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style
+        data-base-ui-inert=""
+      >
+        html {
+  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;
+}
+
+      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -120,8 +151,37 @@ exports[`Modal useModal opens and closes modal 2`] = `
   />
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style>
+        html {
+  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;
+}
+
+      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -149,8 +209,39 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
   />
   <div>
     <div
-      class="Picasso-root"
+      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
+      <style
+        data-base-ui-inert=""
+      >
+        html {
+  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;
+}
+
+      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
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..77e1852b12 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,8 +3,37 @@
 exports[`Rotate180 render with transformation 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="transition-transform duration-150 ease-in rotate-180"
     >
@@ -17,8 +46,37 @@ exports[`Rotate180 render with transformation 1`] = `
 exports[`Rotate180 render without transformation 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class="transition-transform duration-150 ease-in"
     >
diff --git a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
index 00572ddbd6..042272099c 100644
--- a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class=""
     >
@@ -121,8 +150,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class=""
     >
@@ -180,8 +238,37 @@ 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 [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class=""
     >
diff --git a/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap
index c2a2e60230..ac4f07bd4a 100644
--- a/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`FieldLabel renders default field label 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <label
       class="block leading-[1em] mb-[0.5em] text-graphite"
       for="name"
diff --git a/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
index 38fa1973ab..0eef6bf7bf 100644
--- a/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Form renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class=""
     >
@@ -54,8 +83,37 @@ exports[`Form renders 1`] = `
 exports[`Form renders with an error 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..7f0b9e362b 100644
--- a/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`FormRadio renders 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class=""
     >
@@ -114,8 +143,37 @@ exports[`FormRadio renders 1`] = `
 exports[`FormRadio required with asterisk 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <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..d2e9e1fce0 100644
--- a/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap
@@ -3,8 +3,37 @@
 exports[`Rating Thumbs renders default Stars 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class=""
     >
@@ -158,8 +187,37 @@ exports[`Rating Thumbs renders default Stars 1`] = `
 exports[`Rating Thumbs renders default Thumbs 1`] = `
 <div>
   <div
-    class="Picasso-root"
+    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
+    <style>
+      html {
+  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;
+}
+
+    </style>
     <div
       class=""
     >
diff --git a/packages/picasso-provider/src/Favicon/test.tsx b/packages/picasso-provider/src/Favicon/test.tsx
index 5d89bcccb9..824b403fdc 100644
--- a/packages/picasso-provider/src/Favicon/test.tsx
+++ b/packages/picasso-provider/src/Favicon/test.tsx
@@ -41,7 +41,11 @@ describe('Favicon', () => {
   it('renders nothing in a test environment', async () => {
     const { container } = render(<Favicon environment='test' />)
     const picassoRoot = container.firstChild as Element
+    // CssBaseline always injects a global <style>; Favicon itself should add nothing.
+    const renderedChildren = Array.from(picassoRoot.children).filter(
+      child => child.tagName !== 'STYLE'
+    )
 
-    expect(picassoRoot.children).toHaveLength(0)
+    expect(renderedChildren).toHaveLength(0)
   })
 })
diff --git a/packages/picasso-provider/src/Picasso/config/breakpoints.ts b/packages/picasso-provider/src/Picasso/config/breakpoints.ts
index 4c96217393..2d1f6595fd 100644
--- a/packages/picasso-provider/src/Picasso/config/breakpoints.ts
+++ b/packages/picasso-provider/src/Picasso/config/breakpoints.ts
@@ -143,9 +143,18 @@ const useMediaQueryMatch = (query: string): boolean => {
     const onChange = () => setMatches(mediaQueryList.matches)
 
     onChange()
-    mediaQueryList.addEventListener('change', onChange)
 
-    return () => mediaQueryList.removeEventListener('change', 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

From 80b48348d4cf2467556b3667262dd044265900b0 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Mon, 13 Jul 2026 12:56:56 +0200
Subject: [PATCH 11/17] Ship global reset as picasso-tailwind base entry; drop
 CssBaseline and reset prop

---
 .changeset/decommission-mui-provider.md       |   2 +
 .changeset/picasso-tailwind-base-entry.md     |   7 +
 .storybook/styles.css                         |   1 +
 bin/verify-tailwind-base.mjs                  | 147 ++++++++
 cypress/assets/tailwind.css                   |   1 +
 .../references/design-patterns-addendum.md    |   9 +-
 ...-4318-PF-2023-provider-migration-report.md |  21 +-
 .../src/Accordion/__snapshots__/test.tsx.snap |  87 -----
 .../__snapshots__/test.tsx.snap               |  29 --
 .../__snapshots__/test.tsx.snap               |  29 --
 .../AccountSelect/__snapshots__/test.tsx.snap |  29 --
 .../src/Alert/__snapshots__/test.tsx.snap     |  29 --
 .../AlertInline/__snapshots__/test.tsx.snap   |  29 --
 .../src/Amount/__snapshots__/test.tsx.snap    |  29 --
 .../__snapshots__/test.tsx.snap               |  29 --
 .../Autocomplete/__snapshots__/test.tsx.snap  |  29 --
 .../AvatarUpload/__snapshots__/test.tsx.snap  |  29 --
 .../src/Badge/__snapshots__/test.tsx.snap     |  58 ----
 .../src/Button/__snapshots__/test.tsx.snap    |  58 ----
 .../ButtonBase/__snapshots__/test.tsx.snap    | 319 ------------------
 .../__snapshots__/test.tsx.snap               |  29 --
 .../ButtonGroup/__snapshots__/test.tsx.snap   |  29 --
 .../ButtonRadio/__snapshots__/test.tsx.snap   |  29 --
 .../ButtonSplit/__snapshots__/test.tsx.snap   |  29 --
 .../src/Calendar/__snapshots__/test.tsx.snap  |  29 --
 .../src/Checkbox/__snapshots__/test.tsx.snap  | 232 -------------
 .../src/Container/__snapshots__/test.tsx.snap |  29 --
 .../DatePicker/__snapshots__/test.tsx.snap    |  29 --
 .../MonthSelect/__snapshots__/test.tsx.snap   |  29 --
 .../YearSelect/__snapshots__/test.tsx.snap    |  29 --
 .../src/Dropdown/__snapshots__/test.tsx.snap  |  87 -----
 .../src/Dropzone/__snapshots__/test.tsx.snap  |  29 --
 .../__snapshots__/test.tsx.snap               |  29 --
 .../src/FileInput/__snapshots__/test.tsx.snap |  58 ----
 .../src/FileList/__snapshots__/test.tsx.snap  |  29 --
 .../FileListItem/__snapshots__/test.tsx.snap  |  29 --
 .../ProgressBar/__snapshots__/test.tsx.snap   |  58 ----
 .../src/FormError/__snapshots__/test.tsx.snap |  29 --
 .../src/FormField/__snapshots__/test.tsx.snap |  87 -----
 .../src/FormHint/__snapshots__/test.tsx.snap  |  29 --
 .../FormWarning/__snapshots__/test.tsx.snap   |  29 --
 .../src/FormLabel/__snapshots__/test.tsx.snap | 145 --------
 .../Grid/src/Grid/__snapshots__/test.tsx.snap |  29 --
 .../src/GridItem/__snapshots__/test.tsx.snap  |  29 --
 .../src/Helpbox/__snapshots__/test.tsx.snap   |  29 --
 .../src/Input/__snapshots__/test.tsx.snap     | 174 ----------
 .../Link/src/Link/__snapshots__/test.tsx.snap | 116 -------
 .../List/src/List/__snapshots__/test.tsx.snap |  58 ----
 .../Menu/src/Menu/__snapshots__/test.tsx.snap |  29 --
 .../src/MenuItem/__snapshots__/test.tsx.snap  | 203 -----------
 .../src/Modal/__snapshots__/test.tsx.snap     | 120 -------
 .../Note/src/Note/__snapshots__/test.tsx.snap |  29 --
 .../Notification/__snapshots__/test.tsx.snap  |  29 --
 .../__snapshots__/test.tsx.snap               |  29 --
 .../__snapshots__/test.tsx.snap               |  87 -----
 .../NumberInput/__snapshots__/test.tsx.snap   |  29 --
 .../Page/src/Page/__snapshots__/test.tsx.snap |  29 --
 .../__snapshots__/test.tsx.snap               |  29 --
 .../PageSidebar/__snapshots__/test.tsx.snap   |  87 -----
 .../PageTopBar/__snapshots__/test.tsx.snap    | 116 -------
 .../__snapshots__/test.tsx.snap               |  29 --
 .../SidebarItem/__snapshots__/test.tsx.snap   | 203 -----------
 .../SidebarLogo/__snapshots__/test.tsx.snap   |  29 --
 .../SidebarMenu/__snapshots__/test.tsx.snap   |  58 ----
 .../Pagination/__snapshots__/test.tsx.snap    | 180 +---------
 .../src/Paper/__snapshots__/test.tsx.snap     |  29 --
 .../PromptModal/__snapshots__/test.tsx.snap   | 149 --------
 .../src/Quote/__snapshots__/test.tsx.snap     |  29 --
 .../src/Radio/__snapshots__/test.tsx.snap     | 116 -------
 .../RatingIcon/__snapshots__/test.tsx.snap    |  29 --
 .../RatingStars/__snapshots__/test.tsx.snap   |  29 --
 .../src/Section/__snapshots__/test.tsx.snap   | 116 -------
 .../NativeSelect/__snapshots__/test.tsx.snap  |  58 ----
 .../__snapshots__/test.tsx.snap               |  29 --
 .../__snapshots__/test.tsx.snap               |  87 -----
 .../__snapshots__/test.tsx.snap               |  29 --
 .../__snapshots__/test.tsx.snap               |  61 +---
 .../__snapshots__/test.tsx.snap               |  29 --
 .../__snapshots__/test.tsx.snap               |  58 ----
 .../__snapshots__/test.tsx.snap               |  87 -----
 .../ScrollMenu/__snapshots__/test.tsx.snap    |  29 --
 .../SelectCaret/__snapshots__/test.tsx.snap   |  58 ----
 .../src/ShowMore/__snapshots__/test.tsx.snap  | 203 -----------
 .../src/Stepper/__snapshots__/test.tsx.snap   | 116 -------
 .../__snapshots__/test.tsx.snap               |  58 ----
 .../src/Switch/__snapshots__/test.tsx.snap    |  29 --
 .../src/Table/__snapshots__/test.tsx.snap     |  29 --
 .../src/TableBody/__snapshots__/test.tsx.snap |  29 --
 .../src/TableCell/__snapshots__/test.tsx.snap |  87 -----
 .../TableFooter/__snapshots__/test.tsx.snap   |  29 --
 .../src/TableHead/__snapshots__/test.tsx.snap |  29 --
 .../src/TableRow/__snapshots__/test.tsx.snap  |  29 --
 .../__snapshots__/test.tsx.snap               |  29 --
 .../__snapshots__/test.tsx.snap               |  58 ----
 .../Tabs/src/Tab/__snapshots__/test.tsx.snap  |  87 -----
 .../Tabs/src/Tabs/__snapshots__/test.tsx.snap | 145 --------
 .../src/Indicator/__snapshots__/test.tsx.snap |  29 --
 .../Tag/src/Tag/__snapshots__/test.tsx.snap   | 145 --------
 .../src/TagGroup/__snapshots__/test.tsx.snap  |  29 --
 .../__snapshots__/test.tsx.snap               |  29 --
 .../TagSelector/__snapshots__/test.tsx.snap   |  87 -----
 .../__snapshots__/test.tsx.snap               |  29 --
 .../base/Test-Utils/src/test-utils/styles.css |   4 +-
 .../src/Timeline/__snapshots__/test.tsx.snap  | 232 -------------
 .../TimePicker/__snapshots__/test.tsx.snap    |  29 --
 .../src/Tooltip/__snapshots__/test.tsx.snap   |  58 ----
 .../Typography/__snapshots__/test.tsx.snap    |  87 -----
 .../src/UserBadge/__snapshots__/test.tsx.snap | 232 -------------
 .../utils/Modal/__snapshots__/test.tsx.snap   |  91 -----
 .../Rotate180/__snapshots__/test.tsx.snap     |  58 ----
 .../src/Checkbox/__snapshots__/test.tsx.snap  |  87 -----
 .../FieldLabel/__snapshots__/test.tsx.snap    |  29 --
 .../src/Form/__snapshots__/test.tsx.snap      |  58 ----
 .../src/Radio/__snapshots__/test.tsx.snap     |  58 ----
 .../src/Rating/__snapshots__/test.tsx.snap    |  58 ----
 .../src/CssBaseline/CssBaseline.tsx           |  28 --
 .../picasso-provider/src/CssBaseline/index.ts |   1 -
 .../src/CssBaseline/styles.ts                 |  44 ---
 .../picasso-provider/src/Favicon/test.tsx     |   6 +-
 .../picasso-provider/src/Picasso/Picasso.tsx  |   5 -
 .../src/Picasso/PicassoLight/PicassoLight.tsx |   5 +-
 .../picasso-provider/src/Picasso/styles.tsx   |   3 +-
 packages/picasso-tailwind/README.md           |  21 ++
 packages/picasso-tailwind/package.json        |   8 +-
 packages/picasso-tailwind/src/base.css        |  49 +++
 packages/picasso/README.md                    |  13 +-
 126 files changed, 271 insertions(+), 7172 deletions(-)
 create mode 100644 .changeset/picasso-tailwind-base-entry.md
 create mode 100644 bin/verify-tailwind-base.mjs
 delete mode 100644 packages/picasso-provider/src/CssBaseline/CssBaseline.tsx
 delete mode 100644 packages/picasso-provider/src/CssBaseline/index.ts
 delete mode 100644 packages/picasso-provider/src/CssBaseline/styles.ts
 create mode 100644 packages/picasso-tailwind/src/base.css

diff --git a/.changeset/decommission-mui-provider.md b/.changeset/decommission-mui-provider.md
index 6aeee9c146..de33cf364d 100644
--- a/.changeset/decommission-mui-provider.md
+++ b/.changeset/decommission-mui-provider.md
@@ -17,6 +17,8 @@ Breaking changes (consumer action required):
 - 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).
 
 `@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`).
 
diff --git a/.changeset/picasso-tailwind-base-entry.md b/.changeset/picasso-tailwind-base-entry.md
new file mode 100644
index 0000000000..0dad278c6f
--- /dev/null
+++ b/.changeset/picasso-tailwind-base-entry.md
@@ -0,0 +1,7 @@
+---
+'@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.
diff --git a/.storybook/styles.css b/.storybook/styles.css
index 11e7ce9e76..a55a82a8db 100644
--- a/.storybook/styles.css
+++ b/.storybook/styles.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/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/docs/migration/references/design-patterns-addendum.md b/docs/migration/references/design-patterns-addendum.md
index 423f4b8999..968f30c319 100644
--- a/docs/migration/references/design-patterns-addendum.md
+++ b/docs/migration/references/design-patterns-addendum.md
@@ -54,12 +54,11 @@ 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 CssBaseline runtime `<style>` · **TEMPORARY**
+### Styling doctrine (Tailwind-only) vs global CSS reset · **RESOLVED (PF-2221)**
 
-- **Tension scope**: 1 file (`packages/picasso-provider/src/CssBaseline/`). The styling doctrine is Tailwind-only (`AGENTS.md §Styling` "No CSS/JSS"; rule 5 "style hooks are `className`/`style` only"). A global CSS reset is the one place raw global CSS legitimately lives.
-- **What we do**: `CssBaseline` injects the pre-migration global reset (the former JSS `@global` block, verbatim — including the `box-sizing: initial` content-box cascade) as a **runtime `<style>` element** instead of MUI v4 JSS. Kept **unlayered** (deliberately NOT wrapped in `@layer base`) to preserve the pre-migration cascade precedence, and still gated by the provider's `reset` prop so `reset={false}` fully opts out. Output is byte-identical (0 Happo diff) and consumers need no CSS-entrypoint changes. Removes all MUI/JSS from the file.
-- **Why not `@layer base` now**: Picasso ships no CSS bundle (consumers run Tailwind via the `@toptal/picasso-tailwind` preset), so a build-time `@layer base` reset would only reach consumers who update their Tailwind entry, would demote the reset below unlayered consumer CSS, and would lose the `reset` opt-out. The React 19 hoistable `<style href precedence>` form is also not typeable yet (`@types/react` is v17 in the workspace).
-- **End-state — promoted post-migration**: move to a true Tailwind `@layer base` preflight (and the React 19 hoistable `<style>` form) once consumer Tailwind entrypoints are coordinated. Tracked in **PF-2221**; consumer coordination via PF-2210. Do NOT "correct" the runtime `<style>` to `@layer base` in a review sweep before that coordination lands.
+- 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
 
diff --git a/docs/modernization/PI-4318-PF-2023-provider-migration-report.md b/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
index 4c97bc5c59..7bc74cab1f 100644
--- a/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
+++ b/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
@@ -11,7 +11,7 @@
 
 ## 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 (CSS reset, fonts, favicon, notifications, RootContext, breakpoints) rather than a theme runtime; styling is Tailwind end-to-end.
+`@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.
 
@@ -34,7 +34,7 @@ Delivered as a sequence of logical, individually-green commits on `migrate-picas
 
 | Area | Before (MUI v4 / JSS) | After (Tailwind / plain) |
 |---|---|---|
-| **CssBaseline** | `makeStyles` `@global` reset injected at runtime | Same 12 reset rules injected via a runtime `<style>` (unlayered, `reset`-prop-gated). No MUI/JSS. |
+| **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')` | Runtime `<style>` built from `screens()` at render (keeps the `disableMobileBreakpoints()` dynamic). |
@@ -55,12 +55,12 @@ Each decision below was made against the migration's overriding rule — **libra
 - 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 → runtime `<style>` (not `@layer base`)
-- **Decision:** keep the reset as a runtime `<style>`, **unlayered**, still gated by the `reset` prop; do **not** move it to a Tailwind `@layer base` preflight yet.
-- **Why:** Picasso ships **no CSS bundle** — consumers run Tailwind via the `@toptal/picasso-tailwind` **preset**. A build-time `@layer base` reset would (a) only reach consumers who update their Tailwind entrypoint, (b) demote the reset *below* unlayered consumer CSS (cascade regression), and (c) lose the `reset={false}` opt-out. Unlayered runtime injection is byte-identical and needs zero consumer change.
-- **Not Helmet** (the house head-injection tool) because `PicassoLight` and `<Picasso disableHelmet>` have **no `HelmetProvider`** — a Helmet-based reset would break there. The reset must not be Helmet-gated.
-- **Not the React-19 hoistable `<style href precedence>`** yet — `@types/react` is v17 in the workspace, so it wouldn't typecheck.
-- *Implication / follow-up:* true `@layer base` preflight + hoistable `<style>` end-state tracked in **[PF-2221]**. Recorded as a migration-period exception in `docs/migration/references/design-patterns-addendum.md §2` so a review sweep won't "correct" it.
+### 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).
 
 ### 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.
@@ -99,8 +99,9 @@ Each decision below was made against the migration's overriding rule — **libra
 | `@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). The `reset` prop now injects an unlayered runtime `<style>` (byte-identical output).
+**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`.
 
@@ -110,7 +111,7 @@ Each decision below was made against the migration's overriding rule — **libra
 
 | Ticket / item | What | Why deferred here |
 |---|---|---|
-| **[PF-2221]** | Promote the CssBaseline reset to a true Tailwind `@layer base` preflight + React-19 hoistable `<style>` | Needs consumer Tailwind-entry coordination + React 19 types; behavior/cascade-sensitive |
+| **[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]** | Retire the responsive-styles engine; converge Dropdown `offset` on Container's static-Tailwind pattern; **fix the inverted mobile-first cascade** | Zero adoption; convergence is a reviewable design change, not a library swap |
 | **[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* |
diff --git a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
index a66c69000a..bb6adadbf4 100644
--- a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
+++ b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Accordion renders collapsed by default 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       data-component-type="accordion"
@@ -134,35 +105,6 @@ exports[`Accordion renders custom icon when passed 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       data-component-type="accordion"
@@ -257,35 +199,6 @@ exports[`Accordion renders disabled 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       data-component-type="accordion"
diff --git a/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap b/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap
index 0cbbf0638e..109c58a73b 100644
--- a/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap
+++ b/packages/base/Accordion/src/AccordionDetails/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`AccordionDetails renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 25a322109d..f1916b174d 100644
--- a/packages/base/Accordion/src/AccordionSummary/__snapshots__/test.tsx.snap
+++ b/packages/base/Accordion/src/AccordionSummary/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`AccordionSummary renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       data-component-type="accordion-summary"
diff --git a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
index 9a745570bc..7ada2713f0 100644
--- a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`AccountSelect renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <ul
       class="relative list-none outline-hidden shadow-1 m-0 rounded-sm p-0"
       role="menu"
diff --git a/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap b/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
index 1b11b53ee9..bc0d8eac6b 100644
--- a/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
+++ b/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Alert renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="bg-yellow border border-solid border-yellow gap-4 p-4 justify-between rounded-md flex"
       role="alert"
diff --git a/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap b/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap
index e36b972cae..208722a153 100644
--- a/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap
+++ b/packages/base/Alert/src/AlertInline/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Alert renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 830a1fec96..ef64f7a8da 100644
--- a/packages/base/Amount/src/Amount/__snapshots__/test.tsx.snap
+++ b/packages/base/Amount/src/Amount/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Amount renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 c57bf2327b..6c764e8fb7 100644
--- a/packages/base/ApplicationUpdateNotification/src/ApplicationUpdateNotification/__snapshots__/test.tsx.snap
+++ b/packages/base/ApplicationUpdateNotification/src/ApplicationUpdateNotification/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`ApplicationUpdateNotification renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       role="alert"
diff --git a/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap b/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
index 61c5969b66..11f0cc0ee8 100644
--- a/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
+++ b/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
@@ -229,35 +229,6 @@ exports[`Autocomplete static behavior renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
diff --git a/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap b/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
index 16bde0f4f1..0084ead89d 100644
--- a/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
+++ b/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`AvatarUpload renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative flex justify-center items-center text-blue outline-hidden cursor-pointer w-[5rem] h-[5rem]"
       role="presentation"
diff --git a/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap b/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
index 906f36597e..44a2d9276d 100644
--- a/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
+++ b/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Badge renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       class="inline-flex shrink-0 content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite static"
     >
@@ -52,35 +23,6 @@ exports[`Badge renders in red variant 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 c0568427a4..218471e810 100644
--- a/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Button disabled button as link renders disabled version 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <a
       aria-disabled="true"
       class="font-inherit focus:outline-hidden 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-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
@@ -59,35 +30,6 @@ exports[`Button disabled button renders disabled version 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       aria-disabled="true"
       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-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
diff --git a/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
index e790eab45f..45fc5cb5e2 100644
--- a/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       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"
@@ -58,35 +29,6 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       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"
@@ -111,35 +53,6 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <a
       aria-disabled="false"
       class="font-inherit focus:outline-hidden hover:underline text-blue visited:text-purple no-underline 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"
@@ -164,35 +77,6 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <a
       aria-disabled="true"
       class="font-inherit focus:outline-hidden hover:underline text-blue visited:text-purple no-underline 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-default pointer-events"
@@ -218,35 +102,6 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <a
       aria-disabled="false"
       class="font-inherit focus:outline-hidden hover:underline text-blue visited:text-purple no-underline 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"
@@ -271,35 +126,6 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "a" renders B
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <a
       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"
@@ -324,35 +150,6 @@ exports[`ButtonBase when "disabled" prop is false renders Button and does not tr
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       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"
@@ -376,35 +173,6 @@ exports[`ButtonBase when "disabled" prop is true renders Button and does not tri
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       aria-disabled="true"
       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-default pointer-events"
@@ -430,35 +198,6 @@ exports[`ButtonBase when "loading" prop is true renders Button with loading stat
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       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"
@@ -509,35 +248,6 @@ exports[`ButtonBase when "role" prop is passed renders Button with a custom role
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       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"
@@ -561,35 +271,6 @@ exports[`ButtonBase when "titleCase" prop is true renders Button with transforme
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       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"
diff --git a/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
index 215cd37266..85230497ad 100644
--- a/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`ButtonCheckbox renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
diff --git a/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
index 51fa0998c0..ba803e7251 100644
--- a/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`ButtonGroup render 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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-["
       data-component-type="button"
diff --git a/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
index 019f09cbeb..d0e59d980e 100644
--- a/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`ButtonRadio renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
diff --git a/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
index c1f3aa4ab9..8db4e32e22 100644
--- a/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
@@ -17,35 +17,6 @@ exports[`ButtonSplit default render 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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-["
       data-component-type="button"
diff --git a/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap b/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
index ffc68d57d9..a6730575b8 100644
--- a/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
+++ b/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Calendar renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       tabindex="0"
     >
diff --git a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
index 0d68104daf..9b32947f59 100644
--- a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex flex-wrap -mr -mb flex-row"
     >
@@ -279,35 +250,6 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <label
       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:"
@@ -350,35 +292,6 @@ exports[`Checkbox renders default checkbox without label 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
     >
@@ -406,35 +319,6 @@ exports[`Checkbox renders disabled state 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
     >
@@ -465,35 +349,6 @@ exports[`Checkbox renders indeterminate state 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
     >
@@ -521,35 +376,6 @@ exports[`Checkbox renders with (optional) 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
     >
@@ -577,35 +403,6 @@ exports[`Checkbox renders with asterisk 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       class="relative inline-flex self-start align-middle [&_input]:appearance-none [&_input]:translate-x [&_input]:translate-y"
     >
@@ -633,35 +430,6 @@ exports[`Checkbox should render default checkbox with label 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <label
       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:"
diff --git a/packages/base/Container/src/Container/__snapshots__/test.tsx.snap b/packages/base/Container/src/Container/__snapshots__/test.tsx.snap
index da319e0410..364396ba95 100644
--- a/packages/base/Container/src/Container/__snapshots__/test.tsx.snap
+++ b/packages/base/Container/src/Container/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Container renders default container 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class=""
     >
diff --git a/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
index 926ddc74e6..2e10bea1cd 100644
--- a/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
+++ b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`DatePicker renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 dbbeaa690d..8723bace36 100644
--- a/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`MonthSelect renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 850eaf63d8..26ca0a5804 100644
--- a/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
@@ -172,35 +172,6 @@ exports[`YearSelect renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
     >
diff --git a/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap b/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
index 9da8a95935..db3af574cf 100644
--- a/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
+++ b/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Dropdown renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex items-center"
     >
@@ -65,35 +36,6 @@ exports[`Dropdown should render menu 1`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <div
         class="flex items-center"
       >
@@ -223,35 +165,6 @@ exports[`Dropdown should render menu with focus 1`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <div
         class=""
       >
diff --git a/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap b/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
index b58ec11b7e..c605bd17b2 100644
--- a/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
+++ b/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Dropzone renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 3f4b55eeca..6f60cdde7e 100644
--- a/packages/base/EnvironmentBanner/src/EnvironmentBanner/__snapshots__/test.tsx.snap
+++ b/packages/base/EnvironmentBanner/src/EnvironmentBanner/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`EnvironmentBanner development render 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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/FileInput/src/FileInput/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
index 2b1facd00a..17a1686b2a 100644
--- a/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`FileInput can change label 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="max-w"
     >
@@ -65,35 +36,6 @@ exports[`FileInput renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 47bb385a7d..e1509acb26 100644
--- a/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`FileList renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 2759a0aac0..2fae850870 100644
--- a/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`FileListItem renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 c00cc2bd24..b30c02d464 100644
--- a/packages/base/FileInput/src/ProgressBar/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/ProgressBar/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`ProgressBar renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="items-center flex"
     >
@@ -55,35 +26,6 @@ exports[`ProgressBar renders with percentage 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 970cd62a12..a233c23b02 100644
--- a/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`FormError renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 fa8822ff90..d4c35dd476 100644
--- a/packages/base/Form/src/FormField/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormField/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`FormField when layout is horizontal renders FormField with appropriate
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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-"
       data-field-has-error="false"
@@ -50,35 +21,6 @@ exports[`FormField when layout is horizontal when labelWidth is 4 renders FormFi
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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-"
       data-field-has-error="false"
@@ -95,35 +37,6 @@ exports[`FormField when layout is vertical renders FormField with appropriate fo
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="text-[1rem] [&+&]:mt-4"
       data-field-has-error="false"
diff --git a/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap b/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap
index a2da8170bc..615411f1c1 100644
--- a/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormHint/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`FormHint renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 ab04633706..ac0ecabb29 100644
--- a/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`FormWarning renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <form
       class=""
     >
diff --git a/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap b/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap
index ae664229b2..ebc9a20e94 100644
--- a/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap
+++ b/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`FormLabel disabled 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <form
       class=""
     >
@@ -61,35 +32,6 @@ exports[`FormLabel renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <form
       class=""
     >
@@ -117,35 +59,6 @@ exports[`FormLabel required with (optional) 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <form
       class=""
     >
@@ -174,35 +87,6 @@ exports[`FormLabel required with (optional) and with \`labelEndAdornment\` 1`] =
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <form
       class=""
     >
@@ -234,35 +118,6 @@ exports[`FormLabel required with asterisk 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 e0ba3510a3..3531d70218 100644
--- a/packages/base/Grid/src/Grid/__snapshots__/test.tsx.snap
+++ b/packages/base/Grid/src/Grid/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Grid renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 d692f977e6..6904eaf686 100644
--- a/packages/base/Grid/src/GridItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Grid/src/GridItem/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`GridItem renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 d175a183c3..8b425759b3 100644
--- a/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Helpbox renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 6a83658cb6..107d21089c 100644
--- a/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
+++ b/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Input renders icon in the beginning 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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]"
     >
@@ -67,35 +38,6 @@ exports[`Input renders icon in the end 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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]"
     >
@@ -129,35 +71,6 @@ exports[`Input should show manual resize handler 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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]"
     >
@@ -179,35 +92,6 @@ exports[`Input should show reset button 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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]"
     >
@@ -255,35 +139,6 @@ exports[`Input shows counter for multiline input 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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]"
     >
@@ -306,35 +161,6 @@ exports[`Input shows counter for regular input 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 0e64a8142e..35852e067b 100644
--- a/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
+++ b/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Link renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <a
       class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
     >
@@ -48,35 +19,6 @@ exports[`Link when disabled renders disabled link 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <a
       aria-disabled="true"
       class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-gray underline cursor-pointer"
@@ -94,35 +36,6 @@ exports[`Link when native attributes are provided renders native attributes 1`]
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <a
       class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline cursor-pointer"
       download="filename"
@@ -141,35 +54,6 @@ exports[`Link when using react-router Link renders a Link from react-router 1`]
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div>
       <a
         class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
diff --git a/packages/base/List/src/List/__snapshots__/test.tsx.snap b/packages/base/List/src/List/__snapshots__/test.tsx.snap
index 406b1aec5e..158ca43352 100644
--- a/packages/base/List/src/List/__snapshots__/test.tsx.snap
+++ b/packages/base/List/src/List/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`List renders ordered list 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <ol
       class="text-[0.875rem] text-black mt-1 list-decimal pl-4"
       data-testid="ordered-list"
@@ -113,35 +84,6 @@ exports[`List renders unordered list 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <ul
       class="text-[0.875rem] text-black mt-1 list-disc pl-4"
       data-testid="unordered-list"
diff --git a/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap b/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
index be44d8c64a..b807478135 100644
--- a/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
+++ b/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Menu renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <ul
       class="relative list-none outline-hidden shadow-1 py-2 px-0 m-0 rounded-sm"
       role="menu"
diff --git a/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap b/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
index 386eb08bf6..194a46f460 100644
--- a/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`MenuItem renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
@@ -67,35 +38,6 @@ exports[`MenuItem renders checkmarked 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
@@ -142,67 +84,9 @@ exports[`MenuItem renders in title case with global prop 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <li
         aria-disabled="false"
         class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
@@ -237,35 +121,6 @@ exports[`MenuItem renders in title case with local prop 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
@@ -299,35 +154,6 @@ exports[`MenuItem renders with a sub menu arrow 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
@@ -374,35 +200,6 @@ exports[`MenuItem renders with description 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       class="text-black bg-transparent hover:bg-blue focus:bg-blue px-4 py-[0.375rem] min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4"
diff --git a/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap b/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
index da0429bc69..f53dcd8e29 100644
--- a/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
+++ b/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
@@ -8,35 +8,6 @@ exports[`Modal renders 1`] = `
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     data-base-ui-inert=""
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       data-base-ui-focus-guard=""
       data-type="outside"
@@ -190,37 +161,6 @@ exports[`Modal useModal opens and closes modal 1`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style
-        data-base-ui-inert=""
-      >
-        html {
-  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;
-}
-
-      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -330,35 +270,6 @@ exports[`Modal useModal opens and closes modal 2`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -384,37 +295,6 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style
-        data-base-ui-inert=""
-      >
-        html {
-  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;
-}
-
-      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
diff --git a/packages/base/Note/src/Note/__snapshots__/test.tsx.snap b/packages/base/Note/src/Note/__snapshots__/test.tsx.snap
index 2d6fcf9027..8b3f218581 100644
--- a/packages/base/Note/src/Note/__snapshots__/test.tsx.snap
+++ b/packages/base/Note/src/Note/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Note renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 22ae7452fe..c452af9cd7 100644
--- a/packages/base/Notification/src/Notification/__snapshots__/test.tsx.snap
+++ b/packages/base/Notification/src/Notification/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Notification renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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]"
       role="alert"
diff --git a/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap b/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap
index 42e8cd93d8..ff97f1d82a 100644
--- a/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap
+++ b/packages/base/Notification/src/NotificationActions/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`NotificationActions renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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]"
       role="alert"
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 a5849a3aac..c2781f635a 100644
--- a/packages/base/Notification/src/use-notification/__snapshots__/test.tsx.snap
+++ b/packages/base/Notification/src/use-notification/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`useNotifications error notification render 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -153,35 +124,6 @@ exports[`useNotifications info notification render 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -304,35 +246,6 @@ exports[`useNotifications success notification render 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
diff --git a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
index c73c215cb4..beefb8b50b 100644
--- a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
+++ b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
@@ -4,35 +4,6 @@ exports[`NumberInput renders 1`] = `
 <div
   class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
 >
-  <style>
-    html {
-  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;
-}
-
-  </style>
   <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/__snapshots__/test.tsx.snap b/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
index 83561121ff..f26d326970 100644
--- a/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Page renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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/PageAutocomplete/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
index a8969e4ed4..ad711e46be 100644
--- a/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`PageAutocomplete renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
diff --git a/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
index fb683e7379..f239ea173b 100644
--- a/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`PageSidebar renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
     >
@@ -58,35 +29,6 @@ exports[`PageSidebar with menu 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
     >
@@ -116,35 +58,6 @@ exports[`PageSidebar with one normal and one bottom menu 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
index 3c4105093e..53ed750afe 100644
--- a/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`PageTopBar renders hamburger on small screen 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
@@ -106,35 +77,6 @@ exports[`PageTopBar renders normally on default screen size 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
@@ -207,35 +149,6 @@ exports[`PageTopBar renders with custom logo 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
@@ -287,35 +200,6 @@ exports[`PageTopBar renders with link 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative h-[var(--header min-h-[var(--header"
     >
diff --git a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
index 9830652955..2259848d59 100644
--- a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`PageTopBarMenu renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 703ba76b89..530f03c9d0 100644
--- a/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
     >
@@ -214,35 +185,6 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
     >
@@ -423,35 +365,6 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
@@ -542,35 +455,6 @@ exports[`SidebarItem is selected 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
@@ -621,35 +505,6 @@ exports[`SidebarItem renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
@@ -691,35 +546,6 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       data-component-type="accordion"
@@ -886,35 +712,6 @@ exports[`SidebarItem with icon 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
diff --git a/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap b/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
index e2f964b508..cbbfaa5b3b 100644
--- a/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`SidebarLogo renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 c92b9b3468..c2760f7c39 100644
--- a/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`SidebarMenu renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       role="menu"
@@ -48,35 +19,6 @@ exports[`SidebarMenu with bottom 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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]"
       role="menu"
diff --git a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
index 857a2a10b3..ef2157eb2b 100644
--- a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
+++ b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Pagination renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       class="items-center inline-flex"
     >
@@ -198,35 +169,6 @@ exports[`Pagination renders compact without totalPages 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       class="items-center inline-flex"
     >
@@ -268,35 +210,6 @@ exports[`Pagination renders disabled 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       class="items-center inline-flex"
     >
@@ -478,37 +391,7 @@ exports[`Pagination renders nothing for 0 pages 1`] = `
 <div>
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
-  >
-    <style>
-      html {
-  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;
-}
-
-    </style>
-  </div>
+  />
 </div>
 `;
 
@@ -516,37 +399,7 @@ exports[`Pagination renders nothing for 1 page 1`] = `
 <div>
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
-  >
-    <style>
-      html {
-  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;
-}
-
-    </style>
-  </div>
+  />
 </div>
 `;
 
@@ -555,35 +408,6 @@ exports[`Pagination renders with next disabled 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 84490ed8fa..fae97d0b07 100644
--- a/packages/base/Paper/src/Paper/__snapshots__/test.tsx.snap
+++ b/packages/base/Paper/src/Paper/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Paper renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 8e94a00bf4..ac50f85f9c 100644
--- a/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap
+++ b/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap
@@ -6,37 +6,6 @@ exports[`PromptModal renders 1`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style
-        data-base-ui-inert=""
-      >
-        html {
-  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;
-}
-
-      </style>
       <div
         data-base-ui-portal=""
         id=":r2:"
@@ -174,35 +143,6 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 1`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -228,37 +168,6 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 2`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style
-        data-base-ui-inert=""
-      >
-        html {
-  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;
-}
-
-      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -413,35 +322,6 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 3`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -467,35 +347,6 @@ exports[`PromptModal showPrompt with input returns result on Submit action 1`] =
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
diff --git a/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap b/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap
index 75686f1e66..d876d4046e 100644
--- a/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap
+++ b/packages/base/Quote/src/Quote/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Quote renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 256987709c..881632f12a 100644
--- a/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap
+++ b/packages/base/Radio/src/Radio/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Radio Radio.Group renders radio in a grid group 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex flex-col flex-wrap"
       role="radiogroup"
@@ -250,35 +221,6 @@ exports[`Radio Radio.Group renders radio in group 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex flex-col flex-wrap"
       role="radiogroup"
@@ -363,35 +305,6 @@ exports[`Radio disabled radio button renders disabled version 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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]"
     >
@@ -417,35 +330,6 @@ exports[`Radio radio button renders default radio button 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 0dbf50b02b..af9d15af31 100644
--- a/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
+++ b/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`RatingIcon renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span>
       <svg
         class="fill-current inline-block h-[1em] align-[-.125em] transition-all duration-350 ease-out hover:scale-150 text-yellow"
diff --git a/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap b/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
index 43993e10f0..4b2d226edc 100644
--- a/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
+++ b/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Rating.Stars renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 303190aa61..bdb52c999f 100644
--- a/packages/base/Section/src/Section/__snapshots__/test.tsx.snap
+++ b/packages/base/Section/src/Section/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Section renders collapsible initially collapsed 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="pt-8"
     >
@@ -80,35 +51,6 @@ exports[`Section renders collapsible initially expanded 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="pt-8"
     >
@@ -175,35 +117,6 @@ exports[`Section renders with title, subtitle, actions and content 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="pt-8 [&>:last-child:not(:first-child)]:mt-6"
     >
@@ -260,35 +173,6 @@ exports[`Section renders without header 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 2de1ed43bf..bd0dd78faf 100644
--- a/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`NativeSelect renders native select 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative inline-flex text-[1rem] cursor-pointer w-full"
     >
@@ -90,35 +61,6 @@ exports[`NativeSelect renders native select with the empty option enabled when e
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 942da2dd75..3db177293d 100644
--- a/packages/base/Select/src/NativeSelectOptions/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelectOptions/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`NativeSelectOptions renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 3a0eacdddc..20cfb605b5 100644
--- a/packages/base/Select/src/NativeSelectPlaceholder/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelectPlaceholder/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`NativeSelectPlaceholder renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <option
       value=""
     >
@@ -48,35 +19,6 @@ exports[`NativeSelectPlaceholder renders disabled 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <option
       disabled=""
       value=""
@@ -92,35 +34,6 @@ exports[`NativeSelectPlaceholder renders with emptySelectValue 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 a4e7a9ae65..58c2a8b8dc 100644
--- a/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`NonNativeSelect renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 9dd2e6b28a..ef391bf626 100644
--- a/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`NonNativeSelectLimitFooter renders footer when overflow 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="true"
       class="bg-transparent hover:bg-blue focus:bg-blue min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none py-3 px-4 border border-solid border-gray text-[0.6875rem] text-gray opacity-100 pointer-events"
@@ -66,36 +37,6 @@ exports[`NonNativeSelectLimitFooter renders null when no overflow 1`] = `
 <div>
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
-  >
-    <style>
-      html {
-  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;
-}
-
-    </style>
-  </div>
+  />
 </div>
 `;
diff --git a/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
index 93905802fd..b694b846ef 100644
--- a/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`NonNativeSelectLoader renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="menu"
diff --git a/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
index 8b5b980120..8277eaf69c 100644
--- a/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`NonNativeSelectOption renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       aria-selected="false"
@@ -78,35 +49,6 @@ exports[`NonNativeSelectOption sets attributes correctly 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <li
       aria-disabled="false"
       aria-selected="true"
diff --git a/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
index fb9b7809df..024e651f2a 100644
--- a/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`NonNativeSelectOptions renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="listbox"
@@ -117,35 +88,6 @@ exports[`NonNativeSelectOptions renders no option 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       data-testid="no-options"
@@ -188,35 +130,6 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <ul
       class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="listbox"
diff --git a/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap b/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
index 4352e9bbe8..5594d15677 100644
--- a/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`ScrollMenu renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <ul
       class="relative list-none outline-hidden shadow-1 py-2 px-0 m-0 rounded-sm bg-white"
       role="menu"
diff --git a/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap b/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap
index 9f22e631e0..3332f61afd 100644
--- a/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/SelectCaret/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`SelectCaret renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       style="min-width: 16px; min-height: 16px;"
@@ -52,35 +23,6 @@ exports[`SelectCaret renders disabled 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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]"
       style="min-width: 16px; min-height: 16px;"
diff --git a/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap b/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
index d16f5af317..c7777ed7af 100644
--- a/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
+++ b/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`ShowMore renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -87,35 +58,6 @@ exports[`ShowMore when custom lessText text is specified should render with cust
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -169,35 +111,6 @@ exports[`ShowMore when custom showMore text is specified should render with cust
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -251,35 +164,6 @@ exports[`ShowMore when disableToggle prop is true should render version without
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -306,35 +190,6 @@ exports[`ShowMore when initialExpanded prop is true should render expanded versi
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -376,35 +231,6 @@ exports[`ShowMore when initialExpanded prop is true when show less link is click
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
@@ -458,35 +284,6 @@ exports[`ShowMore when show more link is clicked should render expanded version
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <p
       class="m-0 text-md text-graphite font-regular"
     >
diff --git a/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap b/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap
index 655415cab8..861899811c 100644
--- a/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap
+++ b/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Stepper render with all steps completed 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex flex-row items-center gap-1"
     >
@@ -162,35 +133,6 @@ exports[`Stepper render with hidden labels 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex flex-row items-center gap-1"
     >
@@ -299,35 +241,6 @@ exports[`Stepper renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex flex-row items-center gap-1"
     >
@@ -436,35 +349,6 @@ exports[`Stepper when steps are custom nodes renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 e1c8c02664..3a30f9302f 100644
--- a/packages/base/Step/src/StepperVertical/__snapshots__/test.tsx.snap
+++ b/packages/base/Step/src/StepperVertical/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`StepperVertical render with all steps completed 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex flex-col"
     >
@@ -144,35 +115,6 @@ exports[`StepperVertical renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex flex-col"
     >
diff --git a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
index e923de58ca..958590b928 100644
--- a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
+++ b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
@@ -51,35 +51,6 @@ exports[`Switch renders default Switch without label 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <span
       class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
     >
diff --git a/packages/base/Table/src/Table/__snapshots__/test.tsx.snap b/packages/base/Table/src/Table/__snapshots__/test.tsx.snap
index 969b663790..2be5eb1c62 100644
--- a/packages/base/Table/src/Table/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/Table/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Table renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 1dbc538daa..715da0a830 100644
--- a/packages/base/Table/src/TableBody/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableBody/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TableCell renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 d5c39dbca9..819d2e32fc 100644
--- a/packages/base/Table/src/TableCell/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableCell/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TableCell renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <table
       class="w-full border-collapse border-spacing"
     >
@@ -62,35 +33,6 @@ exports[`TableCell renders compact 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <table
       class="w-full border-collapse border-spacing"
     >
@@ -119,35 +61,6 @@ exports[`TableCell renders narrow 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 5d56b8247e..dba02f649e 100644
--- a/packages/base/Table/src/TableFooter/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableFooter/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TableFooter renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 e1d9e96377..358585edec 100644
--- a/packages/base/Table/src/TableHead/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableHead/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TableHead renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 90d626cfb2..2fa75c6456 100644
--- a/packages/base/Table/src/TableRow/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableRow/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TableRow renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 700654fabc..12adcb48b6 100644
--- a/packages/base/Table/src/TableSectionHead/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableSectionHead/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TableSectionHead renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 6bf40c9dfe..46f1358510 100644
--- a/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TableCell sort direction is asc renders with a sort button in the right
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <table>
       <tbody>
         <tr>
@@ -84,35 +55,6 @@ exports[`TableCell sort direction is desc renders with a sort button in the righ
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <table>
       <tbody>
         <tr>
diff --git a/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap b/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
index 787dd325cf..044bbd2779 100644
--- a/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
+++ b/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Tab Tab disabled tab 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
@@ -81,35 +52,6 @@ exports[`Tab Tab renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
@@ -156,35 +98,6 @@ exports[`Tab Tab tab with icon 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
diff --git a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
index c9247137b4..124800ab5e 100644
--- a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
+++ b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Tabs renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
@@ -102,35 +73,6 @@ exports[`Tabs renders in full width 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative min-h flex overflow-hidden"
       data-activation-direction="none"
@@ -199,35 +141,6 @@ exports[`Tabs renders in vertical orientation 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative min-h flex overflow-hidden w-[200px] m-0 flex-col overflow-x"
       data-activation-direction="none"
@@ -297,35 +210,6 @@ exports[`Tabs renders with a pre-selected option 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
@@ -411,35 +295,6 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="relative min-h flex overflow-hidden overflow-x"
       data-activation-direction="none"
diff --git a/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap b/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap
index 839d36da60..f95b8dbb59 100644
--- a/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/Indicator/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Indicator renders in red color 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="w-2 h-2 rounded-[50%] bg-red"
       role="img"
diff --git a/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap b/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
index 16d79b52b4..f5cb294c6f 100644
--- a/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Tag dismissable label should render dismissable label 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       data-testid="tag"
@@ -74,35 +45,6 @@ exports[`Tag renders \`blue\` variant 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       data-testid="tag"
@@ -126,35 +68,6 @@ exports[`Tag renders \`light-grey\` variant 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       data-testid="tag"
@@ -178,35 +91,6 @@ exports[`Tag renders with adornment 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       data-testid="tag"
@@ -244,35 +128,6 @@ exports[`Tag renders with connection and icon 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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"
       data-testid="tag"
diff --git a/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap b/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
index ddd24fc980..58384f5fd1 100644
--- a/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TagGroup should render label group with 4 labels 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 0e98fcce1f..98ec80fbe0 100644
--- a/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TagRectangular renders rectangular Tag 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 a5b1769cf6..70450e297c 100644
--- a/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
+++ b/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TagSelector disabled render 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -102,35 +73,6 @@ exports[`TagSelector preselected value 1`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -197,35 +139,6 @@ exports[`TagSelector renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
diff --git a/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap b/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
index cdf85f481d..6eea51c5c4 100644
--- a/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
+++ b/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TagSelectorInput renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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/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 41b4f8816a..7a070524e9 100644
--- a/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap
+++ b/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap
@@ -5,67 +5,9 @@ exports[`Timeline renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <div
         class="table h-fit w-fit"
       >
@@ -164,67 +106,9 @@ exports[`Timeline renders with dates 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <div
         class="table h-fit w-fit"
       >
@@ -362,67 +246,9 @@ exports[`Timeline renders with icons 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <div
         class="table h-fit w-fit"
       >
@@ -521,67 +347,9 @@ exports[`Timeline renders without a connector 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <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 c067a937c1..eb943d3650 100644
--- a/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
+++ b/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`TimePicker renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 66e8142f95..02d8e3b81a 100644
--- a/packages/base/Tooltip/src/Tooltip/__snapshots__/test.tsx.snap
+++ b/packages/base/Tooltip/src/Tooltip/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Tooltip when closed does not render the content 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       data-testid="tooltip-trigger"
       id="base-ui-:r1:"
@@ -50,35 +21,6 @@ exports[`Tooltip when portals are disabled renders the content within the parent
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <button
       aria-describedby="tooltip-id"
       data-testid="tooltip-trigger"
diff --git a/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap b/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap
index 81252f74bc..bc7ce09b33 100644
--- a/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap
+++ b/packages/base/Typography/src/Typography/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Typography inherit size render 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <p
       class="m-0 font-inherit leading-[1.5em] text-graphite font-regular"
     >
@@ -48,35 +19,6 @@ exports[`Typography renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <p
       class="m-0 font-inherit leading-[1.5em] text-graphite font-regular"
     >
@@ -91,35 +33,6 @@ exports[`Typography variant heading small render 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 3c39378678..ea64910f12 100644
--- a/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap
+++ b/packages/base/UserBadge/src/UserBadge/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`UserBadge auto center alignment 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="items-center flex text-[1rem]"
     >
@@ -79,35 +50,6 @@ exports[`UserBadge custom name 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="items-start flex text-[1rem]"
     >
@@ -156,35 +98,6 @@ exports[`UserBadge custom title 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="items-start flex text-[1rem]"
     >
@@ -238,35 +151,6 @@ exports[`UserBadge invert render 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="items-start flex text-[1rem]"
     >
@@ -317,35 +201,6 @@ exports[`UserBadge manual center alignment 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="items-center flex text-[1rem]"
     >
@@ -396,35 +251,6 @@ exports[`UserBadge override auto center alignment 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="items-start flex text-[1rem]"
     >
@@ -470,35 +296,6 @@ exports[`UserBadge renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="items-start flex text-[1rem]"
     >
@@ -549,35 +346,6 @@ exports[`UserBadge small size 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="items-start flex text-[1rem]"
     >
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 6baba2d34a..8a66f4297f 100644
--- a/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap
+++ b/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap
@@ -10,37 +10,6 @@ exports[`Modal useModal opens and closes modal 1`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style
-        data-base-ui-inert=""
-      >
-        html {
-  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;
-}
-
-      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -153,35 +122,6 @@ exports[`Modal useModal opens and closes modal 2`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style>
-        html {
-  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;
-}
-
-      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
@@ -211,37 +151,6 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
     <div
       class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
     >
-      <style
-        data-base-ui-inert=""
-      >
-        html {
-  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;
-}
-
-      </style>
       <button
         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-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
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 77e1852b12..e95b2f9eb7 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
@@ -5,35 +5,6 @@ exports[`Rotate180 render with transformation 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="transition-transform duration-150 ease-in rotate-180"
     >
@@ -48,35 +19,6 @@ exports[`Rotate180 render without transformation 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class="transition-transform duration-150 ease-in"
     >
diff --git a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
index 042272099c..d00c13cd2a 100644
--- a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class=""
     >
@@ -152,35 +123,6 @@ exports[`Form.Checkbox default render for single checkbox 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class=""
     >
@@ -240,35 +182,6 @@ exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class=""
     >
diff --git a/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap
index ac4f07bd4a..60981b9c2d 100644
--- a/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`FieldLabel renders default field label 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <label
       class="block leading-[1em] mb-[0.5em] text-graphite"
       for="name"
diff --git a/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
index 0eef6bf7bf..f9a29dda63 100644
--- a/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Form renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class=""
     >
@@ -85,35 +56,6 @@ exports[`Form renders with an error 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 7f0b9e362b..63882653a3 100644
--- a/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`FormRadio renders 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class=""
     >
@@ -145,35 +116,6 @@ exports[`FormRadio required with asterisk 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <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 d2e9e1fce0..08816c8165 100644
--- a/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Rating/__snapshots__/test.tsx.snap
@@ -5,35 +5,6 @@ exports[`Rating Thumbs renders default Stars 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class=""
     >
@@ -189,35 +160,6 @@ exports[`Rating Thumbs renders default Thumbs 1`] = `
   <div
     class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <style>
-      html {
-  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;
-}
-
-    </style>
     <div
       class=""
     >
diff --git a/packages/picasso-provider/src/CssBaseline/CssBaseline.tsx b/packages/picasso-provider/src/CssBaseline/CssBaseline.tsx
deleted file mode 100644
index cb586b6602..0000000000
--- a/packages/picasso-provider/src/CssBaseline/CssBaseline.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { ReactNode } from 'react'
-import React from 'react'
-
-import { CSS_BASELINE } from './styles'
-
-interface Props {
-  children?: ReactNode
-}
-
-/**
- * Injects Picasso's global CSS reset. Rendered by the provider only when its
- * `reset` prop is set (the default), so `reset={false}` still fully opts out.
- * The reset ships as a runtime `<style>` (no MUI/JSS), so it applies in the SSR
- * shell and requires no CSS-entrypoint changes from consumers.
- *
- * TODO: [PF-2221] once the `react < 19` peer cap is lifted and React 19 types
- * land, switch to a hoistable `<style href="picasso-css-baseline"
- * precedence="low">` for automatic <head> hoisting + de-duplication across
- * nested providers. Not possible yet (@types/react is v17 in this workspace).
- */
-const CssBaseline = ({ children }: Props) => (
-  <>
-    <style dangerouslySetInnerHTML={{ __html: CSS_BASELINE }} />
-    {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 ea3d9be540..0000000000
--- a/packages/picasso-provider/src/CssBaseline/styles.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Global CSS reset, migrated verbatim from the former MUI v4 JSS `@global`
- * stylesheet. CssBaseline injects this at runtime as an intentionally
- * UNLAYERED `<style>` element, which preserves the pre-migration cascade
- * precedence (an `@layer base` block would demote it below unlayered consumer
- * CSS) and keeps the reset gated by the provider's `reset` prop with zero
- * consumer CSS-entrypoint changes.
- *
- * Deliberate parity choices:
- * - `box-sizing: initial` is kept as-is (existing-violations carve-out — see
- *   docs/migration/references/design-patterns-addendum.md); un-migrated
- *   components still depend on the content-box cascade this establishes.
- * - `palette.common.white` is inlined as its computed value `#fff`.
- *
- * TODO: [PF-2221] promote to a true Tailwind `@layer base` preflight once
- * consumer Tailwind entrypoints are coordinated (provider migration brief).
- */
-export const CSS_BASELINE = `html {
-  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;
-}
-`
diff --git a/packages/picasso-provider/src/Favicon/test.tsx b/packages/picasso-provider/src/Favicon/test.tsx
index 824b403fdc..5d89bcccb9 100644
--- a/packages/picasso-provider/src/Favicon/test.tsx
+++ b/packages/picasso-provider/src/Favicon/test.tsx
@@ -41,11 +41,7 @@ describe('Favicon', () => {
   it('renders nothing in a test environment', async () => {
     const { container } = render(<Favicon environment='test' />)
     const picassoRoot = container.firstChild as Element
-    // CssBaseline always injects a global <style>; Favicon itself should add nothing.
-    const renderedChildren = Array.from(picassoRoot.children).filter(
-      child => child.tagName !== 'STYLE'
-    )
 
-    expect(renderedChildren).toHaveLength(0)
+    expect(picassoRoot.children).toHaveLength(0)
   })
 })
diff --git a/packages/picasso-provider/src/Picasso/Picasso.tsx b/packages/picasso-provider/src/Picasso/Picasso.tsx
index 0fcb189f6a..eea0e421b1 100644
--- a/packages/picasso-provider/src/Picasso/Picasso.tsx
+++ b/packages/picasso-provider/src/Picasso/Picasso.tsx
@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react'
 import React from 'react'
 
-import CssBaseline from '../CssBaseline'
 import FontsLoader from './FontsLoader'
 import HelmetProvider from './HelmetProvider'
 import NotificationsProvider from './NotificationsProvider'
@@ -22,8 +21,6 @@ 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 */
@@ -43,7 +40,6 @@ export interface PicassoProps extends TextLabelProps {
 const Picasso = ({
   loadFonts = true,
   loadFavicon = true,
-  reset = true,
   responsive = true,
   environment = 'development',
   children,
@@ -71,7 +67,6 @@ const Picasso = ({
       <HelmetProvider disabled={disableHelmet}>
         {fixViewport && <FixViewport />}
         {loadFonts && <FontsLoader />}
-        {reset && <CssBaseline />}
         {preventPageWidthChangeOnScrollbar && (
           <PreventPageWidthChangeOnScrollbar />
         )}
diff --git a/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx b/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
index 0fb955ec56..f0fe218581 100644
--- a/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
+++ b/packages/picasso-provider/src/Picasso/PicassoLight/PicassoLight.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 
-import CssBaseline from '../../CssBaseline'
 import { PicassoBreakpoints } from '../config'
 import type { PicassoProps } from '../Picasso'
 import PicassoRootNode from '../PicassoRootNode'
@@ -8,11 +7,10 @@ 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,
@@ -32,7 +30,6 @@ const PicassoLight = ({
       disableTransitions={disableTransitions}
       responsive={responsive}
     >
-      {reset && <CssBaseline />}
       {children}
     </PicassoGlobalStylesProvider>
   )
diff --git a/packages/picasso-provider/src/Picasso/styles.tsx b/packages/picasso-provider/src/Picasso/styles.tsx
index 08268685b9..556b4345d7 100644
--- a/packages/picasso-provider/src/Picasso/styles.tsx
+++ b/packages/picasso-provider/src/Picasso/styles.tsx
@@ -1,6 +1,7 @@
 // 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 — preserved even when the global reset is off (reset={false}).
+// 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 forced onto the whole subtree (was `& * { fontFamily }`;
 // `font-sans` resolves to the former `typography.fontFamily` proxima-nova stack).
 export const root = [
diff --git a/packages/picasso-tailwind/README.md b/packages/picasso-tailwind/README.md
index 4152a9a567..c2d6fada8a 100644
--- a/packages/picasso-tailwind/README.md
+++ b/packages/picasso-tailwind/README.md
@@ -14,3 +14,24 @@ 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.
+
+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..903a0504cc
--- /dev/null
+++ b/packages/picasso-tailwind/src/base.css
@@ -0,0 +1,49 @@
+/*
+ * 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 kept verbatim from the pre-migration reset
+       (existing-violations carve-out); Picasso components rely on the
+       border-box island established by PicassoRootNode */
+    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;
+  }
+}
diff --git a/packages/picasso/README.md b/packages/picasso/README.md
index 20c7b9b8c6..0b71bd4a4d 100644
--- a/packages/picasso/README.md
+++ b/packages/picasso/README.md
@@ -47,10 +47,21 @@ 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.
+
+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.
@@ -107,7 +118,7 @@ render () {
 }
 ```
 
-**_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
 

From 9c46f80d9fcba8423fd22452f2b1d0f476a615f6 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Mon, 13 Jul 2026 13:01:59 +0200
Subject: [PATCH 12/17] Flip page box model to border-box

---
 .changeset/decommission-mui-provider.md                   | 1 +
 .../PI-4318-PF-2023-provider-migration-report.md          | 4 +++-
 packages/picasso-tailwind/README.md                       | 3 ++-
 packages/picasso-tailwind/src/base.css                    | 8 ++++----
 packages/picasso/README.md                                | 3 +++
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/.changeset/decommission-mui-provider.md b/.changeset/decommission-mui-provider.md
index de33cf364d..5b8415fc71 100644
--- a/.changeset/decommission-mui-provider.md
+++ b/.changeset/decommission-mui-provider.md
@@ -19,6 +19,7 @@ Breaking changes (consumer action required):
 - 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).
+- **the page box model flips from content-box to border-box** (`html { box-sizing: border-box }` + universal inherit, via `@toptal/picasso-tailwind/base`). Non-Picasso markup sized with width+padding/border computes differently — audit app-level layout that relied on content-box. Picasso components are unaffected (they always rendered inside a border-box island).
 
 `@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`).
 
diff --git a/docs/modernization/PI-4318-PF-2023-provider-migration-report.md b/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
index 7bc74cab1f..f45d9baedc 100644
--- a/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
+++ b/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
@@ -61,6 +61,7 @@ Each decision below was made against the migration's overriding rule — **libra
 - **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 (second commit):** the base entry drops the historical `box-sizing: initial` carve-out — the page box model is now **border-box** end-to-end. The PicassoRootNode island stays as the guard for pages that skip the import. This is the PR's one deliberately-visual change; any Happo diffs on non-island story chrome are the intentional set for Vitor's 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.
@@ -100,6 +101,7 @@ Each decision below was made against the migration's overriding rule — **libra
 | `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) |
+| Page box model `content-box` → `border-box` | Audit app-level layout that relied on content-box sizing (width+padding/border) | Deliberate change (PF-2221); Picasso components unaffected — they always lived in a border-box island |
 
 **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.
 
@@ -130,7 +132,7 @@ These bit us during the migration and generalize to future MUI→Tailwind work a
 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.** PicassoRootNode's app-wide `[&_*]:font-sans` (`.root *`, specificity 0,1,0) fights a child's `[&_*]:font-[…]` (same 0,1,0) — order decides, fragile. A **type-selector** variant (`[&_code]:` = 0,1,1) wins naturally; a **universal** one (`[&_*]:`) needs `!important` or a specificity bump. JSS resolved this by injection order; Tailwind's layer order doesn't preserve component nesting.
-6. **The box-sizing "island."** Picasso sets the page to `content-box` (CssBaseline) and a `border-box` island on the Picasso root (descendants + `::before`/`::after` inherit). Tailwind **preflight is not active**, so this reset is the *only* box-sizing source — don't assume border-box. Preserved verbatim (existing-violations carve-out).
+6. **Box model.** The page is now `border-box` end-to-end (`@toptal/picasso-tailwind/base`: `html { box-sizing: border-box }` + universal inherit — PF-2221 dropped the historical `content-box` carve-out). The `PicassoRootNode` border-box island remains as the guard for pages that don't import the base entry. 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.
 
diff --git a/packages/picasso-tailwind/README.md b/packages/picasso-tailwind/README.md
index c2d6fada8a..a01b915448 100644
--- a/packages/picasso-tailwind/README.md
+++ b/packages/picasso-tailwind/README.md
@@ -31,7 +31,8 @@ import:
 
 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.
+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/src/base.css b/packages/picasso-tailwind/src/base.css
index 903a0504cc..46f1458461 100644
--- a/packages/picasso-tailwind/src/base.css
+++ b/packages/picasso-tailwind/src/base.css
@@ -14,10 +14,10 @@
  */
 @layer base {
   html {
-    /* content-box page model kept verbatim from the pre-migration reset
-       (existing-violations carve-out); Picasso components rely on the
-       border-box island established by PicassoRootNode */
-    box-sizing: initial;
+    /* border-box page model (PF-2221) — descendants inherit it through the
+       universal selector below; the PicassoRootNode island keeps guarding
+       pages that don't import this entry */
+    box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
diff --git a/packages/picasso/README.md b/packages/picasso/README.md
index 0b71bd4a4d..adcc70c1c5 100644
--- a/packages/picasso/README.md
+++ b/packages/picasso/README.md
@@ -59,6 +59,9 @@ 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).
 

From 03929394270f6bea85ba7cf66b26ea0e8bf24ea8 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Mon, 13 Jul 2026 14:00:40 +0200
Subject: [PATCH 13/17] Fix root font specificity; add styling guide, drop MUI
 templates and JSS docs

---
 .storybook/components/Editor/styles.ts        |   7 +-
 .../stories/contribution/story/index.tsx      |   8 +-
 @types/material-ui__utils/index.d.ts          |   3 -
 AGENTS.md                                     |   1 +
 CLAUDE.md                                     |  12 +-
 CONTRIBUTING.md                               |   3 +-
 _templates/component/new/component.ejs.t      |  30 +-
 _templates/component/new/styles.ejs.t         |  16 +-
 docs/contribution/css-naming.md               |  93 ---
 docs/contribution/jss-onboarding.md           | 220 -------
 docs/contribution/styling.md                  | 105 +++
 docs/migration/references/practices.md        |  49 +-
 ...-4318-PF-2023-provider-migration-report.md |   2 +-
 .../picasso-code-review-rules.md              | 604 ++++++++++--------
 .../src/Accordion/__snapshots__/test.tsx.snap |   6 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../AccountSelect/__snapshots__/test.tsx.snap |   2 +-
 .../src/Alert/__snapshots__/test.tsx.snap     |   2 +-
 .../AlertInline/__snapshots__/test.tsx.snap   |   2 +-
 .../src/Amount/__snapshots__/test.tsx.snap    |   2 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../Autocomplete/__snapshots__/test.tsx.snap  |   2 +-
 .../AvatarUpload/__snapshots__/test.tsx.snap  |   2 +-
 .../src/Badge/__snapshots__/test.tsx.snap     |   4 +-
 .../src/Button/__snapshots__/test.tsx.snap    |   4 +-
 .../ButtonBase/__snapshots__/test.tsx.snap    |  22 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../ButtonGroup/__snapshots__/test.tsx.snap   |   2 +-
 .../ButtonRadio/__snapshots__/test.tsx.snap   |   2 +-
 .../ButtonSplit/__snapshots__/test.tsx.snap   |   2 +-
 .../src/Calendar/__snapshots__/test.tsx.snap  |   2 +-
 .../src/Checkbox/__snapshots__/test.tsx.snap  |  16 +-
 .../src/Container/__snapshots__/test.tsx.snap |   2 +-
 .../DatePicker/__snapshots__/test.tsx.snap    |   2 +-
 .../MonthSelect/__snapshots__/test.tsx.snap   |   2 +-
 .../YearSelect/__snapshots__/test.tsx.snap    |   2 +-
 .../src/Dropdown/__snapshots__/test.tsx.snap  |   6 +-
 .../src/Dropzone/__snapshots__/test.tsx.snap  |   2 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../src/FileInput/__snapshots__/test.tsx.snap |   4 +-
 .../src/FileList/__snapshots__/test.tsx.snap  |   2 +-
 .../FileListItem/__snapshots__/test.tsx.snap  |   2 +-
 .../ProgressBar/__snapshots__/test.tsx.snap   |   4 +-
 .../src/FormError/__snapshots__/test.tsx.snap |   2 +-
 .../src/FormField/__snapshots__/test.tsx.snap |   6 +-
 .../src/FormHint/__snapshots__/test.tsx.snap  |   2 +-
 .../FormWarning/__snapshots__/test.tsx.snap   |   2 +-
 .../src/FormLabel/__snapshots__/test.tsx.snap |  10 +-
 .../Grid/src/Grid/__snapshots__/test.tsx.snap |   2 +-
 .../src/GridItem/__snapshots__/test.tsx.snap  |   2 +-
 .../src/Helpbox/__snapshots__/test.tsx.snap   |   2 +-
 .../src/Input/__snapshots__/test.tsx.snap     |  12 +-
 .../Link/src/Link/__snapshots__/test.tsx.snap |   8 +-
 .../List/src/List/__snapshots__/test.tsx.snap |   4 +-
 .../Menu/src/Menu/__snapshots__/test.tsx.snap |   2 +-
 .../src/MenuItem/__snapshots__/test.tsx.snap  |  14 +-
 .../src/Modal/__snapshots__/test.tsx.snap     |   8 +-
 .../Note/src/Note/__snapshots__/test.tsx.snap |   2 +-
 .../Notification/__snapshots__/test.tsx.snap  |   2 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../__snapshots__/test.tsx.snap               |   6 +-
 .../NumberInput/__snapshots__/test.tsx.snap   |   2 +-
 .../Page/src/Page/__snapshots__/test.tsx.snap |   2 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../PageSidebar/__snapshots__/test.tsx.snap   |   6 +-
 .../PageTopBar/__snapshots__/test.tsx.snap    |   8 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../SidebarItem/__snapshots__/test.tsx.snap   |  14 +-
 .../SidebarLogo/__snapshots__/test.tsx.snap   |   2 +-
 .../SidebarMenu/__snapshots__/test.tsx.snap   |   4 +-
 .../Pagination/__snapshots__/test.tsx.snap    |  12 +-
 .../src/Paper/__snapshots__/test.tsx.snap     |   2 +-
 .../PromptModal/__snapshots__/test.tsx.snap   |  10 +-
 .../src/Quote/__snapshots__/test.tsx.snap     |   2 +-
 .../src/Radio/__snapshots__/test.tsx.snap     |   8 +-
 .../RatingIcon/__snapshots__/test.tsx.snap    |   2 +-
 .../RatingStars/__snapshots__/test.tsx.snap   |   2 +-
 .../src/Section/__snapshots__/test.tsx.snap   |   8 +-
 .../NativeSelect/__snapshots__/test.tsx.snap  |   4 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../__snapshots__/test.tsx.snap               |   6 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../__snapshots__/test.tsx.snap               |   4 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../__snapshots__/test.tsx.snap               |   4 +-
 .../__snapshots__/test.tsx.snap               |   6 +-
 .../ScrollMenu/__snapshots__/test.tsx.snap    |   2 +-
 .../SelectCaret/__snapshots__/test.tsx.snap   |   4 +-
 .../src/ShowMore/__snapshots__/test.tsx.snap  |  14 +-
 .../src/Stepper/__snapshots__/test.tsx.snap   |   8 +-
 .../__snapshots__/test.tsx.snap               |   4 +-
 .../src/Switch/__snapshots__/test.tsx.snap    |   2 +-
 .../src/Table/__snapshots__/test.tsx.snap     |   2 +-
 .../src/TableBody/__snapshots__/test.tsx.snap |   2 +-
 .../src/TableCell/__snapshots__/test.tsx.snap |   6 +-
 .../TableFooter/__snapshots__/test.tsx.snap   |   2 +-
 .../src/TableHead/__snapshots__/test.tsx.snap |   2 +-
 .../src/TableRow/__snapshots__/test.tsx.snap  |   2 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../__snapshots__/test.tsx.snap               |   4 +-
 .../Tabs/src/Tab/__snapshots__/test.tsx.snap  |   6 +-
 .../Tabs/src/Tabs/__snapshots__/test.tsx.snap |  10 +-
 .../src/Indicator/__snapshots__/test.tsx.snap |   2 +-
 .../Tag/src/Tag/__snapshots__/test.tsx.snap   |  10 +-
 .../src/TagGroup/__snapshots__/test.tsx.snap  |   2 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../TagSelector/__snapshots__/test.tsx.snap   |   6 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../src/Timeline/__snapshots__/test.tsx.snap  |  16 +-
 .../TimePicker/__snapshots__/test.tsx.snap    |   2 +-
 .../src/Tooltip/__snapshots__/test.tsx.snap   |   4 +-
 .../Typography/__snapshots__/test.tsx.snap    |   6 +-
 .../src/UserBadge/__snapshots__/test.tsx.snap |  16 +-
 .../utils/Modal/__snapshots__/test.tsx.snap   |   6 +-
 .../Rotate180/__snapshots__/test.tsx.snap     |   4 +-
 .../src/Checkbox/__snapshots__/test.tsx.snap  |   6 +-
 .../FieldLabel/__snapshots__/test.tsx.snap    |   2 +-
 .../src/Form/__snapshots__/test.tsx.snap      |   4 +-
 .../src/Radio/__snapshots__/test.tsx.snap     |   4 +-
 .../src/Rating/__snapshots__/test.tsx.snap    |   4 +-
 .../picasso-provider/src/Picasso/styles.tsx   |  12 +-
 122 files changed, 756 insertions(+), 895 deletions(-)
 delete mode 100644 @types/material-ui__utils/index.d.ts
 delete mode 100644 docs/contribution/css-naming.md
 delete mode 100644 docs/contribution/jss-onboarding.md
 create mode 100644 docs/contribution/styling.md

diff --git a/.storybook/components/Editor/styles.ts b/.storybook/components/Editor/styles.ts
index 51ff34b359..f995dc0f9c 100644
--- a/.storybook/components/Editor/styles.ts
+++ b/.storybook/components/Editor/styles.ts
@@ -1,5 +1,4 @@
-// The trailing `!` beats PicassoRootNode's app-wide `[&_*]:font-sans` (which has
-// equal specificity), so the code editor keeps its monospace font — matching the
-// pre-migration cascade where JSS injection order let this win.
+// 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]!'
+  'w-full [&_*]:font-[Monaco,Menlo,Ubuntu_Mono,Consolas,source-code-pro,monospace]'
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/@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..9655816be0 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`): border-box page box model, 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/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..7d644599b1
--- /dev/null
+++ b/docs/contribution/styling.md
@@ -0,0 +1,105 @@
+# 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`: border-box page box model,
+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/migration/references/practices.md b/docs/migration/references/practices.md
index 422e2045bf..1e9e07cb48 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
@@ -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
index f45d9baedc..c6760a5e1c 100644
--- a/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
+++ b/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
@@ -131,7 +131,7 @@ These bit us during the migration and generalize to future MUI→Tailwind work a
 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.** PicassoRootNode's app-wide `[&_*]:font-sans` (`.root *`, specificity 0,1,0) fights a child's `[&_*]:font-[…]` (same 0,1,0) — order decides, fragile. A **type-selector** variant (`[&_code]:` = 0,1,1) wins naturally; a **universal** one (`[&_*]:`) needs `!important` or a specificity bump. JSS resolved this by injection order; Tailwind's layer order doesn't preserve component nesting.
+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 is now `border-box` end-to-end (`@toptal/picasso-tailwind/base`: `html { box-sizing: border-box }` + universal inherit — PF-2221 dropped the historical `content-box` carve-out). The `PicassoRootNode` border-box island remains as the guard for pages that don't import the base entry. 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.
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 bb6adadbf4..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 109c58a73b..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 f1916b174d..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 7ada2713f0..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 bc0d8eac6b..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 208722a153..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 ef64f7a8da..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 6c764e8fb7..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 11f0cc0ee8..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 0084ead89d..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 44a2d9276d..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 218471e810..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 45fc5cb5e2..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 85230497ad..478c5b91e1 100644
--- a/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ButtonCheckbox renders 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/ButtonGroup/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
index ba803e7251..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 d0e59d980e..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 8db4e32e22..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 a6730575b8..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/__snapshots__/test.tsx.snap b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
index 9b32947f59..d484642a39 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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
@@ -248,7 +248,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
 exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <label
       class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
@@ -290,7 +290,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
 exports[`Checkbox renders default checkbox without label 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
@@ -317,7 +317,7 @@ exports[`Checkbox renders default checkbox without label 1`] = `
 exports[`Checkbox renders disabled state 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
@@ -347,7 +347,7 @@ exports[`Checkbox renders disabled state 1`] = `
 exports[`Checkbox renders indeterminate state 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
@@ -374,7 +374,7 @@ exports[`Checkbox renders indeterminate state 1`] = `
 exports[`Checkbox renders with (optional) 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
@@ -401,7 +401,7 @@ exports[`Checkbox renders with (optional) 1`] = `
 exports[`Checkbox renders with asterisk 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
@@ -428,7 +428,7 @@ exports[`Checkbox renders with asterisk 1`] = `
 exports[`Checkbox should render default checkbox with label 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <label
       class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer text-[1rem] picasso-checkbox"
diff --git a/packages/base/Container/src/Container/__snapshots__/test.tsx.snap b/packages/base/Container/src/Container/__snapshots__/test.tsx.snap
index 364396ba95..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
index 2e10bea1cd..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 8723bace36..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 26ca0a5804..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/__snapshots__/test.tsx.snap b/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
index db3af574cf..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap b/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
index c605bd17b2..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 6f60cdde7e..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/FileInput/src/FileInput/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
index 17a1686b2a..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 e1509acb26..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 2fae850870..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 b30c02d464..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 a233c23b02..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 d4c35dd476..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 615411f1c1..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 ac0ecabb29..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/FormLabel/__snapshots__/test.tsx.snap b/packages/base/FormLabel/src/FormLabel/__snapshots__/test.tsx.snap
index ebc9a20e94..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 3531d70218..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 6904eaf686..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 8b425759b3..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 107d21089c..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 35852e067b..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 158ca43352..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 b807478135..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 194a46f460..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
-      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 f53dcd8e29..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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 8b3f218581..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 c452af9cd7..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 ff97f1d82a..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 c2781f635a..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="false"
@@ -122,7 +122,7 @@ exports[`useNotifications error notification render 1`] = `
 exports[`useNotifications info notification render 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <button
       aria-disabled="false"
@@ -244,7 +244,7 @@ exports[`useNotifications info notification render 1`] = `
 exports[`useNotifications success notification render 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
index beefb8b50b..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+  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/__snapshots__/test.tsx.snap b/packages/base/Page/src/Page/__snapshots__/test.tsx.snap
index f26d326970..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/PageAutocomplete/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
index ad711e46be..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/PageSidebar/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
index f239ea173b..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
index 53ed750afe..20303dff50 100644
--- a/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PageTopBar renders hamburger on small screen 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
@@ -75,7 +75,7 @@ exports[`PageTopBar renders hamburger on small screen 1`] = `
 exports[`PageTopBar renders normally on default screen size 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
@@ -147,7 +147,7 @@ exports[`PageTopBar renders normally on default screen size 1`] = `
 exports[`PageTopBar renders with custom logo 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
@@ -198,7 +198,7 @@ exports[`PageTopBar renders with custom logo 1`] = `
 exports[`PageTopBar renders with link 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
diff --git a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
index 2259848d59..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 530f03c9d0..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 cbbfaa5b3b..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 c2760f7c39..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 ef2157eb2b..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 fae97d0b07..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 ac50f85f9c..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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 d876d4046e..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 881632f12a..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 af9d15af31..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 4b2d226edc..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 bdb52c999f..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 bd0dd78faf..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 3db177293d..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 20cfb605b5..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 58c2a8b8dc..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 ef391bf626..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 b694b846ef..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 8277eaf69c..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 024e651f2a..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 5594d15677..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 3332f61afd..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 c7777ed7af..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/Step/src/Stepper/__snapshots__/test.tsx.snap b/packages/base/Step/src/Stepper/__snapshots__/test.tsx.snap
index 861899811c..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 3a30f9302f..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/__snapshots__/test.tsx.snap b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
index 958590b928..37e80ac8d3 100644
--- a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
+++ b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
@@ -49,7 +49,7 @@ exports[`Switch behaves correctly when interacting 1`] = `
 exports[`Switch renders default Switch without label 1`] = `
 <div>
   <div
-    class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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"
diff --git a/packages/base/Table/src/Table/__snapshots__/test.tsx.snap b/packages/base/Table/src/Table/__snapshots__/test.tsx.snap
index 2be5eb1c62..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 715da0a830..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 819d2e32fc..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 dba02f649e..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 358585edec..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 2fa75c6456..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 12adcb48b6..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 46f1358510..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 044bbd2779..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 124800ab5e..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 f95b8dbb59..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 f5cb294c6f..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 58384f5fd1..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 98ec80fbe0..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 70450e297c..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 6eea51c5c4..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/Timeline/src/Timeline/__snapshots__/test.tsx.snap b/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap
index 7a070524e9..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
-      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
-      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
-      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
-      class="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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 eb943d3650..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 02d8e3b81a..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 bc7ce09b33..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 ea64910f12..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/src/utils/Modal/__snapshots__/test.tsx.snap b/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap
index 8a66f4297f..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+      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 e95b2f9eb7..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
index d00c13cd2a..87a7cf6bc7 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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
@@ -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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <div
       class=""
@@ -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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/FieldLabel/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/FieldLabel/__snapshots__/test.tsx.snap
index 60981b9c2d..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 f9a29dda63..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 63882653a3..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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 08816c8165..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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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="flex-1 box-border [&_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
+    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/src/Picasso/styles.tsx b/packages/picasso-provider/src/Picasso/styles.tsx
index 556b4345d7..7d873c5b29 100644
--- a/packages/picasso-provider/src/Picasso/styles.tsx
+++ b/packages/picasso-provider/src/Picasso/styles.tsx
@@ -2,12 +2,18 @@
 // 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 forced onto the whole subtree (was `& * { fontFamily }`;
-// `font-sans` resolves to the former `typography.fontFamily` proxima-nova stack).
+// 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',
-  '[&_*]:font-sans',
+  '[:where(&)_*]:font-sans',
   '[&_*]:[box-sizing:inherit]',
   '[&_*::before]:[box-sizing:inherit]',
   '[&_*::after]:[box-sizing:inherit]',

From 9e47e62224fee442fe9b3d10c6bbe82ed088f496 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Tue, 14 Jul 2026 16:26:59 +0200
Subject: [PATCH 14/17] Revert to initial (#5046)

---
 packages/picasso-tailwind/src/base.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/picasso-tailwind/src/base.css b/packages/picasso-tailwind/src/base.css
index 46f1458461..f0fc4dbdab 100644
--- a/packages/picasso-tailwind/src/base.css
+++ b/packages/picasso-tailwind/src/base.css
@@ -17,7 +17,7 @@
     /* border-box page model (PF-2221) — descendants inherit it through the
        universal selector below; the PicassoRootNode island keeps guarding
        pages that don't import this entry */
-    box-sizing: border-box;
+    box-sizing: initial;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

From 996df808a4e087e28d5e01a003e31f48999b1bd7 Mon Sep 17 00:00:00 2001
From: George Dulishkovych <george.dulishkovych@toptal.com>
Date: Wed, 15 Jul 2026 15:47:29 +0300
Subject: [PATCH 15/17] [PF-2244] Expose single label node for base-ui Checkbox
 and Switch (#5051)

base-ui form controls render an accessible role element plus a hidden
native input; wrapping them in a <label> made both label-associated, so
getByLabelText/getByText/getByRole matched twice and threw in consumer
tests. Add an opt-in labelId path to FormControlLabel that renders a
non-<label> wrapper, names the control via aria-labelledby and forwards
label clicks to preserve toggling. Checkbox and Switch opt in; the
default <label> path (Radio, other consumers) is unchanged.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../checkbox-switch-single-label-node.md      |  13 ++
 .../__snapshots__/test.tsx.snap               |   6 +-
 .../base/Checkbox/src/Checkbox/Checkbox.tsx   | 167 ++++++++++--------
 .../src/Checkbox/__snapshots__/test.tsx.snap  |  90 +++++-----
 packages/base/Checkbox/src/Checkbox/test.tsx  |  70 ++++++++
 .../src/FormControlLabel/FormControlLabel.tsx | 116 ++++++++++--
 packages/base/Switch/src/Switch/Switch.tsx    |  18 +-
 .../src/Switch/__snapshots__/test.tsx.snap    |  28 +--
 packages/base/Switch/src/Switch/test.tsx      |  36 ++++
 .../src/Checkbox/__snapshots__/test.tsx.snap  |  38 ++--
 10 files changed, 404 insertions(+), 178 deletions(-)
 create mode 100644 .changeset/checkbox-switch-single-label-node.md

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/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
index 478c5b91e1..4798cdedc7 100644
--- a/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
@@ -9,7 +9,7 @@ exports[`ButtonCheckbox renders 1`] = `
       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/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 d484642a39..fa48436fc9 100644
--- a/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Checkbox/src/Checkbox/__snapshots__/test.tsx.snap
@@ -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>
@@ -250,19 +250,18 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
   <div
     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>
 `;
@@ -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"
       />
@@ -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"
       />
@@ -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"
       />
@@ -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"
       />
@@ -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"
       />
@@ -430,19 +430,18 @@ exports[`Checkbox should render default checkbox with label 1`] = `
   <div
     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/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/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 37e80ac8d3..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,7 +43,7 @@ exports[`Switch behaves correctly when interacting 1`] = `
       Switch
     </span>
   </span>
-</label>
+</div>
 `;
 
 exports[`Switch renders default Switch without label 1`] = `
@@ -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/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
index 87a7cf6bc7..269247012a 100644
--- a/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Checkbox/__snapshots__/test.tsx.snap
@@ -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>
@@ -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>
@@ -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>

From 61d90037791b7bc703c59cf6bec0341546c93132 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Wed, 15 Jul 2026 17:12:54 +0200
Subject: [PATCH 16/17] Retire responsive-styles engine; provider injects zero
 runtime CSS (#5052)

---
 .changeset/container-spacing-classes-move.md  |   7 +
 .changeset/decommission-mui-provider.md       |   3 +-
 .changeset/dropdown-offset-static.md          |  11 +
 .changeset/page-topbar-wscreen.md             |   7 +
 .changeset/picasso-tailwind-base-entry.md     |   1 +
 .changeset/utils-spacing-classes.md           |   7 +
 .../components/CodeExample/CodeExample.tsx    |  13 +-
 .storybook/preview.js                         |   7 +-
 AGENTS.md                                     |   2 +-
 docs/contribution/styling.md                  |   5 +-
 ...responsive-component-spacing-properties.md |  22 +-
 docs/migration/references/practices.md        |   2 +-
 ...-4318-PF-2023-provider-migration-report.md | 107 +++++-----
 .../PI-4318-PF-2226-execution-plan.md         | 189 ++++++++++++++++++
 .../Container/src/Container/Container.tsx     |   8 +-
 .../Container/src/Container/utils/index.ts    |   2 -
 .../base/Dropdown/src/Dropdown/Dropdown.tsx   |  30 ++-
 .../story/ResponsiveOffset.example.tsx        |  31 +++
 .../Dropdown/src/Dropdown/story/index.jsx     |   5 +
 packages/base/Dropdown/src/Dropdown/test.tsx  |  68 +++++++
 packages/base/Page/src/Page/test.tsx          |   1 -
 .../base/Page/src/PageTopBar/PageTopBar.tsx   |   8 +-
 .../PageTopBar/__snapshots__/test.tsx.snap    |   8 +-
 .../src/test-utils/TestingPicasso.tsx         |   1 -
 packages/base/Utils/src/utils/index.ts        |   1 +
 .../src/utils/spacing-classes}/constants.ts   |   0
 .../get-spacing-classes.test.ts               |   0
 .../spacing-classes}/get-spacing-classes.ts   |   0
 .../Utils/src/utils/spacing-classes/index.ts  |   1 +
 .../picasso-provider/src/Favicon/test.tsx     |   1 -
 .../picasso-provider/src/Picasso/Picasso.tsx  |   8 -
 .../Picasso/PicassoGlobalStylesProvider.tsx   |   3 -
 .../src/Picasso/RootContext.ts                |  10 -
 .../src/Picasso/story/Default.example.tsx     |   6 +-
 .../story/DisableResponsiveUI.example.tsx     |   7 +-
 .../src/Picasso/utils/index.ts                |   1 -
 .../create-variable-values-jss.test.ts        |  24 ---
 .../create-variable-values-jss.ts             |  21 --
 .../default-css-prop.test.ts                  |  15 --
 .../responsive-styles/default-css-prop.ts     |  15 --
 .../generate-variable-inline-styles.test.ts   |  20 --
 .../generate-variable-inline-styles.ts        |  26 ---
 .../get-breakpoint-class-names-to-use.test.ts |  20 --
 .../get-breakpoint-class-names-to-use.ts      |  28 ---
 .../Picasso/utils/responsive-styles/index.ts  |   1 -
 .../inject-responsive-styles.test.ts          |  24 ---
 .../inject-responsive-styles.ts               |  72 -------
 .../make-responsive-spacing-props.ts          |  28 ---
 .../responsive-styles/to-class-name.test.ts   |  13 --
 .../utils/responsive-styles/to-class-name.ts  |   9 -
 .../to-css-variable-name.test.ts              |  13 --
 .../responsive-styles/to-css-variable-name.ts |   9 -
 .../Picasso/utils/responsive-styles/types.ts  |   7 -
 .../PreventPageWidthChangeOnScrollbar.tsx     |  19 --
 .../index.ts                                  |   1 -
 .../styles.ts                                 |  25 ---
 packages/picasso-provider/src/index.ts        |   1 -
 packages/picasso-tailwind/src/base.css        |  27 ++-
 58 files changed, 462 insertions(+), 539 deletions(-)
 create mode 100644 .changeset/container-spacing-classes-move.md
 create mode 100644 .changeset/dropdown-offset-static.md
 create mode 100644 .changeset/page-topbar-wscreen.md
 create mode 100644 .changeset/utils-spacing-classes.md
 create mode 100644 docs/modernization/PI-4318-PF-2226-execution-plan.md
 create mode 100644 packages/base/Dropdown/src/Dropdown/story/ResponsiveOffset.example.tsx
 rename packages/base/{Container/src/Container/utils => Utils/src/utils/spacing-classes}/constants.ts (100%)
 rename packages/base/{Container/src/Container/utils => Utils/src/utils/spacing-classes}/get-spacing-classes.test.ts (100%)
 rename packages/base/{Container/src/Container/utils => Utils/src/utils/spacing-classes}/get-spacing-classes.ts (100%)
 create mode 100644 packages/base/Utils/src/utils/spacing-classes/index.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/create-variable-values-jss.test.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/create-variable-values-jss.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/default-css-prop.test.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/default-css-prop.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/generate-variable-inline-styles.test.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/generate-variable-inline-styles.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.test.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/get-breakpoint-class-names-to-use.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/index.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.test.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/make-responsive-spacing-props.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/to-class-name.test.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/to-class-name.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/to-css-variable-name.test.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/to-css-variable-name.ts
 delete mode 100644 packages/picasso-provider/src/Picasso/utils/responsive-styles/types.ts
 delete mode 100644 packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx
 delete mode 100644 packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/index.ts
 delete mode 100644 packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/styles.ts

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
index 5b8415fc71..784a5e15a3 100644
--- a/.changeset/decommission-mui-provider.md
+++ b/.changeset/decommission-mui-provider.md
@@ -19,7 +19,8 @@ Breaking changes (consumer action required):
 - 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).
-- **the page box model flips from content-box to border-box** (`html { box-sizing: border-box }` + universal inherit, via `@toptal/picasso-tailwind/base`). Non-Picasso markup sized with width+padding/border computes differently — audit app-level layout that relied on content-box. Picasso components are unaffected (they always rendered inside a border-box island).
+- `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/Storybook wrappers simply delete the prop.
 
 `@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`).
 
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-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
index 0dad278c6f..2796b72a17 100644
--- a/.changeset/picasso-tailwind-base-entry.md
+++ b/.changeset/picasso-tailwind-base-entry.md
@@ -5,3 +5,4 @@
 ### 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 23d2f93484..dc00d79d41 100755
--- a/.storybook/components/CodeExample/CodeExample.tsx
+++ b/.storybook/components/CodeExample/CodeExample.tsx
@@ -170,11 +170,7 @@ const PicassoSSR: FunctionComponent = ({ children }) => {
   }
 
   return (
-    <Picasso
-      fixViewport={false}
-      loadFavicon={false}
-      preventPageWidthChangeOnScrollbar={false}
-    >
+    <Picasso fixViewport={false} loadFavicon={false}>
       <Purifier>{children}</Purifier>
     </Picasso>
   )
@@ -266,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/preview.js b/.storybook/preview.js
index 4c610dbd81..b365e94f8b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -58,12 +58,7 @@ export const parameters = {
 
 const loadFonts = TEST_ENV !== 'visual'
 const withPicasso = story => (
-  <Picasso
-    loadFonts={loadFonts}
-    fixViewport={false}
-    loadFavicon={false}
-    preventPageWidthChangeOnScrollbar={false}
-  >
+  <Picasso loadFonts={loadFonts} fixViewport={false} loadFavicon={false}>
     {story()}
   </Picasso>
 )
diff --git a/AGENTS.md b/AGENTS.md
index 9655816be0..d3b8631045 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -131,7 +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`): border-box page box model, 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.
+- **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/docs/contribution/styling.md b/docs/contribution/styling.md
index 7d644599b1..f36cd24d8f 100644
--- a/docs/contribution/styling.md
+++ b/docs/contribution/styling.md
@@ -68,8 +68,9 @@ 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`: border-box page box model,
-body/root layout, font smoothing. Being cascade-layered, **all utilities and any
+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).
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/practices.md b/docs/migration/references/practices.md
index 1e9e07cb48..ef8059c9c2 100644
--- a/docs/migration/references/practices.md
+++ b/docs/migration/references/practices.md
@@ -161,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
 
diff --git a/docs/modernization/PI-4318-PF-2023-provider-migration-report.md b/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
index c6760a5e1c..b680d7450d 100644
--- a/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
+++ b/docs/modernization/PI-4318-PF-2023-provider-migration-report.md
@@ -3,15 +3,15 @@
 **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*).
+**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.
+> **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.
+`@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.
 
@@ -24,7 +24,7 @@ PF-2023 is the **last step of PI-4318** (Picasso modernization off `@material-ui
 - 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.
+- Keep the rendered library visually identical (Happo gate) with no consumer _runtime_ regressions.
 
 ---
 
@@ -32,16 +32,16 @@ PF-2023 is the **last step of PI-4318** (Picasso modernization off `@material-ui
 
 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')` | Runtime `<style>` built from `screens()` at render (keeps the `disableMobileBreakpoints()` dynamic). |
-| **Responsive-styles engine** (`makeResponsiveSpacingProps`) | `makeStyles` media-query classes + inline CSS vars | Media-query CSS built from config + injected once via runtime `<style>`; inline-var machinery unchanged; `{className, style}` contract preserved. **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. |
+| 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.
 
@@ -49,38 +49,44 @@ A prerequisite commit (**"Decouple Page from PicassoProvider theme via RootConte
 
 ## 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.
+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.
+- _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.
+- **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 (second commit):** the base entry drops the historical `box-sizing: initial` carve-out — the page box model is now **border-box** end-to-end. The PicassoRootNode island stays as the guard for pages that skip the import. This is the PR's one deliberately-visual change; any Happo diffs on non-island story chrome are the intentional set for Vitor's sign-off.
+- **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.
+- **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:* retire the engine + converge Dropdown on Container's static-Tailwind pattern + fix the cascade → **[PF-2226]**.
+- _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.
+- _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).
+- _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.
 
@@ -90,36 +96,35 @@ Each decision below was made against the migration's overriding rule — **libra
 
 `@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) |
-| Page box model `content-box` → `border-box` | Audit app-level layout that relied on content-box sizing (width+padding/border) | Deliberate change (PF-2221); Picasso components unaffected — they always lived in a border-box island |
+| 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`.
+**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]** | Retire the responsive-styles engine; converge Dropdown `offset` on Container's static-Tailwind pattern; **fix the inverted mobile-first cascade** | Zero adoption; convergence is a reviewable design change, not a library swap |
-| **[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 |
+| 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                                                                                 |
 
 ---
 
@@ -127,14 +132,14 @@ Each decision below was made against the migration's overriding rule — **libra
 
 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*.
+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 is now `border-box` end-to-end (`@toptal/picasso-tailwind/base`: `html { box-sizing: border-box }` + universal inherit — PF-2221 dropped the historical `content-box` carve-out). The `PicassoRootNode` border-box island remains as the guard for pages that don't import the base entry. Tailwind **preflight itself is still not active** — the base entry is the only global box-sizing source.
+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. **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.
 
 ---
 
@@ -158,4 +163,4 @@ When writing the plan to migrate consuming apps onto this provider major:
 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.
+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/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/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/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/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/Page/src/Page/test.tsx b/packages/base/Page/src/Page/test.tsx
index 38b9878852..0e3e3d94fe 100644
--- a/packages/base/Page/src/Page/test.tsx
+++ b/packages/base/Page/src/Page/test.tsx
@@ -33,7 +33,6 @@ describe('Page', () => {
         loadFavicon={false}
         loadFonts={false}
         fixViewport={false}
-        preventPageWidthChangeOnScrollbar={false}
         disableHelmet
         responsive={false}
       >
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 20303dff50..8eaf262725 100644
--- a/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
@@ -9,7 +9,7 @@ exports[`PageTopBar renders hamburger on small screen 1`] = `
       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"
@@ -81,7 +81,7 @@ exports[`PageTopBar renders normally on default screen size 1`] = `
       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"
@@ -153,7 +153,7 @@ exports[`PageTopBar renders with custom logo 1`] = `
       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"
@@ -204,7 +204,7 @@ exports[`PageTopBar renders with link 1`] = `
       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/Test-Utils/src/test-utils/TestingPicasso.tsx b/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx
index dfb6f04112..1ea5d5ec0c 100644
--- a/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx
+++ b/packages/base/Test-Utils/src/test-utils/TestingPicasso.tsx
@@ -12,7 +12,6 @@ export const TestingPicasso = ({ children, titleCase }: Props) => {
       loadFavicon={false}
       loadFonts={false}
       fixViewport={false}
-      preventPageWidthChangeOnScrollbar={false}
       titleCase={titleCase}
       disableTransitions
     >
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-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/Picasso.tsx b/packages/picasso-provider/src/Picasso/Picasso.tsx
index eea0e421b1..694f67ac88 100644
--- a/packages/picasso-provider/src/Picasso/Picasso.tsx
+++ b/packages/picasso-provider/src/Picasso/Picasso.tsx
@@ -11,7 +11,6 @@ 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
@@ -25,8 +24,6 @@ export interface PicassoProps extends TextLabelProps {
   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  */
@@ -43,7 +40,6 @@ const Picasso = ({
   responsive = true,
   environment = 'development',
   children,
-  preventPageWidthChangeOnScrollbar = true,
   fixViewport = true,
   notificationContainer,
   RootComponent = PicassoRootNode,
@@ -62,14 +58,10 @@ const Picasso = ({
       titleCase={titleCase}
       disableTransitions={disableTransitions}
       responsive={responsive}
-      preventPageWidthChangeOnScrollbar={preventPageWidthChangeOnScrollbar}
     >
       <HelmetProvider disabled={disableHelmet}>
         {fixViewport && <FixViewport />}
         {loadFonts && <FontsLoader />}
-        {preventPageWidthChangeOnScrollbar && (
-          <PreventPageWidthChangeOnScrollbar />
-        )}
         {loadFavicon && <Favicon environment={environment} />}
         <NotificationsProvider container={notificationContainer}>
           {children}
diff --git a/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx b/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx
index 9ada93ebbd..dd1d13d71f 100644
--- a/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx
+++ b/packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx
@@ -16,7 +16,6 @@ export interface PicassoGlobalStylesProviderProps extends TextLabelProps {
   environment: EnvironmentType<'test' | 'temploy'>
   disableTransitions?: boolean
   responsive?: boolean
-  preventPageWidthChangeOnScrollbar?: boolean
 }
 
 const breakpointKeyByRange: Record<BreakpointKeys, BreakpointKeys> = {
@@ -37,7 +36,6 @@ const PicassoGlobalStylesProvider = (
     titleCase,
     disableTransitions,
     responsive,
-    preventPageWidthChangeOnScrollbar,
   } = props
 
   const rootRef = useRef<HTMLDivElement | null>(null)
@@ -83,7 +81,6 @@ const PicassoGlobalStylesProvider = (
     },
     disableTransitions,
     responsive,
-    preventPageWidthChangeOnScrollbar,
   })
 
   useEffect(() => {
diff --git a/packages/picasso-provider/src/Picasso/RootContext.ts b/packages/picasso-provider/src/Picasso/RootContext.ts
index eca35e6b44..884bc66f42 100644
--- a/packages/picasso-provider/src/Picasso/RootContext.ts
+++ b/packages/picasso-provider/src/Picasso/RootContext.ts
@@ -16,7 +16,6 @@ export interface RootContextProps extends TextLabelProps {
   disableTransitions?: boolean
   responsive?: boolean
   currentBreakpointRange?: BreakpointKeys
-  preventPageWidthChangeOnScrollbar?: boolean
 }
 
 export const RootContext = React.createContext<RootContextProps>({
@@ -98,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/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/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/utils/index.ts b/packages/picasso-provider/src/Picasso/utils/index.ts
index 3344b81f11..588696ee92 100644
--- a/packages/picasso-provider/src/Picasso/utils/index.ts
+++ b/packages/picasso-provider/src/Picasso/utils/index.ts
@@ -1,3 +1,2 @@
 export * from './generate-random-string'
 export * from './spacings'
-export * from './responsive-styles'
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/inject-responsive-styles.test.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.test.ts
deleted file mode 100644
index f1dc5f766f..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { buildResponsiveCss } from './inject-responsive-styles'
-
-describe('buildResponsiveCss', () => {
-  it('emits one media-query rule per breakpoint and prop', () => {
-    const css = buildResponsiveCss(['margin-top'], 'Test')
-
-    expect(css).toContain(
-      '@media (min-width:768px){.Test-md--margin-top{margin-top:var(--picasso-responsive--md--margin-top)}}'
-    )
-    expect(css).toContain(
-      '@media (min-width:0px){.Test-xs--margin-top{margin-top:var(--picasso-responsive--xs--margin-top)}}'
-    )
-  })
-
-  it('emits breakpoints largest-first (preserving the legacy cascade order)', () => {
-    const css = buildResponsiveCss(['margin-top'], 'Test')
-
-    const xlIndex = css.indexOf('xl--margin-top')
-    const xsIndex = css.indexOf('xs--margin-top')
-
-    expect(xlIndex).toBeGreaterThanOrEqual(0)
-    expect(xlIndex).toBeLessThan(xsIndex)
-  })
-})
diff --git a/packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.ts b/packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.ts
deleted file mode 100644
index 32dd327bbd..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/inject-responsive-styles.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { BreakpointKeys } from '../../config'
-import { breakpointsList } from '../../config'
-import { toClassName } from './to-class-name'
-import { toCssVariableName } from './to-css-variable-name'
-import type { ResponsiveCssProp } from './types'
-
-/**
- * Builds the media-query CSS backing the responsive spacing classes: one rule
- * per breakpoint × prop, mapping `.<name>-<breakpoint>--<prop>` to its CSS
- * variable.
- *
- * Breakpoints are read lazily from the live config so the rules honour
- * `disableMobileBreakpoints()`, which mutates the breakpoint values in place.
- *
- * NOTE: rules are emitted largest-breakpoint-first, preserving the original
- * inverted cascade — on wide viewports the *smallest* specified breakpoint wins
- * (mobile-first semantics reversed). This defect predates the migration and is
- * kept byte-for-byte on purpose; the correct cascade lands with the Tailwind
- * convergence in PF-2226.
- */
-export const buildResponsiveCss = (
-  props: readonly ResponsiveCssProp[],
-  name: string
-): string => {
-  const breakpoints = Object.keys(breakpointsList) as BreakpointKeys[]
-  const rules: string[] = []
-
-  for (const breakpoint of [...breakpoints].reverse()) {
-    const minWidth = breakpointsList[breakpoint]
-
-    for (const prop of props) {
-      const className = `${name}-${toClassName(breakpoint, prop)}`
-      const variable = toCssVariableName(breakpoint, prop)
-
-      rules.push(
-        `@media (min-width:${minWidth}px){.${className}{${prop}:var(${variable})}}`
-      )
-    }
-  }
-
-  return rules.join('')
-}
-
-const injectedNames = new Set<string>()
-
-/**
- * Injects the responsive spacing stylesheet for a given hook `name` exactly once
- * (client-side only; a no-op during SSR).
- */
-export const injectResponsiveStyles = (
-  props: readonly ResponsiveCssProp[],
-  name: string
-): void => {
-  if (typeof document === 'undefined' || injectedNames.has(name)) {
-    return
-  }
-
-  injectedNames.add(name)
-
-  const id = `picasso-responsive-${name}`
-
-  if (document.getElementById(id)) {
-    return
-  }
-
-  const style = document.createElement('style')
-
-  style.id = id
-  style.textContent = buildResponsiveCss(props, name)
-
-  document.head.appendChild(style)
-}
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 588bbb8e45..0000000000
--- a/packages/picasso-provider/src/Picasso/utils/responsive-styles/make-responsive-spacing-props.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import cx from 'classnames'
-
-import { generateVariableInlineStyles } from './generate-variable-inline-styles'
-import { getBreakpointClassNamesToUse } from './get-breakpoint-class-names-to-use'
-import { injectResponsiveStyles } from './inject-responsive-styles'
-import type { ResponsiveCssProp, ResponsiveCssSpacings } from './types'
-
-const makeResponsiveSpacingProps = <K extends ResponsiveCssProp>(
-  props: readonly K[],
-  name: string
-) => {
-  const useResponsiveClassNames = (propValues: ResponsiveCssSpacings<K>) => {
-    // Inject the media-query stylesheet on first use (client-only, idempotent),
-    // during render so the classes' CSS is present synchronously.
-    injectResponsiveStyles(props, name)
-
-    const classNames = getBreakpointClassNamesToUse(props, propValues)
-
-    return {
-      className: cx(...classNames.map(className => `${name}-${className}`)),
-      style: generateVariableInlineStyles(props, propValues),
-    }
-  }
-
-  return useResponsiveClassNames
-}
-
-export default makeResponsiveSpacingProps
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 ea72bce877..0000000000
--- a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/PreventPageWidthChangeOnScrollbar.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-
-import { preventPageWidthChangeCss } from './styles'
-
-/**
- * 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 = () => {
-  const css = preventPageWidthChangeCss()
-
-  if (!css) {
-    return null
-  }
-
-  return <style dangerouslySetInnerHTML={{ __html: css }} />
-}
-
-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 977fb62067..0000000000
--- a/packages/picasso-provider/src/PreventPageWidthChangeOnScrollbar/styles.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { screens } from '../Picasso/config'
-
-/**
- * Global CSS that fixes the page-width jump when the vertical scrollbar
- * appears/disappears. Applied only at md/lg/xl via the runtime-resolved
- * `screens()` media query (which honors `disableMobileBreakpoints()`); returns
- * an empty string when no matching breakpoint is active.
- */
-export const preventPageWidthChangeCss = (): string => {
-  const media = screens('md', 'lg', 'xl')
-
-  if (!media) {
-    return ''
-  }
-
-  return `${media} {
-  html {
-    width: 100%;
-    overflow-x: hidden;
-  }
-  body {
-    width: 100vw;
-  }
-}`
-}
diff --git a/packages/picasso-provider/src/index.ts b/packages/picasso-provider/src/index.ts
index 9d76cceb4c..1464032d43 100644
--- a/packages/picasso-provider/src/index.ts
+++ b/packages/picasso-provider/src/index.ts
@@ -47,7 +47,6 @@ export {
   useDrawer,
   useSidebar,
   useCurrentBreakpointRange,
-  usePreventPageWidthChangeOnScrollbar,
   RootContext,
   PicassoRootNodeContext,
 } from './Picasso/RootContext'
diff --git a/packages/picasso-tailwind/src/base.css b/packages/picasso-tailwind/src/base.css
index f0fc4dbdab..0184b690a9 100644
--- a/packages/picasso-tailwind/src/base.css
+++ b/packages/picasso-tailwind/src/base.css
@@ -14,9 +14,12 @@
  */
 @layer base {
   html {
-    /* border-box page model (PF-2221) — descendants inherit it through the
-       universal selector below; the PicassoRootNode island keeps guarding
-       pages that don't import this entry */
+    /* 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;
@@ -46,4 +49,22 @@
     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;
+    }
+  }
 }

From be3cee14c16ce04b425f5b73c9e1c46eef9a0444 Mon Sep 17 00:00:00 2001
From: Vedran Ivanac <vedran.ivanac@toptal.com>
Date: Thu, 16 Jul 2026 11:57:11 +0200
Subject: [PATCH 17/17] Fix storybook

---
 .changeset/decommission-mui-provider.md |  2 +-
 .storybook/styles.css                   | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/.changeset/decommission-mui-provider.md b/.changeset/decommission-mui-provider.md
index 784a5e15a3..ccd1cc5afc 100644
--- a/.changeset/decommission-mui-provider.md
+++ b/.changeset/decommission-mui-provider.md
@@ -20,7 +20,7 @@ Breaking changes (consumer action required):
 - 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/Storybook wrappers simply delete the prop.
+- 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`).
 
diff --git a/.storybook/styles.css b/.storybook/styles.css
index a55a82a8db..20295e0576 100644
--- a/.storybook/styles.css
+++ b/.storybook/styles.css
@@ -3,3 +3,25 @@
 @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%;
+  }
+}