From 8d9b08ad5a74f6808f47941cffe1326e3a9b37dc Mon Sep 17 00:00:00 2001
From: OleksandrNechai <oleksandr.nechai@toptal.com>
Date: Wed, 4 Mar 2026 20:39:18 +0100
Subject: [PATCH 1/4] Migrate Button and Switch to BASE UI

---
 packages/base/Button/package.json             |  2 +-
 .../src/Button/__snapshots__/test.tsx.snap    |  6 +-
 .../base/Button/src/ButtonBase/ButtonBase.tsx | 45 +++++-----
 .../ButtonBase/__snapshots__/test.tsx.snap    |  6 +-
 .../Pagination/__snapshots__/test.tsx.snap    | 30 ++++---
 packages/base/Switch/package.json             |  2 +-
 packages/base/Switch/src/Switch/Switch.tsx    | 83 +++++++++---------
 .../src/Switch/__snapshots__/test.tsx.snap    | 80 +++++++++++------
 yarn.lock                                     | 85 +++++++++++++------
 9 files changed, 212 insertions(+), 127 deletions(-)

diff --git a/packages/base/Button/package.json b/packages/base/Button/package.json
index b6c8475c84..bb531fb63d 100644
--- a/packages/base/Button/package.json
+++ b/packages/base/Button/package.json
@@ -22,6 +22,7 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
+    "@base-ui/react": "1.2.0",
     "@toptal/picasso-checkbox": "5.0.22",
     "@toptal/picasso-container": "3.1.3",
     "@toptal/picasso-dropdown": "4.2.4",
@@ -32,7 +33,6 @@
     "@toptal/picasso-utils": "3.1.0",
     "@toptal/picasso-link": "3.0.7",
     "ap-style-title-case": "^1.1.2",
-    "@mui/base": "5.0.0-beta.58",
     "classnames": "^2.5.1"
   },
   "sideEffects": [
diff --git a/packages/base/Button/src/Button/__snapshots__/test.tsx.snap b/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
index a9dece1850..fb0fa884e5 100644
--- a/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
@@ -7,8 +7,9 @@ exports[`Button disabled button as link renders disabled version 1`] = `
   >
     <a
       aria-disabled="true"
-      class="font-inherit focus:outline-none base-Button base- 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-none [[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"
+      class="font-inherit focus:outline-none 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-none [[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"
       data-component-type="button"
+      data-disabled=""
       href="URL"
       role="button"
       tabindex="-1"
@@ -31,8 +32,9 @@ exports[`Button disabled button renders disabled version 1`] = `
   >
     <button
       aria-disabled="true"
-      class="base-Button base- 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-none [[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"
+      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-none [[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"
       data-component-type="button"
+      data-disabled=""
       disabled=""
       role="button"
       tabindex="-1"
diff --git a/packages/base/Button/src/ButtonBase/ButtonBase.tsx b/packages/base/Button/src/ButtonBase/ButtonBase.tsx
index 1d437af78b..7ed9e42699 100644
--- a/packages/base/Button/src/ButtonBase/ButtonBase.tsx
+++ b/packages/base/Button/src/ButtonBase/ButtonBase.tsx
@@ -9,8 +9,7 @@ import type {
   TextLabelProps,
 } from '@toptal/picasso-shared'
 import { useTitleCase } from '@toptal/picasso-shared'
-import { Button as MUIButtonBase } from '@mui/base/Button'
-import type { ButtonRootSlotProps } from '@mui/base/Button'
+import { Button as BaseUIButton } from '@base-ui/react/button'
 import { Loader } from '@toptal/picasso-loader'
 import { Container } from '@toptal/picasso-container'
 import { noop, toTitleCase } from '@toptal/picasso-utils'
@@ -60,14 +59,15 @@ const getIcon = ({ icon }: { icon?: ReactElement }) => {
   })
 }
 
-const RootElement = forwardRef(
-  (props: ButtonRootSlotProps & { as: ElementType }, ref) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { ownerState, as: Root, ...rest } = props
+const isValidAs = (value: Props['as']) => {
+  const valueType = typeof value
 
-    return <Root {...rest} ref={ref} />
-  }
-)
+  return (
+    valueType === 'string' ||
+    valueType === 'function' ||
+    (valueType === 'object' && value !== null)
+  )
+}
 
 export const ButtonBase: OverridableComponent<Props> = forwardRef<
   HTMLButtonElement,
@@ -98,7 +98,7 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
 
   const titleCase = useTitleCase(propsTitleCase)
   const finalChildren = [titleCase ? toTitleCase(children) : children]
-  const finalRootElementName = typeof as === 'string' ? as : 'a'
+  const finalAs: ElementType = isValidAs(as) ? as : 'a'
 
   if (icon) {
     const iconComponent = getIcon({ icon })
@@ -110,27 +110,32 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
     }
   }
 
-  const finalClassName = twMerge(createCoreClassNames({ disabled }), className)
+  const finalClassName = twMerge(
+    'base-Button-root',
+    createCoreClassNames({ disabled }),
+    className
+  )
+  const isNativeButton = finalAs === 'button'
 
   return (
-    <MUIButtonBase
+    <BaseUIButton
       {...rest}
-      ref={ref}
-      onClick={getClickHandler(loading, onClick)}
+      ref={ref as React.Ref<HTMLElement>}
+      onClick={
+        getClickHandler(loading, onClick) as BaseUIButton.Props['onClick']
+      }
       className={finalClassName}
       style={style}
+      nativeButton={isNativeButton}
+      render={isNativeButton ? undefined : React.createElement(finalAs)}
       aria-disabled={disabled}
       disabled={disabled}
       title={title}
       value={value}
       type={type}
       data-component-type='button'
-      tabIndex={rest.tabIndex ?? disabled ? -1 : 0}
+      tabIndex={rest.tabIndex ?? (disabled ? -1 : 0)}
       role={rest.role ?? 'button'}
-      rootElementName={finalRootElementName as keyof HTMLElementTagNameMap}
-      slots={{ root: RootElement }}
-      // @ts-ignore
-      slotProps={{ root: { as } }}
     >
       <Container
         as='span'
@@ -151,7 +156,7 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
           size='small'
         />
       )}
-    </MUIButtonBase>
+    </BaseUIButton>
   )
 })
 
diff --git a/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
index fed0ad7108..efb049304f 100644
--- a/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
@@ -79,8 +79,9 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
   >
     <a
       aria-disabled="true"
-      class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
+      class="font-inherit focus:outline-none 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
       data-component-type="button"
+      data-disabled=""
       href="URL"
       role="button"
       tabindex="-1"
@@ -174,8 +175,9 @@ exports[`ButtonBase when "disabled" prop is true renders Button and does not tri
   >
     <button
       aria-disabled="true"
-      class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
+      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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
       data-component-type="button"
+      data-disabled=""
       disabled=""
       role="button"
       tabindex="-1"
diff --git a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
index 74fcf13681..df40df79da 100644
--- a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
+++ b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
@@ -215,8 +215,9 @@ exports[`Pagination renders disabled 1`] = `
     >
       <button
         aria-disabled="true"
-        class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
+        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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
         data-component-type="button"
+        data-disabled=""
         disabled=""
         role="button"
         tabindex="-1"
@@ -231,8 +232,9 @@ exports[`Pagination renders disabled 1`] = `
       <button
         aria-current="false"
         aria-disabled="true"
-        class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
+        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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
         data-component-type="button"
+        data-disabled=""
         disabled=""
         role="button"
         tabindex="-1"
@@ -256,8 +258,9 @@ exports[`Pagination renders disabled 1`] = `
       <button
         aria-current="false"
         aria-disabled="true"
-        class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
+        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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
         data-component-type="button"
+        data-disabled=""
         disabled=""
         role="button"
         tabindex="-1"
@@ -272,8 +275,9 @@ exports[`Pagination renders disabled 1`] = `
       <button
         aria-current="false"
         aria-disabled="true"
-        class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
+        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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
         data-component-type="button"
+        data-disabled=""
         disabled=""
         role="button"
         tabindex="-1"
@@ -288,8 +292,9 @@ exports[`Pagination renders disabled 1`] = `
       <button
         aria-current="true"
         aria-disabled="true"
-        class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white bg-graphite border-graphite disabled:text-gray text-gray [&+&]:!ml-2"
+        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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white bg-graphite border-graphite disabled:text-gray text-gray [&+&]:!ml-2"
         data-component-type="button"
+        data-disabled=""
         disabled=""
         role="button"
         tabindex="-1"
@@ -304,8 +309,9 @@ exports[`Pagination renders disabled 1`] = `
       <button
         aria-current="false"
         aria-disabled="true"
-        class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
+        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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
         data-component-type="button"
+        data-disabled=""
         disabled=""
         role="button"
         tabindex="-1"
@@ -320,8 +326,9 @@ exports[`Pagination renders disabled 1`] = `
       <button
         aria-current="false"
         aria-disabled="true"
-        class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
+        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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
         data-component-type="button"
+        data-disabled=""
         disabled=""
         role="button"
         tabindex="-1"
@@ -345,8 +352,9 @@ exports[`Pagination renders disabled 1`] = `
       <button
         aria-current="false"
         aria-disabled="true"
-        class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
+        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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
         data-component-type="button"
+        data-disabled=""
         disabled=""
         role="button"
         tabindex="-1"
@@ -360,8 +368,9 @@ exports[`Pagination renders disabled 1`] = `
       </button>
       <button
         aria-disabled="true"
-        class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
+        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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
         data-component-type="button"
+        data-disabled=""
         disabled=""
         role="button"
         tabindex="-1"
@@ -418,8 +427,9 @@ exports[`Pagination renders with next disabled 1`] = `
       </button>
       <button
         aria-disabled="true"
-        class="base-Button base- 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
+        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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
         data-component-type="button"
+        data-disabled=""
         disabled=""
         role="button"
         tabindex="-1"
diff --git a/packages/base/Switch/package.json b/packages/base/Switch/package.json
index dd0f472742..c1063d7ddb 100644
--- a/packages/base/Switch/package.json
+++ b/packages/base/Switch/package.json
@@ -22,9 +22,9 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
+    "@base-ui/react": "1.2.0",
     "@toptal/picasso-form-label": "1.0.3",
     "@toptal/picasso-shared": "15.0.0",
-    "@mui/base": "5.0.0-beta.58",
     "classnames": "^2.5.1"
   },
   "sideEffects": [
diff --git a/packages/base/Switch/src/Switch/Switch.tsx b/packages/base/Switch/src/Switch/Switch.tsx
index 5021d0e057..592c0ee4a9 100644
--- a/packages/base/Switch/src/Switch/Switch.tsx
+++ b/packages/base/Switch/src/Switch/Switch.tsx
@@ -1,4 +1,4 @@
-import { Switch as MUISwitch } from '@mui/base/Switch'
+import { Switch as BaseUISwitch } from '@base-ui/react/switch'
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
@@ -8,7 +8,10 @@ import cx from 'classnames'
 export interface Props
   extends BaseProps,
     TextLabelProps,
-    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'type'> {
+    Omit<
+      ButtonHTMLAttributes<HTMLButtonElement>,
+      'onChange' | 'type' | 'value'
+    > {
   /** Show Switch initially as checked */
   checked?: boolean
   /** Disable changing `Switch` state */
@@ -47,48 +50,50 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
   }
 
   const switchElement = (
-    <MUISwitch
-      {...rest}
-      color='primary'
-      ref={ref}
+    <BaseUISwitch.Root
+      {...(rest as unknown as BaseUISwitch.Root.Props)}
+      ref={ref as React.Ref<HTMLElement>}
       checked={checked}
-      className={className}
+      className={cx(
+        'w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer',
+        '[&[data-checked]_.picasso-switch-track]:bg-blue-500 [&[data-checked]_.picasso-switch-track]:border-blue-500',
+        '[&[data-disabled]_.picasso-switch-track]:opacity-40',
+        '[&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg-black',
+        '[&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]',
+        '[&:focus-visible_.picasso-switch-thumb]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]',
+        '[&[data-checked]_.picasso-switch-thumb]:translate-x-[16px]',
+        '[&[data-disabled]]:cursor-default',
+        className
+      )}
       style={style}
       disabled={disabled}
       id={id}
-      onChange={onChangeCallback}
-      data-testid={label ? undefined : dataTestId}
-      slotProps={{
-        root: {
-          className:
-            'w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group',
-        },
-        track: {
-          className: cx(
-            'w-full h-full border border-solid bg-gray-600 border-gray-600 opacity-100 rounded-[12px]',
-            'transition-colors duration-300 ease-out',
-            'group-[.base--checked]:bg-blue-500 group-[.base--checked]:border-blue-500',
-            'group-[.base--disabled]:opacity-40',
-            'group-[.base--disabled:not(.base--checked)]:bg-black'
-          ),
-        },
-        thumb: {
-          className: cx(
-            'w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px]',
-            'transition-transform duration-150 ease-out',
-            'group-[:not(.base--disabled):hover]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]',
-            'group-[.base--focusVisible]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]',
-            'group-[.base--checked]:translate-x-[16px]'
-          ),
-        },
-        input: {
-          className: cx(
-            'w-[100%] h-full m-0 p-0 opacity-0 absolute top-0 cursor-pointer z-20',
-            'group-[.base--disabled]:cursor-default'
-          ),
-        },
+      onCheckedChange={(checked, eventDetails) => {
+        const event = {
+          ...eventDetails.event,
+          target: { checked },
+          currentTarget: { checked },
+        } as unknown as React.ChangeEvent<HTMLInputElement>
+
+        onChangeCallback(event)
       }}
-    />
+      data-testid={label ? undefined : dataTestId}
+    >
+      <span
+        className={cx(
+          'picasso-switch-track',
+          'w-full h-full border border-solid bg-gray-600 border-gray-600 opacity-100 rounded-[12px]',
+          'transition-colors duration-300 ease-out'
+        )}
+      />
+      <BaseUISwitch.Thumb
+        className={cx(
+          'picasso-switch-thumb',
+          'w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px]',
+          'transition-transform duration-150 ease-out'
+        )}
+      />
+    </BaseUISwitch.Root>
   )
 
   if (!label) {
diff --git a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
index 0955b94ea6..c5ddd6188e 100644
--- a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
+++ b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
@@ -6,21 +6,28 @@ exports[`Switch behaves correctly when interacting 1`] = `
   data-testid="switch"
 >
   <span
-    class="base-Switch base- w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
-    color="primary"
+    aria-checked="true"
+    class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
+    data-checked=""
+    id="base-ui-:ra:"
+    role="switch"
+    tabindex="0"
   >
     <span
-      class="base-Switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-[.base--checked]:bg-blue group-[.base--checked]:border-blue group-[.base--disabled]:opacity group-[.base--disabled:not(.base--checked)]:bg"
+      class="picasso-switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out"
     />
     <span
-      class="base-Switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:not(.base--disabled):hover]:shadow group-[.base--focusVisible]:shadow group-[.base--checked]:translate-x"
-    />
-    <input
-      class="base-Switch w-[100%] h-full m-0 p-0 opacity-0 absolute top-0 cursor-pointer z-20 group-[.base--disabled]:cursor"
-      role="switch"
-      type="checkbox"
+      class="picasso-switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out"
+      data-checked=""
     />
   </span>
+  <input
+    aria-hidden="true"
+    id="base-ui-:rb:"
+    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"
+  />
   <span
     class="inline-block leading-[1em] mb-0 text-graphite ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
   >
@@ -39,22 +46,29 @@ exports[`Switch renders default Switch without label 1`] = `
     class="Picasso-root"
   >
     <span
-      class="base-Switch w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
-      color="primary"
+      aria-checked="false"
+      class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
       data-testid="switch"
+      data-unchecked=""
+      id="base-ui-:r0:"
+      role="switch"
+      tabindex="0"
     >
       <span
-        class="base-Switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-[.base--checked]:bg-blue group-[.base--checked]:border-blue group-[.base--disabled]:opacity group-[.base--disabled:not(.base--checked)]:bg"
+        class="picasso-switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out"
       />
       <span
-        class="base-Switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:not(.base--disabled):hover]:shadow group-[.base--focusVisible]:shadow group-[.base--checked]:translate-x"
-      />
-      <input
-        class="base-Switch w-[100%] h-full m-0 p-0 opacity-0 absolute top-0 cursor-pointer z-20 group-[.base--disabled]:cursor"
-        role="switch"
-        type="checkbox"
+        class="picasso-switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out"
+        data-unchecked=""
       />
     </span>
+    <input
+      aria-hidden="true"
+      id="base-ui-:r1:"
+      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"
+    />
   </div>
 </div>
 `;
@@ -65,22 +79,32 @@ exports[`Switch renders disabled state 1`] = `
   data-testid="switch"
 >
   <span
-    class="base-Switch base- w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
-    color="primary"
+    aria-checked="false"
+    aria-disabled="true"
+    class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
+    data-disabled=""
+    data-unchecked=""
+    id="base-ui-:r4:"
+    role="switch"
+    tabindex="-1"
   >
     <span
-      class="base-Switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-[.base--checked]:bg-blue group-[.base--checked]:border-blue group-[.base--disabled]:opacity group-[.base--disabled:not(.base--checked)]:bg"
+      class="picasso-switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out"
     />
     <span
-      class="base-Switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:not(.base--disabled):hover]:shadow group-[.base--focusVisible]:shadow group-[.base--checked]:translate-x"
-    />
-    <input
-      class="base-Switch w-[100%] h-full m-0 p-0 opacity-0 absolute top-0 cursor-pointer z-20 group-[.base--disabled]:cursor"
-      disabled=""
-      role="switch"
-      type="checkbox"
+      class="picasso-switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out"
+      data-disabled=""
+      data-unchecked=""
     />
   </span>
+  <input
+    aria-hidden="true"
+    disabled=""
+    id="base-ui-:r5:"
+    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"
+  />
   <span
     class="inline-block leading-[1em] mb-0 text-graphite pointer-events ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
   >
diff --git a/yarn.lock b/yarn.lock
index af2d9e3f2b..2761a990a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1287,10 +1287,10 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.24.1", "@babel/runtime@^7.25.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
-  version "7.28.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326"
-  integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.24.1", "@babel/runtime@^7.25.0", "@babel/runtime@^7.28.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+  version "7.28.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b"
+  integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==
 
 "@babel/standalone@^7.23.1", "@babel/standalone@^7.4.5":
   version "7.23.1"
@@ -1327,6 +1327,28 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.27.1"
 
+"@base-ui/react@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@base-ui/react/-/react-1.2.0.tgz#5cc6e813eb964e9d91917f6c54577c8de1bebe16"
+  integrity sha512-O6aEQHcm+QyGTFY28xuwRD3SEJGZOBDpyjN2WvpfWYFVhg+3zfXPysAILqtM0C1kWC82MccOE/v1j+GHXE4qIw==
+  dependencies:
+    "@babel/runtime" "^7.28.6"
+    "@base-ui/utils" "0.2.5"
+    "@floating-ui/react-dom" "^2.1.6"
+    "@floating-ui/utils" "^0.2.10"
+    tabbable "^6.4.0"
+    use-sync-external-store "^1.6.0"
+
+"@base-ui/utils@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@base-ui/utils/-/utils-0.2.5.tgz#09ac6e73b7ff4a934c20b7541e654900b74d178a"
+  integrity sha512-oYC7w0gp76RI5MxprlGLV0wze0SErZaRl3AAkeP3OnNB/UBMb6RqNf6ZSIlxOc9Qp68Ab3C2VOcJQyRs7Xc7Vw==
+  dependencies:
+    "@babel/runtime" "^7.28.6"
+    "@floating-ui/utils" "^0.2.10"
+    reselect "^5.1.1"
+    use-sync-external-store "^1.6.0"
+
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -2034,32 +2056,32 @@
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.0.0.tgz#f22824caff3ae506b18207bad4126dbc6ccdb6b8"
   integrity sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ==
 
-"@floating-ui/core@^1.6.0":
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
-  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+"@floating-ui/core@^1.6.0", "@floating-ui/core@^1.7.5":
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.5.tgz#d4af157a03330af5a60e69da7a4692507ada0622"
+  integrity sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==
   dependencies:
-    "@floating-ui/utils" "^0.2.8"
+    "@floating-ui/utils" "^0.2.11"
 
-"@floating-ui/dom@^1.0.0":
-  version "1.6.11"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.11.tgz#8631857838d34ee5712339eb7cbdfb8ad34da723"
-  integrity sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==
+"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.7.6":
+  version "1.7.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.6.tgz#f915bba5abbb177e1f227cacee1b4d0634b187bf"
+  integrity sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==
   dependencies:
-    "@floating-ui/core" "^1.6.0"
-    "@floating-ui/utils" "^0.2.8"
+    "@floating-ui/core" "^1.7.5"
+    "@floating-ui/utils" "^0.2.11"
 
-"@floating-ui/react-dom@^2.1.1":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
-  integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==
+"@floating-ui/react-dom@^2.1.1", "@floating-ui/react-dom@^2.1.6":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.8.tgz#5fb5a20d10aafb9505f38c24f38d00c8e1598893"
+  integrity sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==
   dependencies:
-    "@floating-ui/dom" "^1.0.0"
+    "@floating-ui/dom" "^1.7.6"
 
-"@floating-ui/utils@^0.2.8":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
-  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+"@floating-ui/utils@^0.2.10", "@floating-ui/utils@^0.2.11", "@floating-ui/utils@^0.2.8":
+  version "0.2.11"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.11.tgz#a269e055e40e2f45873bae9d1a2fdccbd314ea3f"
+  integrity sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==
 
 "@gar/promisify@^1.0.1":
   version "1.1.3"
@@ -21841,6 +21863,11 @@ reselect@^4.1.7:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
   integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
 
+reselect@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.1.tgz#c766b1eb5d558291e5e550298adb0becc24bb72e"
+  integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==
+
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
@@ -23578,6 +23605,11 @@ syncpack@^13.0.2:
     tightrope "0.2.0"
     ts-toolbelt "9.6.0"
 
+tabbable@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.4.0.tgz#36eb7a06d80b3924a22095daf45740dea3bf5581"
+  integrity sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==
+
 table@^6.8.1:
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
@@ -24842,6 +24874,11 @@ use-sidecar@^1.0.5:
     detect-node-es "^1.1.0"
     tslib "^1.9.3"
 
+use-sync-external-store@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
+  integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"

From ef7906e2cd9593c59ec5cc355440fb909685bb26 Mon Sep 17 00:00:00 2001
From: OleksandrNechai <oleksandr.nechai@toptal.com>
Date: Wed, 4 Mar 2026 20:46:11 +0100
Subject: [PATCH 2/4] Yarn lock

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 2761a990a0..a6dbd586fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2056,14 +2056,14 @@
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.0.0.tgz#f22824caff3ae506b18207bad4126dbc6ccdb6b8"
   integrity sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ==
 
-"@floating-ui/core@^1.6.0", "@floating-ui/core@^1.7.5":
+"@floating-ui/core@^1.7.5":
   version "1.7.5"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.5.tgz#d4af157a03330af5a60e69da7a4692507ada0622"
   integrity sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==
   dependencies:
     "@floating-ui/utils" "^0.2.11"
 
-"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.7.6":
+"@floating-ui/dom@^1.7.6":
   version "1.7.6"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.6.tgz#f915bba5abbb177e1f227cacee1b4d0634b187bf"
   integrity sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==
@@ -2078,7 +2078,7 @@
   dependencies:
     "@floating-ui/dom" "^1.7.6"
 
-"@floating-ui/utils@^0.2.10", "@floating-ui/utils@^0.2.11", "@floating-ui/utils@^0.2.8":
+"@floating-ui/utils@^0.2.10", "@floating-ui/utils@^0.2.11":
   version "0.2.11"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.11.tgz#a269e055e40e2f45873bae9d1a2fdccbd314ea3f"
   integrity sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==

From a11d547810e58d2a96a8d0e5e0487913a2b0616f Mon Sep 17 00:00:00 2001
From: OleksandrNechai <oleksandr.nechai@toptal.com>
Date: Wed, 4 Mar 2026 21:16:58 +0100
Subject: [PATCH 3/4] Fix switch native button reset for Happo parity

---
 packages/base/Switch/src/Switch/Switch.tsx                  | 2 +-
 packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/base/Switch/src/Switch/Switch.tsx b/packages/base/Switch/src/Switch/Switch.tsx
index 592c0ee4a9..809689ebe7 100644
--- a/packages/base/Switch/src/Switch/Switch.tsx
+++ b/packages/base/Switch/src/Switch/Switch.tsx
@@ -55,7 +55,7 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
       ref={ref as React.Ref<HTMLElement>}
       checked={checked}
       className={cx(
-        'w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer',
+        'w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer',
         '[&[data-checked]_.picasso-switch-track]:bg-blue-500 [&[data-checked]_.picasso-switch-track]:border-blue-500',
         '[&[data-disabled]_.picasso-switch-track]:opacity-40',
         '[&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg-black',
diff --git a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
index c5ddd6188e..47e7b87760 100644
--- a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
+++ b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Switch behaves correctly when interacting 1`] = `
 >
   <span
     aria-checked="true"
-    class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
+    class="w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
     data-checked=""
     id="base-ui-:ra:"
     role="switch"
@@ -47,7 +47,7 @@ exports[`Switch renders default Switch without label 1`] = `
   >
     <span
       aria-checked="false"
-      class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
+      class="w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
       data-testid="switch"
       data-unchecked=""
       id="base-ui-:r0:"
@@ -81,7 +81,7 @@ exports[`Switch renders disabled state 1`] = `
   <span
     aria-checked="false"
     aria-disabled="true"
-    class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
+    class="w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
     data-disabled=""
     data-unchecked=""
     id="base-ui-:r4:"

From 2a31a58380029cec90d735a8e72c703d3a47600f Mon Sep 17 00:00:00 2001
From: OleksandrNechai <oleksandr.nechai@toptal.com>
Date: Wed, 4 Mar 2026 21:39:00 +0100
Subject: [PATCH 4/4] Fix Base UI Switch hidden input visual overflow

---
 packages/base/Switch/src/Switch/Switch.tsx                  | 2 +-
 packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/base/Switch/src/Switch/Switch.tsx b/packages/base/Switch/src/Switch/Switch.tsx
index 809689ebe7..7c5abf65f3 100644
--- a/packages/base/Switch/src/Switch/Switch.tsx
+++ b/packages/base/Switch/src/Switch/Switch.tsx
@@ -55,7 +55,7 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
       ref={ref as React.Ref<HTMLElement>}
       checked={checked}
       className={cx(
-        'w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer',
+        'w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&+input]:!absolute [&+input]:!w-0 [&+input]:!h-0 [&+input]:!m-0 [&+input]:!p-0 [&+input]:!border-0',
         '[&[data-checked]_.picasso-switch-track]:bg-blue-500 [&[data-checked]_.picasso-switch-track]:border-blue-500',
         '[&[data-disabled]_.picasso-switch-track]:opacity-40',
         '[&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg-black',
diff --git a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
index 47e7b87760..8ec04ff738 100644
--- a/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
+++ b/packages/base/Switch/src/Switch/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Switch behaves correctly when interacting 1`] = `
 >
   <span
     aria-checked="true"
-    class="w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
+    class="w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&+input]:!absolute [&+input]:!w-0 [&+input]:!h-0 [&+input]:!m-0 [&+input]:!p-0 [&+input]:!border-0 [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
     data-checked=""
     id="base-ui-:ra:"
     role="switch"
@@ -47,7 +47,7 @@ exports[`Switch renders default Switch without label 1`] = `
   >
     <span
       aria-checked="false"
-      class="w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
+      class="w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&+input]:!absolute [&+input]:!w-0 [&+input]:!h-0 [&+input]:!m-0 [&+input]:!p-0 [&+input]:!border-0 [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
       data-testid="switch"
       data-unchecked=""
       id="base-ui-:r0:"
@@ -81,7 +81,7 @@ exports[`Switch renders disabled state 1`] = `
   <span
     aria-checked="false"
     aria-disabled="true"
-    class="w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
+    class="w-[40px] h-[24px] p-0 m-0 border-none appearance-none bg-transparent relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer [&+input]:!absolute [&+input]:!w-0 [&+input]:!h-0 [&+input]:!m-0 [&+input]:!p-0 [&+input]:!border-0 [&[data-checked]_.picasso-switch-track]:bg-blue [&[data-checked]_.picasso-switch-track]:border-blue [&[data-disabled]_.picasso-switch-track]:opacity [&[data-disabled]:not([data-checked])_.picasso-switch-track]:bg [&:not([data-disabled]):hover_.picasso-switch-thumb]:shadow [&:focus-visible_.picasso-switch-thumb]:shadow [&[data-checked]_.picasso-switch-thumb]:translate-x [&[data-disabled]]:cursor-default"
     data-disabled=""
     data-unchecked=""
     id="base-ui-:r4:"